Как управлять взглядом пользователя на сайте: фишки веб-дизайна

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

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

Келли Гордон из американской консалтинговой фирмы Nielsen Norman Group рассказала, как создать визуальную иерархию на сайте, а мы перевели и адаптировали ее материал.

Работаем с цветом и контрастом

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

Дизайнеры часто используют контраст шрифтов для выделения важного текста.

Разберем несколько примеров. На сайте музея современного искусства в Нью-Йорке используется цвет для выделения ссылок: голубые ссылки в правом верхнем углу выделяются на фоне черных под логотипом.

На сайте TheNounProject.com, где дизайнеры публикуют созданные ими символы, сначала внимание привлекает поле поиска из-за большого размера и белого цвета, контрастирующего с черным фоном. Затем взгляд направляется на примеры значков под полем поиска.

А на сайте онлайн-кинотеатра ivi кнопки с целевыми действиями «Смотреть 14 дней за один рубль» и «Показать подборку» выделены более ярким цветом по сравнению с общим дизайном страницы.

Четыре правила использования цвета и контраста:

1. Насыщенные цвета нужны для выделения важных элементов, более блеклые — для второстепенных объектов, а теплые яркие цвета — например, красный, — для предупреждений или ошибок.

2. Ограничьтесь использованием двух основных и двух второстепенных цветов. Сложные цветовые схемы рассеивают внимание пользователя и рушат визуальную иерархию.

3. Используйте не более трех вариантов контраста для сложного дизайна. Можно использовать разные методы обработки заголовка, подзаголовка и основного текста.

4. Не полагайтесь только на цвет при создании визуальной иерархии. Люди с дальтонизмом могут не замечать различия между определенными цветами.

Добавляем масштаб

Масштаб — один из главных элементов создания визуальной иерархии в дизайне сайтов. Более крупные элементы выделяются и привлекают больше внимания, поэтому размер можно использовать в качестве маркера значимости. Рассмотрим несколько примеров.

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

На сайте американской туристической компании Hipcamp визуальная иерархия элементов выстроена с помощью размера и контраста шрифтов. В первую очередь внимание привлекает крупный жирный текст Find yourself outside («Окажись снаружи»), а более мелкий текст дает общее представление о возможностях пользователя на сайте: Discover and book tent camping, RV parks, cabins, treehouses, and glamping («Откройте для себя и забронируйте палаточный кемпинг, парки для автофургонов, домики, домики на деревьях и глэмпинг»).

По схожему принципу выстроена визуальная иерархия на сайте фотостока Pexels. Наиболее заметный элемент — крупный заголовок, написанный полужирным белым шрифтом на темном фоне. Он объясняет, что это за сайт и для чего он нужен пользователю. Далее внимание привлекает крупная поисковая строка белого цвета, внутри которой написан призыв к действию: «Ищите бесплатные фото и видео».

Что взять на заметку:

1. Используйте максимум три размера — маленький, средний и большой. Подумайте о размере шрифта для заголовка, подзаголовка и основного текста — они должны сохранять четкие иерархические отношения. В дизайне сайтов размеры основного текста могут варьироваться от 14 до 16 пикселей, для подзаголовка — от 18 до 22 пикселей, для заголовка — до 32 пикселей.

2. Сделайте важный элемент самым крупным и уменьшите размер второстепенных. Ограничьте количество крупных элементов максимум до двух, чтобы они выделялись и укрепляли иерархию.

Объединяем элементы в группы

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

Объединение элементов в группы отражается в близости объектов, использовании пустого пространства или включение в общую область.

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

Аналогично сгруппированы объекты на сайте музея современного искусства «Эрарта». Например, в общую область включаются афиши мероприятий: элементы одинакового размера располагаются на одном уровне и между собой разделяются небольшим количеством пустого пространства. Заголовок блока находится в непосредственной близости от этих объектов и дополнительно выделяется как главный элемент с помощью масштаба, цвета и контраста. От других элементов сайта афиши отделяются большой вставкой пустого пространства.

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

Что важно помнить:

1. Оставляйте пространство для воздуха. Элемент, вокруг которого больше свободного места, будет привлекать внимание.

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

Прищурьтесь, чтобы увидеть главное

В школах дизайна учат трюку (The Squint Test): прищуриваться или немного размывать дизайн сайта с помощью специальных программ (например, расширение для Chrome), чтобы определить, какие элементы дизайна выделяются и достигнута ли на сайте задуманная визуальная иерархия.

В примере Spotify размытие дизайна с радиусом пять и 10 пикселей показывает, что группы работают так, как задумано: «Недавно воспроизведенные» выделяется больше всего. Размытие в 20 пикселей показывает, что на странице есть визуальная иерархия, которую мы создали непреднамеренно: один из недавно воспроизведенных элементов наиболее заметный из-за своего яркого цвета.

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

Прежде чем создать оформление сайта

1. Определите, какие элементы на сайте пользователь должен заметить в первую очередь.

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

3. После проектирования дизайна сайта сделайте шаг назад и посмотрите, читается ли дизайн страницы так, как вы предполагали.

4. Запустите небольшое тестирование для целевых пользователей.

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

Источник статьи