Чек-лист проверки UX

Бесплатный аудит вашего проекта по чек-листу идеального интернет-магазина.

1. Общие факторы, производительность

Скорость загрузки

Проверка «узких мест» по Google PageSpeed. Время загрузки не должно превышать 2 секунд. Учесть: размер изображений, подключение скриптов, сжатие данных, наличие кэширования, и т.д.

Подстройка под регионы

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

Адаптивность

Сайт должен быть адаптивным и корректно отображаться

На мобильных устройствах;
В основных браузерах, с разным разрешением экрана;
Отсутствие горизонтального скролла на всех основных разрешениях.

Call to Action

На каждой странице сайта должна иметься возможность совершить действие — купить, заказать услугу, заказать обратный звонок, подписаться на обновления, задать вопрос…

Все СтА должны быть выделены и визуально очевидны. Кнопки крупные, подписи понятные и содержать указание на целевое действие, ссылки должны быть выделены.
Основной СтА — самый заметный. Главный призыв (кнопка «купить», переход к следующей стадии оформления заказа, регистрация пользователя и т.д.) должен быть заметнее остальных, и располагаться в наиболее удобном для пользователя месте (см. вебвизор и тепловые карты)

Единый и предсказуемый интерфейс

Сквозные элементы: хедер, футер, главное меню и так далее, должны, от страницы к странице, выглядеть одинаково.

Логотип — слева вверху, в центре не желательно. Он является ссылкой, ведущей на главную страницу. На самой главной, клик по логотипу не перезагружает страницу.
Контакты — справа вверху;
Поиск — слева, или по-центру вверху.

Понятность, однозначность

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

Минимально необходимое количество контактов

Слишком большой выбор номеров телефонов, контактных лиц, адресов, может привести к нежеланию пользователя делать какой-либо выбор вообще.
Крайне желателен номер 8-800

Карта сайта

В одном из сквозных элементов (как правило, в футере), должна быть ссылка на карту сайта.

Фавикон

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

В идеале должно быть одно меню. Навигация должна быть логически и структурно организована. Названия должны быть логичными, пользователь должен понимать содержимое раздела до того, как туда попадет.

Правило 7(+\-)2: Оптимальное количество пунктов и подпунктов меню — 7;
Главное меню должно быть сквозным, включая в себя «контакты», «доставку и оплату», каталог. Посетитель на любой странице должен иметь возможность за 2 секунды обнаружить интересующую его информацию.
Информация не должна дублироваться. В двух разных меню не должно быть одинаковых пунктов;
Пункты меню, содержащие вложенные подменю, должны быть выделены;
Пункт, на соответствующей которому странице находится пользователь, должен быть выделен и неактивен. Клик по нему не должен приводить к перезагрузке страницы.
В главном меню не должно быть больше двух уровней вложенности;
Контент дропдаунов вертикально должен помещаться в экран;
Наличие «хлебных крошек». Их элементы должны быть ссылками.

Поиск

Должен находиться там, где его ожидает увидеть пользователь — справа вверху, или вверху, по-центру страницы.
Поиск должен быть один: не нужно заставлять пользователя гадать, «зачем второй поиск?», «который из них основной?», и т.д.
С поиском должно быть удобно взаимодействовать. Он должен запускаться по клику на кнопке справа от поля ввода и просто, по нажатию «Enter».
В запросах пользователя автоматически исправляются опечатки, орфографические ошибки, неправильная раскладка клавиатуры (или предлагаются исправления), в результаты поиска подбираются синонимы.
Ширина инпута поиска ограничивается 30 знаками, фактически, длина запроса не ограничивается.
Хорошая практика — использование «живого» поиска: по мере набора в выпадающем списке, под инпутом выводится релевантный список результатов. Список меняется «на лету», по мере набора.
В поисковой выдаче пользователь должен видеть:
- Количество найденных результатов
- Тип сортировки результатов, с возможностью его изменить
- Основную информацию о результате поиска (напр.: контекст вхождения текста запроса)
При отсутствии результатов поиска, пользователю должно быть показано несколько ближайших результатов, или разделов сайта
- рекомендуется возможность уточнить запрос;
- предложение воспользоваться расширенным поиском (если есть), с выбором нескольких параметров;

Понятная терминология

В меню, кнопках и других интерактивных элементах должны использоваться понятные пользователю термины. Они должны указывать на конкретное действие, производимое элементом.

Ненавязчивость

На сайте не должно быть принудительно воспроизводимого контента: фоновой музыки, автоматически включающихся видеороликов (особенно со звуком). Исключение — фоновое видео, например, в слайдере.

