Как визуальный дизайн может повлиять на UX

Когда Consolidated Labels занимались редизайном своего веб-сайта, их целью было увеличение конверсий. Но им нравился его текущий внешний вид, и они не видели необходимости в кардинальных изменениях. В итоге, изменилось только одно: добавили на домашнюю страницу СТА в виде ярко-зеленой кнопки.

Согласно тематическому исследованию проекта, после проведения теста Consolidated Labels были шокированы, увидев увеличение конверсии на 62%. Всего лишь из-за добавления единственной СТА кнопки. Трэйси Гэмлин, менеджер по маркетингу в Consolidated Labels, усвоила этот урок:

«Ваша цель должна быть очевидной и гармонировать с остальным дизайном».

Если мы посмотрим на это тематическое исследование, то увидим четкий пример влияния визуального дизайна. Consolidated Labels хорошо справились с некоторыми вещами. Цвет СТА выделяется среди прочих элементов страницы; текст, находящийся в кнопке, написан удобочитаемым шрифтом; СТА кнопка достаточно велика, что делает ее заметной пользователям.

 

Визуальные элементы важны

Люди — визуальные создания, а сеть — это визуальная среда. Следовательно, визуальные элементы будут оказывать влияние на UX веб-сайта. Поскольку визуальные подсказки говорят человеку как нужно взаимодействовать с сайтом, эти элементы являются неотъемлемой частью UI дизайна.

В этой статье мы поговорим о том, как пять визуальных элементов, которые люди видят на сотнях веб сайтов, могут существенно повлиять на пользовательский опыт. Вот эти элементы:

1. Типография
2. Логотипы
3. СТА кнопки
4. Белое пространство
5. Изображения

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

Например, если говорить о типографии, то согласно The Next Web, определенные шрифты могут иметь положительное или отрицательное влияние, в зависимости от таких факторов, как размер, правильная длина строки (50-75 символов) и межстрочный интервал. Схожим образом, согласно инфографике HubSpot наш мозг сначала определяет цвет логотипа и его форму, а затем группирует эти объекты для правильной идентификации.

Затем, наш мозг сравнивает этот визуальный шаблон с такими же шаблонами, увиденными в прошлом. И наконец, такие семантические атрибуты, как предпочтения и приписывание, придают логотипу значение. Помня об этом, мы можем создавать логотипы, и использовать их для чего-то намного большего, чем простая идентификация организации. Чтобы повлиять на пользовательский опыт, мы можем использовать СТА, белое пространство и изображения.

 

Типография

Текст формирует значительную часть контента на любом сайте. Следовательно, его внешний вид — это значительная сила в мире UX дизайна. Возьмите, например, это недавнее исследование (англ. pdf), проведенное Университетом Карнеги Меллон и Университетом Помпеу Фабра в Испании. В нем проводился эксперимент, исследующий удобочитаемость и понимание текста при онлайн чтении. Его выводом стало утверждение: чем больше — тем лучше.

Участники исследования проводили этот эксперимент на Википедии, одном из самых популярных и загруженных текстом сайтов в сети. Оказалось, что удобочитаемость и понимание текста увеличиваются с размером шрифта. Всем сайтам рекомендуется использовать кегль 18pt. Авторы исследования пишут: «Лучшая удобочитаемость была достигнута с размером 18pt», однако, увеличение размера до 22pt не привело к каким-либо значительным улучшениям.

 

Логотипы

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

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

В исследовании, проведенном Nielsen Norman Group, участников попросили выполнить задачи по навигации, после просмотра различных веб сайтов с логотипами, выровненными по левой стороне, и по центру. Результаты подтвердили, что выровненные по левой стороне логотипы значительно улучшают UX.

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

 

СТА кнопки

Как правило, СТА кнопки отражают пользовательские цели: они предлагают пользователю сделать клик, с целью перехода на следующий шаг пользовательского путешествия. Размещение этих кнопок — важная часть создания позитивного пользовательского опыта. Чем проще пользователю найти и понять СТА, тем более интуитивным им покажется опыт.

Согласно теории восприятия, наш мозг обрабатывает СТА кнопки, основываясь на прошлых ожиданиях. Мы рассчитываем увидеть их на лендинговых страницах; мы всегда видели их на лендинговых страницах.

Согласно лучшим практикам HubSpot, чтобы пользователь понимал, что ему нужно выполнить действие, СТА должны начинаться с нацеленного на действие глагола. Далее, следуйте лучшим практикам Unbounce: используйте больше одной СТА кнопки на длинных торговых страницах, используйте направляющие подсказки, если СТА находится «под складкой», вовлекайте пользователей рассказывая историю, которая приведет их к кнопке, и выделите ее, используя контраст.

 

Белое пространство

Белое пространство окружает нас повсюду в сети: это негативное пространство вокруг любого элемента. Оно помогает пользователю сфокусировать внимание на важном контенте, будь то СТА или видео, поскольку подсознание на него реагирует. Всё, что окружено белым пространством, будет склонно выделяться, среди прочих элементов на странице. Как результат, увеличение белого пространства на странице, также улучшает понимание прочитанного.

Согласно исследованию, проведенному Университетом Штата Уичита, участники лучше понимали контент веб страницы, когда в тексте оставались зазоры (читайте: белое пространство), чем когда их не было. Авторы исследования заключили:

«Использование белого пространства в онлайн чтении важно, поскольку количество людей, использующих онлайн учебники и материалы устойчиво продолжает расти».

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

 

Изображения

Нельзя говорить о визуальном дизайне, не затронув самое очевидное: изображения. Согласно Daily Mail, наш мозг обрабатывает изображения за 13 миллисекунд. Такая скорость обработки помогает нам быстро осознавать информацию, что в свою очередь, помогает в продвижении по сайту. Например, если мы смотрим на страницу продукта, посвященную обуви, мы видим изображение, мгновенно понимаем, что это такое, определяем нравится ли нам товар, и принимаем решение о поиске информации по его цене, как следующий шаг на пути к покупке либо дальнейшему просмотру.

Вероятно, именно поэтому, исследования показывают, что изображения увеличивают уровень конверсий. Conversion XL, ссылается на множество исследований, где применение изображений имело положительное влияние на уровень конверсий:

• Онлайн магазин для матерей Due Maternity увеличил конверсии на 27%, когда начал использовать 3D изображения.
• Магазин охранных технологий Brick House Security добавил изображения в результаты поиска, что увеличило уровень конверсии на 100% среди частых посетителей сайта
• Сайт Medalia Art увеличил конверсии на 95% после того, как они добавили на домашнюю страницу фото своих художников

Тем не менее, нужно подчеркнуть, что каждый пример уникален. Другими словами, то, что сработало, в случае с Due Maternity, не обязательно подойдет Brick House Security, и наоборот. Поэтому, тестирование так важно для любого проекта.

Согласно jeffbullas, все изображения связывает то, что они просто лучше работают. Они ведут к 94% увеличению просмотра статей, увеличивают вероятность того, что человек, ищущий информацию, свяжется с компанией, предоставляющей нужные ему товары или услуги, если результаты поиска будут содержать изображение на 60%, а также, они увеличивают просмотры пресс-релизов на 45%.

 

Заключение

Даже небольшие изменения в визуальном дизайне могут привести к значительно лучшему UX. Те решения, которые дизайнеры принимают по визуальному дизайну влияют на конверсии и уровень вовлеченности пользователей. Улучшение визуальных подсказок и общей привлекательности веб-сайта станет не только хорошим дизайнерским решением, но и позитивно скажется на бизнесе.

Перевод статьи Марка Шенкера