Клиенты принимают решения, опираясь на чувства и привычки, особенно когда речь идёт о повседневных или недорогих покупках. Если дизайн соответствует ожиданиям аудитории, шансы продать товар растут. Рассказываем, как с помощью законов психологии сделать так, чтобы клиент захотел изучить каталог, попробовать продукт или оформить заказ.
Главное в трёх пунктах
- Люди подсознательно выбирают то, что проще понять, поэтому удачный дизайн — узнаваемый, лаконичный, содержательный и без лишних деталей.
- Цвета, шрифты, расположение кнопок, оформление упаковки и другие элементы дизайна могут повлиять на выбор ещё до того, как человек прочитает текст. Используйте знакомые символы, выделяйте главное, выбирайте оттенки, которые отражают позиционирование продукта.
- При создании дизайна полезно предлагать клиенту ограниченный выбор, соответствовать ожиданиям аудитории, упрощать визуал и текст, использовать привычные лица и образы и учитывать то, как движется взгляд человека при чтении.
Что такое психология дизайна
Психология дизайна — это наука о том, как форма, цвет, расположение и сочетание объектов влияют на поведение и выбор людей.
Человеческий мозг стремится экономить энергию — он использует готовые шаблоны вместо того, чтобы изучать каждую деталь. Это касается и покупок, ведь предложений много, а потребитель не может анализировать каждое из них подробно. В дизайне психология — это инструмент, который помогает бизнесу влиять на подсознание клиентов. Используя её законы, компания выстраивает понятный путь к покупке.
Как психологический подход помогает бизнесу
Опираясь на законы человеческого восприятия, можно повысить конверсию, лояльность покупателей и средний чек без дополнительных затрат на рекламу.
Психология в дизайне помогает:
- Снизить стоимость привлечения покупателя. Удачный дизайн доносит сообщение сразу — не нужно запускать много рекламы на одного и того же клиента.
- Повысить средний чек. С помощью дизайна можно направить покупателя на определённые страницы сайта, подсветить подходящие товары и подтолкнуть к дополнительным заказам.
- Увеличить пожизненную ценность клиента. Пользователи, которые получают положительный опыт пребывания на площадках компании, могут вернуться и стать постоянными покупателями.
- Увеличить конверсию в клик, заказ, оплату. Чем понятнее дизайн, тем больше шансов, что пользователь выполнит целевое действие и перейдёт на новый этап воронки продаж.
- Увеличить доверие. Органичный и продуманный дизайн создаёт в сознании покупателя образ надёжного бренда.
- Упростить выбор. Когда клиент понимает, куда нужно нажимать и как найти актуальную информацию, ему легче принять решение — он меньше сомневается и быстрее делает заказ.
Представьте два интернет-магазина с одинаковыми товарами и ценами. В одном пользователь путается в меню, долго ищет корзину и не понимает, как оформить заказ и за какую цену. В другом — мгновенно находит нужный фильтр, нажимает на крупную кнопку «Добавить», на странице оплаты видит, сколько получилось сэкономить. Во втором случае всё понятно, прозрачно и логично: очевидно, к чему приведёт то или иное действие, не нужно прилагать дополнительных усилий. Покупатель достигает своей цели и получает положительный опыт.
Чтобы дизайн решал бизнес-задачи, следуйте законам восприятия, которые мы описали ниже.
Закон Хика-Хаймана
Суть этого принципа в том, что чем больше вариантов вы даёте человеку, тем дольше он принимает решение. Слишком широкий выбор рассеивает внимание и заставляет клиента переключаться на другие предложения вместо того, чтобы идти к покупке.
Несколько примеров, как можно применять закон Хика-Хаймана в бизнесе:
- Меню в кафе. Если у вас 15 позиций пасты, выделите 3–4 фирменных: покажите фото, напишите названия крупным шрифтом. Остальные варианты перечислите списком. Вы сузите выбор, но при этом дадите клиенту возможность изучить остальные позиции.
- Тарифы на сайте. Не показывайте сразу таблицу с полным списком. На главной странице сделайте три варианта: «Базовый», «Оптимальный», «Премиальный». Пользователь подсознательно обратит внимание на них из-за визуального выделения. Клиенты, которых не устроят условия предложенных тарифов, смогут перейти на отдельную страницу со всеми вариантами.
- Регистрация на сайте. Чем меньше полей в форме, тем выше шанс, что её заполнят. Запросите только имя и почту или номер телефона. Остальное вы узнаете потом, например через опросник или анализ поведения на сайте.
Предвзятость подтверждения
Люди любят, когда их мнение совпадает с реальностью и ищут подтверждение тому, во что уже верят. Используйте принцип предвзятости в оформлении цифровых продуктов и рекламных материалов. Как это можно реализовать:
- Кулинарное приложение для работающих матерей. Представьте, будто продукт сообщает: «Мы понимаем, что вы устали и у вас нет времени». Картинки с быстрыми рецептами из доступных продуктов, удобная навигация, фразы «Без хлопот за 15 минут» — всё это работает на подтверждение картины мира целевой аудитории.
- Мессенджер для сотрудников технических компаний. ИТ-специалисты привыкают к точности и лаконичности. Минимум лишнего, чёткие иконки, строгие шрифты — в таком дизайне пользователи увидят «свой» продукт.
- Бренд одежды для подростков. Молодой аудитории важно выделяться, но при этом чувствовать принадлежность к группе. Идея «Ты — особенный, и мы тебя понимаем и принимаем» помогает продавать товары. Чтобы воплотить её, можно использовать групповые снимки, контрастные и сложные цвета, авторские принты.
Эффект предшествования
Суть закона: то, что человек видел или делал секунды назад, влияет на следующий шаг. Мозг всегда ищет связи, поэтому, если вы покажете человеку фото мягкого пледа и горящего камина, а потом предложите заказать свитер, шанс на покупку вырастет. Однако эффект, скорее всего, будет противоположным, если перед свитером покупатель увидит фото пляжа и мороженого.
Как применять принцип в маркетинге:
- Главная страница и каталог товаров. Например, если вы продаёте дорогие часы, то окружение (фон, шрифты, модели на фото) должно быть соответствующим. Создавайте на первом экране впечатление статусности и роскоши, чтобы подготовить аудиторию к высоким ценам в каталоге.
- Последовательность действий. Сначала получите согласие клиентов на что-то необременительное для них, например на еженедельную рассылку. Затем пригласите подписчиков воспользоваться бесплатной пробной версией продукта, а после — вышлите коммерческое предложение. Каждое новое согласие программирует на последующее, поэтому шансы на сделку выше, чем при попытке продать товар сразу.
Уровень когнитивной нагрузки
Мозг устаёт от сложной информации, поэтому чем проще вы объясняете, тем лучше вас понимают и легче соглашаются на предложение. Так, лаконичный интерфейс с ёмкими инструкциями подталкивает человека к целевому действию эффективнее, чем страница с длинными текстами и запутанным дизайном.
Как снизить нагрузку на пользователя:
- Уберите лишнее. Удалите с экрана всё, что отвлекает от целевого действия. Ответьте на вопрос, помогает ли анимация, график, картинка или фраза на странице принять решение в конкретный момент. Если нет — убирайте.
- Группируйте элементы. Люди лучше запоминают информацию, разбитую на блоки. Не публикуйте сплошной текст: делайте списки, подзаголовки, смысловые выделения.
- Используйте знакомые символы, например лупу для поиска, корзину для покупок, домик для главной страницы. Неизвестные иконки заставляют мозг напрягаться.
Ограниченность внимания
Человек не может фокусироваться на всём одновременно. В каждый конкретный момент люди видят только один главный объект, который в дизайне называется точкой фокуса. Взгляд человека движется по экрану, и задача компании — направить внимание туда, куда нужно ей.
Как дизайнеры используют принцип ограниченности:
- Контраст. Например, раздел с каталогом или кнопка «Купить» должны быть самыми заметными на странице. Если всё вокруг тоже яркое, взгляд рассеивается.
- Пустое пространство. Вакуум вокруг важного элемента (заголовка, кнопки) сам по себе притягивает внимание. Пустота не только делает главное более заметным, но и помогает пользователю отдохнуть от информационного шума.
- Взгляд человека на фото. Люди подсознательно смотрят туда, куда и модель на изображении. Так, если на картинке лицо девушки повёрнуто к тексту, выше вероятность, что пользователь его прочитает.
Влиять на выбор покупателей — это навык, который требует системных знаний. В онлайн-кампусе НИУ ВШЭ вас научат создавать дизайн, который будет приносить прибыль. Так, в онлайн-магистратуре «Интерактивный дизайн» вы будете обосновывать свои решения с позиций маркетинга и психологии восприятия. Онлайн-программа объединяет несколько профилей — сможете выбрать тот, который ближе вам.
Психология цвета
Цвет вызывает эмоции и ассоциации ещё до того, как человек понимает, что именно он видит. Однако универсальных решений нет: палитра работает только в контексте конкретной аудитории и задач бизнеса.
У цветов есть устойчивые значения:
- Красный ассоциируется с энергией, страстью, опасностью, срочностью — это полезно для распродаж и кнопок с призывами к действию. В больших количествах этот цвет вызывает тревогу, поэтому его обычно используют точечно.
- Синий олицетворяет спокойствие, доверие, надёжность. Он хорошо работает в оформлении онлайн-платформ банков, страховых компаний, соцсетей, образовательных организаций.
Вышка Онлайн выбирает оттенки синего для своего сайта
- Жёлтый и оранжевый символизируют радость, оптимизм, тепло. Эти цвета привлекают внимание с дальнего расстояния и подходят для рекламы развлекательных мероприятий, детских и праздничных товаров.
- Зелёный ассоциируется с природой, здоровьем, деньгами, расслаблением. Оттенки этого цвета используют для продажи экотоваров, банковских и медицинских продуктов.
- Чёрный подчёркивает власть, элегантность, статус. Этот цвет популярен у премиальных брендов, которые продают технику, аксессуары, автомобили.
Комбинируйте оттенки, чтобы вызывать разные эмоции, но проверяйте цветовые сочетания на контрастность — все элементы важно сделать заметными и различимыми.
Паттерны распознавания
Наше подсознание положительно воспринимает знакомые формы и лица. Это эволюционный механизм: нам важно быстро определить, друг перед нами или враг, поэтому мы рефлекторно ищем то, что привычно и узнаваемо.
Как это использовать в дизайне:
- Лица людей. Фото реальных сотрудников и клиентов на сайте вызывают доверие. Мы подсознательно симпатизируем тем, кто похож на нас, особенно если человек улыбается и демонстрирует открытость.
- Круглые формы. Они воспринимаются как безопасные. Если ваш продукт связан с уютом и заботой — детские товары, чайные магазины, текстиль для дома, — используйте больше скруглённых кнопок и плавных линий.
- Привычные макеты. Следуйте знакомым правилам и маршрутам, например не убирайте на странице корзину в левый верхний угол — пользователи обычно видят её справа. Клиент должен не учиться пользоваться вашим сайтом, а перемещаться по нему интуитивно.
Паттерны просмотра
Взгляд пользователя движется по экрану по определённым траекториям. Самые известные паттерны — это F-образный и Z-образный.
- F-паттерн. Люди читают экран, как книгу: слева направо, сверху вниз, сканируя заголовки. Помещайте самую важную информацию в верхний левый угол и в первые абзацы, используйте разделы и маркированные списки, чтобы их было легко воспринимать.
- Z-паттерн. Если на странице мало текста, взгляд движется зигзагом: из левого верхнего угла в правый верхний, затем по диагонали в левый нижний, и снова по горизонтали в правый нижний. Чтобы пользователь считал всё необходимое, ставьте логотип слева сверху (первая точка), меню — справа сверху (вторая точка). Кнопку призыва к действию разместите слева или справа снизу (конечная точка). По диагонали между ними можно добавить содержательную иллюстрацию или краткий текст.
Главный экран сайта Вышки Онлайн совмещает принципы Z- и F-паттернов: слева направо и в середине размещены главные элементы
Чек-лист: как проверить дизайн сайта или приложения на соответствие принципам психологии
- На странице или в оформлении продукта нет лишнего. Если что-то можно удалить без потери смысла, сделайте это.
- Кнопка видна сразу. Главный призыв к действию — купить, заказать, оставить заявку — должен быть самым ярким и контрастным объектом на странице.
- Вы говорите с клиентом на его языке. Пусть изображения и слова отражают реальность ваших покупателей, будут знакомы им и подтверждать то, во что они верят.
- Выбор ограниченный. Чтобы внимание клиента не рассеивалось, оставляйте несколько оптимальных вариантов на главном экране, а остальное выносите на отдельный.
- Цвета вызывают нужные эмоции. Например, используйте синий для формирования доверия или красный для ощущения срочности. Избегайте случайных цветов, которые сбивают с толку.
- Информацию удобно читать. Проверьте, что текст краткий, не сливается с фоном и разбит на абзацы и списки.
- Все иконки понятные. Используйте условные обозначения, которые знакомы пользователям.
- Рaсположение элементов соответствует движению глаз. Убедитесь, что, если провести взглядом по Z- или F-траектории, можно сразу уловить главное: логотип, название продукта, свойства, кнопку призыва к действию.
- Дизайн адаптирован под мобильную версию. Проверьте, удобно ли листать страницу, достаточно ли крупные кнопки, не захватываются ли соседние элементы при нажатии на ссылки.
- Визуальное оформление знакомое и дружелюбное. По возможности добавьте лица (фото сотрудников или клиентов) или привычные образы.
