Эвристика #1: Видимость статуса системы или "Приложение, что с тобой происходит?"

Хороший продуктовый дизайнер использует 10 Эвристик Якоба Нильсена. А лучший — не помнит, какие там 10, но на подкорке уже всё встроено 😁 Это база! Которую важно понимать, видеть и встраивать в рутину.

Что же за Эвристики?

Это десять правил Якоба Нильсена, сформулированные в 1994 году, которые даже спустя много лет остаются остаются актуальными. Эвристики Нильсена — это некий чек-лист, общие практические правила проектирования, которые помогают и предотвратить ошибки, и сделать интерфейсы интуитивно понятными.

Начнём с первой эвристики! И разберём её на ярких примерах рынка.

Если бы приложение или сайт были бы человеком, то его можно было спросить "Как ты?", "Что делаешь?" или "Что с тобой происходит?".

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

Яркий пример
Индикаторы «Вы здесь» на картах торговых центров должны показывать людям, где они сейчас находятся, чтобы помочь им понять, куда идти дальше. Различные индикаторы систем и объектов (термометры, спидометры и др.), меняющие значения. Будь то уровень заряда батареи, громкость звука или объявление следующей остановки в автобусе.

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

В долгосрочной истории статус системы — это раздел “Продолжить просмотр” показывает, на каком фильме, сериале и моменте остановился пользователь.

Телеканалы идут в режиме онлайн, поэтому отображается текущее расписание с учётом прошедшего и оставшегося времени.

В tab bar выделена иконка Дома, чтобы показать, что пользователь находится на главном экране. Уровни закрашиваются из серого в яркий цвет по мере их прохождения. Стилистика прогресс-баров отображает прохождение уровня пользователем: как в квесте месяца, дружеском челлендже, так и в календаре страйков.

На главном экране в плеере отображается последний прослушанный трек. При включении функции “Моя волна” не только меняется части интерфейса, а также и анимация на фоне становится активнее и быстрее. Выделение фильтров в настройках волны отображает статус и подсвечивает заданные настройки музыки. Про плеер говорить не буду, мы уже это видели.

А вот текст в формате караоке с выделенными словами, которые в данный момент можно подпеть, — это отличный вариант для тех, кто забывает текст ... ааа, точно, как раз для меня 🤪

При входе в приложение отображается локация, где находится пассажир, и адрес в поле "Точка подачи". Если, конечно, он не в Москве, то там у всех сейчас Шереметьево 🙃

Таймеры, меняющиеся статусы ожидания и машина, которая подъедет, даже по цвету подсказывает клиенту. И в дороге тоже можно отследить статус поездки, даём контроль ситуации пользователю.

Статус заказа видно не только внутри кафе, но и в мобильном приложении. Можно заказать кофе заранее (в офисе или по дороге в кафе), а приложение подскажет о готовности даже в виджете. Очень прогрессивно для кофе! Ставлю лайк Дринкит ❤

Товары в корзине, которые закончились, подсвечиваются. Они не исчезают из корзины бесследно. Юзер может заменить их чем-то другим или удалить. Для улучшения опыта взаимодействия в этом флоу пользователю предлагаются альтернативы данного товара.

На главном экране выделена книга, которую читает в данный момент пользователь. Процент, прогресс бар отражают прочитанную часть во всех книгах, которые были когда-то начаты. При прослушивании книги плеер также отображает статус чтения. А при изменении скорости чтения значение времени также меняется.

В небольшом элементе зарядки заложено несколько состояний, отображающий статус системы: режим энергосбережения, уровень заряда телефона. Скорость приёма сотовой сети в строке состояний (Status bar) помогает пользователю определить качество связи. А Control Center будто был сделан как куча разных статусов системы на основе 1 эвристики.

Не забывайте про пользователей и отображении их статуса внутри системы. Недостаток информации часто равнозначен потере контроля. Сразу объясните, где он сейчас находится, чтобы он лучше достиг своей цели в рамках вашей системы. Предсказуемость взаимодействия (в нашем случае — понимание "где ты" и "куда пришёл") создаёт доверие к продукту.

Небольшое задание на домашку:
Посмотри вокруг себя сейчас (да, да, прямо сейчас) и найди 5 примеров 1-ой Эвристики, видимость статуса системы. Это не обязательно сайт или приложение. Даже простая микроволновка уже имеет индикаторы. Удачи!

И подписывайся на мой телеграмм-канал 💜 там много интересного

#эвристики #NielsenNormanGroup #продукт #дизайн #интерфейсы #макеты