Главная страница

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

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

Точки фокусировки (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
Ребенок смотрит на другие объекты: появляются новые точки фокусировки — заголовок с подзаголовком, логотип бренда в зоне выхода.

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


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

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

Подпишитесь на обновления, чтобы быть в курсе!

Оцените статью:

( 3 оценок, средняя: 3.56 из 5 )

Новые кейсы и лайфхаки еще впереди. Подпишитесь на обновления, и узнавайте все первыми. Это бесплатно!

Адрес подписки уже существует. Пожалуйста укажите другой адрес.

Указать другой

На ваш почтовый адрес отправлено письмо для подтверждения подписки.

Если вы ещё не являетесь пользователем AskUsers,
но хотите улучшить свой сайт, то просто зарегистрируйтесь.

Хочу попробовать
Регистрация
Буду проводить исследования
Буду тестировать сайты
Необходим для подтверждения регистрации и восстановления пароля

Если у вас уже есть аккаунт, воспользуйтесь формой входа

Восcтановления пароля

Если вы забыли пароль, введите ваш E-Mail.
Контрольная строка для смены пароля, а также ваши регистрационные данные, будут высланы вам по E-Mail.



Если у вас уже есть аккаунт, воспользуйтесь формой входа

Войти в личный кабинет
Забыли свой пароль?

Если у вас ещё нет аккаунта, зарегистрируйтесь прямо сейчас