Можем ли мы предположить куда пойдет пользователь?
Есть ли какие-то стандартные паттерны и шаблоны, которыми в большинстве своем руководствуются пользователи?
Самый распространенный метод сканирования страницы
Якоб Нильсен провел исследование, в котором, с помощью айтрекинг-технологий, изучил движение взгляда 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% — в правой. При этом чаще всего взгляд пользователей перемещался на правую половину страницы для использования полосы прокрутки. Таким образом, левая часть страницы должна быть информативнее, а на правой стороне может содержаться вторичный контент.
Исследователи немецкого центра искусственного интеллекта (GRCAI) использовали айтрекинг-технологию, чтобы отследить движение взгляда при просмотре веб-страниц на мобильных устройствах.
В результате оказалось, что 86% внимания уделяется верхней части экрана.
Исследователи GRCAI: «Чтение и оценивание взгляда на смартфонах», 2012 год
Б. Хиллиард и Д.Армарего в своем исследовании “Оптимизация визуального макета для обучения” решили проверить гипотезу: влияет ли расположение информации в электронных средствах обучения на восприятие контента?”.
Для проведения эксперимента были разработаны 2 презентации с одинаковым содержанием, но разным расположением информации. В одной из презентаций информация была расположена привычным образом (последовательно), а в другой — вся важная информация располагалась в верхней левой части страницы.
В результате, смещение важного визуального материала наверх и влево увеличило удовлетворенность пользователей в 2 раза.
Dr. Bruce Hilliard and Dr. Jocelyn Armarego: «Оптимизация визуального макета для обучения», 2016
Основное внимание пользователей концентрируется на верхней левой части экрана, причем это распространяется и на мобильные версии сайта. Расположение важной информации в верхней левой области страницы способно улучшить восприятие пользователями контента.
Резюме
Различное расположение элементов на сайте может как привлечь, так и замедлить сканирование страницы пользователем. Чтобы этого избежать, необходимо придерживаться привычных шаблонов сканирования страницы. Это позволит пользователю быстро и без труда найти нужную ему информацию.
Шаблоны и их элементы, которые используются чаще всего:
- F-паттерн организует информативный и большой контент. Левая часть страницы больше всего приковывает внимание
- Z-паттерн выделяет призыв к действию за счет большого пространства. Сайты в минималистичном стиле сканируются этим шаблоном
Также стоит отметить, что пользователи используют эти паттерны, когда нет четких и явных акцентов. Если же у вас есть легко считываемая система, то пользователи легко подстраиваются под неё.
.svg)
.webp)
