Ищем разработчика, который без ума от JavaScript и клёвых анимаций
Дизайн
Михаил Хананашвили
3423

Элементы управления переключателем состояния: печально известный случай кнопки отключения звука

Всем привет, меня зовут Миша Хананашвили, я автор канала UXHorn и работаю исследователем в «Сбере».

В закладки
Слушать

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

Так как статья вышла на днях, решил перевести и заодно поделиться со всеми полезным материалом. Спасибо Юре Ветрову за наводку. Оригинал статьи можно найти тут

Спойлер: Элементы управления, которые переключаются между двумя разными состояниями системы, должны четко сообщать пользователям как текущее состояние, так и состояние, в которое система перейдет, если пользователь нажмет этот элемент управления.

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

Вот скриншот:

Панель управления для приложения WebEx для настольных ПК: Вверху — Без звука; Внизу — Заглушенное состояние https://media.nngroup.com/media/editor/2020/09/30/webex-mic-icon-combined-cropped.JPG

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

Я много раз видел, как пользователи становились жертвами этой проблемы. Mute кнопка используется для переключения между двумя состояниями системы (Mutes и UnMuted), но проблема в том, что пользователи не могут легко сказать какое сейчас текущее состояние и на которое переходя (Кроме того, вопреки лучшим практикам в дизайне значков, в реализации WebEx отсутствует текстовая метка для кнопки отключения звука).

Два элемента информации, два элемента управления

В ситуации, когда пользователи могут перемещаться между двумя возможными состояниями (давайте назовем их «Вкл» и «Выкл» — для простоты), есть два бита информации, которые имеют отношение к пользователю и, хотя и связаны, не идентичны:

  • Текущее состояние системы — Вкл или Выкл; в примере с микрофоном — Mute или UnMute;
  • Что произойдет, если пользователь нажмёт на кнопку — то есть следующее состояние, которое может быть Выкл или Вкл, в зависимости от текущего состояния (в примере микрофона Unmute или Mute).

Очевидный способ их реализации — иметь два разных элемента пользовательского интерфейса: индикатор состояния и кнопку изменения состояния.

Например, в приложении Tesla экран Controls использует такой подход: у вас есть индикатор состояния, показывающий, что автомобиль заблокирован, и кнопка разблокировки. Нажатие на индикатор состояния ничего не делает, но нажатие на элемент управления разблокирует автомобиль.

Tesla для iPhone Nielsen Norman Group

(Слева) Значок над кнопкой разблокировки служит индикатором состояния; кнопка «Unlock» — это кнопка переключения состояния, на которой четко указано, что произойдет, если пользователи нажмут ее.

(Справа) Состояние и метка кнопки изменяются, когда пользователь разблокирует автомобиль.

Два состояния информации, один элемент управления

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

Однако помните, что любое принимаемое решение требует времени и когнитивных усилий, и часто времени очень мало, чтобы быстро отреагировать.

Как было в примере: я пытаюсь включить свой микрофон, а все либо ждут меня, либо игнорируя меня и продолжают разговор, то есть у меня нет времени, чтобы остановиться и подумать об интерфейсе или сделать выводы.

Иногда состояние можно легко определить по другим сигналам. Например, в проигрывателе видео есть только один элемент управления (кнопка «Play»), которая указывает будущее состояние. Однако сигналов достаточно, чтобы понять, что видео воспроизводится — пользователь может слышать аудио или видеть изменения картинки на экране.

YouTube: значок воспроизведения заменяется на паузу при воспроизведении видео. Значок указывает на состояние, в которое система перейдет при нажатии кнопки Nielsen Norman Group

Если вам нужно использовать один элемент управления для обозначения состояния и того, что будет дальше, как следует его обозначить?

В этой ситуации можно рассмотреть две альтернативы:

  1. Метка кнопки сообщает состояние, в которое система перейдет, если эта кнопка будет нажата, то есть он сообщает пользователю, что произойдет дальше.

Это стандартная рекомендация для дизайна кнопок. В частности, кнопка регистрации на сайте будет называться «Зарегистрироваться», а кнопка отправки для формы проверки электронной торговли будет называться «Покупка» или «Разместить заказ».

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

