Иерархия

Z-паттерн в дизайне интерфейсов: как пользователи просматривают контент

Пользователи не читают веб-страницы — они сканируют. Сканируют — значит читают только те кусочки, которые цепляют взгляд.
Иллюстрация Ewelina Gąska: https://dribbble.com/shots/11433279-Generation-z

Вы читаете перевод статьи Николая Бабича “Z-Shaped Pattern For Reading Web Content”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.

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

Пользователи не читают веб-страницы — они сканируют.

Сканируют — значит читают только те кусочки, которые цепляют взгляд.

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

Что такое Z-паттерн, как он работает и почему

Как вы могли догадаться, Z-паттерн — это лейаут в форме буквы “Z”. Когда мы сканируем страницу, наш взгляд естественным образом движется слева направо, сверху вниз — и Z-паттерн повторяет эту траекторию:

Таким образом, получается траектория движения взгляда в форме буквы “Z”:

Image for post
Пример Z-лейаута. Источник картинки: Tutplus

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

Где использовать Z-паттерн

Люди чаще всего сканируют по Z-паттерну те страницы, на которых текст не является ключевым элементом. (Когда текст играет главную роль — как, например, в статьях или в поисковой выдаче — лучше использовать F-паттерн). Таким образом, Z-паттерн хорошо подходит для простых дизайнов, где минимум текста и несколько элементов, на которые нужно обратить внимание.

Например, Z-паттерн можно применить при создании минималистичного лендинга, построенного вокруг одного-двух ключевых элементов.

Image for post
Z-лейаут предстает во всей красе в минималистичных дизайнах с акцентом на одно простое действие. Пример Z-лейаута — посадочная страница Фейсбука.

Как использовать Z-паттерн

Прежде чем приступать к проектированию Z-лейаута, ответьте на вопросы:

Рецепт создания Z-лейаута достаточно прост: постройте на странице букву “Z”. В идеале, люди должны сначала увидеть самую важную информацию, а потом — чуть менее важную. Поэтому ключевые элементы нужно разместить на траектории сканирования и в нужном порядке.

Очень важно создать поток.

Суть потока в том, чтобы управлять взглядом пользователя, задавать траекторию его движения. Мы создаем поток за счет визуального веса и направления взгляда. Вот несколько практических приемов, о которых следует помнить при создании потока:

Image for post
Вариант Z-лейаута.

Ниже приведены два классных примера Z-лейаутов: страницы Бейскэмпа и Эверноута.

Image for post
Image for post

Паттерн-зигзаг

Интересная и полезная особенность Z-паттерна в том, что его можно продлить: представьте себе серию коротких Z-паттернов вместо одного большого.

Ниже мы видим, как этим пользуется Дропбокс. Они используют несколько коротких Z-паттернов, чтобы рассказать пользователям о функциях системы, а последний Z-паттерн ведет на кнопку “Подписаться бесплатно”. В этом лейауте кнопки “Подробнее” играют роль второстепенных призывов к действию — при необходимости пользователь может уйти через них на нужную страницу.

Image for post

Заключение

У Z-лейаута есть ряд неоспоримых преимуществ — поэтому его и используют на куче сайтов. Вы тоже можете применить Z-лейаут для своих целей: расположите важную информацию на естественной траектории движения взгляда — и пользователи скорее обратят на нее внимание. Только помните: информация должна быть расставлена по приоритетности.

Читайте статью про F-паттерн!

Иерархия