Психология в дизайне интерфейсов: 6 главных принципов и свойства, которыми должен обладать UI
НАЗАД

Психология в дизайне интерфейсов: 6 главных принципов и свойства, которыми должен обладать UI

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

В статье разберёмся, насколько сильно психология влияет на user interface, и как проектировать интерфейсы, которые будут затягивать пользователей с первых секунд.

Влияние психологии на дизайн

Шрифты, анимация, медиаконтент и удобство важны, но именно психологические приёмы сильнее всего влияют на опыт пользователей. Если человек на интуитивном уровне чувствует, что его хотят обмануть, скорее всего он не даст проекту второй шанс. Дизайнер не только создаёт графическую «оболочку» продукта, но и определяет, какой она будет в глазах целевой аудитории.

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

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

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

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

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

6 психологических принципов для UI

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

1. Эффект изоляции

Эффект Ресторффа описывает свойство человеческой памяти запоминать объекты, которые выделяются из общей массы. Представьте, что на столе лежат 20 зелёных яблок и одно красное. В большинстве случаев мы выберем красное, даже если оно будет не таким красивым, как зелёное.

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

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

В дизайне интерфейсов эффект изоляции проявляется по-своему. Обычно его используют, чтобы выделить call to action. Если разместить в несколько колонок 3-4 одинаковых кнопки, пользователи не поймут, какая из них открывает попап. В этом случае конверсия будет намного ниже, чем когда CTA отличается от других объектов.

2. Закон близости

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

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

Посмотрите на блок «Featured» и попробуйте представить, как бы вы воспринимали кружочки с одинаковым оформлением. Без подписей, заголовка и другого контента. Даже без текста, который облегчает восприятие, понятно, что эти объекты связаны между собой.

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

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

3. Закон Хика

Закон говорит о том, что количество информации, поступающее в мозг, определяет время, которое человек тратит на принятие решения. Если в кафе 30 видов десерта, клиент посмотрит меню и потратит много времени на выбор.

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

Старайтесь сократить количество вариантов, чтобы пользователь точно выбрал хотя бы один. Если человеку надо выбрать услугу из длинного списка на 40 объектов, конверсия будет минимальной. Интерес или потребность должны быть настолько большими, чтобы тратить время на поиск подходящего варианта.

4. Когнитивная нагрузка

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

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

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

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

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

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

5. Эффект края

Принцип частично соотносится с первыми тремя приёмами. Когда пользователь видит перед собой группу элементов, он лучше запоминает первый и последний. Если в слайдере будет 4-5 слайдов, люди запомнят те, с которыми они взаимодействуют дольше. Первый слайд показывается до переключения элементов. А последний отпечатывается в памяти, так как на нём юзер обычно заканчивает просмотр контента.

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

Посмотрите на структуру музыкального приложения. После запуска плеера появляется минималистичный экран с главными элементами управления. Ближе к нижней области экрана отображаются кнопки переключения трека и паузы. В этом случае главный объект выделен более ярким цветом.

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

6. Закон завершенности

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

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

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

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

Какими свойствами должен обладать интерфейс

С психологическими принципами разобрались. Теперь кратко остановимся на том, как правильно использовать информацию для создания UI.

Авторитетность

Авторитет — очень размытое понятие. В большинстве случаев это известный человек или компания, которые популярны во всем мире или в узком кругу. Безупречная репутация, которая складывалась по кусочкам многие годы, даёт лидерам мнений и компаниям почти неограниченный лимит доверия со стороны клиентов.

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

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

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

Социальное доказательство

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

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

Дефицит

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

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

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

Открытость

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

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

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

Геймификация

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

Если это уместно, можно награждать пользователей цифровыми достижениями, выдавать бонусы и открывать доступ к эксклюзивным материалам. Допустим, есть магазин по продаже электрических велосипедов. После регистрации пользователю дают скидку в 3% и статус «Новичок». Можно увеличивать размер скидки и статус по мере выхода на заданную сумму покупки.

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

Эмоциональность

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

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

Последовательность

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

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

Если посмотреть на идею последовательности в более широком смысле, то становится понятно, что она работает везде. Мы все время проходим разные квесты, которые разделены на десятки или сотни шагов. Использование знакомых паттернов помогает людям чувствовать себя в привычной среде.

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

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