OBS Studio: кнопка «Start Recording» соответствует классическим рекомендациям по именованию и переключает метку на «Stop Recording» после начала записи. Nielsen Norman Group

Если текстовой метки нет (предположительно, потому что значок достаточно четкий), значок должен меняться в зависимости от состояния, в которое он перемещает систему. Классическим примером является взаимодействие между значками воспроизведения и паузы, показанное в приведенном выше примере YouTube и присутствующее в большинстве видеоплееров.

2. Кнопка сообщает об активном состоянии с помощью тени.

Вот что действительно происходило с кнопками включения/выключения: при нажатии на них они не меняли ярлык, а «опускались вниз». Чтобы уловить эту метафору, в дизайне пользовательского интерфейса дизайнеры обычно добавляют тень, чтобы указать, что кнопка была нажата и теперь она активна.

В Word значок B для полужирного (слева) приобретает тень при выборе (справа), чтобы указать, что вы используете полужирный режим, а не обычный. В этой реализации кнопка не меняет метку при нажатии пользователем Nielsen Norman Group

Вернемся к примеру с WebEx. Оглядываясь назад, мы видим, что WebEx использовал один элемент управления для индикации как текущего состояния, так и того, что будет дальше, и реализовал второе дизайнерское решение — сигнализацию активного состояния. К сожалению, красный цвет как индикатор активного состояния был неудачным выбором по нескольким причинам:

  • Красный цвет используется в интерфейсе произвольно — например, кнопка X (Exit) тоже красная, и это не может означать, что она активна. (Если красный цвет представляет активное состояние, что будет означать красный крестик? Что я уже покинул собрание?)
  • Другой цвет (синий) используется для обозначения активного состояния других кнопок, таких как «Видео» и «Чат» (т. е. Синий значок видео сигнализирует о том, что видео включено).

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

Кстати, приложение «Телефон» на iPhone использует ту же реализацию, с той лишь разницей, что оно более согласованно, чем WebEx, и использует белую заливку для обозначения активного состояния. Даже с этими настройками трудно определить активное состояние кнопки.

Приложение «Телефон» на iPhone Nielsen Norman Group

Кнопка «Отключение звука» не меняет значок, но сигнализирует об активном состоянии с помощью белой заливки (слева). Несмотря на то, что белый цвет, возможно, лучше отображает тень, чем произвольный цвет, он не является сильным признаком активного состояния.

Рекомендации

Итак, какова общая рекомендация для кнопок переключения состояний, которые служат индикаторами состояния? Самое безопасное решение — использовать 2 элемента пользовательского интерфейса, один для текущего состояния, а другой для действия переключения состояния, как в примере с Tesla.

Если хотите, вы можете объединить эти два элемента в одном элементе управления, как это делает Zoom. Его элемент управления отключением звука состоит из двух отдельных компонентов:

  1. Текстовая метка, указывающая, что произойдет, если пользователь нажмет на этот элемент управления.
  2. Значок, указывающий текущее состояние системы

Щелчок по любому из них изменит состояние.

В дизайне Zoom значок предназначен для обозначения текущего состояния, а метка указывает, что произойдет, если пользователи нажмут эту кнопку. Щелчок по значку или метке изменяет состояние Nielsen Norman Group

Помните, что ваша цель при включении-выключении — убедиться, что пользователи быстро понимают оба:

  • Текущее состояние
  • Что будет, если они нажмут этот элемент управления

Оцените два состояния, через которые будет проходить система.

Очевидно ли, что это два противоположных состояния?

  • Если нет, то это говорит в пользу дизайна с двумя элементами управления: один для текущего состояния и один для действия по переходу в другое состояние.
  • Если да (возможно, потому, что существуют строгие соглашения и стандартизированный дизайн), вы можете рассмотреть один элемент дизайна, который просто говорит, что команда будет делать.

Существуют ли внешние сигналы (например, шумы, визуальные изменения в окружающей среде), которые могут помочь пользователям определить текущее состояние?

  • Если нет, то используйте дизайн с двумя элементами управления, с индикатором состояния (чтобы четко передать текущее состояние) и кнопкой для переключения состояния.
  • Если да, то можно рассмотреть один элемент дизайна — кнопку переключения состояния.

