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

На что смотреть? На все элементы:

  • шапку,
  • навигацию,
  • информацию,
  • функциональные коды,
  • графические элементы,
  • фото,
  • контактные данные,
  • отображение страниц,
  • горячие кнопки,
  • URL.

Учесть все сложно, но можно. Пройдемся по основным моментам, чтобы не запутаться.

Информация о бренде и товарах

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

По ценам:

  • прайс-лист на видном месте;
  • единая валюта (можно добавить опцию ее смены).

Кнопки социальных сетей – во второй половине платформы, по размеру меньше, чем функциональные (купить, заказать, получить промокод). Нужно разделить опции «поделиться в социальных сетях» и «перейти в группу магазина».

Правильный URL страниц по названиям разделов с соблюдением иерархии в строке его формулы – обязательное условие. Это важно не только для юзабилити интернет-магазина.

Навигация

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

Другие моменты, связанные с перемещениями пользователя:

  • простое понятное меню без нагромождений разделов;
  • логика распределения разделов;
  • выделение текущего раздела в выскакивающем меню;
  • заметные «хлебные крошки».

Подача

В текстовой части нужно качественное оформление: абзацы с отступом, подзаголовки, таблицы, списки там, где это уместно, картинки. Цвет фона в интернет-магазине за очень редким исключением должен быть белым, бежевым или кремовым. Темные и яркие тона отвлекают и утомляют. Со шрифтом та же история: либо весь черный, либо с добавлением к черной классике красного или зеленого (синего) для выделения важной информации. Больше 2 цветов шрифта – это уже много. Со стилями можно экспериментировать (до 3–4 вариантов).

Полезные мелочи:

  • хорошо, если в адаптированной мобильной версии есть сокращенный вариант шапки (он показывается при прокрутке страницы вверх, демонстрируя телефон и логотип, но не закрывая половины экрана);
  • большая шапка с хорошим изображением будет лишней и в десктопной, и в мобильной версии – полезное пространство экрана надо использовать эффективно;
  • на длинных страницах хорошо работает на юзабилити кнопка возврата к началу;
  • раздел контактов должен быть вынесен отдельно, и начинаться его страница должна не с рекламы или призыва, а с полезной информации (телефоны, почта, адреса, график работы);
  • схема проезда должна быть и в подвале на главной странице, и в контактах.

Отображение страниц

Проверять юзабилити интернет-магазина надо минимум на 3 видах техники (компьютер, смартфон, ноутбук или планшет) и минимум в 4–5 браузерах. Только так можно убедиться, что ключевые страницы не растянуты длинными фразами за пределы экрана, и кликабельная кнопка «Купить» находится перед глазами покупателя. Понятно, что адаптированная мобильная версия уже должна быть.

Фото и изображения

Графика, выполненная по канонам юзабилити:

  • несет полезную информацию или приятные эмоции;
  • имеет нормальные размеры (не миниатюрная картинка, на которой ничего не рассмотреть);
  • подписана;
  • может увеличиваться по клику (актуально в карточках товаров для экономии места под описания);
  • имеет расширение .jpg/jpeg или .png, использование .gif в интернет-магазине – моветон.

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

Формы

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