Каким бы ценным для интернет-магазина ни было внимание поисковых сервисов, покупки здесь совершают люди. Им в первую очередь должно быть комфортно на всех страницах сайта, а за это отвечает юзабилити интернет-магазина. Параметр в последние годы очень стараются научиться оценивать и Яндекс, и Google. Значит, контролировать его надо на всех этапах – при создании дизайна, редизайне, ребрендинге, верстке и т. д.
На что смотреть? На все элементы:
- шапку,
- навигацию,
- информацию,
- функциональные коды,
- графические элементы,
- фото,
- контактные данные,
- отображение страниц,
- горячие кнопки,
- URL.
Учесть все сложно, но можно. Пройдемся по основным моментам, чтобы не запутаться.
Информация о бренде и товарах
Покупатель должен четко ориентироваться, где он, и за чем пришел. Уникальный логотип на эту цель работает на порядок лучше стандартной текстовой описки вроде «интернет-магазин низких цен». Он должен находиться в шапке и быть виден сразу. На всех страницах сайта должна быть ссылка на главную.
По ценам:
- прайс-лист на видном месте;
- единая валюта (можно добавить опцию ее смены).
Кнопки социальных сетей – во второй половине платформы, по размеру меньше, чем функциональные (купить, заказать, получить промокод). Нужно разделить опции «поделиться в социальных сетях» и «перейти в группу магазина».
Правильный URL страниц по названиям разделов с соблюдением иерархии в строке его формулы – обязательное условие. Это важно не только для юзабилити интернет-магазина.
Навигация
Одна из самых популярных ошибок по части удобства на главной странице интернет-магазина – неправильное размещение строки поиска. Она либо отвлекает внимание, мешая перейти в карточку, либо спрятана узкой полоской на пестрой шапке.
Другие моменты, связанные с перемещениями пользователя:
- простое понятное меню без нагромождений разделов;
- логика распределения разделов;
- выделение текущего раздела в выскакивающем меню;
- заметные «хлебные крошки».
Подача
В текстовой части нужно качественное оформление: абзацы с отступом, подзаголовки, таблицы, списки там, где это уместно, картинки. Цвет фона в интернет-магазине за очень редким исключением должен быть белым, бежевым или кремовым. Темные и яркие тона отвлекают и утомляют. Со шрифтом та же история: либо весь черный, либо с добавлением к черной классике красного или зеленого (синего) для выделения важной информации. Больше 2 цветов шрифта – это уже много. Со стилями можно экспериментировать (до 3–4 вариантов).
Полезные мелочи:
- хорошо, если в адаптированной мобильной версии есть сокращенный вариант шапки (он показывается при прокрутке страницы вверх, демонстрируя телефон и логотип, но не закрывая половины экрана);
- большая шапка с хорошим изображением будет лишней и в десктопной, и в мобильной версии – полезное пространство экрана надо использовать эффективно;
- на длинных страницах хорошо работает на юзабилити кнопка возврата к началу;
- раздел контактов должен быть вынесен отдельно, и начинаться его страница должна не с рекламы или призыва, а с полезной информации (телефоны, почта, адреса, график работы);
- схема проезда должна быть и в подвале на главной странице, и в контактах.
Отображение страниц
Проверять юзабилити интернет-магазина надо минимум на 3 видах техники (компьютер, смартфон, ноутбук или планшет) и минимум в 4–5 браузерах. Только так можно убедиться, что ключевые страницы не растянуты длинными фразами за пределы экрана, и кликабельная кнопка «Купить» находится перед глазами покупателя. Понятно, что адаптированная мобильная версия уже должна быть.
Фото и изображения
Графика, выполненная по канонам юзабилити:
- несет полезную информацию или приятные эмоции;
- имеет нормальные размеры (не миниатюрная картинка, на которой ничего не рассмотреть);
- подписана;
- может увеличиваться по клику (актуально в карточках товаров для экономии места под описания);
- имеет расширение .jpg/jpeg или .png, использование .gif в интернет-магазине – моветон.
Для картинок, если их много, полезно сделать свою навигацию. Сами они должны быть пропорциональны странице и друг другу. Не стоит комбинировать на одной видимой площадке два совершенно разных размера фото, это отвлекает.
Формы
Минимум для продающего сайта – форма обращения пользователя и быстрой связи. Первая находится в разделе контактов и может появляться в карточках товара. Вторая – на всех страницах. На главной и в карточках полезно разместить форму а-ля «перезвоните мне», а в блоге – анкеты опроса.