5 примеров как улучшить юзабилити интернет-магазина

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

Причем свое мнение посетители составляют мгновенно. Согласно исследованиям Microsoft, в среднем на это уходит 10,5 секунд. За это время вы должны донести ценностное предложение и продемонстрировать, что пользоваться сайтом легко и удобно. 

Как это сделать? Представляем пять примеров как улучшить юзабилити интернет-магазина.

Простая и понятная навигация

Не запутывайте ваших посетителей и не заставляйте их думать, куда нажать, чтобы получить нужную информацию. Особенно это актуально для мобильных версий. Почти половина пользователей мобильных гаджетов – 44% отмечают, что делать покупки через телефон или планшет сложнее из-за «косяков» навигации.

Как можно проверить свою систему? Проведите онлайн-голосование – предложите пользователям выбрать наиболее важные для них категории товаров. Либо прямой опрос в духе «Если бы вам нужно было найти товар Х, то куда бы вы нажимали?». Ответы могут вас сильно удивить.

Система навигации – это не тот элемент, где стоит изобретать велосипед. Люди уже привыкли к классической древовидной структуре. 

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

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

Улучшение юзабилити интернет магазина с помощью навигации

Путь пользователя

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

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

Отслеживание пути пользователя для повышения юзабилити

Строка пути также приносит пользу с точки зрения SEO, поскольку отображается прямо в результатах поиска, под заголовком:

Улучшение юзабилити с помощью хлебных крошек

Правило F

Люди просматривают сайты слева направо, потом спускаются чуть ниже, и снова – слева направо, как при чтении. На тепловой карте это выглядит так:

Улучшение юзабилити с помощью правила F

Эта модель поведения (F-паттерн) была описана экспертами NNGroup еще в 2006 году и актуальна для всех культур, где читают слева направо.

Вот почему в интернет-магазинах чаще всего слева размещают изображения, а справа – описание товара. Изображение привлекает внимание, а затем посетитель автоматически переводит взгляд на текстовую часть.

Привлечение внимания пользователя с помощью изображения

По возможности протестируйте сайт с помощью инструментов айтрекинга (отслеживание движения глаз). Также не забудьте про карту кликов и карту скроллинга в Яндекс Метрике. 

Mobile-friendly

48% мобильных пользователей испытывают разочарование и раздражение, если сайт плохо оптимизирован для работы с мобильными гаджетами. А 36% моментально уходят.

Ключевые параметры:

  • Большие кнопки.
  • Меньше текста.
  • Автоподстройка картинок под размер экрана.
  • Только вертикальный скроллинг.
  • Упрощенная навигация, не закрывающая весь экран.
  • Строка поиска на видном месте.

    С апреля 2015 года Google начал поднимать mobile-friendly сайты в результатах выдачи и сильно понижать неоптимизированные. 

    Быстрый поиск

    Многие люди не любят бродить по магазинам – что в реале, что в онлайне. Дайте им быстро найти то, что нужно. С этой задачей справится классическая строка поиска. Очень многие пользователи, которые ищут конкретный товар, используют именно ее, а не меню навигации по категориям. 

    • Обратите внимание на:
      • Расположение. Оптимальный вариант – правая верхняя часть страницы.
      • Автоматические подсказки. Они не только облегчают поиск, но и позволяют показать ассортимент.
      Еще один пример увеличения юзабилити правилом F
      Выводы

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

      Высоких вам продаж!