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

6 мин.
10300
Команда AskUsers
Команда AskUsers
22 июня 2017 • 6 мин.
Содержание

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

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

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

Vizual'noe vosprijatie.png

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

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

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

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

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

abstraktnyj primer.png

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

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

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

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

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

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

Svjaz' s patternami povedenija.png

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

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

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

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

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

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

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

primenenie v dizajne.png

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

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

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

poluchit' dizajn proekt.png

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

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

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

tochki fokusirovki.png

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

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

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

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

polozhenie ob#ektov.png

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

osobennosti vosprijatija informacii.png

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

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

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

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

Узнайте, как увеличить конверсию на 41%!
Выберите
ваш сайт
Укажите сайт и получите 7 точек роста.
Рассчитайте
стоимость
Контролируйте стоимость и состав услуги. Авторизуйтесь и выбирайте только то, что нужно вам.
Получите результат
и сопровождение
После оплаты и выполнения задания продолжайте получать регулярные советы и рост конверсий.
Понравилась статья? Жмите лайк или подписывайтесь на рассылку.

А также поделитесь статьей с друзьями в соцсетях.

Команда AskUsers
Команда AskUsers
Популярные статьи