Саккады: 3 способа управлять вниманием посетителей с помощью точек фиксации

Саккады: 3 способа управлять вниманием посетителей с помощью точек фиксации

Что такое саккады и как их использовать в дизайне, вёрстке и копирайтинге.

Когда мы читаем, то не задумываемся, как именно мы это делаем. Между тем это напряжённая работа: мозг анализирует все элементы текста и выдаёт готовую и связную информацию.

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

И наоборот: чем больше точек фиксации на сайте, тем хуже навигация и тем сложнее пользователю понять, о чём этот сайт.

Неудачный пример:

Саккады: 3 способа управлять вниманием посетителей с помощью точек фиксации

В случае с reddit глаз не понимает, на чём можно сфокусироваться, поэтому обращает внимание на всё содержимое страницы без конкретного направления. Чем это плохо? Пользователь заходит на страничку и не знает, что ему нужно делать — он попадает в тупик.

Удачный пример:

Саккады: 3 способа управлять вниманием посетителей с помощью точек фиксации

Достаточно взглянуть на большой заголовок и картинку, чтобы понять, о чём эта страница. После них пользователь замечает кнопку «Оставить заявку», которая выделена большой рамкой.

В среднем на завоевание пользователя у вас есть 10-20 секунд. Поэтому чем быстрее посетитель поймёт, что вы ему предлагаете, тем выше шанс, что он станет вашим клиентом.

Есть несколько путей применения саккадов в дизайне.

Используйте контраст

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

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

Саккады: 3 способа управлять вниманием посетителей с помощью точек фиксации

Но важен не только размер и расположение, но и цвет. Как только вы заходите на свою страницу в Facebook, что вы видите в первую очередь? Красную цифру уведомлений:

Саккады: 3 способа управлять вниманием посетителей с помощью точек фиксации

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

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

Правило изображения лиц

Один производитель подгузников провёл сравнительный тест между двумя картинками. На одном изображении ребёнок смотрит на пользователя:

Саккады: 3 способа управлять вниманием посетителей с помощью точек фиксации

Здесь почти всё наше внимание привлекает лицо ребёнка, текст уходит на задний план (оранжевый цвет на тепловой карте — большее количество взглядов; зелёный, соответственно, меньшее).

Вывод № 1: изображения лиц почти всегда цепляют наше внимание, при этом гораздо сильнее, чем любые другие элементы интерфейса.

Затем проведён второй тест с картинкой, на которой ребёнок смотрит на текст:

Саккады: 3 способа управлять вниманием посетителей с помощью точек фиксации

Лицо ребёнка всё ещё привлекает внимание — но и текст стал намного заметнее. Это происходит потому, что взгляд ребёнка направлен на текст, и пользователи автоматически следуют за ним.

Вывод № 2: используя изображение, где чётко прослеживается направление взгляда модели, можно управлять вниманием самого пользователя.

Правило F-паттерна (и его эволюция)

В далёком 1999 году Nielsen Norman Group провели исследование того, как мы читаем страницы в интернете. Первое в своём роде исследование выявило, что пользователи читают страницы не полностью, а согласно определённому шаблону — F-паттерну. Этот паттерн означает, что глаз человека движется по форме английской буквы F.

Саккады: 3 способа управлять вниманием посетителей с помощью точек фиксации

Работает это примерно так:

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

Саккады: 3 способа управлять вниманием посетителей с помощью точек фиксации

Если повторять этот процесс снова и снова, тепловая карта будет выглядеть как буква F (или E) — отсюда и название.

С 1999 года интернет сильно изменился, но наши глаза — нет. F-паттерн всё так же актуален, но теперь наше внимание больше привлекают картинки, чем текст.

Это подтверждает исследование Питера Джей Майерса, проведённое в 2011 году. Майерс тестировал страницу поиска Google и обнаружил, что картинки привлекают гораздо больше внимания, чем текст, но при этом сама форма движения глаз не изменилась — это всё та же буква F.

Саккады: 3 способа управлять вниманием посетителей с помощью точек фиксации

И контраст, и человеческие лица, и F-паттерн — эти правила используют для того, чтобы уменьшить количество саккадов.

До сих пор мы рассматривали их в контексте целой страницы с независимыми друг от друга блоками. Но саккады применимы не только к отдельным элементам, но и к самому тексту, фразам, словам, даже буквам.

Саккады: 3 способа управлять вниманием посетителей с помощью точек фиксации

Каждая остановка глаз определяет точку фиксации. Наши глаза, в среднем, способны воспринимать 7-9 знаков за одну остановку. Это значит, что мы делаем паузы не в начале слов, а через каждые 7-9 символов, собирая пазл из множества букв.

Саккады: 3 способа управлять вниманием посетителей с помощью точек фиксации

При этом мы воспринимаем слова целиком. Мозг учитывает окружение каждого объекта, что помогает быстрее собирать буквы в слова, а слова — в предложения.

Как это поможет вашему дизайну?

Пользователь открывает страницу и видит простыню текста — что он сделает? Просмотрит первую и последнюю строчку, всё остальное «прочитает по диагонали», особо не вникая. Это отдельный тип поведения пользователей — Z-паттерн, характерный для неудачных сайтов.

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

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

У вас есть только 20 секунд, чтобы заинтересовать пользователя.

Автор: Ростислав Ачилов, дизайнер в UXCrowd (источник)

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

У нас еще много очень интересных статей! Вот только несколько из них:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

два × 2 =