В эпоху информационного шума внимание и терпение ограничены и визуальная иерархия становится секретным оружием. Она раскладывает элементы страницы в порядке важности, направляя внимание пользователя и облегчая потребление контента. Визуальная иерархия помогает достичь бизнес-целей и обеспечить гладкий и привлекательный пользовательский опыт — бесшовное взаимодействие с сайтом или приложением. В статье рассматриваем, как привести посетителя сайта к верному решению как на десктопах, так и на мобильных устройствах.
UX-дизайн (User Experience Design, дизайн взаимодействия с пользователем) — процесс создания полезных, простых и приятных в использовании продуктов (цифровых или физических). UX-дизайн отвечает за функциональность, адаптивность продукта и его эмоциональное восприятие пользователями, создание ценности продукта через улучшение взаимодействия с ним. Важность элементов и контента страницы определяют исходя из бизнес-целей, интересов и потребностей целевых пользователей. Чем важнее составляющая, тем более заметной она должна быть.
Понимание процессов принятия решений становится основополагающим при создании продуктов и услуг. Аспекты и переменные, воспринимаемые разработчиками как несущественные, часто в большей степени влияют на восприятие и поведение пользователей. Даниэль Канеман — автор книги «Думай медленно, решай быстро» — описывает две системы мышления, в рамках которых мозг принимает решения. Система 1 охватывает интуицию, иррациональный выбор, непосредственное мышление. Отвечает за быстрое принятие решений и реагирует на визуальную информацию. Системой 2 взывает к логике и рациональности. Она активизируется при сложной умственной деятельности, требующей концентрации: понимание смысла в тексте или вычисления в уме. Система 1 активна в течение 98% времени, Система 2 работает в режиме «пониженного потребления энергии». В подавляющем большинстве случаев «автопилот» ориентирует наш выбор. Задача UX-дизайнера состоит в том, чтобы подтолкнуть Систему 1 к правильному решению.
Время на формирование интереса пользователя к содержимому сайта ограничено. Чтение текста — трудоемкий процесс, требующий включения Системы 2. Большинство посетителей не захотят напрягаться и работа достанется Системе 1. Для завоевания ее внимания необходимо выделить наиболее важные элементы и разместить их в наиболее предсказуемых местах. Система 1 требует высокой скорости нахождения центра внимания. Когда он будет найден, для более подробного изучения содержимого страницы подключится Система 2.
Пользователи воспринимают информацию визуально и придают важность элементам и контенту, основываясь на ваших указаниях. Если посетитель не видит CTA четко среди остальных элементов на странице, он вряд ли совершит целевое действие.
Паттерны сканирования: что и где подсознательно ожидает увидеть пользователь
Сканирование сайта в поисках нужной информации пользователь начинает с левого верхнего угла (при чтении слева направо) и перемещается вправо в поисках дополнительных данных. Затем переводит взгляд в нижнюю левую часть и «перескакивает» в правый нижний угол. Подобный паттерн носит название «Диаграмма Гутенберга» и встречается на страницах лендинга и регистрации. Также в UX выделяют еще несколько паттернов:
Паттерны сканирования на десктопах
На западе читают страницы слева направо в соответствии с 2 иерархическими паттернами: F и Z. Z-паттерн используется в дизайне без большого количества текста с преобладанием графических составляющих. Взгляд следует сверху слева направо, затем по диагонали вниз к нижнему левому краю, останавливаясь в нижнем правом углу. F-паттерн применяют на сайтах с большим объемом текста и низким содержанием графики. Начинаем с верхнего левого угла страницы и смещаемся вправо, прежде чем опуститься вниз и повторить процесс.
Сайты с большим количеством текста используют F-структуру для удобства чтения контента.
Z-паттерн включается в случае отсутствия для взгляда опоры на странице в виде нескольких больших заголовков и текста. Пользователи в поиске центра внимания сканируют полосы широкими диагоналями. Шаблон используют при формировании макета новостных сайтов, страниц регистрации и других страницах, где простота и призыв к действию являются наиболее важными принципами.
На скриншоте цель пункта 3 состоит в направлении пользователей к окончательному призыву к действию в точке 4.
На одном сайте можно использовать как Z, так и F паттерны. Например, представить домашнюю страницу как шаблон Z, и прибегнуть к F-паттерну при углублении в сайт на страницах с большим количеством данных.
Другие паттерны сканирования:
Паттерны сканирования на мобильных устройствах
Экран смартфонов отображает меньше контента, чем экран ноутбука или монитор компьютера, что влияет на характер сканирования содержимого страницы на мобильных устройствах. Контент располагается 2 способами: сеткой (Grid View) и списком (List View).
Сетка позволяет размещать больше единиц контента, при этом привлечь пользователя получится только контрастными изображениями. Внимание равномерно распределяется по изображениям и сканирование происходит S-образно (в случае отсутствия выделяющихся картинок).
Список — блоки контента, расположенные друг за другом вертикально, при этом единичный блок занимает всю ширину экрана. Сканирование списка сходно с F-паттерном: концентрация внимания и присвоение блоку степени важности происходит на их заголовках, изображения присутствуют в виде миниатюр предварительного просмотра.
Визуальные инструменты иерархии
Для создания четкой визуальной иерархии используют размер, цвет, контраст и разделители. Они подчеркивают важность элементов интерфейса и содержимого страницы. Релевантная для пользователей информация легко всплывает на поверхность.
Контраст
Чем выше контрастность элемента, тем более важным его посчитает пользователь. Например, если заменить енотов на кнопки, то люди будут выбирать темную (самую насыщенную) CTA, так как она на странице заметнее.
Глубина
Бинокулярное зрение позволяет поочередно концентрироваться на объектах, которые находятся на разных расстояниях. Однако то, что происходит вблизи, для нас важнее. Такой принцип используется для всплывающих окон (pop-ups).
Для воспроизведения эффекта глубины на плоском экране используют тени и размытие. Для начала достаточно придать важным элементам больший размер по сравнению с другими менее важными.
Цвет
Цвет несет дополнительную информационную нагрузку. Выбор цвета и его сочетаний помогают пользователям различать основные элементы. Цвета имеют собственную иерархию, которая определяется силой воздействия на сознание пользователей. Яркие цвета (красный и оранжевый) привлекают внимание больше, чем более светлые оттенки (белый и кремовый), которые кажутся размытыми и далекими. В нижней части иерархии находятся оттенки серого или приглушенные цвета.
Яркие цвета используют в качестве средства выделения или настройки контраста.
Используйте цвета, чтобы подтолкнуть пользователей к желательным действиям и оттолкнуть от нежелательных. Еноты представлены в цветах светофора, которые имеют разный подтекст. Например, енот красного цвета, кажется, хочет предостеречь о чем-то, а зеленый выглядит доброжелательно.
Зеленый цвет кнопок призыва к действию (CTA) внушает безопасность. Красный цвет как «плохая» цена привлекает внимание к лучшей цене (зеленого цвета).
Применяя один цвет к нескольким элементам, вы показываете взаимосвязь между ними.
Выделение цветом и рамкой создает впечатление, что средний тариф главный на странице главный и является лучшим выбором.
Размер
Необходимо различать уровень значимости каждого элемента контента и на основе этих данных преобразовывать компоненты в большие и малые. Чем больше, тем заметнее, но не всегда лучше. Убедитесь, что элемент действительно важен, релевантен и дополняет визуальное сообщение.
Шрифт
Типографская иерархия облегчает сканирование контента, позволяя легко находить ключевые фрагменты без необходимости полного чтения текста. Работа сводится к выбору правильного сочетания шрифтов и размеров шрифта, чтобы выделить ключевую информацию среди остальной на странице.
При создании иерархии с помощью типографики используют 3 уровня организации:
Количество шрифтов рекомендуется держать так же в пределах трех.
Три уровня действуют для десктопных устройств, однако для мобильных только два уровня. Элементы вторичного уровня (подзаголовки) отходят в сторону, чтобы сделать интерфейс на мобильных устройствах «чистым».
Разборчивые символы с правильным контрастом, размером и стилем в сочетании с простым текстом облегчают пользователю выполнение задачи. Написание текста трудным для чтения шрифтом вызовет у пользователей затруднение. Разборчивые шрифты делают утверждение более достоверным в глазах читателя.
Белое пространство
Отрицательное или белое пространство — визуальный разделитель, пустая область между элементами в композиции дизайна. Элемент, окруженный белым пространством, привлекает внимание и помогает пользователям сосредоточиться. Однако при заполнении пространства страницы необходимо сохранять баланс. Слишком много пробелов между элементами делают страницу пустой или незаконченной. Слишком мало — придают беспорядочный и неорганизованный вид. Для нахождения оптимального варианта проводят специальные тестирования с целевыми пользователями.
Необходимо признать перечисленные ниже законы, поскольку они влияют на эффективность проектов.
Закон близости
Элементы, расположенные в определенной близости, автоматически воспринимаются пользователями как группа. Компоненты пользовательского интерфейса должны располагаться таким образом, чтобы пользователи могли их классифицировать. Используйте близость, чтобы разделить контент на подкатегории.
Закон подобия
Схожие элементы в дизайне воспринимаются пользователем как равнозначные (группа), даже если элементы разделены. Убедитесь, что ссылки и навигация визуально отличаются от обычных текстовых (не кликабельных) элементов и представлены в едином стиле.
Закон симметрии
Симметричные элементы воспринимаются как взаимосвязанные и создают ощущение целостности и порядка.
Закон визуальной связности
Визуально связанные элементы воспринимаются как принадлежащие к единому целому. Группируйте функции схожего назначения через одинаковые цвета, линии, рамки или другие формы.
Закон Фиттса
Время, требуемое для попадания в цель, прямо пропорционально расстоянию до цели и обратно пропорционально её размеру. Другими словами, делайте выделяемые элементы (например, кнопки CTA) большими и располагайте их ближе к пользователям.
Эффект изоляции
При наличии нескольких похожих объектов запомнится тот, который отличается от остальных. Выделяйте важную информацию или ключевые действия.
Цветовая гамма занимает особенную роль в создании визуальной иерархии. Правильное сочетание цветов может направить внимание пользователя на важные элементы и облегчить восприятие информации. Например, использование теплых цветов, таких как красный и оранжевый, может привлечь внимание к кнопкам призыва к действию, тогда как холодные оттенки, такие как синий и зеленый, создают ощущение спокойствия и надёжности.
Исследования показывают, что цветовое оформление сайта может влиять на настроение и поведение пользователей. Так, красный цвет ассоциируется с энергией и страстью, что делает его идеальным для кнопок «Купить» или «Записаться». Синий цвет вызывает доверие и спокойствие, что часто используется в дизайне банковских и медицинских сайтов.
Система 1 предпочитает обобщать и мы не обращаем внимания на все повторяющиеся элементы как отдельные, а воспринимаем их как группу.
На картинке мы видим группу из 4 енотов и 1 особь напротив, а не воспринимаем всех 5 по отдельности. Воображение дорисовывает картину противостояния.
Группа енотов внутри мигрирующей группы енотов:
Исходя из характера расположения можно логически обосновать много связей между элементами внутри группы из 6 енотов:
Такие предположения возникают благодаря выравниванию. Чем сложнее информация, требующая упорядочивания, тем важнее роль группировок.
Не рекомендуется использовать все приемы сразу. Группировке подлежат только «считываемые» вместе элементы. Не перегружайте страницу и выделяйте только самое необходимое — то, что действительно важно. Не забывайте про мобильную адаптацию.
Без тестирования дизайн интерфейса основывается на предположениях разработчика. Даже опыт не сравнится с отзывами целевой аудитории. Используйте тепловые карты, чтобы видеть, как ваши пользователи взаимодействуют с контентом на страницах, и корректировать свой дизайн.
Канал Андрея ГусароваПодпишись на регулярный текст от босса и маркетолога. Здесь никогда не будет скучной информации.
Присоединиться
Вы долистали до подвала, вы терпеливый товарищ,
давайте мы ответим на ваши вопросы по телефону
