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

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

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

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

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

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

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

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

Очевидным способом их реализации было бы наличие двух различных элементов пользовательского интерфейса: индикатора состояния (иконка) и кнопки переключения. Например, в приложении Tesla на экране Управления используется подобный подход. У вас есть обе функции: индикатор состояния (иконка замка) и кнопка Разблокировки автомобиля. Нажатие на индикатор состояния (иконка замка) ничего не дает, но нажатие на элемент управления (кнопка) разблокирует автомобиль.

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

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

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

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

Как должен быть помечен элемент управления, если вы решили использовать его для обозначения двух состояний: текущего и того, что произойдет дальше? 

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

1. Название кнопки сообщает состояние, в которое перейдет система, если эта кнопка будет нажата, то есть она сообщает пользователю, что произойдет дальше.
   Это стандартная рекомендация для дизайна кнопок. В частности, кнопка регистрации на сайте будет называться Зарегистрироваться, а кнопка оформления заказа на сайте электронной коммерции будет называться Приобрести или Оформить заказ.
   ‍Если кнопка используется для переключения между двумя состояниями, то следуя рекомендации, она также должна изменить название, как в примере Tesla или в примере OBS.

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

2. Кнопка сообщает об активном состоянии с помощью тени. Вот что в реальной жизни случалось с кнопками включения/выключения: при нажатии на них они не изменялись, а “Утопали внутрь”. В дизайне пользовательского интерфейса, дизайнеры взяли на вооружение эту метафору, чтобы указать, что кнопка была нажата и теперь она активна.

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

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

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

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

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

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

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

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

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

Нажатие на любой из этих элементов изменит состояние.

Более новая версия WebEx перешла на тот же дизайн.

Помните, что ваша цель заключается в том, чтобы пользователи быстро понимали принцип работы обеих функций системы управления вкл — выкл.

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

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

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

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

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

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

3. Нужно ли пользователям быстро определять состояние и изменять его (как в случае с кнопкой Отключения звука)?
   

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