Скрытое vs Неактивное состояние


29.09.2021 Время чтения - 4 минуты 614

Когда следует использовать скрытые/неактивное состояние?


Читайте нас в Telegram.


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

Неактивное состояние

Преимущества отображения кнопки в неактивном состоянии:

  • Обнаруживаемость: многие пользователи учатся использовать приложение, читая ярлыки. Не убирая неактивные элементы, мы показываем им, на что способно приложение. Даже когда для включения кнопки требуются дополнительные действия.
  • Обучаемость: пользователь может узнать, где расположены элементы управления и кнопки в пользовательском интерфейсе.
Enable and Disabled state buttons
Кнопки c активным и неактивным состоянием из Material Design

Недостатки отображения кнопки в неактивном состоянии:

  • Это увеличивает когнитивную нагрузку: оставленные неактивные кнопки заставляют пользователей лишний раз думать. Вид неактивной кнопки вызывает у них замешательство: почему она недоступна и как ее активировать? Согласно «Не заставляйте меня думать» Стива Круга, мы должны удалить элементы, которые заставляют пользователя думать.
  • Некоторым пользователям кнопка покажется интерактивной: если они не реализованы правильно, неактивные кнопки могут сбить пользователей с толку. Например, некоторые пользователи могут принять серые кнопки за второстепенные действия.
  • Доступность: их трудно увидеть – Руководство по обеспечению доступности веб-контента (WCAG) не требует достаточных коэффициентов контрастности для неактивных кнопок. Они также не дают никакого фидбека пользователям.
examples of enabled and disabled states by Carbon Design System
Пример из Carbon Design System

Скрытое состояние

Преимущества скрытия кнопки:

  • Снижает когнитивную нагрузку: пользователи могут больше сосредоточиться на выполняемой задаче. Показывая им только то, что нужно, мы убираем отвлекающие факторы.
  • Простота: исключение неактивных кнопок экономит место. Оно позволяет нам изменять элементы управления, используя одно и то же пространство для разных состояний.
examples of enabled and hidden states
Пример из Carbon Design System

Недостатки скрытия кнопки:

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

Какой способ использовать?

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

  • Что нужно знать пользователю на этом этапе?
  • Что пользователю нужно сделать на этом этапе?
  • Узнает ли пользователь об этой функции?
  • Будет ли пользователь тратить много времени на ее поиски?

Ответы на вышеуказанные вопросы могут помочь нам выяснить, какое состояния использовать.

Предложения

Выбирайте неактивное состояние, когда:

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

Выбирайте скрытое состояние, когда:

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

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

Прочие соображения

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

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

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

Заключение

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

Оригинал.

Читайте также: Воспринимаемая яркость: важная концепция UI-дизайна


Читайте нас в Telegram.