Заказать услугу
  • +38 099 227-70-70
  • +38 097 770-63-63

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

Юзабилити чек лист

В дословном переводе слово «юзабилити» означает – «удобство в использовании», «возможность быть использованным». По отношению к 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-адрес;
  • указано время работы магазина и службы тех. поддержки.

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

Посты этой рубрики посвящены инструментам и стратегиям интернет-маркетинга, призванным увеличить конверсию сайта. Статьи будут интересны и полезны нынешним и будущим владельцам онлайн-бизнеса.
Интересуют последние веяния в дизайне сайтов и айдентики? Хотите правильно сочетать цвета и шрифты? Тогда вам сюда.
В океане мира веб мы чувствуем себя вольготно и можем порой бросить небрежную фразу: «Знаем, плавали». В рубрике «Разбор заплывов» специалисты студии WebАкула делятся не только своими опытом, наблюдениями, выводами, но и практическими советами. На примерах реальных проектов мы окунемся в глубины интригующих вопросов веб-дизайна, интернет-маркетинга и электронной коммерции.
Рубрика поможет разобраться с базовыми терминами интернет-маркетинга, веб-разработки и дизайна. Статьи пригодятся любознательным индивидуумам, которым не безразлична тема сайтостроения.
Мы рады познакомиться и поделиться информацией о насыщенных буднях и ярких выходных компании WebАкула с нашими клиентами, читателями и случайными «прохожими». Заходите, располагайтесь, чувствуйте себя, как дома :)