Переключение между двумя состояниями

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

Оригинал

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Это стандартная рекомендация для дизайна кнопок. Кнопка регистрации на сайте будет называться «Зарегистрироваться», а кнопка для отправки формы в Интернет-магазине будет называться «Купить» или «Заказать».

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

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

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

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

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

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

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

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

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

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

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

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

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

В новой версии WebEx используется тот же дизайн.

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

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

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

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

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

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

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

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

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

Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.