Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory

Значение визуального контекста в веб-дизайне

by
Read Time:5 minsLanguages:

Russian (Pусский) translation by Ivan Gryaziev (you can also view the original English article)

Согласно результатам исследования проведенного Университетом науки и технологии Миссури посетителям сайта требуется менее двух десятых долей секунды чтобы сформировать свое мнение о вашем сайте. Анализировать им помогает визуальный контекст, который формирует определенное представление о вашем сайте и подсказывает пользователям остаться или уйти. Визуальное оформление имеет большое влияние на пользователей, так как оно дает возможность эффективно передать информацию о контенте сайта.

Учитывая выше сказанное, отсутствие визуального контекста усложняет понимание контента, и того что авторы хотели донести пользователям. В веб-дизайне это работает очень хорошо. На Веб-сайте необходимо сформировать визуальный контекст, который бы отображал миссию и историю Организации, которой он принадлежит.

Что такое визуальный контекст?

Визуальный контекст относится к способу подачи контента, который улучшает передачу информации сайта. 

К примеру веб-сайт архитектора который включает портфолио успешных проектов. Пользователь сам для себя решает, просматривать ему эту секцию или нет. Однако визуальный контекст с самого начала (использованные изображения, цвета, построение пространства) будет убеждать пользователя узнать больше об архитектуре, проектирование  и строительстве. 

Еще один хороший пример это сайт аэрокосмической компании. Четкие изображения самолетов и летательной техники с первого взгляда показывает нам нишу занимаемую этой компанией. Пользователю даже не нужно читать текст.

httpwwwmercaerospacecoukhttpwwwmercaerospacecoukhttpwwwmercaerospacecouk
www.mercaerospace.co.uk

Представьте, как могла выглядеть этаже посадочная станица если убрать изображение самолета? Несомненно менее конкретной и более запутанной. Компания "Merc Aerospace" предлагает широкий спектр инженерных решений для различных отраслей, но специализируется главным образом на аэрокосмической промышленности, все это отображено в визуальном оформоние сайта.

Как создается визуальный контекст?

Создание визуального контекста основывается на понимание вашей аудитории пользователей. Взгляды пользователей зависят от возраста, пола и этнической принадлежности. Например использование изображений с белым фоном может вызывать ощущение счастья у одной группы, и ощущение грусти у другой. Таким образом, чтобы правильно включить визуальное оформление в бизнес-контекст, вам нужно понять ваших пользователей, кто они, тут нам на помощь приходят "Профили пользователей".

Ниже перечисленны некоторые полезные элементы для создания визуального контекста:

  • Изображения, связанные с характером бизнеса
  • Инфографика обобщающая текст в визуальные формы
  • Стрелки, линии и завитки для выделения чисел или указания направления
  • Подбор слов и фраз обогашающих визуальный контекст
  • Рассказ историй через творчески подобранную графику
  • Привлекательные иконки для упрощения навигации

Насколько важен визуальный контекст?

Давайте разсмотрим некоторые плюсы визуального контекста:

Первое впечатление важно

Как упоминалось ранее, пользователям достаточно малой части секунды чтобы сформировать мнение о вашем сайте. Более полное представление у пользователя появляется через пару секунд после этого. Брендинг, изображения и иконки должны сформировать хорошее первое впечатление в короткий промежуток времени. Для мотивации пользователей остаться на дольше, мы должны убедиться что визуальный контекст снабжает пользователей информацией о целях и задачах сайта.

Это помогает передавать информацию

Визуальное оформление веб-сайта формирует более «чувственное» восприятие, по сравнению с текстовой частью. Пользователь скорее заметит дополнительные изображения, которые подкрепляют общий контекст, нежели фразы в пунктах. Как бы небыли хороши ваши тексты, в формирование отклика у пользователя сильное значение имеют визуальные эффекты, помогая в окончательной передаче информации.

Лучшее понимание аудитории

Визуальный контекст оживляет вашу историю. Это позволяет пользователю (который впервые на сайте) погрузиться в ваш бизнес. Он или она будут получать основные бизнес-идеи из контекста, а затем искать варианты, продуктов и услуг.

Если ваша цель, инновационный пользовательский интерфейс, который меняет шаблоны, визуальный контекст поможет преодолеть разрыв между пользователями и вашим продуктом.

Важность эмоциональных связей

Визуальный контекст полезен в управление эмоциями целевой аудитории. Возьмем пример "Lend With Care", организации специализирующейся на микро-кредитах. Обратите внимание на количество человеческих лиц на главной странице, это мгновенно снабжает нас контекстом и позволяет наладить связь с пользователем. Теплые, мягкие цвета придают сайту  привлекательности, улыбки передают позитив и ощущение сообщества.

httpswwwlendwithcareorghttpswwwlendwithcareorghttpswwwlendwithcareorg
www.lendwithcare.org

В считанные секунды у посетителей формируется эмоциональная связь с веб-сайтом.

И это можно отнести к разработке продуктов. Это ваша работа, как дизайнера, создавать визуальные эффекты, которые затрагивают внутренние чувства целевой аудитории.

Заключение

Визуальный контекст помогает пользователям, особенно тем которые пришли впервые на ваш сайт, интерпретировать его особенности и ценности. Как дизайнер, вы можете пользоваться тем, что мы уже обсуждали –  ключевой комбинацией изображений, цветами, визуальными данными, инфографикой, видео, анимацией, иконками, направляющими, и другими визуальными инструментами которые есть в вашем вашем распоряжении – для формирования этой ценной связи.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.