Привет!

Психология посетителей сайтов: почему простой дизайн лучше [digital note #11]

Гадашевич АндрейГадашевич Андрей

Маркетологи и дизайнеры каждый день задают себе один вопрос: Каким сделать дизайн, чтобы он приводил к конверсиям? А ответ таков: Как можно меньше дизайна.

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

Психология посетителя

Простота красива. А красота приводит к конверсии.

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

Шаблонные элементы на сайте

Если я спрошу, какой цвет у вас ассоциируется со словом “мальчик”, вы подумаете о синем. Розовый же ассоциируется с “девочкой”. Было ли вам известно, что в середине 19 века, синий (успокаивающий цвет) ассоциировался с девушками, а розовый (яркий, страстный цвет) - с парнями? Вы даже не можете себе этого представить, неправда ли? Но почему? Что есть неотъемлемое синее в мужчинах и розовое в женщинах?

Ничего.

Так почему же возникают такие ассоциации? Наш мозг так часто видел данную комбинацию, что перенес ее на дальнейшие связи. “Парни=синий” это шаблон, который создал мозг в попытке систематизировать информацию. Задача мозга - переработать как можно большее количество информации за наименьшее время. Создание подобных комбинаций упрощает процесс восприятия мира.

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

Когнитивная беглость

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

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

Обработка визуальной информации

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

Научно доказано, что простая информация легче обрабатывается

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

Вот как это работает

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

Каждый элемент доносит информацию

Концепция простого дизайна это хорошо. Но как же донести всю информацию и не перегрузить сайт?

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

Возьмем к примеру MailChimp. В 2013 году компания решила изменить наиболее важную часть бренда - логотип. Они хотели осовременить его, но без значительных перемен.

Вначале он выглядел так:

MailChimp logo old

Для того, чтобы облегчить читаемость дизайнер расширил некоторые узкие места. Выпрямил линию основания (сохраняя при этом почерк). Уменьшил толщину линий и разделил слова.

Результат:

MailChimp logo new

Миллионы новых пользователей. Я не хочу сказать, что миллионы людей стали пользоваться MailChimp только потому, что они сделали редизайн логотипа. Но результаты впечатляют.

Рабочая память

Еще один фактор, подтверждающий, что простое лучше, это краткосрочная память (или рабочая память, как ее еще называют). Рабочая память, это часть мозга, которая временно хранит и обрабатывает части информации. Она позволяет фокусировать внимание, игнорировать отвлекающие факторы и принимать решения. Но эффективно хранится может только 5-9 элементов одновременно. Поэтому, чем меньше информации на сайте, тем лучше.

Отклонение

Что происходит, когда вы отклоняетесь от простого, шаблонного дизайна? Эти 5-9 объектов, которые хранят пользователи, не оправдывают ожидания.

Это могут быть:

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

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

Кейс

Хотите доказательств? Компания “Skinny Ties” провела редизайн. Занимаются они тем, что производят и продают галстуки.

До 2012 года их сайт выглядел следующим образом:

MailChimp logo new

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

Новый сайт Skinny Ties:

MailChimp logo new

Всего через 2,5 недели компания получила следующие результаты:

  • 4% рост выручки со всех устройств (выручка увеличилась на 377,6% только с пользователей iPhone);
  • увеличение конверсии на 6% (71,9% для пользователей iPhone);
  • снижение показателя отказов на 2%;
  • увеличение продолжительности пребывания на сайте на 6%.

Результаты говорят сами за себя.

Выводы

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

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

Разрабатывая дизайн или проводя редизайн, помните:

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

Источник: The Psychological Benefits of Simple Design: Why Less Really is More