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