Исследуем визуальные индикаторы в реальной жизни
Элементы пользовательского опыта и дизайна интерфейсов за пределами цифровых продуктов.
Конспект материала UX-дизайнера студии DesignMap Джо Карона подготовили Ольга Жолудова и Ринат Шайхутдинов.
Визуальные индикаторы используют, чтобы выделить определённые объекты из массы других. Индикаторы необязательно требуют от пользователя каких-то действий — скорее служат для передачи определённой информации.
Индикаторы отображаются не всегда, а при конкретных условиях. Чтобы передать сообщение, индикаторы могут принимать разные формы: это могут быть иконки, определённые стили шрифта, изменения в размере, различные цвета, анимации и так далее.
В цифровом мире примеры индикаторов повсюду. В Gmail иконка скрепки символизирует вложение, а жёлтой звёздочкой отмечаются сохранённые диалоги. Пользователи Todolist используют цвета для определения приоритетов, а благодаря символу «Сообщение» сразу видят, к каким делам добавлены комментарии. А когда в iOS скачиваются обновления, мы видим статус загрузки поверх иконки приложения.
В UX и дизайне интерфейсов все принципы работы можно переложить на реальный мир. Индикаторы, как и аффордансы (сигналы, что объект подходит для выполнения конкретного действия), существуют в окружающем мире — и передают сообщения, как в digital-мире. Распространённый визуальный индикатор — дополнительный текст, например, ярлычки в магазине «Скидка 20%».
Ниже — подборка индикаторов из реального мира без текста, они работают за счёт цвета, ориентации и движения.
Статус
«Информированность о состоянии системы» — одна из десяти эвристик Якоба Нильсена для пользовательского интерфейса. Её смысл в том, что пользователи всегда должны знать, что происходит. В физическом мире существует множество индикаторов, которые выполняют ту же цель — показывают статус.
Предмет: почтовый ящик.
Индикатор: флажок в поднятом состоянии (есть посылка или нет).
Для кого: для почтальона.
Сообщение: «Пришло письмо, нужно забрать».
Предмет: счёт в ресторане.
Индикатор: из счёта торчит карточка (статус оплаты).
Для кого: для официантов.
Сообщение: «Можно принимать оплату».
Предмет: турбина самолёта.
Индикатор: спираль в движении (работает или нет).
Для кого: для работников аэропорта.
Сообщение: «Двигатель самолёта запущен».
Бонус: этот индикатор иногда помогает отпугивать птиц.
Прогресс
Индикаторы прогресса часто используются в цифровых продуктах, чтобы сообщить пользователю, сколько времени или шагов осталось до завершения процесса. В физическом мире такими индикаторами выступают маркеры, которые показывают, сколько осталось времени, объёма или количества до завершения.
Предмет: книга.
Индикатор: закладка на определённой странице (прогресс чтения).
Для кого: для читателя.
Сообщение: «Смотри, сколько ты уже прочитал. Ты уже на полпути».
Предмет: тормозные колодки на велосипеде.
Индикатор: насколько использованы тормоза.
Для кого: для велосипедиста.
Сообщение: «Колодки почти стёрлись, пора покупать новые».
Предмет: авокадо.
Индикатор: цвет под стебельком (степень спелости).
Для кого: для покупателей и голодных любителей гуакамоле.
Сообщение: коричневый цвет — перезрелый или побитый. Зелёный — спелый, можно есть.
Мои любимчики
Я всегда ищу интересные способы отвечать на вопросы ещё до того, как их мне задают. Это помогает избежать неловких моментов. Вот несколько индикаторов, которые помогают мне вносить ясность без слов.
Предмет: пивная банка.
Индикатор: вмятина на банке (владение).
Для кого: для всех, кто пытается украсть моё пиво.
Сообщение: «Это не ваше пиво».
Бонус: ярлычки для бокалов вина (и подвески для полотенец) работают по такому же принципу.
Предмет: чайник в ресторане.
Индикатор: расположение крышки на чайнике (пустой или полный).
Для кого: для официантов.
Сообщение: «Чайник пустой. Можете добавить воды?»
Предмет: рубашки.
Индикатор: положение крючка вешалки (чистая или уже надевал)
Для кого: для меня.
Сообщение: крючок от себя — рубашка чистая. Крючок к себе — уже надевал.
Такие индикаторы не говорят сами за себя. Тем не менее, в правильном контексте эти визуальные подсказки позволяют отделить одни элементы от других. Что будет делать пользователь с этим сообщением, зависит от его целей и задач. Индикаторы созданы, чтобы помогать — как в физическом, так и в цифровом мире.
#дизайн
© vc.ru
