UXPUB 🇺🇦 Дизайн-спільнота

Редакція
Редакція

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

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

#ux

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

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

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

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

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

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

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

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

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


Перевод статьи anthony

Топ коментарі (0)