UXPUB

UXPUB - сообщество из 3,050 дизайнеров и творческих людей

Место, где дизайнеры делятся опытом

Создать аккаунт Войти
Cover image for Решение проблем неактивных кнопок в дизайне интерфейсов
Редакция
Редакция

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

Решение проблем неактивных кнопок в дизайне интерфейсов

#ui

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

«Почему я не могу нажать на этот элемент?», «Что мне делать?», «Почему он больше не доступен?». Давайте рассмотрим три альтернативных решения, которые сделают отключенные кнопки менее неприятными.

1. Показывайте только элементы, с которыми можно взаимодействовать

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

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

Примеры:

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

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

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

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

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

Примеры:

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

Подсказка

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

Примеры:

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

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

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

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

Пример:

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

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


Перевод статьи stories.justinewin.com

Обсуждение (1)

Свернуть/развернуть
yurabruskov profile image
Юрий Брусков
  • к первому пункту, надо оценить, насколько важно дать понять, что неактивное действие существует. Я тут за то что бы дать совет, что нужно для активации. То есть за пункты 2 и 3 .

п.с. Пока регался, столкнулся с топиком. )