Сканируют ли пользователи страницы по определенному шаблону?

Есть ли какие-то стандартные паттерны и шаблоны, которыми в большинстве своем руководствуются пользователи?

Самый распространенный метод сканирования страницы 

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

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

Якоб Нильсен: “Пользователи просматривают контент на веб-сайтах по F-образному шаблону”, 2006 год

Спустя 11 лет исследователи решили проверить, актуальны ли данные предыдущих исследований о том, что пользователи сканируют страницы по F-паттерну.

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

Kara Pernice: “F-образный шаблон чтения в интернете до сих пор остаётся актуальным”, 2017 год

Результат айтрекинг-исследования, в котором отслеживалось движение взгляда пользователей при чтении рекламного контента, показал, что Z-паттерн может трансформироваться в форму треугольника. 

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

Doaa Farouk: “Визуальная иерархия и движение разума в рекламном дизайне”, 2014 год

NNGroup в своем отчете “Как люди читают в Интернете” проанализировали результаты серии исследований по отслеживанию движения глаз за 13 лет. Оказалось, что даже не смотря на столь глобальные изменения в дизайне, поведение пользователей при сканировании остается неизменным. Это объясняется тем, что технологии меняются быстро, а люди — нет. 

NNGroup: “Как люди читают онлайн?”, 2020 год

Пользователи просматривают контент на сайтах по F и Z-образному паттерну. Со временем, не смотря на достаточно сильные изменения в дизайне, поведение пользователей при исследовании веб-страниц остается практически неизменным. Добавляются только новые паттерны сканирования.

Как размещение контента влияет на метод просмотра пользователем веб-страницы?

Айтрекинг-исследование “Анализ отслеживания взгляда предпочтительных областей чтения на экране” направлено на изучение того, как проектирование страницы и размещение контента с объёмным текстом влияет на пользователей.‍ 

В исследовании приняло участие 20 человек, 5 из которых должны были совершить покупку на сайте, а остальные 15 — читать документы с большим количеством текста.

Оказалось, что при просмотре длинных документов пользователи сканируют страницу в виде Т-образной формы, повернутой на 90° влево. Т-образная форма сканирования очень напоминает самый распространенный шаблон чтения — F-паттерн. Более того, левая часть страницы являлась приоритетной как для чтения, так и для прокрутки. После нее взгляд концентрировался на середине экрана.

G. Buscher: “Анализ отслеживания взгляда предпочтительных областей чтения на экране”, 2010 год

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

Soussan Djamasbi: “Отслеживание взгляда и веб-опыт”, 2014 год

Исследование Терезы Фессенден направлено на проверку гипотезы: влияет ли проектирование страницы и размещение контента на то, как пользователи воспринимают информацию? 

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

Результаты показали, что участники тратили 80% времени на изучение информации в левой части страницы, и только 20% — в правой. При этом чаще всего взгляд пользователей перемещался на правую половину страницы для использования полосы прокрутки. Таким образом, левая часть страницы должна быть информативнее, а на правой стороне может содержаться вторичный контент.

Тереза Фессенден: “Горизонтальное внимание пользователей сконцентрировано в левой части страницы веб-сайта”, 2017 год

‍Исследователи немецкого центра искусственного интеллекта (GRCAI) использовали айтрекинг-технологию, чтобы отследить движение взгляда при просмотре веб-страниц на мобильных устройствах.

В результате оказалось, что 86% внимания уделяется верхней части экрана.

Исследователи GRCAI: «Чтение и оценивание взгляда на смартфонах», 2012 год

Б. Хиллиард и Д.Армарего в своем исследовании “Оптимизация визуального макета для обучения” решили проверить гипотезу: влияет ли расположение информации в электронных средствах обучения на восприятие контента?”. 

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

В результате, смещение важного визуального материала наверх и влево увеличило удовлетворенность пользователей в 2 раза.

Dr. Bruce Hilliard and Dr. Jocelyn Armarego: «Оптимизация визуального макета для обучения», 2016

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

Резюме

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

Шаблоны и их элементы, которые используются чаще всего:

• F-паттерн организует информативный и большой контент. Левая часть страницы больше всего приковывает внимание
• Z-паттерн выделяет призыв к действию за счет большого пространства. Сайты в минималистичном стиле сканируются этим шаблоном
  

Также стоит отметить, что пользователи используют эти паттерны, когда нет четких и явных акцентов. Если же у вас есть легко считываемая система, то пользователи легко подстраиваются под неё.