Айтрекинг и паттерны в UX-дизайне

UX/UI-дизайн 22 июля 2024 г.

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

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

Исследования с использованием технологии айтрекинга выявили ряд закономерностей в том, как люди считывают информацию.
На данный момент можно выделить 5 основных моделей поведения пользователя:

1. F-паттерн

F-паттерн-один из самых распространенных шаблонов чтения информации в интернете.  

Image:Google

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

Image:Google

Используя F-паттерн стоит помнить  о следующих особенностях:  

  1. Первые несколько строк предложения(особенно в верхней части "буквы F") будут  привлекать наибольшее внимание. Если пользователь сочтёт первые несколько слов скучными, он навряд ли станет читать текст дальше.

2.  Большая часть предложения в F-паттерне пропускается. Поэтому "цепляющие" слова располагаются с левой и правой стороны, там где взгляд пользователя замедляется.

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

2. Z-паттерн

Ещё один распространённый способ считывания информации на сайте — использование  Z-паттерна. Такая модель часто встречается,когда пользователи сканируют контент в соответствии с логической иерархией на макете.

Image:Google

Пользователь начинает сканирование с левого верхнего угла и читает контент по горизонтали, а затем  перемещается по диагонали влево, после чего переходит ко второму горизонтальному уровню. Так, взгляд пользователя "рисует" букву Z.

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

Image:Google

Используя Z-паттерн стоит помнить  о следующих особенностях:  

1. Такой шаблон  подходит для страниц с небольшим количеством информации и ключевыми элементами, которые  можно выделить с помощью расстановки опорных точек.

2. Контент на странице, где используется Z-паттерн  должен быть сбалансирован, ни одна из частей не должна переманивать на себя больше внимания.

3. При использовании Z-паттерна должна быть чёткая структура повествования контента, так пользователи с большей вероятности будут следовать ей.

3. "Пятнистый" паттерн  или модель точечного сканирования


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

Image:Google

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

Image:Confetti

Используя "пятнистый" паттерн стоит помнить  о следующих особенностях:  

1.  Эффективность паттерна зависит от целей пользователя.
Если пользователь зашёл на сайт для получения конкретной информации, например, чтобы узнать цену или историческую дату , такая модель подойдёт лучше всего.

2. При использовании этой модели, пользователь обычно читает больше, чем при использовании F-паттерна. Так как пользователь ищет конкретные слова и цифры, им пропускается меньшее количество информации. Поэтому текст на странице, где используется "пятнистый" паттерн должен быть понятен и легок для восприятия.

4. Паттерн "слоёный пирог"

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

Image:Google

Шаблон сканирования "слоеный пирог" выглядит как горизонтальные полосы(заголовки) с пустыми пространствами между ними (основной текст). Можно сказать, что заголовки представляют собой глазурь, как на слоеном торте,  а основной текст — начинку.

Image:Google

Используя  паттерн "слоёный пирог" стоит помнить  о следующих особенностях:  

1. Просмотр заголовков и подзаголовков веб-страницы обычно даёт общее   представление о том, о чем будет идти речь на странице. Поэтому в таком паттерне важно подобрать верные слова для заголовка, которые чётко формулируют основную мысль  текста. Как только пользователь определит, интересна ли ему информация в заголовке, он примет решение прочитать основной текст или пропустить его. Идеальная длина заголовка составляет 60-80 символов.

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

5. Паттерн "обязательства"

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

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

Image: Google

Используя  паттерн "обязательства" стоит помнить  о следующих особенностях:  

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

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

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

Заключение

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

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


Теги