Потребуется ли пользователям быстро определять состояние и изменять его (как в случае с кнопкой Mute)?

  • Если да, то просто имейте значок для обозначения состояния и кнопку для его изменения.
  • Если нет, вы можете рассмотреть кнопку переключения состояния.

Спасибо за время и подписывайтесь на Telegram-канал UXHorn, там стабильно выходят самые интересные статьи по теме UX и исследований.

{ "author_name": "Михаил Хананашвили", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 16, "likes": 27, "favorites": 77, "is_advertisement": false, "subsite_label": "design", "id": 169065, "is_wide": false, "is_ugc": true, "date": "Wed, 21 Oct 2020 10:04:28 +0300", "is_special": false }
0
16 комментариев
Популярные
По порядку
Написать комментарий...
2

В случае с айфоном, пользователь догадывается, что микрофон по умолчанию включен при совершении вызова - в отличие от WebEx

Ответить
3

Это привычка. Я пользуюсь айФоном мало и мне приходится каждый раз соображать, что будет если. В том числе и по звонилке. Особенно часто я спотыкаюсь на групповых созвонах, когда у меня включена громкая связь + выключен микрофон. Потому что за полчаса забываю текущее состояние и с первого взгляда не понимаю, что будет, если нажму на эти кнопки. Они ведь обе белые, но означают совершенно разные вещи.

Ответить
3

В примере с интерфейсом Теслы - у меня, на пример, ломается мозг от того, что нарисован открытый замок, а под ним подпись "закрыть". Я эту подпись воспринимаю как описание самой иконки. Возможно, если бы они были размещены в строку, слева иконка (показывает состояние), а справа кнопка (действие - закрыть), было бы норм.

С Айфон вообще неясно, почему микрофон перечеркнут, а динамик нет? Я когда пользовалась Айфон, тоже все время истерически тыкала на эти кнопки, пытаясь понять в каком состоянии сейчас звук.

Мне нравится интерфейс movavi screen recorer. Интуитивно понятно, что сейчас включено, а что нет - меняется цвет и иконка становится зачеркнутой. 

Ответить
0

Это наверное самая лучшая реализация. Активно — зеленый. Не активно — серый и перечеркнутый.

Ответить
2

много текста, учитывая что вы UX диз, и должны максимально лаконично и ёмко выразить меседж))

Да, много интерфейсов идиотских и глупых.
Тут на ЦП даже как-то была рубрика по неудачным интерфейсам

Ответить
2

Зачем далеко ходить. Всеми любимый телеграм. Как вы думаете, сейчас канал замьючен?

Ответить
0

Кошмар. Быстро сообразить не получается. По визуалу считывается так "У меня сейчас активна опция выключеного (ибо зачеркнутый) звука". 

Ответить
0

Я постоянно туплю. Помогает иконка в списке чатов. 

Ответить
1

Вы кнопки в Сбере исследуете?

Ответить
0

Вдогонку пример с кнопкой "Показать пароль" в экранах логина/регистрации. Одни показывают активное состояние, другие - состояние после выполнения действия.

Ответить
0

Разные подходы. Кто-то считает, что глаз — это "посмотреть", а кто-то считает, что глаз — это "кто-то может подсматривать". Но да, это сбивает с толку, т.к. по-разному в разных местах.

Ответить
0

В WebEx еще "гениально" сделана кнопка с крестиком которая выглядит так же как mute, но это не toggle button судя по всему. Ох уж этот flat с его экономией на дизайнерах...

Ответить
0

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

Ответить
0

Оооо, это прям близкий кейс, в свое время поломали голову над этим ))
В описании упоминается, но не акцентируется еще один момент - на начальном примере в WebEx. Веселье начинается, когда появляется модератор и там уже по сути не 2, а 4 стейта: 
1. включен пользователем и разрешен модератором
2. включен пользователем и запрещен модератором
3. выключен пользователем и разрешен модератором
4. выключен пользователем и запрещен модератором
И это - жопа! ))))

А еще прикольно, когда подписи типа MUTE или UNMUTE начинаем писать по-русски (спойлер - так же коротко и понятно не получается)))

Ответить
0

Не проще так

Ответить
0

Привет из мтс)

Ответить

Комментарии

null