Исследуем визуальные индикаторы в реальной жизни

Элементы пользовательского опыта и дизайна интерфейсов за пределами цифровых продуктов.

Конспект материала UX-дизайнера студии DesignMap Джо Карона подготовили Ольга Жолудова и Ринат Шайхутдинов.

Визуальные индикаторы используют, чтобы выделить определённые объекты из массы других. Индикаторы необязательно требуют от пользователя каких-то действий — скорее служат для передачи определённой информации.

Индикаторы отображаются не всегда, а при конкретных условиях. Чтобы передать сообщение, индикаторы могут принимать разные формы: это могут быть иконки, определённые стили шрифта, изменения в размере, различные цвета, анимации и так далее.

В цифровом мире примеры индикаторов повсюду. В Gmail иконка скрепки символизирует вложение, а жёлтой звёздочкой отмечаются сохранённые диалоги. Пользователи Todolist используют цвета для определения приоритетов, а благодаря символу «Сообщение» сразу видят, к каким делам добавлены комментарии. А когда в iOS скачиваются обновления, мы видим статус загрузки поверх иконки приложения.

В UX и дизайне интерфейсов все принципы работы можно переложить на реальный мир. Индикаторы, как и аффордансы (сигналы, что объект подходит для выполнения конкретного действия), существуют в окружающем мире — и передают сообщения, как в digital-мире. Распространённый визуальный индикатор — дополнительный текст, например, ярлычки в магазине «Скидка 20%».

Ниже — подборка индикаторов из реального мира без текста, они работают за счёт цвета, ориентации и движения.

«Информированность о состоянии системы» — одна из десяти эвристик Якоба Нильсена для пользовательского интерфейса. Её смысл в том, что пользователи всегда должны знать, что происходит. В физическом мире существует множество индикаторов, которые выполняют ту же цель — показывают статус.

Предмет: почтовый ящик.

Индикатор: флажок в поднятом состоянии (есть посылка или нет).

Для кого: для почтальона.

Сообщение: «Пришло письмо, нужно забрать».

Предмет: счёт в ресторане.

Индикатор: из счёта торчит карточка (статус оплаты).

Для кого: для официантов.

Сообщение: «Можно принимать оплату».

Предмет: турбина самолёта.

Индикатор: спираль в движении (работает или нет).

Для кого: для работников аэропорта.

Сообщение: «Двигатель самолёта запущен».

Бонус: этот индикатор иногда помогает отпугивать птиц.

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

Предмет: книга.

Индикатор: закладка на определённой странице (прогресс чтения).

Для кого: для читателя.

Сообщение: «Смотри, сколько ты уже прочитал. Ты уже на полпути».

Предмет: тормозные колодки на велосипеде.

Индикатор: насколько использованы тормоза.

Для кого: для велосипедиста.

Сообщение: «Колодки почти стёрлись, пора покупать новые».

Предмет: авокадо.

Индикатор: цвет под стебельком (степень спелости).

Для кого: для покупателей и голодных любителей гуакамоле.

Сообщение: коричневый цвет — перезрелый или побитый. Зелёный — спелый, можно есть.

Я всегда ищу интересные способы отвечать на вопросы ещё до того, как их мне задают. Это помогает избежать неловких моментов. Вот несколько индикаторов, которые помогают мне вносить ясность без слов.

Предмет: пивная банка.

Индикатор: вмятина на банке (владение).

Для кого: для всех, кто пытается украсть моё пиво.

Сообщение: «Это не ваше пиво».

Бонус: ярлычки для бокалов вина (и подвески для полотенец) работают по такому же принципу.

Предмет: чайник в ресторане.

Индикатор: расположение крышки на чайнике (пустой или полный).

Для кого: для официантов.

Сообщение: «Чайник пустой. Можете добавить воды?»

Предмет: рубашки.

Индикатор: положение крючка вешалки (чистая или уже надевал)

Для кого: для меня.

Сообщение: крючок от себя — рубашка чистая. Крючок к себе — уже надевал.

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

#дизайн