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

No items found.
Аудио перевод статьи
0:00
0:00
·

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

Есть мнение, что пользователи читают все. Поэтому, размещение текста перевешивает его структуру. Нужно разобраться в вопросах: читают ли пользователи текст на веб-сайтах и какую роль для них играет структура?

Большинство пользователей просто сканируют текст

Шаблон чтения в форме буквы F был открыт командой NN/g с помощью анализа тепловой карты. Глаза пользователя при исследовании страницы двигаются таким образом: горизонтальное движение по верхней части экрана (верхняя планка буквы) – вниз по левой стороне страницы – короткое горизонтальное движение поперек (нижняя планка буквы).
Якоб Нильсен: «F-образный шаблон для чтения веб-контента», 2006

Обновленное исследование Eyetracking от команды NN/g подтвердило, что F-образный шаблон актуален спустя 11 лет, в том числе и для мобильных телефонов. F-паттерн является шаблоном по умолчанию, когда сильные сигналы для привлечения глаз отсутствуют.
Kara Pernice: «F-образный рисунок чтения в интернете», 2017

В исследовании Eyetracking от 2017 года рассматривалось то, как проектирование страницы и размещение контента влияет на пользователей. Было выявлено, что 80% времени пользователи тратят на просмотр информации в левой части страницы. Левая часть должна быть информативнее, тогда как на правой стороне может содержаться вторичный контент.
Тереза Фессенден: «Горизонтальное внимание направляется влево», 2017

При просмотре длинных документов распределение взгляда выглядит как Т-образная форма, повернутая на 90° влево. Такая форма близка к F-паттерну. Левая часть страницы является приоритетной как для чтения, так и для прокрутки. После нее взгляд концентрируется на середину экрана.
G. Buscher, R. Biedert, D. Heinesch, and A. Dengel: «Отслеживание глаз. Анализ предпочитаемых зон чтения на экране», 2010

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

Z-паттерн с главной верхней линией подчеркивает призыв к действию

При анализе шаблонов чтения, Б. Хиллиард и Д.Армарего отмечают, что в Z-образном макете верхняя и левая часть экрана концентрирует большее число фиксаций. Смещение важного визуального материала наверх и влево увеличило удовлетворенность пользователей в 2 раза. Этот макет подходит для использования смешанных текстовых и графических блоков.
Dr. Bruce Hilliard and Dr. Jocelyn Armarego: «Оптимизация визуального макета для обучения», 2016

В исследовании «Отслеживание глаз и веб-опыт» было обнаружено, что пользователи молодого поколения (18-31) проявляли мало интереса к просмотру элементов, которые размещены ниже линии сгиба. Верхняя часть страницы содержала в себе большую концентрацию цветовых пятен. По времени эта часть была просмотрена дольше всех. Самый акцентный элемент – логотип в верхнем левом углу. Он получил самую интенсивную фиксацию на странице.
Soussan Djamasbi: «Отслеживание глаз и веб-опыт», 2014

Z-паттерн может трансформироваться в форму треугольника, где первое горизонтальное и диагональное движения закроют форму. Эта область сразу бросается в глаза, о чем говорят фиксации внутри полученного треугольника. Важная информация должна размещаться внутри него.
Doaa Farouk: «Визуальная иерархия и движение в рекламном дизайне», 2014

Исследование немецкого центра искусственного интеллекта (GRCAI) использовали технологию eye-gaze для анализа просмотра страниц на мобильных устройствах. Результат: 86% внимания уделяется верхней части экрана.
Исследователи GRCAI: «Чтение и оценивание взгляда на смартфонах», 2012

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

Резюме

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

Расположение веб-элементов может привлечь или замедлить сканирование. Оно влияет на первое восприятие пользователей. Шаблоны облегчают сканирование. От них зависит то, насколько быстро пользователь найдет нужную ему информацию. Ключевое слово здесь – быстро. Скорость сканирования страницы должна соответствовать скорости пользователя.
Шаблоны и их элементы, которые используются чаще всего:

  1. F-паттерн организует информативный и большой контент. Левая часть страницы больше всего приковывает внимание
  2. Z-паттерн выделяет призыв к действию за счет большого пространства. Сайты в минималистичном стиле сканируются этим шаблоном
Источник:
·
comments powered by HyperComments