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

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

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

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

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

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

image

Панель управления для приложения WebEx для настольных ПК:
Вверху — Без звука;
Внизу — Заглушенное состояние


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

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

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


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

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

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

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

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


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


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

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

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

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

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

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

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

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

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

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

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

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

    image

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

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

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

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

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

image

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

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


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

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

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

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

image

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

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

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

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

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

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

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

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

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

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

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

Комментарии 27

    +13

    Меня всегда бесит эта кнопка. Если микрофон перечёркнут — это микрофон выключен, или это "выключить микрофон"?


    Вот, даю ui mockup в котором этой проблемы нет.


    image

      +2
      Картинка уже не работает.
        0

        Там механический переключатель on/off.

        0
        У меня была забавнее история. Я, думая что звук выключен, а он не выключился но показывал перечеркнутый микрофон в грёбанном chime-е смачно отлил по сути на весь митинг в Амазоне. К концу «отлива» меня замьютили коллеги :)
        +1
        Меня всегда бесит эта кнопка

        Как у ксяомитов, к которым я имею честь принадлежать, если в шторке пикча «Ориентация» подсвечена — автоповорот экрана выключен, но для остальных иконок всё строго наоборот :))
          0
          Вероятно потому что это не «включение автоповорота», а «запрет автоповорота». Что, впрочем, не делает такое решение менее странным.
            0
            Все кнопки, как кнопки, «Включатели», а одна — гордый «Выключатель» :))
          0

          Проблема еще в том что в работе приходится иметь дело около пяти разных средств связи и у всех разное мнение по поводу идеального дизайна кнопки отключения звука

            +1
            Что-то вариант Zoom, приведённый в рекомендациях, тоже непонятен и требует привыкания. К тому же обозначается мелкими деталями на иконке – это не айс, состояние должно выхватываться брошенным вкользь взглядом.
              0
              У кого лучше?
                0
                Ну, лично для меня Эппловский вариант лучше (можно списать на вкусовщину) – я сразу вижу, что кнопка включена. Хотя с критикой автора статьи согласен.

                Я не знаю, как сделать хорошо в рамках одной маленькой кнопки с иконкой, но что нестандартное состояние (включённый mute или громкая связь) должно бросаться в глаза – считаю важным моментом.

                Сложный момент – когда кнопка не включает/разрешает что-то, а отключает/запрещает. Как приведённый выше tvr пример кнопки блокировки поворота экрана у Xiaomi (в MIUI, у того же производителя на Android One всё наоборот, вот сейчас взял в руки два девайса, сравниваю и офигеваю).
                  0
                  > нестандартное состояние (включённый mute
                  вот тут все споры и начинается. Я в основном использую голосовую связь для участия в совещаниях (несколько часов иногда). И там включенный mute как раз стандартное состояние.

                  Обычные сотовые звонки у меня обычно очень короткие и по-моему мьютом ни разу не пользовался за всю жизнь
                0
                Зато у зума есть прекрасная функция временного анмьюта пока нажат пробел. Очень удобно когда надо просто что-то коротко сказать. И вот этой возможности нет по-моему больше ни у кого, а жаль.
                  0
                  Гы-гы, ещё добавить к этому функционалу голосовое управление – «Прошу слова!… Я всё сказал!» (ну или по классике – «приём!»).

                  Но да, для онлайн тренировок (когда говорит тренер, но изредка надо что-то сказать) очень удобно.
                    0
                    Не только для тренировок. Для дейли, для всяких презентаций архитектуры и аналитики, и еще много для чего.
                      0

                      Да понятно, что ещё много для чего, я просто своё применение упомянул.
                      ЧСХ, из всей группы, кажется, только у меня mute изначально включён в настройках, остальные заходят и выключают микрофон.

                0
                бесит муте в скайпе на айфоне.
                В приложении и на экране блокировки он по разному показывает, включен или выключен микрофон
                  +5
                  Как уже верно заметили выше, главная проблемы кнопки отключения звука — в том, что она отключает по умолчанию включенное. «Включить отключение звука», «Выключить отключение звука».

                  Черт возьми, примерно сто лет назад уже изобрели чекбоксы и радиокнопки. Но это уже не модно.
                  Вот самый лучший интерфейс:
                  (о) Звук включен
                  ( ) Без звука

                  А все эти монокнопки и двигающиеся фигни — уже путают в данной ситуации (когда «включается отключение»).
                    0
                    [del]
                    Такой вариант работает только при отображении сразу обоих вариантов.
                    Не всегда это удобно
                      +1
                      Так ведь автор статьи к такому выводу и пришел, что лучше всего — два элемента.
                      Окей, вот один элемент. Который невозможно понять неправильно, ну если только пользователь не вчера сел за компьютер.
                      [✓] Микрофон включен

                      (В прошлом комментарии я изобразил группу радиокнопок, в этом — чекбокс.)
                        0
                        Всегда.
                          +1

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


                          Ну и так по всем кнопкам, х2

                            0
                            Те кнопки не такие критические, Ну и там общая схема работы для всех — очень понятно и наглядно.
                              0
                              Ну это уже новые условия, я это и имел в виду, когда написал «Не всегда это удобно»

                              Вы же ответили, что «Всегда»
                        0

                        Беда возникает, когда на что-то крупнее кнопки с иконкой места нет или совсем уж из дизайна выбивается.
                        Чекбокс "Mute", как и чекбокс "Mic", воспринимается вполне однозначно, но в звонилке выглядит странно.

                        –1
                        А разве раньше не писали на кнопках текущее состояние? Когда можно было посмотреть и сразу понять, в каком состоянии система. И нужно было только догадаться нажать на кнопку. А не бороться с когнитивным диссонансом, когда микрофон включен, а написано «выключить микрофон».
                          0
                          Была у меня как-то беспроводная гарнитура Plantronics c аппаратным отключением микрофона (не посылает в устройство команду отключить микрофон, а отключает сама). Так вот, много раз я обламывался из-за того, что статус микрофона вообще нигде не виден.
                          Сейчас пользуюсь китайской гарнитурой, у которой лапка с микрофоном в верхнем положении отключает его.

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

                          Самое читаемое