Действия пользователя не должны блокироваться

Выполнение скриптов не должны блокировать страницу (async).
- Поп-апы должны иметь кнопку закрытия (крестик) и автоматически закрываться по клику на области вне окна.
- Если при заполнении формы пользователь допускает ошибку, и для продолжения работы необходимо внести правки, должно быть показано в каком поле и какая ошибка допущена.

Мгновенный скроллинг

На длинных страницах должна быть кнопка «Наверх», которая скроллит контент к началу.

Flash

Минимальное использование. Лучше полный отказ от использования этой технологии.

2. Дизайн

Уместность и умеренность

Цветные, крупные надписи, циклическая анимация могут использоваться минимально, или вовсе не использоваться.
Для проектов финансовой направленности (кроме, пожалуй связанной с криптой), более уместен строгий, солидный стиль. И наоборот, он не подойдет для магазина молодежной одежды.

Контрастность и доступность

Текстовые и интерактивные элементы сайта, должны иметь коэффициент контраста к фону около 3.0, согласно WCAG

Учет особенностей восприятия цвета

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

Пустое пространство

Элементы и блоки, должны отделяться пустым пространством. Должен соблюдаться закон близости.

Кликабельные элементы

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

Неактивные (отключенные) элементы

Отключенные ссылки и деактивированные элементы, в текущий момент недоступные оператору, не должны скрываться. Они должны быть показаны как неактивные, цветом, прозрачностью и т.п.
При наведении на такой элемент должна появляться подсказка, почему элемент не активен.

Учет траектории сканирования контента

Наиболее важные элементы сайта (УТП, поиск, контакты, заголовки) должны быть размещены по схеме в виде буквы F. По этому маршруту пользователи просматривают контент согласно исследованиям.
Может быть использован Z-паттерн.

Визуальные ссылки на последующий контент

Пользователь должен видеть, что ниже основного блока, есть еще контент.
В этом случае, он сделает скролл, к следующему блоку контента.
Аналогично, при использовании блока, с горизонтальным скроллом контента, на экране должны отображаться границы соседних блоков.

3. Оформление контента

Читабельный текст

В текстах отсутствует «вода», длинные вступления, перегруженные предложения и ненужная информация. Все что может быть сокращено, должно быть сокращено;
Информация должна быть изложена так, чтобы быть понятной ЦА сайта;
Из содержания заголовка должно быть понятно о чем идет речь в абзаце;
Заголовок не должен заканчиваться точкой.

Форматирование

Длинный текст разбивается на абзацы, содержащие смысловые блоки;
Интервалы между абзацами в 1,5 – 2 раза больше межстрочного интервала;
Для перечисления используются нумерованные и ненумерованные списки, интервал между элементами списка, больше в 1,5 раза межстрочного интервала;
Выделяются ключевые слова и фразы (по смыслу, а не по SEO). Но в меру, чтобы текст не казался пестрым.
Сплошной поток текста должен разбиваться иллюстрациями, цитатами, врезками;
Выключка текста, на всех страницах должна быть одинаковая. Предпочтительно влево.
Выравнивание по ширине, возможно для узких колонок. В широких абзацах недопустимо.
Оптимальная ширина строки — 60-70 символов, вместе с пробелами.
Капс не используется ни для заголовков, ни для строчного текста.
Интервал между подзаголовком и следующим за ним текстом, должен быть меньше, чем до абзаца, идущего перед ним.
Заголовок страницы должен идти непосредственно перед контентом, не захватывая области, к нему не относящиеся (например блоки с контекстной навигацией);
В заголовках и подзаголовках должна существовать визуальная иерархия. h1 крупнее h2, h3 крупнее h4 и т.д.

Текстовые материалы

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

Шрифт

Единообразие. На всех страницах используется одинаковый набор шрифтов: для элементов одного уровня — один шрифт. Максимально допустимое число используемых шрифтов — 3.
Цвет текста и цвет фона должны сочетаться и иметь достаточный контраст.
Цвет ссылок не используется для обычного текста;
«Выворотка» — светлый текст на темном фоне, очень плохо читаема и не должна использоваться для объемных текстов.
Для основного текста должен использоваться достаточно крупный размер шрифта, оптимальный размер — 16 px. Необходимо учитывать, что эта цифра относительна, и для разных шрифтов результат может быть разный.
При масштабировании страницы в браузере, шрифт не должен терять читаемость;

Изображения и видео

