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

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

Распределите компоненты по приоритетности. Первые два параграфа самые важные, в них стоит добавить главную идею и ценность странички. Самую верхнюю строчку пользователи обычно полностью прочитывают по-горизонтали, так что туда можно добавить меню.
Как спроектировать страничку под F-паттерн:
- Каждый параграф лучше начинать с ключевых слов, которые привлекут внимание
- Выделяйте ключевые слова и кнопки цветом или типографикой
- Один параграф — одна идея
- Важный контент, такой как призыв к действию, располагайте в слева или справа. Когда пользователь начинает или заканчивает сканирование, его взгляд на секунду останавливается, значит он уделит важной информации чуть больше внимания
- Чтобы пользователь по ходу чтения не заскучал, добавьте элемент, который нарушит последовательность чтения, например, блок со слайдшоу
Z-паттерн
Этот паттерн работает для страниц, где мало текста, и строится на основе того, как мы привыкли читать.
Принцип работы: посетитель по-горизонтали сканирует верх страницы. Взгляд движется слева направо. Потом взгляд переходит вниз и влево, что напоминает движение глаз при чтении. Затем это движение повторяется.

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