Отключенные кнопки — опасный элемент интерфейса. Они могут создавать дополнительную путаницу и вызывать у пользователей негативные эмоции. Но иногда их добавление действительно оправданно.
Сегодня мы разберем:
- что такое отключенные кнопки,
- с какими проблемами они связаны,
- какие альтернативы отключенным кнопкам существуют.
Что такое отключенные кнопки (disabled buttons)
Отключенная кнопка — это временно не активный, не доступный для взаимодействия элемент интерфейса. Для обозначения отключенного состояния обычно используется серый цвет или пониженная непрозрачность.
Чаще всего такие кнопки встречаются в формах и приложениях. Фактически они сообщают, что людям необходимо совершить дополнительные действия, например, ввести те или иные данные, чтобы воспользоваться соответствующей функцией.
Несколько распространенных UX-проблем, вызванных отключенными кнопками
Путаница
Отключенные кнопки сбивают некоторых пользователей с толку. Люди не могут понять, почему элемент не реагирует на нажатие. Они смотрят на кнопку и думают, что она делает, почему она отключена и как ее включить. Они не знают, была ли она отключена изначально или изменила свое состояние в ответ на какие-то их действия. Все это оставляет их в расстроенных чувствах.
Испорченный опыт
Наткнувшись на отключенную кнопку после заполнения формы, пользователи чувствуют себя растерянно. Ведь если двигаться дальше не получается, значит, они ввели что-то неправильно. Они начинают просматривать страницу с самого начала, чтобы найти ошибки или обязательные для заполнения поля, которые они могли пропустить.
Неактивная кнопка отправки формы действительно сигнализирует, что что-то не так. Но не сообщает, что именно. Иногда пользователи вообще не могут понять, в чем проблема — неточности в данных, сбой в системе или плохое подключение к интернету.
Раздражающий поиск ошибок может затянуться. Подобный опыт оставит лишь негативные впечатления, особенно, если люди так и не поймут, почему они столкнулись с ограничениями.
Низкая доступность
Отключенные кнопки зачастую недостаточно контрастны, что плохо сказывается на доступности. Пользователям с нарушениями зрения особенно сложно распознать такие кнопки и прочитать подписи на них.
Отсутствие состояния фокуса
У отключенных кнопок нет состояния фокуса. Поскольку взаимодействие с ними ограничено, они никак не реагируют на наведение курсора или нажатие. Такое отсутствие обратной связи приводит пользователей в замешательство: они не могут понять, почему кнопка заблокирована и как ее активировать.
Примечание: Показывать всплывающие подсказки при наведении на отключенную кнопку — не самая лучшая идея, так как мы не можем быть уверены, что пользователи попытаются нажать на нее.
Прерванный сценарий
Неактивные кнопки прерывают пользовательские сценарии. Людям приходится делать паузу и выяснять, почему кнопка не работает и как ее включить. Иногда они начинают заполнять форму заново, чтобы исправить все возможные ошибки. Это замедляет процесс и может привести к ненужной потере времени.
Неэффективная коммуникация
Дизайн — это коммуникация, а отключенные кнопки никак не объясняют аудитории причины своего существования. Пользователи испытывают раздражение, когда не могут найти в интерфейсе четких инструкций. Это противоречит их ожиданиям.
В каких случаях использование отключенных кнопок оправданно
1. В системах управления контентом, таких как Google Drive или SharePoint, кнопки «Поделиться» или «Загрузить» становятся активными только после выбора элемента.
2. В приложениях для совместной работы и обмена сообщениями, таких как Slack или Microsoft Teams, кнопки «Отправить»/«Опубликовать» в чате остаются неактивными до тех пор, пока пользователь не введет текст в соответствующее поле.
3. В приложениях для аудио- и видеозвонков, например, Zoom, кнопка «Присоединиться» остается неактивной, пока до начала встречи не останется 15 минут (можно установить другое время).
4. В таких редакторах, как Microsoft Word или Google Docs, некоторые параметры форматирования остаются неактивными до тех пор, пока пользователь не выберет соответствующий текст или объект, чтобы применить эти изменения.
5. Соцсети, например, Facebook* или Twitter (X), блокируют кнопку «Опубликовать» до тех пор, пока пользователи не введут минимальное количество символов. Фактически кнопка становится активной, как только они начинают печатать. Это делается для того, чтобы избежать публикации пустых сообщений.
Подведем итог. Если в интерфейсе имеется отключенная кнопка, у пользователя должна быть возможность ее активировать. Этот способ должен быть понятным, чтобы люди не блуждали туда-сюда в поисках решения. В рассмотренных примерах пользователи ожидают, что кнопка станет активной через некоторое время или в ответ на какое-то действие.
Альтернативные решения
Скрыть кнопку
Вместо отключения кнопки вы можете ее полностью скрыть. Однако это решение работает лишь при определенных условиях:
1. Кнопка ни в коем случае не будет активирована для текущего пользователя, например, потому, что у него нет доступа к конкретной функции.
2. Нажав на кнопку, пользователь не получит никакой ценности, например, если эта кнопка ведет на пустую страницу, данные для которой отсутствуют.
В иных случаях удаление кнопки из интерфейса и ее повторное отображение после определенных действий пользователя — плохая идея. Люди будут путаться, тратить время на поиск кнопки, обновлять страницу, перезапускать браузер и т.д.
Добавить всплывающую подсказку
Всплывающая подсказка может содержать разъяснения относительно того, почему кнопка неактивна и как ее включить. Есть несколько сценариев, которые необходимо учитывать при выборе этого варианта:
1. Важно найти подходящее место для отображения всплывающей подсказки или вспомогательного текста. Поскольку отключенные кнопки не имеют состояния фокуса, пользователь не ожидает увидеть что-либо подобное при взаимодействии с ней. Эффективное решение — специальная иконка, которая возьмет на себя эту роль и будет отображать подробную информацию при наведении.
2. Вы можете отобразить текст подсказки прямо в интерфейсе, где-нибудь поближе к кнопке. Только убедитесь, что он выглядит уместно и гармонично.
3. Что касается форм, самый лучший подход — встроенная валидация, то есть мгновенная проверка введенных данных и предоставление информации об ошибках до того, как пользователи перейдут к следующему полю. Если же после заполнения всех полей кнопка отправки остается неактивной, пользователям приходится просматривать форму с самого начала и искать проблему самостоятельно.
Выбрать более эффективный способ коммуникации с пользователями
1. Если товар недоступен для покупки, вы можете заменить отключенную кнопку «Нет в наличии» на кнопку «Добавить в избранное» или «Посмотреть похожие товары». Так вы не только донесете до пользователей свое сообщение, но и узнаете, что еще их интересует.
2. Когда пользователь открывает страницу понравившегося товара, с самого начала отображайте размер и цвет по умолчанию, вместо того чтобы отключать кнопку «Добавить в корзину» до момента выбора. При необходимости пользователь сможет изменить эти параметры.
Полностью отказаться от неактивных кнопок
Оставляйте все кнопки в активном состоянии. Пусть лучше пользователи нажимают на них и видят сообщения об ошибках. Такой подход сводит к минимуму когнитивную нагрузку, ведь им не приходится искать причину отключения самостоятельно.
1. Произведите проверку введенных данных при нажатии на кнопку.
2. Выделите ошибку(и) на странице.
3. Переместите пользователя к первой ошибке и отобразите описание ошибки рядом с соответствующим полем.
Кнопка «Далее» (Next) на странице входа Gmail всегда остается активной. Если пользователь нажмет на нее, напечатав в поле неверные данные, он увидит красную рамку и сообщение об ошибке.
Mailchimp постоянно показывает активную кнопку «Зарегистрироваться» (Sign Up). Если пользователь нажимает на нее, не указав необходимую информацию, все ошибки отображаются в форме и выделяются красным цветом.
Заключение
- Всякий раз, когда вам захочется добавить в интерфейс отключенную кнопку, сначала спросите себя, нет ли альтернативы получше.
- Соотнести все перечисленные сценарии со своей ситуацией, чтобы найти более эффективное решение.
- Если добавление отключенных кнопок — единственный выход, постарайтесь сделать их максимально удобными для пользователей, чтобы люди могли понять их назначение и активировать их, выполнив необходимое действие.
* Meta признана в РФ экстремистской организацией.
.svg)
