Как управлять вниманием пользователя

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

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

Главное, о чем стоит помнить, когда вы хотите научиться управлять вниманием пользователей на сайте и направлять его в нужное вам русло, – это первое впечатление.

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

Пользователь обращает внимание на:

Содержательную часть страницы. При создании и наполнении сайта за нее несут ответственность владельцы компании (именно они решают, что продавать, за какую цену и по каким условиям), маркетологи/контент-стратеги (они составляют маркетинговую и контент-стратегию для развития сайта) и копирайтеры/редакторы (они отвечают за текстовое наполнение страниц).

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

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

Восприятие информации человеком — это процесс знакомства психики с явлениями и предметами через каналы восприятия:

Восприятие новой информации может происходить через один или сразу через несколько каналов восприятия. Например, когда человек слышит незнакомый запах – задействуется только обонятельный канал восприятия. Когда человек пробует, например, булочку из новой пекарни – задействуется сразу несколько каналов восприятия (обонятельный – человек слышит новый запах; вкусовой – он пробует новый вкус; зрительный – он видит новый предмет; осязательный – он трогает новый предмет).

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

Каналы восприятия:

С точки зрения психологии, наилучших результатов в запоминании информации можно достичь при задействовании сразу нескольких органов чувств. Однако, когда речь заходит о веб-дизайне, стоит учитывать, что далеко не на каждом сайте уместно использовать музыку и звуковые эффекты. Например, если речь идет о каком-то медиаресурсе (Wizardingworld, Яндекс.Игры), то использование звуковых эффектов и музыки вполне обосновано и создает особую атмосферу для пользователей. Однако, в случае, когда речь идет об интернет-магазинах, корпоративных сайтах, звуковые эффекты – опциональный инструмент. Они могут раздражать пользователей или же вовсе игнорируются ими, ведь часто люди просто выключают звук в браузере.

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

Люди в большинстве своем сначала обращают внимание на форму объекта целиком, и только потом – на его детали/отдельные характеристики/свойства.

Люди способны понять, что за объект перед ними, даже если не хватает нескольких его частей.

Люди интерпретируют неоднозначные объекты по-разному.

Люди способны идентифицировать объекты в перспективе, а также, если объект изменился в размере или в стиле исполнения.

Стоит отметить, что многие из этих принципов веб-дизайнеры используют подсознательно, на основе своего практического опыта и насмотренности.

Принцип №1 «Близость»

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

Принцип №2 «Замыкание»

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

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

Принцип №3 «Подобие»

Данный принцип предполагает, что человек воспринимает похожие по внешним характеристикам объекты, как связанные друг с другом. Элементы могут быть похожи по форме, цвету или размеру. Для примера рассмотрим сайт онлайн-кинотеатра Start. Несмотря на то что элементы в каталоге имеют различные обложки, мы видим что иконки с фильмами – одинакового размера, в отличие от иконок коллекций. А на странице каталога Wildberries разделы и карточки отличаются не только размером, но и формой. Для разделов используется прямоугольник со скругленными краями, а для карточек товара – обычные прямоугольники.

На этом принципе основывается эффект Ресторфф. Это явление, при котором объект, который отличается от остальных, запоминается лучше всех.

При создании дизайн-проекта вы можете использовать эффект Ресторфф для того, чтобы акцентировать внимание пользователей на каком-либо элементе страницы.

Принцип №4 «Непрерывность»

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

В качестве примера рассмотрим сайт LifeLabs. Изображения моделей, расположенные на одной кривой воспринимаются взаимосвязанными, в данном случае – как коллекция.

Принцип №5 «Фигура-Фон»

Фигурой, т.е. ключевой или фокальной точкой, является тот элемент, который человек распознает быстро и без усилий. Поэтому, если вы хотите обратить внимание пользователей на определенный объект, сделайте его максимально заметным на выбранном вами фоне. Сделайте фигуру контрастной по отношению к фону.

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

Принцип №6 «Симметрия»

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

При создании страницы, вы можете расположить объект так, чтобы он выбивался из симметричной композиции. Это «несовершенство» привлечет внимание пользователей, создаст особую динамику на странице и сделает ее более интересной.

Один из вопросов, который возникает при проектировании страницы, связан с количеством элементов, размещенных на странице.

Закон Хика гласит:
Время реакции на выбор возрастает пропорционально количеству и сложности вариантов выбора.

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

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

Визуальный контакт

Первое средство управления вниманием, о котором мы поговорим – изображения. А если быть точнее – изображения людей. Человеческая психика устроена таким образом, что мы сразу обращаем внимание на лица, если они есть на странице сайта.

Именно поэтому, при выборе изображений, например, для оформления интернет-магазина одежды, рекомендуется выбирать такие фотографии, где видны лица.

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

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

Еще один секретный прием – использование изображений людей, чей взгляд направлен на важный для нас элемент – на слоган/заголовок/кнопку СТА.

Эффективные композиционные схемы

Если вы хотите эффективно направлять внимание пользователей на контент вашей страницы, используйте паттерны чтения. Самыми известными являются композиционная схема F и композиционная схема Z. Использование данных схем позволяет сделать контент на странице удобочитаемым и последовательным.

Композиционная схема F больше подходит для страниц, где основная масса контента – это текст.

Композиционная схема Z по своей сути – упрощенная диаграмма Гутенберга, которая позволяет найти ключевые точки страницы, где лучше всего разместить элементы, подталкивающие к совершению целевого действия. Самые «сильные зоны» – левая верхняя и нижняя правая часть схемы.

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

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

Сетка позволяет разместить контент таким образом, чтобы между элементами было оптимальное количество белого пространства. Вы можете сделать сетку из двух/трех/четырех/двенадцати колонок.

Внимание к деталям

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

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

Минус на плюс

В работе сайта иногда могут возникать ошибки, и это случается со всеми. Важно обернуть эту ситуацию в свою пользу и попытаться не потерять контакт с пользователями. Ведь достаточно часто наткнувшись на страницу с ошибкой, пользователь вовсе покидает сайт. Чтобы этого не произошло, используйте служебные страницы с ошибками (например, ошибка 404/403/504) с пользой. На них вы можете предложить пользователям пройти в более интересные разделы/статьи/страниц/карточки товаров, а также извиниться за предоставленные неудобства.

Игра на контрастах

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

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

Привычные решения

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

Конечно, можно расположить кнопки регистрации аккаунта хоть в подвале. Вопрос только в том, найдет ли их пользователь. Однако если вы разместите кнопку регистрации в левом верхнем углу – вы не прогадаете, ведь пользователь привык, что она находится именно там. Необычное расположение функциональных элементов может привести к тому, что пользователь не найдя нужных кнопок, просто уйдет с сайта. Поэтому не стоит изобретать велосипед там, где это не нужно.

Анимированный интерфейс

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

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

Управлять вниманием пользователей – одна из главных задач веб-дизайнера. Для того чтобы выполнить ее, нужно позаботиться о том, чтобы уже с первых секунд нахождения на сайте, пользователь заинтересовался его содержимым. Это становится возможным благодаря знанию принципов психологии пользователей и использованию специальных инструментов и средств привлечения внимания.

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

Мы подготовили еще множество интересных материалов о веб-дизайне, оставайтесь с нами, чтобы ничего не пропустить.