Посыл вашего бренда не ограничивается выбором слов. Среда, которой окружен этот посыл, не менее важна (а, возможно, даже более). Оригинал статьи взят с сайта neilpatel.com: 5 Psychology-Based Design Tips to Improve Engagement on Your Website
Тонкие аспекты, такие как цвет, линии, форма и шрифт, имеют значение. Я уже ранее писал о важности типографии, цвета и о дизайнерских ошибках, которые могут стать реальной угрозой для SEO. Большинство людей убеждено, что дизайн – это творческий талант. Они верят, что этим талантом нужно обладать с рождения и что его невозможно развить. Я с этим не согласен.
Люди подсознательно реагируют на визуальный материал. Если вы новичок, то первое, от чего стоит отказаться, – это мысль о том, что веб-сайт непременно должен быть элегантным. Красивые веб-сайты часто не очень хорошо функционируют и имеют высокий показатель ухода. Они плохо конвертируются.
Вам нужен функциональный веб-сайт, легкий в использовании и быстро загружающийся. Вам необходимо выучить несколько психологических принципов, которые помогут сделать ваш сайт более удобным в использовании, а это, в свою очередь, повысит уровень вовлеченности.
В данной статье я собрал пять важных психологических трюков в сфере дизайна. Как обычно, помимо теории я включил также практические примеры и действенные стратегии, которые можно прямо сейчас использовать.
Перейдем к первому совету.
1. Как цвета и шрифты пробуждают эмоции
Я уже писал об этом. Перечислим самые главные пункты еще раз.
Для начала поговорим о цвете.
Цвет играет ключевую роль в пробуждении эмоций. Если вы постоянный посетитель моего сайта Quick Sprout, мой бренд будет у вас ассоциироваться с зеленым цветом. Все цветные секции преимущественно зеленого цвета.
Рис. 1. Страничка с сайта Нила Пателя QuickSprout
Бренд Coca-Cola ассоциируется с красным цветом – это яркий и энергичный цвет.
Цвет повышает узнаваемость бренда на 80 %. А вот еще немного удивительной статистики касательно того, как цвет влияет на уровень конверсии.
Рис. 2. Статистические данные, связанные с цветом
Выбор цвета зависит от пола и привычек конкретного потребителя. Даже культурные традиции и национальность потенциальных клиентов влияют на выбор цвета. Например, в США белый цвет ассоциируется со свадьбой. А в Индии цвет, ассоциирующийся со свадьбой, – это красный.
Важно помнить одну вещь – нет цвета, который конвертируется лучше других.
Поэтому не ведитесь на исследования, которые утверждает, что смена цвета кнопки призыва к действию, повысит уровень кликабельности на 21 %. Вы можете добиться таких же результатов, а можете и не добиться. Нет универсального идеального цвета для веб-сайта. A/B-тестирование – ваш лучший друг.
Но в то же время:
Выбор правильной цветовой палитры должен соответствовать идентичности вашего бренда и резонировать с целевой аудиторией.
Вот цветовое колесо, автором которого является Роберт Платчик. Колесо отображает, какие эмоции у людей пробуждает определенный цвет.
Рис. 3. Цвета и эмоции, которые они пробуждают
Поэтому нужно тщательно подбирать цвет для своего логотипа. Вот примеры нескольких брендов, которые являются узнаваемыми именно благодаря выбору цвета.
Рис. 4. Примеры брендов с удачным выбором цвета для логотипа
В общем, цвета на вашем веб-сайте должны подчеркивать ценности вашего бренда.
Большинство брендов и блогеров меняют дизайн и цвета бренда в ходе развития. Поэтому, если вы не отнеслись к выбору цвета серьезно, пришло время сделать это. Прекрасный пример блога, который полностью изменил дизайн, – это блог Лео Бабаута на Zenhabits.net.
Вот как веб-сайт выглядел в 2009 г.
Рис. 5. Блог Лео Бабаута в 2009 году
Если вы посетите блог zenhabits.net сейчас, вы не увидите ярких цветов и просьб подписаться на рассылку. Сайт простой, черно-белый, минималистичный. Нет ничего отвлекающего.
Рис. 6. Обновленный сайт Лео Бабаута
Блог Лео – это и есть настоящий дзен. И он пользуется огромным успехом, у блога 20 миллионов вовлеченных пользователей ежемесячно.
Если вам нужна помощь в выборе цветовой схемы для вашего веб-сайта, ознакомьтесь со статьей в Huffington Post.
Теперь давайте обсудим выбор шрифтов для веб-сайта.
Помните, что читать на компьютерном экране намного сложнее, чем читать печатный текст.
Разборчивые шрифты способствуют читабельности контента. Они также создают определенное настроение, которое будет ассоциироваться у пользователя с вашим сайтом. Поэтому выбор правильного шрифта вызовет у посетителя сайта правильные эмоции.
Рис. 7. Шрифты и эмоции, которые они пробуждают
Если вы используете популярные тематические шаблоны на CMS, например WordPress, тогда ваш веб-сайт будет напоминать много других страниц, которые используют такой же шаблон. Именно правильный шрифт отличает один сайт от другого.
Начните поиск именно того шрифта и изучите комбинации шрифтов от Google.
2. Используйте гештальт-принцип симметрии. Используйте ассиметрию для привлечения внимания
Если Вы такой же человек, как большинство людей, Вам не нравится беспорядок. Вы рассматриваете объекты, ориентируясь на симметрию.
Например, на картинке ниже, Вы увидите пары скобок, а не шесть отдельных объектов.
Рис. 8. Примерсимметричнойкартинки
Как же применить этот принцип в дизайне?
Ваша аудитория быстро усваивает информацию, если она подана в симметричной и упорядоченной форме. С другой стороны, когда у Вашей композиции нарушен баланс, пользователю будет сложно сосредоточиться.
Но ассиметрию можно использовать, чтобы привлекать внимание к важным элементам на Вашем сайте – например, к кнопкам призыва к действию.
Симметрия – это всего лишь один принцип гештальт-психологии. В блоге Canva можно найти информацию о других принципах.
Больше информации можно найти в Интернете.
Рис. 9. Принципы гештальт-психологии в дизайне
3. Вызывайте подсознательную реакцию
Я рассказал вам не всю правду, когда говорил, что красивые веб-сайты плохо конвертируются.
Иногда людей можно завоевать и заставить полюбить вас, прямо воздействуя на их нервную систему. Люди просто чувствуют, что веб-сайт отличный, и им хочется им пользоваться. Что я имею в виду?
Подсознательная реакция.
Мы все подсознательно реагируем на определенные вещи.
Наши подсознательные реакции одинаковы и не зависят от нашего пола, демографических данных, потому что такие реакции зарождаются в старом добром мозге.
Как же пробудить подсознательную реакцию с помощью дизайна веб-сайта и заставить людей опять его посетить?
Первый способ – использовать цветные картинки. AirBnB использует красивые картинки, чтобы принести посетителям удовольствие и произвести хорошее первое впечатление.
Рис. 10. Использование картинок на веб-сайте
Я уже говорил о важности цветов, шрифтов и форм в дизайне. Тщательный выбор поможет вам завоевать доверие аудитории.
Можно пойти дальше и создать запоминающийся и веселый опыт, связанный с элементами вашего сайта. Отличный пример – это кнопка «Не тяни» на страничке продуктов Photojojo. Если на нее нажать, появляется изображение руки, которая прокручивает страницу к описанию.
Рис. 11. Кнопка «Не тяни» на странице Photojojo
Появляется отличный повод прочитать описание продукта. Благодаря этому сайтом часто делились пользователи и о нем рассказывали блогеры.
Журнал UX рассказывает о других способах подсознательно воздействовать на аудиторию.
4. Применяйте закон Хикса
Психологи Вильям Едмунд Хикс и Рей Хаймен провели ряд экспериментов, чтобы оценить когнитивные способности людей. Они выяснили, что при увеличении количества возможностей выбора, логарифмически увеличивается и время, потраченное на принятие решения.
Рис. 12. Соотношение количества возможностей выбора и времени, потраченного на принятие решения
Распространенное применение этого закона – это исследование, связанное с джемом, о котором вы могли слышать. Когда количество возможностей выбора снизилось до 18, продажи увеличились с 3 % до 30 %.
Рис. 13. Исследование влияния количества возможностей выбора на уровень продаж на примере джема
А как этот закон применим к дизайну веб-сайта?
Вместо того чтобы предлагать пользователям 10 вариантов выбора, перегружая их…
Сократите количество опций до абсолютного, самого необходимого минимума.
Потребитель перегружен информацией, с которой он сталкивается каждый день. Когда он посещает ваш сайт, цените его время и предоставьте ему только самое увлекательное и самое значимое предложение.
Рис. 14. Примеры опций на сайте
Вот конкретные элементы, на которых стоит сосредоточиться:
- Сведите количество полей в форме для заполнения к минимуму. Вот примерное количество конверсий, которых вы можете лишиться, если увеличите число полей формы.
Рис. 15. Влияния количества полей формы на число конверсий
- Каждая дополнительная кнопка, дающая возможность поделиться контентом вашего веб-сайта, приводит к увеличению времени загрузки. Поэтому выясните, где проводит время ваша аудитория. Размещайте только важные кнопки на своем сайте. Нет необходимости предоставлять 10 опций.
Также можно использовать карту прокрутки, чтобы увидеть, на какие кнопки щелкают больше всего.
- Помните главный принцип страницы перехода: «Одна страница. Одна цель», особенно когда используются кнопки призыва к действию.
Whirlpool повысил уровень кликабельности в своей кампании, проведенной по электронной почте, на 42 %, после того как компания убрала 3 вторичных кнопки призыва к действию и вернулась к дизайну с единой кнопкой призыва к действию.
Вот оригинальное электронное письмо с несколькими опциями.
Рис. 16. Версия кнопки призыва к действию на сайте Whirlpool до изменений
А вот протестированная версия после устранения вторичных кнопок призыва к действию.
Рис. 17. Измененная кнопка призыва к действию на сайте Whirlpool
- Количество элементов навигационной панели вашего веб-сайта — сайт должен включать только самые значимые пункты.
Рис. 18. Элементы навигационной панели
Ваша домашняя страница не должна содержать много кликабельных элементов. У моей домашней страницы всего одна кнопка призыва к действию.
Рис. 19. Домашняя страница Нила Пателя
Она также содержит всего 11 кликабельных ссылок.
Рис. 20. Кликабельные ссылки на сайте Нила Пателя
На сайте Amazon, к примеру, 141 ссылка.
Рис. 21. Ссылки на сайте Amazon
Определите количество кликабельных пунктов на своей домашней странице. Для этого можно воспользоваться калькулятором Link juice.
Сжатое меню навигации поможет SEO на вашем веб-сайте. Меньшее количество ссылок с домашней страницы приведет к тому, что авторитет сайта будет повышаться на внутренних страницах. Если добавить больше ссылок, это приведет к потере эффективности ссылок.
Профессиональный совет: почему бы вам не поэкспериментировать с удалением навигационного меню в верхней части домашней страницы? Можно напрямую сосредоточить внимание пользователя на кнопке призыва к действию. Yuppiechefубрал навигацию и смог увеличить уровень конверсий на 100 %. Вот как выглядит страница Брайана Харриса сейчас:
Рис. 22. Страница компании Yuppiechef
5. В первую очередь, думайте о пользователях и постарайтесь установить с ними связь
В конце концов, главное – это установить эмоциональную связь с вашей аудиторией. Если у вас нет значимого предложения для пользователя вашего сайта – это провал.
Вот несколько способов показать, что вы заботитесь о потенциальных клиентах.
- Проводите интервью и тесты для определения пользовательского опыта, чтобы лучше понимать, куда двигаться
Данные о пользователях, полученные благодаря аналитике, – это хороший способ принять решение, но не самый лучший. Потому что статистика не отвечает на вопрос «почему».
Yelp использовал серию из пяти тестов, направленных на анализ пользовательского опыта. Они помогли им лучше понять определенные элементы их сайта.
Например, панель поиска оказалась одним из главных элементов на их сайте, очень простым в использовании. Они также обнаружили, что некоторые элементы, например вкладка «События», были почти незаметны.
Рис. 23. Сайт компании Yelp
Они сделали еще шесть важных открытий. В общем и целом, Yelp обнаружил, что, хотя их сайт и был удобным и эффективным для посетителей, его можно было существенно усовершенствовать.
Ребята из UXPin создали персону покупателя, основываясь на пользовательских данных. Они поделили пользователей на группы, согласно их поведению (на KISSMetrics). Таким образом, они убедились, что люди чувствуют себя частью дизайна и что сайт прост в использовании.
Рис. 24. ИсследованиекомпанииUXPin
- Рассказывайтеистории
Рассказывание историй – это классическая и мощная техника, которая помогает устанавливать эмоциональную связь с людьми. Ваш дизайн тоже рассказывает историю. Но является ли эта история захватывающей и запоминающейся?
Я бы посоветовал вам почитать мою статью о брендовом сторителлинге и оценить свою визуальную историю.
Не недооценивайте силу сторителлинга. Бренд Raven + Lily, занимающийся торговлей в интернете, смог повысить продажи на 150 %, используя сторителлинг и изменив дизайн своего сайта.
Выводы
Дизайн вашего сайта должен укреплять идентичность вашего бренда и тот главный посыл, которым вы хотите поделиться в данной ситуации.
Я поделился с вами 5 советами, которые помогут вам создать увлекательный дизайн веб-сайта. Все эти трюки связаны с определенными психологическими принципами и будут очень эффективны в повышении уровня вовлеченности.
Источник: neilpatel.com