Исследуем визуальные индикаторы в реальной жизни
Элементы UX и дизайна интерфейсов за пределами цифровых продуктов.
(Мы продолжаем переводить цикл статей по продуктовому дизайну. Полную подборку можно найти в коллекции «Дизайн навигации»)
Вы читаете перевод статьи “An exploration of visual indicators IRL”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.
Визуальные индикаторы используют, чтобы выделить определенные объекты из массы других объектов. Индикаторы не обязательно требуют от пользователя каких-то действий — скорее, они служат для передачи определенной информации. Индикаторы отображаются не всегда, а при конкретных условиях. Чтобы передать свое сообщение, индикаторы могут принимать разные формы: это могут быть и иконки, и определенные стили шрифта, и изменения в размере, и различные цветовые вариации, и анимации и т.д.
Интересуетесь свежими статьями по дизайну?🚀 Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
В цифровом мире примеры индикаторов повсюду. К примеру, в Gmail иконка скрепки символизирует вложение, а желтой звездочкой отмечаются сохраненные диалоги. Пользователи Todolist используют цвета для определения приоритетов, а благодаря символу “сообщение” сразу видят, к каким делам добавлены комментарии. А когда в iOS скачиваются обновления, мы видим статус загрузки поверх иконки приложения.
Что мне нравится в UX и дизайне интерфейсов, так это то, что все принципы работы можно переложить на реальный мир. Индикаторы, как и аффордансы, существуют в окружающем мире — и точно так же, как в digital-мире, передают свои сообщения. Пожалуй, самый распространенный визуальный индикатор — это дополнительный текст: например, ярлычки в магазине “скидка 20%”.
Для целей этой статьи, я специально подобрал нетекстовые индикаторы из реального мира, которые работают за счет цвета, ориентации и движения.
Статус
“Информированность о состоянии системы” — это одна из 10 эвристик Якоба Нильсена для пользовательского интерфейса. Ее суть в том, что пользователи всегда должны знать, что происходит. В физическом мире существует множество индикаторов, которые выполняют ту же цель: показывают статус.
Предмет: Почтовый ящик
Индикатор: Флажок в поднятом состоянии [Есть почта/ нет почты]
Для кого: Для почтальона
Сообщение: “Эй, тут почта, нужно забрать!”
Предмет: Счет в ресторане
Индикатор: Из счета торчит карточка [Статус оплаты]
Для кого: Для официантов
Сообщение: “Можно принимать оплату!”
Предмет: Турбина самолета
Индикатор: Спираль в движении [Работает/не работает]
Для кого: Для работников аэропорта
Сообщение: “Осторожно! Двигатель самолета запущен”
Бонус: Этот индикатор иногда помогает отпугивать птиц!
Прогресс
Сколько еще [шагов] до [завершения] этого [процесса]? Индикаторы прогресса очень часто используются в цифровых продуктах, чтобы сообщить пользователю, сколько времени/шагов осталось до завершения процесса. В физическом мире такими индикаторами выступают маркеры, которые показывают, сколько осталось времени/объема/количества до момента завершения.
Предмет: Книга
Индикатор: Закладка на определенной странице [Прогресс чтения]
Для кого: Для читателя
Сообщение: “Смотри сколько ты уже прочитал! Да ты уже на полпути!”
Предмет: Тормозные колодки на велосипеде
Индикатор: Насколько использованы тормоза
Для кого: Для велосипедиста
Сообщение: “Колодки почти стерлись, пора покупать новые!”
Предмет: Авокадо
Индикатор: Цвет под стебельком [Степень спелости]
Для кого: Для покупателей и голодных любителей гуакамоле
Сообщение: Коричневый цвет = “Я перезрелый/ побитый”. Зеленый цвет = “Я спелый, меня можно есть!”
Мои любимчики
Я всегда ищу интересные способы отвечать на вопросы еще до того, как их мне задают. Это помогает избежать непоняток и неловких моментов. Вот несколько индикаторов, которые помогают мне вносить ясность без слов.
Предмет: Пивная банка
Индикатор: Вмятина на банке [Владение]
Для кого: Для всех, кто пытается украсть мое пиво
Сообщение: “Это не ваше пиво!”
Бонус: Ярлычки для бокалов вина (и подвески для полотенец 🙄) работают по такому же принципу!
Предмет: Чайник в ресторане
Индикатор: Расположение крышки на чайнике [Пустой/полный]
Для кого: Для официантов
Сообщение: “Чайник пустой. Можете добавить воды?”
Предмет: Рубашки
Индикатор: Положение крючка вешалки [Чистая/уже надевал]
Для кого: Для меня!
Сообщение: Крючок от себя = “Рубашка чистая”. Крючок к себе = “Эту рубашку я уже надевал”
Такие индикаторы не говорят сами за себя. Тем не менее, в правильном контексте эти визуальные подсказки позволяют отделить одни элементы от других. Что будет делать пользователь с этим сообщением, зависит от его целей и задач. Индикаторы созданы, чтобы помогать — как в физическом, так и в цифровом мире.
Спасибо, что прочитали! :) Если вам понравилась статья, не забудьте 👏👏👏! Если у вас есть еще примеры визуальных индикаторов из реального мира, делитесь ими в комментариях!
Если вам понравилась статья и перевод, дайте нам знать — нажмите 👏 (можно “хлопать” несколько раз!)
А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Ольга Жолудова и Ринат Шайхутдинов.
Мобильное приложение «Заметки о психике» | Mental Notes
Подкидывает идеи как привлечь, удержать и направить внимание пользователя
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
