← НАЧИНАЮЩЕМУ / статья

Что такое эвристики и как ими пользоваться

Эвристики — это совокупность приёмов и методов, облегчающих и упрощающих решение задач. Это лайфхаки, с помощью которых мозг человека избегает долгих вычислений и бесконечного углубления в данные.

В юзабилити существует 10 заповедей эвристик, сформулированных Якобом Нильсеном.

Это своеобразный чеклист, по которому проводится анализ любого цифрового продукта. Разберитесь и используйте его в своей работе.

В начале прям так и идёте:

• открываете страницу сайта
• читаете каждый пункт эвристик и смотрите на странице (функционале), если/нет на сайте
• результат заносите в отчёт

Внимательно прочитайте. Привожу примеры реализации этих утверждений. Так гораздо проще понять несколько абстрактные формулировки.

Формулировки могут отличаться, но суть не меняется.

1. Ясный статус, видимость состояния системы

Юзер в любой момент времени должен знать/понимать где он, что происходит (произошло), что делать дальше.

Примеры реализации:

• Система пишет: "Заказ принят" или "Сообщение отправлено". И любые сообщения на темы: Завершена ли загрузка? Прошел ли платеж? Когда приедет курьер? и т.п.
• Подсветка текущего пункта меню или количества товаров в корзине
• Любые прогрессы (пошаговое заполнение форм и т.п.)
• Блокировка кнопок на время отправки

Система должна всегда и вовремя информировать пользователей о происходящем посредством соответствующей обратной связи в течение разумного времени.

2. Элементы из реального мира

Иконки ассоциируются с чем-то из реального мира

Примеры реализации:

• иконка лупы — Поиск
• иконка тележки — Корзина
• иллюстрации еды похожи на еду из реального мира

Дизайн должен говорить на языке пользователя. использовать слова, фразы и понятия, знакомые ему, а не внутренний жаргон. Дизайн должен следовать принятым в реальном мире правилам, чтобы информация отображалась в естественном и логичном порядке.

Когда нужно отобразить иконкой что-то абстрактное, а не материальное, стоит поискать ближайший материальный объект. Если нужно обозначить давление в шинах, попробуйте отобразить манометр, шину, насос…

Попробуйте метод ассоциаций: попросить коллегу без слов объяснить термин

3. Контроль и свобода

Примеры реализации:

• кнопки Назад / Домой
• клик по лого — переход на Главную
• клики по крошкам — переходы по подразделам
• кнопки Откатить / Назад / Отмена / "Вернуть всё в зад"
• вернуть удалённый товар в корзине
• на модалках/формах есть Отмена / Закрыть / Х
• есть возможность повтора рутинных операций ("повторить заказ")
• полный контроль над операциями из нескольких шагов (Покупка / Бронирование) и Отказ / Откат / Изменение на любом шаге

4. Интуитивное управление, последовательность и стандарты

Консистентность (согласованность друг с другом, непротиворечивость).

Не увеличивайте когнитивную нагрузку на юзера. Все элементы интерфейса работают предсказуемо, согласно обычной/подразумеваемой логике.

Примеры реализации:

• кнопка Купить — кладёт в Корзину, а не делает что-то ещё необычное
• "Главная" (дефолтная) кнопка расположена справа от Назад/Отмена, если по логике дальше идёт действие, которое продвинет юзера "вперёд"
• все "Главные" (дефолтные) кнопки должны быть в едином стиле

Все схожие элементы ведут себя согласно ожиданиям пользователей. Одинаковые функции объясняются с помощью одинаковых средств.

5. Предотвращение ошибок

Примеры реализации:

• маски ввода
• подсказки в полях
• переспрашивать на удалении
• на мобильных правильная клавиатура на полях ввода

Подсказки должны располагаться там же, где пользователь выполняет действия по подсказкам. Не на отдельной странице, не в «подвале», не в почте, а в непосредственной близости к элементу интерфейса

Не допускайте того, чтобы пользователь случайно поделился личной информацией.

Стоит предупредить его перед тем, как он соглашается на рассылку или передает свои данные в какую-либо базу.

Мы не должны дать пользователю совершить действие без предупреждения или ограничения, должны помочь пользователю сделать действие без ошибки.

Лучше хорошо оформленного сообщения об ошибке — только отсутствие ошибки. Либо измените условия, провоцирующие ошибки, либо дайте пользователям подсказку заранее, чтобы он ее не совершил.

6. Узнавание, а не вспоминание

Примеры реализации:

• предзаполнение форм
• запоминание история поиска/просмотра
• инфа о доставке сразу на карте
• стрелки листания
• важные / частые кнопки всегда под рукой
• перекрёстные ссылки
• ссылки на Справку и Помощь

Пользователь не должен вспоминать информацию из одной части интейрефса, когда он находится в другой.

7. Гибкость и эффективность использования

Ускорение работы с интерфейсом за счёт разных штук. Основные действия легко доступны на разных экранах (адантив).

Примеры реализации:

• кнопка Купить в 1 клик
• горячие кнопки для ходовых операций
• авторизация через соцсети и всякими способами
• в чате частые вопросы с ответами, в поиске подсказки
• оформление покупки без предрегистрации
• закрыть окно по Х и по Esc

8. Эстетика и минимализм

Примеры реализации:

• избыток ярлыков / иконок / кнопок
• лишние украшательства
• куча баннеров и лишнего текста (отвлекают юзера)
• повторяющиеся блоки на разных страницах
• лишние элементы на страницах — зачем он? нужен ли он здесь?
• пишите коротко, НО понятно, если текст можно заменить иконкой — заменяйте

Ненужный контент и надуманные функции не должны отвлекать от важной информации. Белый фон помогает пользователям сконцентрироваться на важной информации.

9. Помощь в устранении ошибок

Примеры реализации:

• текст валидации полей понятный для каждого поля
• пояснять КАК решить проблему, а не просто "не могу передать файл" или "форма заполнена не полностью" (что именно ещё?)

Подсказывайте пользователям, какие именно ошибки они совершили. Стандартное сообщение «Неверный логин или пароль» не несет в себе информации. А вот сообщение о том, что в адресе почты отсутствует символ “@”, будет более значимым.

Сообщения об ошибках должны быть выражены простым языком, точно указывать на проблему и предлагать решение.

Ошибки должны быть описаны нейтральным языком (не кодами ошибок), точно обозначать проблему и предлагать решение.

10. Справка и служба поддержки

Сюда же идут всякие всплывающие подсказки, мини-ссылки на справки и помощь в нужных местах

Если все-таки пользователям пришлось воспользоваться поддержкой, то найти ее должно быть максимально просто.

Справочная информация должна быть легко доступной, ориентироваться на задачи пользователя, и не быть слишком большой.

Основные юзабилити-характеристики сайта

Что мы анализируем:

• Среднее время, которое требуется пользователю для достижения своей цели на сайте.
• Количество ошибок, которые совершают пользователи при достижении своих целей на сайте.
• Скорость обучения пользователя на сайте.
• Запоминаемость.
• Степень удовлетворенности пользователей от взаимодействия с сайтом.