Как цветовое решение сайтов и приложений влияет на конверсию

Что формирует конверсию

Конверсия — любое целевое действие пользователя. Самый простой пример — клик по кнопке «положить в корзину». Проведем простой диванный анализ: что нужно для того, чтобы пользователь нажал на заветную кнопку.

  • Он заинтересован в покупке, то есть является целевым посетителем (правильный трафик).
  • Его устраивает цена товара (правильная ценовая стратегия).
  • Он получил достаточно информации о продукте — надлежащего качества и в нужном объеме (правильный контент).
  • Он интуитивно ориентируется в интерфейсе (правильное UI-проектирование).
  • Наличие психологических мотиваторов (правильный визуальный дизайн).

Теории цвета и при чем здесь конверсия

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

Принцип первый. Использование цветового круга

Принцип второй. Использование цветовых схем

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

Принцип третий. Баланс цветов

Чтобы добиться сбалансированного решения, которое будет лучшим образом управлять пользовательским вниманием, рекомендуется комбинировать цвета в соотношении 60/30/10:

  • 60% — доминирующий цвет.
  • 30% — дополнительный цвет (можно использовать два оттенка одного).
  • 10% — цветовые акценты.

Принцип четвертый. Связь размера текста и его контраста

Текст с разным кеглем (размером шрифта) имеет разные требования к контрасту с фоном. Более крупный текст может быть менее контрастным без ущерба для восприятия. И наоборот, мелкий текст должен быть более контрастным — для того, чтобы читаемость была хорошей. W3C советует придерживаться минимальных контрастных соотношений:

  • 4,5:1 — для текста, набранного кеглем до 14 pt в жирном начертании и до 18 pt — в обычном.
  • 3:1 — для крупного текста.

Принцип пятый. Психология цветов

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

  • Доверие: синий (34%), белый (21%), зеленый (11%).
  • Безопасность: синий (28%), чёрный (16%), зеленый (12%).
  • Скорость: красный (76%).
  • Доступность: оранжевый (26%), жёлтый (22%), коричневый (13%).
  • Высокое качество: чёрный (43%), синий (20%).
  • Технологичность: черный (26%), серый (23%), синий (23%).
  • Надёжность: синий (43%), черный (24%).
  • Мужество: фиолетовый (29%), красный (28%), синий (22%).
  • Юмор: оранжевый (28%), желтый (26%), фиолетовый (17%).

Другие примеры

Цвета — это только один из инструментов в проектировании интерфейсов. Нельзя рассматривать их вне контекста. Компания Server Density полностью переработала страницу тарифов, чтобы решить две задачи:

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

Выводы

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

--

--

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
aic blog

aic blog

1.2K Followers

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/