Повышаем конверсии через UX/UI‑дизайн: лучшие практики
Дизайн влияет на финансовые результаты бизнеса, что подтвердил ещё в 2018 году McKinsey Design Index: эксперты проанализировали 100 тысяч дизайн‑активностей в 300 компаниях в течение пяти лет. И один из примеров такого влияния — конверсия сайта, которая показывает, какой процент посетителей дошли до целевого действия. В материале расскажем, как просто и эффективно улучшить дизайн сайта, чтобы получать больше заявок и лидов.
Уменьшайте когнитивную нагрузку и используйте призыв к действию
Первый шаг в разработке прототипа сайта — создание пользовательского сценария, то есть пути, который пользователь проходит для достижения своей цели на сайте.
Сценарии помогают дизайнерам понять, как мыслит пользователь, как именно он использует сайт, где спотыкается и т.д. В итоге можно доработать сайт таким образом, чтобы опыт взаимодействия с ним был максимально удобным и приятным.
Типологию сценариев по степени детализации привели Дэвид Беньон, Сьюзан и Фил Тернеры в книге Designing Interactive Systems: People, Activities, Contexts, Technologies:
- Пользовательские истории — краткое описание пользователей и их потребностей. Например, человек хочет купить кроссовки.
- Концептуальные сценарии — несколько историй и пользователей, собранных вместе, где уже отбрасываются малозначительные детали. Например, пользователи заказывают кроссовки на сайте и ждут доставку.
- Конкретные сценарии — пути достижения цели на примере усредненных характеристик целевой аудитории. Например, один пользователь сравнивает несколько моделей кроссовок и берет одну, а другой — заказывает сразу несколько.
- Кейсы или сценарий применения — список деталей, где пользователь контактирует с системой. Например, пользователь нажимает на фильтры по брендам, размерам и цветам, чтобы отсеять нерелевантную обувь.
После проработки пользовательских сценариев можно приступать к созданию структуры сайта. Сайт должен быть логично и предсказуемо структурирован. Для этого необходимо проанализировать целевые аудитории и их потребности, изучить сайты конкурентов, составить список необходимых страниц и разделов, разработать их иерархию и протестировать прототип.
Согласно теории когнитивной нагрузки Джона Свеллера, чем больше загружена рабочая память человека, тем меньше человек запомнит из поступающей информации. Если перевести на язык дизайна: чем больше элементов и меньше «воздуха» между ними, тем меньше пользователь поймёт, а значит, с меньшей вероятности оставит заявку или купит товар.
Чтобы минимизировать визуальный шум и акцентировать внимание пользователя на информации о продукте и призыве к действию, стоит использовать отрицательное пространство.
Минимизировать визуальный шум можно с помощью базовых принципов дизайна:
- близость: элементы рядом друг с другом воспринимаются как связанные;
- симметрия: симметричные элементы дают ощущение порядка;
- общие области: элементы внутри замкнутого пространства воспринимаются как группа;
- сходство: визуально схожие элементы воспринимаются как связанные.
В примерах сгруппированы блоки по смыслу: сначала основные цифры проекты, затем — «боли» и задачи, которые он помогает закрыть.
Один из ключевых элементов же, который завершает повествование на сайте — это call‑to‑action. Пользователь должен четко видеть оффер и не искать его на сайте. Поэтому здесь важны и размер, и расположение, и цвет, и формулировка призыва к действию. Не стоит делать несколько кнопок, так как это может рассеивать внимание пользователя.
Управляйте вниманием пользователя
Чтобы облегчить пользовательский путь, применяйте визуальные подсказки: стрелки, графики, всплывающие окна и т.д. Только будьте внимательны: непродуманные или несвоевременные подсказки могут, напротив, оттолкнуть пользователя или отвлечь его от целевого действия. Интерфейс в целом должен быть интуитивно понятным, и тогда изобилие подсказок не потребуется.
Акценты можно делать с помощью контраста, типографики, размеров и цветов, шрифтов, фона и иллюстраций.
Еще один важный инструмент, который помогает управлять вниманием пользователя, — фильтрация. Этот элемент помогает упорядочить информацию и облегчить навигацию. Особенно это важно для интернет‑магазинов, каталогов и медиа с большим количеством рубрик и тем. Располагаться блок с фильтрами может вертикально в боковой панели или в виде горизонтального бара.
Применяйте психологию цвета и формы
Цветовая палитра влияет на эмоциональное состояние и восприятие человека. Например, красный во многих культурах ассоциируется с энергией и агрессией, зелёный — с умиротворением и природой, а фиолетовый — с роскошью и загадочностью.
Только не переборщите с цветами: достаточно 2‑4 оттенков, чтобы не утомить пользователя. Можно ориентироваться на брендбук, если он есть, либо использовать генератор цветовых схем, чтобы оттенки гармонично сочетались между собой. Это сервисы, которые помогают создавать гармоничные цветовые схемы: Adobe Color, Paletton и другие.
Делайте проще, но не шаблонно
Простота интерфейса уже стала «золотым правилом» дизайна. Здесь мы снова говорим о снижении когнитивной нагрузки и повышении концентрации внимания пользователя. Более простые и интуитивно понятные интерфейсы, как правило, более конверсионные. Однако я советую найти баланс между простотой и актуальностью.
Почему сегодня недостаточно сделать простой и удобный интерфейс? Потому что именно небанальный дизайн помогает сформировать узнаваемость бренда и выделиться среди конкурентов. Согласно отчету, опубликованному Top Design Firms в 2021 году, 50% потребителей уверены, что веб‑дизайн играет ключевую роль в восприятии бренда компании.
Посетителей сайта нужно чем‑то зацепить и создать эмоциональную связь. Поэтому даже в простых лаконичных интерфейсах можно увидеть элементы геймификации, маскотов, анимацию и другие «фишки».
Кроме того, ваш бренд должен восприниматься целостно. Для этого изначально нужно разработать фирменный стиль, который будет ассоциироваться с продуктом. Не только сайт, но и соцсети, мерч, упаковка и т.д. должны соответствовать этой стилистике.
Применяйте гипотезы и тестируйте
А повысится ли конверсия, если изменить цвет кнопки? Все описанные выше принципы нужно упаковывать в гипотезы, то есть предположения об изменениях, которые могут повысить конверсии сайта. Гипотезы бывают продуктовыми — отражающими влияние фичи на метрики продукта — и интерфейсными — такие касаются внешнего вида фичи: расположения кнопок, цветовой палитры, навигации, структуры.
Сначала ставим задачу — повысить конверсии. Затем анализируем проблемные места и формулируем гипотезу. Она должна быть конкретной и измеримой.
Пример: «Если мы сделаем кнопку Call to action крупнее и красного цвета, то конверсии вырастут на 5%».
Желательно понимать, на какие метрики будем смотреть, чтобы оценить эффективность.
Однако гипотезы требуют тестирования. Отслеживайте конверсию сайта с помощью Яндекс.Метрики и Google Analytics и постоянно тестируйте разные кнопки, цвета, шрифты и т.д. Так вы сможете основываться не просто на своих предположениях и насмотренности, а на точных цифрах.
Итоги и выводы
Вот ключевые советы, которые вы можете взять из материала для применения на практике:
- Важно, чтобы пользователь мог быстро и удобно решить свою проблему с помощью сайта. Для этого, с одной стороны, нужны четкая структура, отрицательное пространство, визуальные подсказки и заметный CTA.
- С другой стороны, интерфейс должен быть нескучным и стильным. Чтобы зацепить внимание пользователя, используйте трендовые цвета, шрифты, анимацию и другие нестандартные решения.
- Найти баланс между простотой и актуальностью и увеличить конверсии помогут гипотезы и тестирования.
