Выключенные (disabled) кнопки используется для визуального сообщения о том, что действие недоступно из-за несоблюдения определенных условий. Однако — когда не хватает обратной связи, контекста и информации — опыт их использования может расстраивать пользователей и сбивать с толку.
«Почему я не могу нажать на это?», «Что мне делать?», «Почему это больше не доступно?».
Давайте рассмотрим три альтернативных решения, которые сделают столкновения с отключенными кнопками менее неприятными.
Эта статья призвана побудить читателей дать кнопкам больше ясности и контекста, помимо простого отключения. Ситуации могут быть разными, и поэтому самое лучшее решение — используйте здравый смысл.
1. Покажите только то, что можно сделать
Насколько важно для пользователя сейчас получить доступ к отключенному элементу? Нужно ли им знать, что им что-то недоступно? Имеет ли значение отображение действия, которое не работает? Смогут ли они без него выполнить задачу?
👍 Рассмотрите возможность удаления недоступных или неприменимых параметров. Покажите действия, которые актуальны и полезны только для пользователя в данный момент.
Примеры:
- Ссылки на страницы, недоступные для пользователей с ограниченным доступом.
- Действия, доступные в зависимости от настроек конфиденциальности пользователя.
- Фильтры, неприменимые к выбранным элементам.
2. Предоставьте контекст
Понятно, почему пользователю заблокировано выполнение действия? Догадаются ли они, что нужно для продолжения?
Текст и выключенная кнопка
👍 Рассмотрите возможность объединения отключенного действия с дополнительной информацией.
Примеры:
- Для использования этой функции должна быть включена настройка.
- Для продолжения требуется выбор.
- Требуется отдельный ввод для расчета стоимости и отображения вариантов оплаты.
Подсказка
👍 Рассмотрите возможность использования всплывающей подсказки, чтобы описать, почему действие недоступно.
Примеры:
- Действие недоступно из-за ограничений.
- Требуется ввод для доступа к другим параметрам.
3. Включите по умолчанию, а потом, при необходимости, покажите ошибку
Насколько вероятно, что пользователи введут неправильное значение или отправят неполную форму? Это единственный способ проверить форму?
👍 Иногда проверка может происходить только после отправки формы. Это нормально, если ожидается, что ошибка будет происходить очень редко. Обязательно укажите, какие поля являются обязательными, а какие — необязательными, чтобы у пользователей было больше шансов заполнить форму с первой попытки.
Пример:
- Формы с минимальным количеством полей для ввода, например, страница входа и забытого пароля.
Спасибо за прочтение. Я очень увлечен доступностью и написал статью о том, как тестировать свои проекты с помощью программы чтения с экрана. Я надеюсь вдохновить дизайнеров думать о доступности на ранних этапах процесса проектирования. ✨