← НАЧИНАЮЩЕМУ / статья
Что такое эвристики и как ими пользоваться
Эвристики — это совокупность приёмов и методов, облегчающих и упрощающих решение задач. Это лайфхаки, с помощью которых мозг человека избегает долгих вычислений и бесконечного углубления в данные.
В юзабилити существует 10 заповедей эвристик, сформулированных Якобом Нильсеном.
Это своеобразный чеклист, по которому проводится анализ любого цифрового продукта. Разберитесь и используйте его в своей работе.
В начале прям так и идёте:
- открываете страницу сайта
- читаете каждый пункт эвристик и смотрите на странице (функционале), если/нет на сайте
- результат заносите в отчёт
Внимательно прочитайте. Привожу примеры реализации этих утверждений. Так гораздо проще понять несколько абстрактные формулировки.
Формулировки могут отличаться, но суть не меняется.
1. Ясный статус, видимость состояния системы
Юзер в любой момент времени должен знать/понимать где он, что происходит (произошло), что делать дальше.
Примеры реализации:
- Система пишет: "Заказ принят" или "Сообщение отправлено". И любые сообщения на темы: Завершена ли загрузка? Прошел ли платеж? Когда приедет курьер? и т.п.
- Подсветка текущего пункта меню или количества товаров в корзине
- Любые прогрессы (пошаговое заполнение форм и т.п.)
- Блокировка кнопок на время отправки
Система должна всегда и вовремя информировать пользователей о происходящем посредством соответствующей обратной связи в течение разумного времени.
2. Элементы из реального мира
Иконки ассоциируются с чем-то из реального мира
Примеры реализации:
- иконка лупы — Поиск
- иконка тележки — Корзина
- иллюстрации еды похожи на еду из реального мира
Дизайн должен говорить на языке пользователя. использовать слова, фразы и понятия, знакомые ему, а не внутренний жаргон. Дизайн должен следовать принятым в реальном мире правилам, чтобы информация отображалась в естественном и логичном порядке.
Когда нужно отобразить иконкой что-то абстрактное, а не материальное, стоит поискать ближайший материальный объект. Если нужно обозначить давление в шинах, попробуйте отобразить манометр, шину, насос…
Попробуйте метод ассоциаций: попросить коллегу без слов объяснить термин
3. Контроль и свобода
Примеры реализации:
- кнопки Назад / Домой
- клик по лого — переход на Главную
- клики по крошкам — переходы по подразделам
- кнопки Откатить / Назад / Отмена / "Вернуть всё в зад"
- вернуть удалённый товар в корзине
- на модалках/формах есть Отмена / Закрыть / Х
- есть возможность повтора рутинных операций ("повторить заказ")
- полный контроль над операциями из нескольких шагов (Покупка / Бронирование) и Отказ / Откат / Изменение на любом шаге
4. Интуитивное управление, последовательность и стандарты
Консистентность (согласованность друг с другом, непротиворечивость).
Не увеличивайте когнитивную нагрузку на юзера. Все элементы интерфейса работают предсказуемо, согласно обычной/подразумеваемой логике.
Примеры реализации:
- кнопка Купить — кладёт в Корзину, а не делает что-то ещё необычное
- "Главная" (дефолтная) кнопка расположена справа от Назад/Отмена, если по логике дальше идёт действие, которое продвинет юзера "вперёд"
- все "Главные" (дефолтные) кнопки должны быть в едином стиле
Все схожие элементы ведут себя согласно ожиданиям пользователей. Одинаковые функции объясняются с помощью одинаковых средств.
5. Предотвращение ошибок
Примеры реализации:
- маски ввода
- подсказки в полях
- переспрашивать на удалении
- на мобильных правильная клавиатура на полях ввода
Подсказки должны располагаться там же, где пользователь выполняет действия по подсказкам. Не на отдельной странице, не в «подвале», не в почте, а в непосредственной близости к элементу интерфейса
Не допускайте того, чтобы пользователь случайно поделился личной информацией.
Стоит предупредить его перед тем, как он соглашается на рассылку или передает свои данные в какую-либо базу.
Мы не должны дать пользователю совершить действие без предупреждения или ограничения, должны помочь пользователю сделать действие без ошибки.
Лучше хорошо оформленного сообщения об ошибке — только отсутствие ошибки. Либо измените условия, провоцирующие ошибки, либо дайте пользователям подсказку заранее, чтобы он ее не совершил.
6. Узнавание, а не вспоминание
Примеры реализации:
- предзаполнение форм
- запоминание история поиска/просмотра
- инфа о доставке сразу на карте
- стрелки листания
- важные / частые кнопки всегда под рукой
- перекрёстные ссылки
- ссылки на Справку и Помощь
Пользователь не должен вспоминать информацию из одной части интейрефса, когда он находится в другой.
7. Гибкость и эффективность использования
Ускорение работы с интерфейсом за счёт разных штук. Основные действия легко доступны на разных экранах (адантив).
Примеры реализации:
- кнопка Купить в 1 клик
- горячие кнопки для ходовых операций
- авторизация через соцсети и всякими способами
- в чате частые вопросы с ответами, в поиске подсказки
- оформление покупки без предрегистрации
- закрыть окно по Х и по Esc
8. Эстетика и минимализм
Примеры реализации:
- избыток ярлыков / иконок / кнопок
- лишние украшательства
- куча баннеров и лишнего текста (отвлекают юзера)
- повторяющиеся блоки на разных страницах
- лишние элементы на страницах — зачем он? нужен ли он здесь?
- пишите коротко, НО понятно, если текст можно заменить иконкой — заменяйте
Ненужный контент и надуманные функции не должны отвлекать от важной информации. Белый фон помогает пользователям сконцентрироваться на важной информации.
9. Помощь в устранении ошибок
Примеры реализации:
- текст валидации полей понятный для каждого поля
- пояснять КАК решить проблему, а не просто "не могу передать файл" или "форма заполнена не полностью" (что именно ещё?)
Подсказывайте пользователям, какие именно ошибки они совершили. Стандартное сообщение «Неверный логин или пароль» не несет в себе информации. А вот сообщение о том, что в адресе почты отсутствует символ “@”, будет более значимым.
Сообщения об ошибках должны быть выражены простым языком, точно указывать на проблему и предлагать решение.
Ошибки должны быть описаны нейтральным языком (не кодами ошибок), точно обозначать проблему и предлагать решение.
10. Справка и служба поддержки
Сюда же идут всякие всплывающие подсказки, мини-ссылки на справки и помощь в нужных местах
Если все-таки пользователям пришлось воспользоваться поддержкой, то найти ее должно быть максимально просто.
Справочная информация должна быть легко доступной, ориентироваться на задачи пользователя, и не быть слишком большой.
Основные юзабилити-характеристики сайта
Что мы анализируем:
- Среднее время, которое требуется пользователю для достижения своей цели на сайте.
- Количество ошибок, которые совершают пользователи при достижении своих целей на сайте.
- Скорость обучения пользователя на сайте.
- Запоминаемость.
- Степень удовлетворенности пользователей от взаимодействия с сайтом.
Телеграм-канал «Заметки о юзабилити» — посмотреть и подписаться
