Чек-лист по юзабилити интернет-магазина

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

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

• загрузка сайта быстрая (0-1 с);
• логотип размещен на каждой странице в одном и том же месте. Рядом – краткий, четко описывающий цели и задачи компании слоган;
• в верхней части каждой страницы расположен номер телефона, который становится заметным в первые 3 с;
• ссылки в текстовом контенте сайта одинаково выделены и кликабельны, ведут на корректные страницы;
• функция «Поиск» – в верхней части каждой страницы, он заметен в первые 3 с;
• на всех страницах цвет шрифта и цвет фона – контрастные, а выравнивание текста осуществлено по общему принципу;
• межстрочное расстояние меньше расстояния между абзацами;
• тексты отображаются корректно при любом масштабировании сайта;
• все элементы и ссылки, ведущие на форму обратной связи и любой другой способ связаться с менеджерами, должны снабжаться текстом, призывающим к действию: «Свяжитесь с нами сейчас», «Задайте нам вопрос» и др.;
• на каждой странице должно находиться коммерческое предложение и возможность быстрой связи с представителями компании. Пользователь не должен искать контакты для связи, они всегда должны быть у него на виду. Это повысит отклик аудитории, а, следовательно, и количество продаж;
• имеется страница с 404-й ошибкой, выполненная в общем дизайне магазина, отсюда можно перейти на главную страницу;
• в случае минимального расширения сайта (1024×768) при просмотре в популярных  браузерах (Internet Explorer, Mozilla Firefox, Opera) горизонтальная прокрутка в нижней части страниц отсутствует;
• сайт имеет фавикон;
• при наведении курсора на любую ссылку/кликабельный элемент, он должен выглядеть в форме руки (cursor hand).

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

• на главной странице представлен перечень основных услуг/продуктов компании;
• на главной имеется УТП в виде слогана, баннера или призыва к действию;
• пункты меню с описанием стоимости услуг/продуктов, способов оплаты и доставки должны легко находиться пользователями и становиться заметными в первые 2-3 с пребывания на странице;
• на главной не должно быть pop-up окон и звуковых эффектов, активизирующихся без действий пользователей;
• на главной странице должна быть контактная информация: email-адрес, номера телефонов (мобильные, городские), форма обратной связи, скайп, ссылки, ведущие на страницы компании в социальных сетях.

• основные пункты верхнего меню продублированы в нижнем меню сайта;
• в каталоге товаров – не более 8 пунктов;   
• список основных категорий товаров или услуг выводится на главной странице;
• выбранный пункт меню подсвечен и неактивный (некликабельный);
• если сайт имеет страницы выше 2-го уровня вложенности, «хлебные крошки» должны отображать/вести на все эти страницы.

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

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

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

• основное меню магазина содержит до 10 пунктов;
• разделы, сформированные по одному принципу, оформлены одинаково;
• в меню имеются ссылки на страницы «Новинки», «ТОП-продаж», «Скидки» и др.;
• на каждой странице каталога представлены товары, а также предложение и возможность тут же их купить;
• на странице товарного каталога блок с товаром содержит такой минимальный набор: название, описание, изображение и цена товара, логотипы акций, скидок, СТА-кнопка;
• в разделах, подразделах есть ссылки, ведущие в популярные разделы магазина.

• блок/кнопка корзины присутствует на каждой странице в одинаковом месте (как правило – верхний правый угол);
• блок «Корзина» является заметным элементом страницы, дизайн выполнен в ярких цветах;
• после того как товар добавляется в корзину, рядом с кнопкой «Купить»/«Добавить в корзину» (другой вариант СТА) выводится текст-уведомление «Товар добавлен в корзину»;
• после того как товар добавлен в корзину, блок «Корзина» внешне видоизменяется – выводится информация о том, что в корзине N товаров;
• если кнопка «Купить»/«Добавить в корзину» нажимается повторно, выводится предупреждающий текст о том, что такой товар уже есть в корзине, а также – предложение закончить оформление заказа или же – выбрать еще один такой товар;
• при наведении курсора на блок «Корзина» должен выводиться текст, описывающий содержание корзины и цены на добавленные товары;
• на странице корзины нет новостей, витрины других товаров, текстовой и баннерной рекламы, анимационных элементов и другой отвлекающей информации;
• страница корзины содержит информацию о нескольких способах оплаты и доставки, о способах связи с менеджером или представителем компании в случае возникновения вопросов;
• способов оформить заказ предлагается несколько: обычным способом (после авторизации на сайте), в один клик, после регистрации;
• процесс оформления заказа не прерывается в случае, если покупатель не зарегистрирован в магазине;
• если покупатель не зарегистрирован, от него требуется заполнить только поле «Имя» и «Email»;
• рядом с товаром есть предложения снизить его стоимость (скидки, промокод, купон, бонусная система и др.);
• после того как процесс покупки завершен, покупателю предлагается приобрести дополнительные товары (upsell).

• имеется физический адрес магазина;
• есть карта с четко отмеченным местонахождением компании, с описанием того, как лучше добраться;
• имеется не один рабочий email-адрес;
• указано время работы магазина и службы тех. поддержки.

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