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

06 февраля 2017, 16:00
4

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

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

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

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

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

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

МегаФон ПроБизнес

Получите Кешбэк 100% за запуск рекламы с МегаФон Таргетом!

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

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

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

В случае с 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.

Телеграм Коссы — здесь самый быстрый диджитал и самые честные обсуждения: @cossaru

📬 Письма Коссы — рассылка о маркетинге и бизнесе в интернете. Раз в неделю, без инфошума: cossa.pulse.is

Никаких 20 секунд у Вас нет... ) максимум 7-8...
Зависит от типа сайта, подготовленности пользователя, цель, с которой он зашёл и ещё множества факторов. 20 секунд — допустимый максимум. Но вы правы, чем меньше времени требуется для понимания, тем лучше Smile
Мозг ленив. Чтобы сэкономить энергию на обработке текстовой информации он сканирует заголовки. Если в них не нашлось интересного - до свидания.Картинки легче воспринимаются, т.к. их не нужно расшифровывать в отличие от слов.А лица вообще порой самое главное на сайтах. Т.к. люди привыкли общаться с людьми и больше доверяют именно фото, а не бездушным сайтам.
неплохая статья как для дизайнера Joke

✉️✨
Письма Коссы — лаконичная рассылка для тех, кто ценит своё время: cossa.pulse.is


Вход на cossa.ru

Уже есть аккаунт?
Авторизуйся через VK:
Vkontakte
Не забудьте написать email на странице своего профиля для управления рассылкой