F и Z паттерны в дизайне. Куда смотрит зритель?
Привет, первооткрыватель, меня зовут Артем и являюсь главным дизайнером в Onde team. Сегодня мы рассмотрим, что такое Z и F паттерны в дизайне, как они работают, и как они влияют на восприятие вашего сайта.
Куда мы смотрим в первую очередь?
При создании дизайна, будь то целевая страница или любой другой элемент, важно управлять потоком внимания пользователя. Мы можем задать себе три важных вопроса:
На чём изначально сфокусируется взгляд зрителя?
Что будет влиять на то, как будет двигаться взгляд, и на чём он будет сосредоточен в следующий момент?
Можем ли мы спроектировать наши страницы таким образом, чтобы контролировать направление взгляда и направлять его к нашей цели?
Для ответов на эти вопросы существует несколько инструментов и теорий. Одним из таких инструментов является отслеживание взгляда, которое помогает понять, как пользователи смотрят на страницы — будь то печатные материалы или интернет-страницы. Это особенно важно при проектировании целевых страниц, чтобы понять, как пользователи будут воспринимать их.
Паттерны движения глаз становятся важным фактором. Они помогают определить, как пользователи сканируют информацию и каким образом их внимание перемещается по странице. Например, рассмотрим Z-паттерн: пользователь начинает смотреть на верхнем левом углу, затем двигается диагонально вниз и вправо, а затем горизонтально вправо. Этот паттерн может быть использован для расположения ключевых элементов, чтобы привлечь внимание пользователя в нужных местах и направить его к CTA (вызову к действию) или другой цели.
При чтении слева направо, пользователи обычно начинают поиск нужной информации с левого верхнего угла и затем перемещают свой взгляд вправо в поисках дополнительных данных. После этого, они переносят свой взгляд в нижнюю левую часть и перескакивают в правый нижний угол. Этот паттерн движения глаз часто называют Диаграммой Гутенберга.
Использование Диаграммы Гутенберга в дизайне страницы позволяет разместить ключевую информацию и элементы интерфейса в основной области в верхней части страницы, таким образом привлекая внимание и предоставляя основную информацию. Дополнительная информация или детали могут быть размещены в нижней части страницы, чтобы пользователи могли получить более подробную информацию или выполнить дополнительные действия, если это необходимо.
Важно отметить, что Диаграмма Гутенберга не является строгим правилом и может быть адаптирована под конкретные потребности проекта и аудитории. Понимание этого паттерна помогает дизайнерам эффективно разместить информацию и элементы интерфейса, чтобы обеспечить удобство использования и улучшить пользовательский опыт.
Страницы с меньшим количеством информации или «организованные более свободно», часто вызывают движение глаз, напоминающее букву Z. Этот паттерн, известный как Z-паттерн, имеет много общих характеристик с F-паттерном. Однако, когда простота является приоритетом и основной целью является призыв к действию, Z-паттерн становится предпочтительным.
Акцент на простоте делает Z-паттерн уникальным для дизайна целевой страницы, где вы хотите сосредоточить внимание на одной основной цели, чтобы привлечь людей и побудить их к действию. Чтобы воспользоваться преимуществами Z-паттерна, вы можете разместить свой вызов к действию вдоль контура буквы Z, чтобы убедиться, что ваш зритель его заметит. Это может увеличить количество конверсий.
Использование Z-паттерна позволяет создать естественный путь для движения глаз пользователя, начиная с верхнего левого угла, затем двигаясь диагонально вниз и вправо, и заканчивая в правом нижнем углу страницы. Важные элементы дизайна и призывы к действию могут быть размещены вдоль этого пути, чтобы привлечь внимание и мотивировать пользователей.
В 2006 году Якоб Нильсен провел исследование, изучая, как пользователи просматривают страницы веб-сайтов. Он использовал метод записи движений глаз (eye-tracking research) и выделил наиболее привлекательные зоны на странице, которые имели форму буквы F. Этот паттерн был назван F-паттерном и описывал типичное поведение пользователей при чтении текстов или контента, размещенного на монотонной сетке.
Однако, с течением времени и изменением технологий и привычек пользователей, исследование Нильсена потеряло свою актуальность. Оно не учитывает поведение мобильных пользователей, которые стали более распространенными, и не учитывает современные формы представления контента на веб-страницах.
Важно отметить, что F-паттерн не описывает взаимодействие пользователей с элементами меню и верхней панелью страницы. Он сконцентрирован на чтении текстового контента и предполагает, что страница имеет простую монотонную сетку.
Также я хотел бы, чтобы вы немного узнали для себе новые (наверное?) факты, которые могут помочь вам в построении Z и F паттернов
Когда элементы в дизайне имеют схожий внешний вид, пользователь воспринимает их как связанные или равнозначные. Это создает группу элементов, даже если они физически разделены на странице. Чтобы предотвратить путаницу и обеспечить понятность для пользователей, важно сделать визуальное отличие между ссылками и навигацией и обычными текстовыми элементами, которые не являются кликабельными. Кроме того, стиль и оформление ссылок и навигационных элементов должны быть единообразными на всей странице или сайте.
Когда мы видим незаконченную форму, такую как квадрат без одной стороны, наше восприятие склонно дополнять ее, добавляя в уме «недостающий» элемент. Это явление называется законом недосказанности в психологии восприятия.
Закон законченности говорит о том, что наш мозг стремится видеть объекты и формы как законченные и цельные даже в случае, когда некоторые их части отсутствуют или скрыты. Мы заполняем пробелы в незаконченных формах, чтобы создать впечатление полноты и единства. Этот принцип может быть использован в дизайне для создания визуальных эффектов или акцентирования внимания на определенных элементах. Например, можно использовать незаконченные формы или контуры, которые наталкивают восприятие на дополнение их «недостающих» частей, что вызывает интерес и визуальное вовлечение.
Более сложные объекты обычно привлекают больше внимания. В то же время, если простые формы легко воспринимаемы и понятны, то визуально доминантные объекты требуют большего внимания, чтобы определить их значение.
Выводы
З-образный (Z-pattern) и F-образный (F-pattern) паттерны отражают способ сканирования глазами пользователей во время просмотра веб-страницы. Оба паттерна основаны на понимании того, как пользователи сканируют информацию и где они обычно ожидают найти ключевые элементы на странице.
Z-образный паттерн
Пользователи сканируют страницу в форме буквы Z, начиная с верхнего левого угла и двигаясь вправо.
Затем они переходят вниз по странице по диагонали, сканируя второй горизонтальный блок информации.
Наконец, пользователи сканируют последний вертикальный блок информации с левого края страницы до правого.
Этот паттерн подходит для страниц с ограниченным количеством информации или ключевыми элементами, которые нужно выделить.
F-образный паттерн
Пользователи сканируют страницу, начиная с верхнего левого угла, двигаясь вправо по горизонтальной линии.
Затем они прокручивают страницу вниз и сканируют вертикальную линию слева направо.
Пользователи обычно сканируют только верхние части блоков информации и пропускают нижние части.
Этот паттерн часто применяется на страницах с длинным содержимым, таким как новостные статьи или блоги, где пользователи сканируют заголовки, подзаголовки и выделенные ключевые фразы.
Оба паттерна полезны для размещения важной информации на странице таким образом, чтобы она легко воспринималась пользователями. Однако каждый паттерн имеет свои особенности и эффективность, которые могут зависеть от контента и целей дизайна.
