Чек-лист помогает найти вопросы для проверки на конкретном сайте. Пункты зависят от задач, аудитории и устройств: два уровня меню, расположение слогана или контактов — варианты организации, а не универсальные требования. Ответы пользователей дополняют проверку; они не подтверждают фактическое качество товара или причинный эффект на продажи.
Основные моменты
- По главной странице сразу понятно, чему посвящен сайт.
- Удобство для новичков: простота, подсказки, помощь.
- Удобство для опытных: упрощенные процедуры, сохранение данных.
- Информация представлена в соответствии с регионом пользователя (геолокация).
- Нет лишней, отвлекающей информации (навязчивой рекламы, баннеров и т.д.)
- В случае, если есть несколько этапов в процессе выполнения задачи, то показаны все шаги и текущее положение пользователя в этом процессе.
- Пользователю не приходится вводить одну и ту же информацию дважды.
Структура сайта, навигация
- Контент разделён и структурирован.
- Пользователю всегда понятно, в каком разделе сайта он находится (подсветка активного пункта меню, хлебные крошки).
- Важные пути по сайту (такие, как покупка, подписка и пр. в зависимости от бизнес-целей сайта) предельно просты.
- Важная информация легко доступна со всех страниц сайта.
- По заголовку категории, страницы, блока можно понять их содержимое.
- Логотип является ссылкой на главную на всех страницах.
- Главное меню есть на всех страницах, в одном и том же месте (исключение может составлять процесс покупки).
- Пункты меню расположены в порядке убывания их значимости.
- Используется не более двух подуровней меню.
- Пункты, содержащие подменю, отличаются от остальных пунктов.
- Названия пунктов меню начинаются с заглавной буквы.
Структура страниц сайта
- Логотип расположен в одном и том же месте на всех страницах сайта.
- Слоган четко описывает цели сайта (он краткий и расположен рядом с логотипом).
- Самые важные блоки расположены на первом экране (в любом случае выше менее важных).
- Соблюдается баланс между информационными блоками и пустым пространством, что способствует восприятию сайта пользователями.
- Понятные и заметные заголовки, правильное использование цветов фона, рамок и пустого пространства позволяет визуально разделять страницу на заметные и логичные информационные блоки.
- Каждый блок можно охватить одним взглядом.
- Все кликабельные элементы выглядят очевидно кликабельными, а курсор мыши видоизменяется при наведении на них.
- Все некликабельные элементы выглядят некликабельными и курсор мыши не видоизменяется при наведении на них.
- «Цена — рядом с товаром»: все связанные элементы находятся рядом друг с другом.
- Значение иконок и графических элементов интуитивно понятно.
- Элементов, привлекающих внимание, мало (анимация, крупные, цветные тексты и прочее).
Поиск (при необходимости)
- Поле поиска доступно на любой странице сайта.
- Поле поиска находится в ожидаемом месте.
- На странице одно поле поиска.
- В поле поиска работает подсказка.
- Поиск проверяет орфографические ошибки и ищет синонимы.
- Результаты поиска легко воспринимаются, отсортированы по релевантности\дате\алфавиту.
- Если поиск дал нулевой результат, то пользователю подсказываются идеи о том, как можно отредактировать запрос.
- Пользователю показывается количество результатов поиска.
- Поиск охватывает весь сайт целиком, если не предусмотрен поиск по определенным разделам сайта.
- В результатах поиска выводится основная информация о найденных объектах.
Текст
- Изложение соответствует принципу перевернутой пирамиды: сначала важное, потом остальное.
- Текст лаконичен, без «воды».
- Текст структурирован: заголовки, подзаголовки, абзацы, таблицы.
- Кегль основного текста для чтения — 16px (достаточно крупный).
- Выравнивание крупного абзаца — только по левому краю.
- Заголовок ближе к «своему» абзацу, чем к предыдущему.
- Заголовки — подсказывают «о чем дальше».
- Кегль заголовка тоже больше кегля подзаголовка в ~1,5 раза.
- Кегль подзаголовка больше кегля текста в ~1,5 раза.
- Верхний регистр используется по минимуму или не используется.
- Шрифты единообразны на всех страницах, читабельны и контрастны.
- Ссылки легко различимы среди текста по цвету или форме (подчеркиванием).
- Разнообразие цветов должно быть оправданным.
- Для улучшения восприятия длинные числа разбиваются на разряды неразрывным пробелом (или точкой).
Ссылки и кнопки
- Текст ссылки (анкор) или около ссылочный текст обозначает объект, к которому она ведёт.
- Все ссылки визуально отличаются от остального текста.
- Скриптовые ссылки (которые не перезагружают страницу) подчеркнуты пунктиром.
- Ссылки достаточно длинные, чтобы по ним было легко кликнуть.
- Ссылки для скачивания файлов визуально отличаются от ссылок на другие страницы (например, иконками).
- Кнопки используются для действий (заказать, купить, войти, положить в корзину и т.д.)
- Кнопки похожи на кнопки: форма, цвет, текст, реакция на курсор.
- Кнопка с целевым действием только одна на странице или она очень явно выделена по сравнению с другими (так называемый call-to-action).
- Текст на кнопке — призыв к действию: текст в инфинитивной форме глагола (пример: найти), а не другую часть речи либо форму глагола (пример: готово).
- Активная область кнопки совпадает с ее видимым размером или больше.
- Между кнопками, стоящими рядом, есть пустое пространство, щелчок по которому не вызывает действий.
- По наведению на кнопку меняется ее отображение, это призывает пользователя сделать клик.
- Недоступные кнопки и ссылки не исчезают с экрана, а становятся заблокированными.
Формы
- Формы максимально лаконичны
- В целевых формах (таких как регистрация, оформление заказа) есть только обязательные поля.
- Если полей много, они группируются по смыслу; у групп есть подзаголовки.
- При открытии страницы с формой, курсор перемещается в первое поле.
- Поле, в котором находится фокус, визуально выделено.
- Если заполнение формы разделено на несколько шагов, показано на каком шаге он находится сейчас и сколько осталось шагов.
- Данные сохраняются в полях до того, как пользователь окончил процесс заполнения формы (если пользователь случайно ушел со страницы).
- Текст результирующей кнопки соответствует цели заполнения (например «Зарегистрироваться», «Получить бонус» и пр.)
- Поля, заполнение которых может вызвать вопросы, снабжены подсказками (например, даты, номера телефонов и пр.)
- Обязательные поля явно отличаются от необязательных.
- Подписи полей соответствуют смыслу полей.
- Наиболее вероятные значения некоторых полей формы по умолчанию заполнены.
- Подписи полей и других элементов единообразны (либо все с двоеточием в конце, либо все без двоеточия).
- У пользователя есть возможность вернуться на шаг назад, чтобы откорректировать введенные данные.
- Проверка на правильность введенных данных происходит без перезагрузки страницы, сразу после ввода данных.
- Сообщения об ошибках информативны (плохо: «Вы не заполнили все обязательные поля»; хорошо: «Укажите, пожалуйста, электронную почту»).
- Сообщение об ошибке располагается рядом с полем, в котором совершена ошибка.
Адаптация по устройства
- Внешний вид сайта адаптируется под разные устройства.
- Если мобильная версия сайта имеет ограниченный функционал, то имеется возможность перейти на полную версию.
- Клик по номеру телефона должен начинаться звонок.
- Телефон, режим работы, email в шапке сайта.
- Все блоки сайта расположены и перегруппированы таким образом, чтобы пользователь мог прочесть текст и выполнить все действия без дополнительного увеличения зон.
Вопросы для проверки с пользователями
Есть специализированные сервисы (например, askusers.ru), где обычные люди, не специалисты в области интернет-маркетинга, отвечают на ряд вопросов по юзабилити сайта. Их ответы помогают понять проблемные места вашего сайта с точки зрения обычного посетителя. Перечень подобных вопросов приведен ниже:
1. Повысить удобство пользователей сайта
- Посмотрите основные страницы сайта. Назовите основные моменты, которые вам не понравились и почему? Предложите 3-5 решений, которые помогли бы сделать данный сайт удобнее.
- Посмотрите предложенный сайт и еще 4 сайта данной тематики. Составьте свой рейтинг, проставив каждому из сайтов оценку от 1 до 10. Обоснуйте оценки.
- Какая информация является, по-вашему, самой важной на сайте? На какой/каких страницах она подробно раскрыта? Сколько нужно кликов, чтобы добраться до нее с главной/внутренней страницы?
- Насколько информативны заголовки? Соответствуют ли изображения данной тематике? Можно ли понять содержимое страницы, не читая текст целиком? Что можно улучшить в оформлении конкретных страниц?
2. Найти слабые места в воронке продаж
- Найдите на сайте самый дешевый/популярный товар или услугу и попробуйте заказать online. Все ли получилось? Какие сложности возникли? За счет чего можно было бы сделать оформление заказа удобнее?
- Попробуйте заказать online одну и ту же услугу/товар на данном сайте и сайте конкурента. На каком из сайтов удобнее заказывать и почему?
- Какими способами можно оформить заказ на сайте. Перечислите все. Достаточно ли вам представленных вариантов? Все ли из них для вас понятны? Какие еще способы вам были бы удобны?
- Напишите 10 поисковых запросов с помощью которых вы бы искали этот сайт в Яндексе/Гугле, исключая брендовые запросы с названием компании и урл-адресом сайта.
3. Повысить доверие к сайту
- Данный сайт вызывает у вас доверие? Стали бы вы пользоваться услугами этой компании или обратились в другую? Почему? Оцените свой уровень доверия к данному сайту по десятибалльной шкале.
- Попробуйте найти в поиске Яндекса сайт конкурента, который вызывает у вас больше доверия? Почему? Укажите несколько основных причин.
- Сколько товаров и/или услуг предлагает компания? Это много или мало? Качественные ли товары/услуги продаются на сайте? Почему вы так решили?
- Соответствует ли цветовая гамма сайта его тематике? Опишите дизайн сайта тремя тезисами. Сравните дизайн этого сайта с вашими любимыми сайтами или понравившимися сайтами данной тематики.
- Оцените удобство восприятия контента нескольких страниц сайта по десятибалльной шкале.
4. Повысить привлекательность торгового предложения
- Найдите на сайте интересующую вас услугу или товар. Какой информации для вас, как покупателя, не хватает на сайте? Какая раскрыта не полностью? А какая излишняя?
- Данный сайт вызывает у вас доверие? Стали бы вы пользоваться услугами этой компании или обратились в другую? Почему? Оцените свой уровень доверия к данному сайту по десятибалльной шкале.
- Перечислите 5 задач, которые можно решать с помощью этого сайта? Каждую из задач оцените по десятибалльной шкале в зависимости ее степени важности/актуальности для вас.
- Укажите 5 ваших критериев выбора заказанного товара или услуги. Расположите их в порядке значимости для вас. Предложите несколько решений, которые подтолкнули бы вас заказать товар на этом сайте.
5. Снизить процент отказов
- К какой тематике относится данный сайт? Как быстро вы это определили? Соответствует ли содержимое сайта ожиданиям от сайта данной тематики? В чем именно это выражается?
- После 3 секунд на сайте вам хочется остаться на нем или сразу его закрыть? Почему? Куда вы посмотрели в первую очередь (3 элемента сайта)? Куда вам хочется нажать в первую очередь и почему?
- Представьте, что вы перешли на сайт по запросу «ВАРИАНТ ЗАПРОСА». Соответствует ли данный сайт вашим ожиданиям. Что вы рассчитывали увидеть? Чего, по-вашему, не хватает на этой странице?