Изображения должны быть качественными — четкими, без артефактов и ватермарков. Качество должно сохраняться вне зависимости от устройства: будь то десктоп или мобильный телефон.
Изображения должны нести смысловую нагрузку, и подтверждать или иллюстрировать какую-либо информацию.
Размеры иллюстраций разного типа должны быть одинаковы во всех разделах.
Видеоконтент должен быть управляем и масштабируем. Оператор должен иметь возможность самостоятельно запустить воспроизведение, остановить, развернуть во весь экран, и т.д. Не должно быть автозапуска.

4. Кнопки

Релевантные надписи

Кнопка служит для выполнения какого-либо действия, в контексте страницы. В случаях, когда это необходимо, надпись на ней должна прямо на это указывать.

Кликабельность

Вся область кнопки должна быть кликабельна. Не только надпись.

CtA

Текст на кнопке должен однозначно информировать об осуществляемом действии.
Оптимально это должен быть инфинитив «Купить», «Заказать», «Скачать», «Подписаться», «Отправить».
Плохо — надписи, которые можно неоднозначно трактовать: «Поехали», «Готово», «Дальше» и т.п.

Кнопки отмены, удаления и очистки форм

Должны быть расположены на достаточном удалении от кнопок отправки или подтверждения.
Должны иметь вид отличный от кнопок основного действия.

5. Ссылки

Релевантные надписи

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

Удобство клика

Текст ссылки должен быть достаточно длинный, чтобы оператор мог на него кликнуть. Если ссылка внутри текста, то в нее должно входить минимум два слова.

Стандартизация вида

Ссылки должны быть оформлены в привычном для пользователя виде — цвет, отличный от цвета основного текста, например — синие.
Иметь подчеркивание. Не обязательно в виде текстового атрибута.
Менять цвет при наведении.
При наведении на ссылку, курсор должен менять свой вид на pointer.
Посещенная ссылка должна менять свой цвет.

Ссылки контекстного действия

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

6. Обратная связь, контакты

Все контакты должны быть представлены в текстовом виде, чтобы их можно было скопировать в буфер обмена.
Телефоны и другие основные контактные данные должны быть размещены в одном и том же месте, на всех страницах сайта.

Страница «контакты»

Каждая точка продаж, офис или филиал должны отображаться отдельным элементом. Представление не должно представлять собой сплошной список или перечисление, разделяемое запятой.
Особое преимущество — наличие карты с отмеченными филиалами, с функционалом поиска по району или прокладкой маршрута от текущего положения пользователя.
Преимущество — фильтр по времени работы, ассортименту, работой с юр./физ. лицами.
Исчерпывающая информация о филиале включает:
- Точный адрес, включая индекс, номер корпуса, строения, литеру.
- График работы, а так же информацию, как связаться/сделать заказ в нерабочее время.
- Телефоны всех отделов и менеджеров, работающих с клиентами, по необходимости — телефоны бухгалтерии и отдела по работе с поставщиками.
- Рабочие аккаунты в мессенджерах, адреса электронной почты, по которым происходит взаимодействие с контрагентами.
- Адреса пабликов и страниц в соцсетях, если таковые есть.
- Информация о расстоянии до ближайшей станции метро, остановки или какого-то ориентира.
- Схема проезда (если нет встроенной карты)
- Информация о наличии парковки.
- Фотография входа в здание, фото окружающей местности, чтобы клиенты могли сориентироваться на месте.
Возможность распечатать страницу на принтере.
Контакты конкретных людей, взаимодействующих с клиентами, с фотографией.

Отзывы и комментарии

Авторизация через социальные сети. Незарегистрированных на сайте пользователей подтолкнет к тому, чтобы как-то отметиться.
Защита от спама. Капча, проверка на отсутствие посторонних ссылок, нецензурных выражений.

Форма обратной связи

Форма должна находиться в отдельном, заметном блоке. Обычно — на странице контактов.
Формой должно быть легко пользоваться, авторизация не требуется. Достаточно контактной информации (телефон, контактный email).
Введенные данные не должны пропадать при случайном закрытии или перезагрузке страницы.
Форма должна давать возможность ввода объемного сообщения. Должна существовать возможность быстрого просмотра введенного текста, например, появляется скролл-бар для прокрутки.
Должна существовать обратная связь, после отправки страницы, на email пользователя приходит сообщение о том, что сообщение получено. В случае, если пользователь оставляет номер телефона, отчет приходит на SMS.

Онлайн-консультант

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

Регистрация на сайте

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

7. Интернет-магазины

Интернет-магазины дополняются блоком из внешнего чек-листа https://habr.com/ru/company/sibirix/blog/224627/