Дизайн Ольга Жолудова
5 076

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

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

В закладки

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

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

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

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

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

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

Статус

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Прогресс

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

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

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

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

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

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

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

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

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

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

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

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

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

Мои любимчики

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#дизайн

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Ольга Жолудова", "author_type": "self", "tags": ["\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 50, "likes": 26, "favorites": 1, "is_advertisement": false, "subsite_label": "design", "id": 38206, "is_wide": false, "is_ugc": true, "date": "Fri, 18 May 2018 09:01:18 +0300" }
{ "id": 38206, "author_id": 169371, "diff_limit": 1000, "urls": {"diff":"\/comments\/38206\/get","add":"\/comments\/38206\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/38206"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

50 комментариев 50 комм.

Популярные

По порядку

Написать комментарий...
14

Зачем ношеную рубашку вешать в шкаф?

Ответить
11

Нафиг шкаф. Для этого есть спинка стула.

Ответить
6

На стуле кот.

Ответить
0

Пхахахаха, классика

Ответить
1

А куда её девать?

Это ж не трусы с носками, чтобы их после каждой носки стирать. Иначе вещь быстро потеряет первоначальный вид.

Ответить
13

Как куда? В корзину для грязного белья.
А потерявшая вид рубашка выбрасывается/отдаётся в приют для хипстеров и покупается новая.

Ответить
0

Глупости пишите.

Ответить
6

Если это призыв писать глупости, то он, скорее обращён к Вам.
Если же вы пытались сказать, что я пишу глупости, то следовало писать "глупости пишЕте).

Ответить
2

Вы не похожи на человека у которого в гардеробе всегда новая белая сорочка. А все остальные адекватные люди не застирывают хорошие вещи каждый день.

Ответить
1

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

Ответить
0

Быть, а не казаться. Слышали такое выражение?
И ещё, простите конечно за бестактность, но чем вы занимаетесь и как часто моетесь, если вам после каждой носки требуется стирка рубашки?

Ответить
1

Вот-вот. Быть, а не казаться. Если в Вашем случае "казаться, а не быть", то в моём именно "быть, а не казаться".
Цивилизованным культурным человеком. От которого не несёт потом, а воротник рубашки чистый.

Хотя, готовьтесь, ближе к 15 годам у Вас тоже начнётся гормональный рост.

Ответить
7

Хотя, готовьтесь, ближе к 15 годам у Вас тоже начнётся гормональный рост.

Открою тайну. Не все мужики воняют как грязные потные собаки.

Ответить
3

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

Ответить
1

А я разве отрицал, что люди так не поступают? Люди вообще много глупостей делают. Это не значит, что это правильно.

Ответить
1

Не обязательно "вонять", достаточно пахнуть. И обоняние у всех разное.

Ответить
3

Вот-вот. Быть, а не казаться. Если в Вашем случае "казаться, а не быть", то в моём именно "быть, а не казаться".

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

Ответить
0

И что с моей рукой не так?

Ответить
3

Бесплатный совет. Вещи стирают, если они грязные. Пользуйтесь.

Объясню на пальцах как это работает: поиграли в футбол в футболке — постирали, прошлись вечером по парку — повесили обратно на вешалку.

Ответить
0

Спасибо за совет.
Но с рукой-то что не так? Почему Вы решили, что я не похож на человека у которого нет рубашек?

Ответить
1

Я не сказал, что у вас нет рубашек. Читайте внимательно.

Ответить
0

Я не знаю, что Вы там себе напридумывали, но у меня всегда в шкафу висит 25 свежих выглаженных рубашек. И 4 свежих костюма.

Ответить
3

у меня всегда в шкафу висит 25 свежих выглаженных рубашек. И 4 свежих костюма.

АХАХАХ. Живите с этим.

Напомню только: Быть, а не казаться.

Ответить
0

Я, видимо, не улавливаю соли.
Не поясните?

Ответить
0

От которого не несёт потом, а воротник рубашки чистый.

Повторю вопрос:
И ещё, простите конечно за бестактность, но чем вы занимаетесь и как часто моетесь?

Ответить
1

Моюсь каждый день, а что?
В жаркие дни или в дни тренировок иногда больше.

Ответить
–1

прекол в том, что цивилизованный и культурный человек не лезет в чужой монастырь со своим уставом

Ответить
0

Так я и не лез. Это мне начали доказывать, что я не так живу и делать выводы по моей руке.

Ответить
–1

если ты культурный и цивилизованный человек то как ты должен поступить? начать говорить - сам дурак?

Ответить
1

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

Ответить
0

Вы про рубашки в принципе или только про белые сорочки?

Ответить
0

Про любую рубашку, которая надевается на тело.

Ответить
0

есть специальные открытые комнатные вешалки, чтобы не в шкаф)

Ответить
0

Ну это всё меняет. ;)

Ответить
1

вначале согласился, а потом передумал. вопрос закономерен для классических рубашек, но не для "кэжуал" рубашек, которые надеваются на футболку.

Ответить
1

Ну, как тебе жена? — Хороший жена, только очень грязный, однако! — Как, грязная?! — Если чукча чистый, зачем ему мыться? А жена каждый утро моется!

Ответить
1

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

Ответить
13

Закладка в книге - для отображения прогресса чтения?
Извините, но нет.

Ответить
4

Объясните, пожалуйста, зачем эта статья? Я где-то идеи не уловила. Определение индикатора можно и покороче сделать...

Ответить
8

Эта статья для развития усложненного понимания простых и привычных вещей. Иду сегодня из школы, вижу мусор около входа в подъезд. Раньше бы поднял, а теперь понимаю, что это визуальный индикатор дворнику - поэтому иду мимо...

Ответить
1

"Для развития усложненного понимания простых и привычных вещей" - круто! Спасибо, буду пользоваться ;)

Ответить
4

А как же красный/зеленый цвет на замке общественного туалета?

Ответить

1

визуальный индикатор говорит "закрыто", а национальный фактор — "да наверняка сломано!" :)

Ответить
2

Чайник с перевёрнутой крышкой - неудачный пример.

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

Если в общепринятом застольном этикете нет этой фичи, официант не догадается что перевёрнутая крышка это сигнал о том, что чай закончился :)

Ответить
2

Черт, так вот зачем все эти странности в мире за экраном моего смартфона! Учту)

Ответить
0

Неплохо

Ответить
0

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

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

Хотя казалось бы… Особенно актуально для сортов чая, которые не раскрываются полностью на первом заливе.

Ответить

0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления
{ "page_type": "default" }