1 заметка с тегом

сайт

Как построить иерархию на сайте с помощью визуальных паттернов

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

F-паттерн

Большинство пользователей изучают большой массив текста по F-паттерну.

Принцип работы: сначала посетитель по вертикали сканирует левую часть странички и ищет в первых строках или заголовках интересную информацию. Когда он находит что-то привлекательное, то начинает дальше читать текст. Такое движение глаз напоминает букву F или E.

Этот паттерн применим к блогам, новостным сайтам или страницам Википедии.

Как использовать?

Распределите компоненты по приоритетности. Первые два параграфа самые важные, в них стоит добавить главную идею и ценность странички. Самую верхнюю строчку пользователи обычно полностью прочитывают по-горизонтали, так что туда можно добавить меню.

Как спроектировать страничку под F-паттерн:

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

Z-паттерн

Этот паттерн работает для страниц, где мало текста, и строится на основе того, как мы привыкли читать.

Принцип работы: посетитель по-горизонтали сканирует верх страницы. Взгляд движется слева направо. Потом взгляд переходит вниз и влево, что напоминает движение глаз при чтении. Затем это движение повторяется.

Z-паттерн поможет при создании простой страницы, цель которой — call-to-action. Он позволяет упорядочить всю информацию и построить иерархию.

Несколько практических советов для Z-паттерна:

  • Визуально отделите фон, чтобы взгляд посетителя шел четко по паттерну
  • Логотип лучше разместить в левом верхнем углу — там его сразу же заметят
  • В середине страницы добавьте слайдер, чтобы отделить верхний сегмент Z-паттерна от нижнего
  • Добавьте иконки в левой части страницы, чтобы правильно направлять взгляд читателей к call-to-action
  • В точке call-to-action визуальный паттерн должен заканчиваться
 137   2019   дизайн   сайт