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

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

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

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

Эффективная и выгодная реклама с сервисом от МегаФона

Широкий выбор рекламных каналов, более 100 параметров по интересам, подробная аналитика и другие возможности уже ждут в Личном кабинете. А еще кешбэк 100% за запуск рекламы в первый месяц и еще 10% — каждый месяц.

Узнать больше >>

Реклама. ПАО «МегаФон». ИНН 7812014560. ОГРН 1027809169585. ERID LjN8K1P7y.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мнение редакции может не совпадать с мнением автора. Если у вас есть, что дополнить — будем рады вашим комментариям. Если вы хотите написать статью с вашей точкой зрения — прочитайте правила публикации на Cossa.