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