F и Z паттерны в дизайне. Куда смотрит зритель?

e9908682c60b822111a82e89adf35cc5.png

Привет, первооткрыватель, меня зовут Артем и являюсь главным дизайнером в Onde team. Сегодня мы рассмотрим, что такое Z и F паттерны в дизайне, как они работают, и как они влияют на восприятие вашего сайта.

Куда мы смотрим в первую очередь?

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

  • На чём изначально сфокусируется взгляд зрителя?

  • Что будет влиять на то, как будет двигаться взгляд, и на чём он будет сосредоточен в следующий момент?

  • Можем ли мы спроектировать наши страницы таким образом, чтобы контролировать направление взгляда и направлять его к нашей цели?

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

Паттерны движения глаз становятся важным фактором. Они помогают определить, как пользователи сканируют информацию и каким образом их внимание перемещается по странице. Например, рассмотрим Z-паттерн: пользователь начинает смотреть на верхнем левом углу, затем двигается диагонально вниз и вправо, а затем горизонтально вправо. Этот паттерн может быть использован для расположения ключевых элементов, чтобы привлечь внимание пользователя в нужных местах и направить его к CTA (вызову к действию) или другой цели.

f58f4c3dabe953cf501abbf795c77457.png

При чтении слева направо, пользователи обычно начинают поиск нужной информации с левого верхнего угла и затем перемещают свой взгляд вправо в поисках дополнительных данных. После этого, они переносят свой взгляд в нижнюю левую часть и перескакивают в правый нижний угол. Этот паттерн движения глаз часто называют Диаграммой Гутенберга.

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

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

c07aed2c455808eb540d3ca3f31724c6.png

Страницы с меньшим количеством информации или «организованные более свободно», часто вызывают движение глаз, напоминающее букву Z. Этот паттерн, известный как Z-паттерн, имеет много общих характеристик с F-паттерном. Однако, когда простота является приоритетом и основной целью является призыв к действию, Z-паттерн становится предпочтительным.

Акцент на простоте делает Z-паттерн уникальным для дизайна целевой страницы, где вы хотите сосредоточить внимание на одной основной цели, чтобы привлечь людей и побудить их к действию. Чтобы воспользоваться преимуществами Z-паттерна, вы можете разместить свой вызов к действию вдоль контура буквы Z, чтобы убедиться, что ваш зритель его заметит. Это может увеличить количество конверсий.

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

38cfcaf45b8ccbd0f961f73ea614cdb8.png

В 2006 году Якоб Нильсен провел исследование, изучая, как пользователи просматривают страницы веб-сайтов. Он использовал метод записи движений глаз (eye-tracking research) и выделил наиболее привлекательные зоны на странице, которые имели форму буквы F. Этот паттерн был назван F-паттерном и описывал типичное поведение пользователей при чтении текстов или контента, размещенного на монотонной сетке.

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

Важно отметить, что F-паттерн не описывает взаимодействие пользователей с элементами меню и верхней панелью страницы. Он сконцентрирован на чтении текстового контента и предполагает, что страница имеет простую монотонную сетку.

Также я хотел бы, чтобы вы немного узнали для себе новые (наверное?) факты, которые могут помочь вам в построении Z и F паттернов

8231f006938fb1859f65210ee940bea7.png

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

872801e4d3a2c8ca79878c5e9974bae5.png

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

Закон законченности говорит о том, что наш мозг стремится видеть объекты и формы как законченные и цельные даже в случае, когда некоторые их части отсутствуют или скрыты. Мы заполняем пробелы в незаконченных формах, чтобы создать впечатление полноты и единства. Этот принцип может быть использован в дизайне для создания визуальных эффектов или акцентирования внимания на определенных элементах. Например, можно использовать незаконченные формы или контуры, которые наталкивают восприятие на дополнение их «недостающих» частей, что вызывает интерес и визуальное вовлечение.

def0744e5bc29a6cec158ca6c7f7a8c9.png

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

Выводы

З-образный (Z-pattern) и F-образный (F-pattern) паттерны отражают способ сканирования глазами пользователей во время просмотра веб-страницы. Оба паттерна основаны на понимании того, как пользователи сканируют информацию и где они обычно ожидают найти ключевые элементы на странице.

Z-образный паттерн

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

  • Затем они переходят вниз по странице по диагонали, сканируя второй горизонтальный блок информации.

  • Наконец, пользователи сканируют последний вертикальный блок информации с левого края страницы до правого.

  • Этот паттерн подходит для страниц с ограниченным количеством информации или ключевыми элементами, которые нужно выделить.

F-образный паттерн

  • Пользователи сканируют страницу, начиная с верхнего левого угла, двигаясь вправо по горизонтальной линии.

  • Затем они прокручивают страницу вниз и сканируют вертикальную линию слева направо.

  • Пользователи обычно сканируют только верхние части блоков информации и пропускают нижние части.

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

Оба паттерна полезны для размещения важной информации на странице таким образом, чтобы она легко воспринималась пользователями. Однако каждый паттерн имеет свои особенности и эффективность, которые могут зависеть от контента и целей дизайна.

© Habrahabr.ru