Отключенные кнопки не должны путать пользователей

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

«Почему я не могу нажать на это?», «Что мне делать?», «Почему это больше не доступно?».

Давайте рассмотрим три альтернативных решения, которые сделают столкновения с отключенными кнопками менее неприятными.

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

1. Покажите только то, что можно сделать

Насколько важно для пользователя сейчас получить доступ к отключенному элементу? Нужно ли им знать, что им что-то недоступно? Имеет ли значение отображение действия, которое не работает? Смогут ли они без него выполнить задачу?

👍 Рассмотрите возможность удаления недоступных или неприменимых параметров. Покажите действия, которые актуальны и полезны только для пользователя в данный момент.

Примеры:

• Ссылки на страницы, недоступные для пользователей с ограниченным доступом.
• Действия, доступные в зависимости от настроек конфиденциальности пользователя.
• Фильтры, неприменимые к выбранным элементам.

2. Предоставьте контекст

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

Текст и выключенная кнопка

👍 Рассмотрите возможность объединения отключенного действия с дополнительной информацией.

Примеры:

• Для использования этой функции должна быть включена настройка.
• Для продолжения требуется выбор.
• Требуется отдельный ввод для расчета стоимости и отображения вариантов оплаты.

Подсказка

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

Примеры:

• Действие недоступно из-за ограничений.
• Требуется ввод для доступа к другим параметрам.

3. Включите по умолчанию, а потом, при необходимости, покажите ошибку

Насколько вероятно, что пользователи введут неправильное значение или отправят неполную форму? Это единственный способ проверить форму?

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

Пример:

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

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

Источник