Как точки фокусировки помогают управлять вниманием пользователей

Точки фокусировки (Focal Points) — объекты, которые выделяются на странице за счет непохожести с другими элементами и выступают в качестве якорей для внимания пользователя.

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

Визуальное восприятие точек фокусировки

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

2. Затем — на менее заметных, но все еще выделяющихся из общей массы, элементах. Сразу после круга вы посмотрели поочередно на 3 красных квадрата.

3. И только потом мы анализируем другие элементы на странице.

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

Еще один абстрактный пример:

Здесь только одна точка фокусировки внимания — красный квадрат, который выделяется из общей массы объектов сразу несколькими признаками:

• формой,
• цветом,
• размером,
• положением в пространстве,
• наличием тени, которая создает ощущение объема.

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

Связь с паттернами поведения

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

Вот хороший пример объединения подходов при проектировании лендинга мобильного приложения:

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

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

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

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

Применение в дизайне

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

Пример с сайта авторемонтной компании:

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

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

Еще один пример от производителя корпусной мебели:

Здесь две точки фокусировки: заголовок и кнопка с призывом к действию. С позиции информативности этот пример намного лучше, чем предыдущий. Обратите внимание, как текст заголовка и текст на кнопке идеально складываются в единое целое в формате «вопрос-ответ»: Как получить бесплатный проект? — Отправить заявку.

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

Пример с сайта компании-производителя пластиковых окон:

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

Снова обратите внимание — наиболее заметные точки расположены в соответствии с диаграммой Гутенберга. Недочет тот же, что и в примере с авторемонтом: заголовок дублирует текст скидочного предложения, что ухудшает восприятие информации.

Еще один интересный факт, на котором обязательно нужно остановиться: в каждом примере неукоснительно соблюдается правило 7 +/- 2. Точек фокусировки не должно быть слишком много: в противном случае они перегрузят интерфейс и ухудшат возможности для восприятия информации.

В зависимости от положения объектов на странице точки фокусировки могут смещаться. Это происходит из-за когнитивных особенностей восприятия информации. Классический пример:

Ребенок смотрит прямо: горячая точка только одна.

Ребенок смотрит на другие объекты: появляются новые точки фокусировки — заголовок с подзаголовком, логотип бренда в зоне выхода.

Выводы и рекомендации

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

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