Данный чек-лист разработан с целью помочь юзабилити-специалистам не забыть важные моменты в
процессе проведения аудита. Данный чек-лист стоит использовать как дополнительную помощь в проведении аудита.
(последнее обновление 23.10.23)
● Используется единый стиль интерфейса для всего сайта (шапка, футер, меню и т.д.).
● Логотип компании расположен в верхней части с левой стороны. Он кликабелен на всех страницах, кроме главной. При клике перебрасывает на главную страницу.
● Оцените общее впечатление о сайте. Дизайн не должен вызывать отторжение.
● Пользователь видит, на какой странице он находится и как вернуться на уровень выше за счет “Хлебных крошек”. Последнее звено цепочки неактивно.
● Однозначность и понятность. Попав на любую страницу сайта, пользователь за 3 секунды понимает, что это за сайт, какой тематики: благодаря слогану и изображениям в шапке, заголовку страницы и т. п.
● Мгновенный скроллинг. На длинных страницах, которые занимают несколько экранов, предусмотрена плавающая кнопка «Наверх», «В начало», которая перебрасывает пользователя на первый экран.
● Отсутствие лишней анимации.
● Отсутствие нагромождения элементов. Элементы и их блоки чередуются с пустым пространством; нет чувства нагромождения, пестроты на страницах.
● Каждый блок можно охватить одним взглядом, без прокрутки страницы.
● Меню присутствует на каждой странице сайта в одном и том же месте. Оно должно быть доступным и удобным.
● В адаптированной версии под мобильные устройства чаще всего делают скрытое меню, которое отображается при нажатии на соответствующую кнопку.
● Стандартизация. Пункты меню названы привычным для посетителя образом (и снова принцип «Не заставляйте меня думать») – «Контакты», «О компании», «Доставка» и т. д., без лишнего креатива.
● Выделение пункта, где находится пользователь. Такой пункт всегда выделен и неактивен (не перезагружает страницу при нажатии).
● Присутствует запоминающийся фавикон, который будет отображаться во вкладке браузера и в выдаче Яндекса.
● Картинки высокого качества, но небольшого веса.
● Иконки должны соответствовать объектам. Значение иконок и графических элементов интуитивно понятно
● Должно быть только одно поле поиска и Оно находится в привычном месте..
● При нажатии внутри отображается курсор, поле становится активным.
● Удобство при использовании (активизация как при нажатии на кнопку “Поиск”, так и на клавишу Enter; автоматическое исправление ошибок в тексте запроса и т. д.).
● Применение “живого поиска”. При начальном вводе запрашиваемой информации, под ним появляется список релевантных результатов.
● Если результаты поиска отсутствуют, пользователю предлагается несколько вариантов запросов по приближенной теме, рекомендуется отредактировать запрос или использовать расширенный поиск.
● Наличие расширенного поиска, если в этом есть необходимость.
● В шапке и в футере сайта должны быть указаны контакты компании.
● Всплывающие окна должны легко закрываться, чтобы также не раздражать пользователей.
● Быстрый доступ к кнопкам CTA. Возможность купить товар/заказать услугу/заказать обратный звонок есть на каждой странице сайта.
● Кроме отправки на почту, информация с формы должна сохраняться в базе(админке)
● E-mail, на который приходят данные из веб-формы, можно менять в административной панели.
● Не использовать одни плесхолдеры, желательно дублировать в Lable.
● Обязательная валидация форм
● Для полей, предполагающих загрузку файлов, прописан атрибут accept, определяющий тип загружаемых документов.
● Форма должна запрашивать только важную информацию. Придерживаться ввода только необходимых данных.
● Если все поля обязательны для заполнения, рядом с их названиями не выводятся звездочки — символ *
● Для авторизованного пользователя в поля формы автоматически подставляются все известные о посетителе данные.
● Во время отправки формы на медленном канале пользователь не может менять в ней данные. Желательно визуально показать, что форма заблокирована. Один из вариантов — прелоадер
● Кнопка отправки данных неактивна, пока не активирован чекбокс «Согласиться с правилами», «Пользовательское соглашение»
● Кнопка отправки данных неактивна, пока все введенные данные не прошли положительную валидацию.
● Не стоит применять в изобилии яркие кричащие цвета.
● При наведении курсора на активные элементы он видоизменяется (со “стрелочки” на “руку”).
● Текст структурирован и легко читается. Он разбит на небольшие абзацы, имеются подзаголовки, маркированные списки, таблицы, картинки, важные по смыслу слова выделены жирным.
● Оптимально выбранный оттенок шрифта и фона - они должны быть контрастны и не сливаться друг с другом.
● Для удобства чтения, не писать цифры словами, а большие числа разделять пробелами (1 202 700).
● Для всех страниц применяется один шрифт.
● Отсутствие точки в заголовках и подзаголовках.
● Клик по номеру телефона должен начинаться звонок
● Если мобильная версия сайта имеет ограниченный функционал, то имеется возможность перейти на полную версию
● Внешний вид сайта адаптируется под разные устройства
● Телефон, режим работы, адрес в шапке сайта
● Все блоки сайта расположены и перегруппированы таким образом, чтобы пользователь мог прочесть текст и выполнить все действия без дополнительного увеличения зон
● кликабельная ссылка на почту
● Проверить добавку товара в корзину. После добавления товара в корзину выводится визуальное подтверждение. При добавлении товаров из каталога в блоке корзины обновляется их количество.
● Товары корректно фильтруются.
● Сумма заказа рассчитывается с учетом купонов и скидок, стоимости доставки, комиссий и так далее.
● Пересчет сумм при изменении количества. Обратить внимание на то, чтобы было невозможно поставить отрицательное значение.
● Из корзины должна быть ссылка для возврата пользователя в каталог товаров.
● На странице корзины не должно быть мини-корзины.
● На странице корзины есть работающие ссылки для удаления товаров.
● По клику на ссылку для удаления товар удаляется без перезагрузки страницы и происходит пересчет суммы заказа.
● При удалении всех товаров в корзине выводится сообщение «Пока корзина пуста» или аналогичное, а шапка таблицы списка и элементы вывода суммы скрываются.
● Если предусмотрено сохранение адресов доставки для авторизованного пользователя, выводится поле для выбора сохраненного или создания нового адреса.
● При сохранении в системе заказ выводится у пользователя в личном кабинете на странице «История заказов» с корректным статусом и данными.
● При успешном оформлении на указанный пользователем e-mail направляется письмо с информацией о заказе и чеком.
● При оплате заказа на e-mail администратора направляется письмо с информацией о новом оплаченном заказе.
● Если для оформления заказа необходима регистрация, для неавторизованного пользователя выводится форма ленивой регистрации, ссылка на регистрацию, а также ссылка на авторизацию.
● При переходе к оплате передается выбранный способ оплаты.
● Корректный пересчет суммы заказа с учетом способа доставки.
● При прерывании заказа на этапе оформления товары не удаляются из корзины.
● После успешной оплаты заказа онлайн пользователь переводится на страницу с сообщением о том, что и за сколько оплачено, и с дальнейшими действиями. В случае ошибки оплаты указывается, как предпринять повторную попытку.
● При успешном оформлении заказа товары удаляются из корзины.
● Возможность сделать быстрый заказ («заказ в 1 клик», заказ обратного звонка и т. п.)
● Интересные предложения. В каталоге предусмотрены такие категории, как «Распродажа», «Акции», «Новинки», «Популярное» и т. д.
● Заметность ценника. Цена хорошо заметна, написана крупным кеглем или выделена иначе.
● Указание причин отсутствия цены. Если цена не указывается, то на месте ее расположения сообщается причина отсутствия цены («Товар снят с производства», «Цена пока неизвестна») или рекомендация уточнить стоимость у менеджера. В этом случае здесь же размещены контакты менеджера или ссылка на них.
● Информация о доставке и оплате. Способы, примерная стоимость и сроки, либо ссылка на соответствующий раздел.
● Никакой надуманности! Блоки «Сопутствующие товары» и «Аналогичные товары» заполнены действительно подходящими товарами, а не беспощадным рандомом.
● Сигнал о том, что товар уже в корзине. После добавления товара в корзину кнопка «Купить» меняет свой цвет и надпись (например, «Товар уже в корзине» или «Купить еще»), или же рядом с ней появляется информация, что товар добавлен в корзину.
Если у Вас есть вопросы или предложения по данному чек-листу, просьба написать нам, нажав кнопку ниже.
Написать нам