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

F-паттерн

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

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

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

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

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

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

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

Z-паттерн

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

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

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

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

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