Как дизайн сайта влияет на продажи: разбор от дизайнера

Главная задача коммерческого сайта — захватить внимание человека и мотивировать его выполнить целевое действие: совершить покупку, оставить заявку, зарегистрироваться. Человеку достаточно нескольких секунд, чтобы составить свое впечатление о сайте, и дизайн в этом процессе играет ключевую роль.

«Важно помнить, что дизайн, прежде всего, должен соответствовать контексту бренда и ожиданиям аудитории. Детский бренд в черно-белом минимализме будет казаться чужим и холодным. А юридический сервис в кислотных оттенках — несерьезным. Поэтому, чем шире аудитория, тем более универсальным должен быть визуал. Это помогает человеку сразу почувствовать характер бренда и понять, что он попал в нужное место».

Типичные UX-ошибки, которые отталкивают клиентов

Ошибки могут быть разными, в зависимости от типа сайта: лендинг, интернет-магазин, корпоративный сайт. Однако есть и общие проблемы на разных сайтах — именно о таких пойдет речь.

В основе большинства UX-проблем — одно: пользователю сложно, непонятно или неудобно.

10 ошибок на сайтах, которые влияют на продажи:

• Плохая навигация
  Это одна из главных причин, почему пользователи быстро уходят. Когда меню спрятано, не фиксируется при прокрутке или вовсе отсутствует, человек теряет ориентиры и не понимает, куда идти дальше. Если путь к нужной информации запутан, никто не будет разбираться — пользователь просто уйдет к конкуренту, где проще.

• Медленная загрузка
  Даже красивый и продуманный сайт теряет смысл, если человек не дождался загрузки. Причины могут быть разными: тяжелые изображения, чрезмерные анимации или длинные прелоадеры. Но результат один — пользователь устал ждать, закрыл вкладку и ушел. Скорость — это не техническая деталь, а часть пользовательского опыта. Сколько вы сами готовы ждать загрузку сайта?
   
• Нет микроанимаций
  Когда при наведении курсора на элемент (кнопку, иконку, ссылку или пункт меню) ничего не происходит, пользователь не получает визуального отклика и не понимает, можно ли с элементом взаимодействовать. Микроанимации помогают сделать интерфейс «живым» и понятным: например, при добавлении товара в корзину иконка может слегка увеличиваться, а во время загрузки отображаться крутящийся индикатор.
   
• Неудобные формы
  Формы — один из ключевых элементов коммерческих сайтов. Кажется, что если пользователь дошел до заполнения, дело сделано — но именно здесь его легко потерять. Это может происходить по разным причинам:
  1) Неудобный формат ввода. Например, количество товаров можно изменить только кнопками «+» и «−», без возможности ввести число вручную. 
  2) Нет подсказок. Пользователю сложно, когда форму нельзя отправить, но при этом непонятно, что именно человек ввел некорректно.

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

• Неуместная анимация
  Анимация может оживлять интерфейс и направлять пользователя, но если она мешает взаимодействию, это превращается в раздражающий фактор. Например, кнопка при наведении слегка сдвигается вверх — и пользователь не может попасть по ней курсором. Или текст появляется с эффектом плавного проявления, но так медленно, что приходится ждать. Такие мелочи создают ощущение «тормозящего» сайта и мешают быстро выполнить нужное действие.
   
• Нарушение визуальной иерархии
  Когда на сайте все элементы одинаковые — заголовки, кнопки, текст — пользователю сложно понять, что главное и куда смотреть в первую очередь. Он тратит больше времени на поиск нужной информации, путается и быстрее уходит. Если посетитель не может найти преимущества, цену или кнопку, он не совершит покупку — даже если продукт ему подходит.

• Тупиковые сценарии
  Это ситуации, когда пользователь заходит в тупик и не понимает, что делать дальше. Например, на странице нет кнопки «Назад» или других элементов навигации, чтобы перейти к другому разделу. Или ссылка ведет на другой сайт и открывается в той же вкладке, обрывая путь пользователя. В результате человек теряется и уходит со страницы.
   
• Несоответствие кнопки и результата
  Например, кнопка незаметна на фоне остального контента, текст сложный или неочевидный для аудитории. Еще часто встречается несовпадение ожидания и реальности — когда на кнопке написано одно, а после клика происходит другое. Например, пользователь видит «Оставить заявку», но после клика попадает на страницу регистрации — хотя он просто хотел задать вопрос.

Как улучшить конверсию без дорогого редизайна

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

Сфокусируйтесь на продукте
Пользователю важно понимать, что конкретно вы предлагаете. Например, для интернет-магазинов главное — это товар, поэтому кнопка перехода в каталог должна быть на первом экране. О компании тоже можно рассказать, но это не должно быть главным.

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

Говорите понятным языком
Избегайте канцелярита, сложных терминов и общих лозунгов вроде «комплексное решение под ключ». Чем легче человеку прочитать и понять текст, тем выше шанс, что он совершит целевое действие.

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

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

Выводы

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

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