1 qcrqhi3btrrqw7roq2t2qa 1160x467 - Почему не нужно выделять неактивные кнопки серым цветом

Что делать, если у вас есть неактивная кнопка в контексте? Удаление кнопки из ее исходного местоположения и последующее ее раскрытие может сильно удивить пользователей. Вместо этого дизайнеры укажут, что она отключена, чтобы не создавать радикальных изменений в интерфейсе.

Большинство дизайнеров сообщают об отключенном состоянии, используя неактивную кнопку. Тем не менее, этот подход также удивляет пользователей, потому что разница между активным и неактивным состоянием кнопки мало отличается.

Почему не нужно выделять неактивные кнопки серым цветом

Кнопка, которая резко изменяет свой цвет с серого на очень яркий – это неожиданное изменение, заставляющие пользователей задуматься о произошедшем, слишком много внимания затрачивается на такое незначительное изменение. Лучше всего этого избежать. Вместо того, чтобы скрывать отключенные кнопки, вы должны увеличить прозрачность кнопки, оставив ее в исходном цвете.

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

Прозрачная кнопка больше сливается с фоном, а серая остается на переднем плане (если фон не серый). Элементы переднего плана более заметны для пользователей. Они склонны рассматривать их как интерактивные, что означает, что они чаще взаимодействуют с серой отключенной кнопкой.

Почему не нужно выделять неактивные кнопки серым цветом

Пользователи с меньшей вероятностью перепутают прозрачную кнопку с другими кнопками. Серая кнопка не всегда означает, что она отключена. Иногда серый используется для кнопок с низким приоритетом (например, кнопки отмены). Пользователи могут легко принять неактивную отключенную кнопку за дополнительный призыв к действию. Или, в худшем случае, они могут принять это за плохо спроектированную кнопку с низким контрастом цвета.

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

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

Как вы поступаете с неактивными кнопками?

Оригинал: anthony

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Как упростить свой дизайн, большое руководство

Свыше 20 понятных иллюстрированных примеров Компании постоянно стремятся создавать простые и полезные…

Модальность – одна из концепций UX, которую большинство дизайнеров не до конца понимают

В этой статье мы собираемся изучить общий стандарт модальности в пользовательских интерфейсах.

5 способов сделать кнопку призыва к действию интуитивно понятной

Нажать или не нажать – это вопрос, который приходит в голову пользователю,…