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