Connect with us

Дизайн и прототипирование

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

Три простых решения, кроме простого отключения кнопок.

Опубликовано

/

     
     

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

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

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

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

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

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

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

Примеры:

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

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

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

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

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

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

Примеры:

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

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

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

Подсказка

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

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

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

Примеры:

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

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

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

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

Пример:

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

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

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

Источник

Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement

Популярное

Спасибо!

Теперь редакторы в курсе.