Когда мы читаем, то не задумываемся, как именно мы это делаем. Между тем это напряжённая работа: мозг анализирует все элементы текста и выдаёт готовую и связную информацию.
Правильно созданная иерархия делает текст удобным для чтения, облегчая восприятие информации. Это значит, что чем грамотнее структурирован текст, скажем, на вашем сайте, тем меньше саккадов — движений глаз от одной точки фиксации к другой — совершит пользователь. И тем выше вероятность, что он из посетителя превратится в лида.
И наоборот: чем больше точек фиксации на сайте, тем хуже навигация и тем сложнее пользователю понять, о чём этот сайт.
Неудачный пример:
В случае с reddit глаз не понимает, на чём можно сфокусироваться, поэтому обращает внимание на всё содержимое страницы без конкретного направления. Чем это плохо? Пользователь заходит на страничку и не знает, что ему нужно делать — он попадает в тупик.
Удачный пример:
Достаточно взглянуть на большой заголовок и картинку, чтобы понять, о чём эта страница. После них пользователь замечает кнопку «Оставить заявку», которая выделена большой рамкой.
Продвижение медцентров и клиник: три кейса о SEO, TikTok и Instagram*
Как получить измеримые результаты в фарммаркетинге.
Показываем на примерах →
Спецпроект
В среднем на завоевание пользователя у вас есть 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.
Источник:
