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

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

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

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

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

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

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

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

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

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

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

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

1 Комментарий
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Похожие статьи
Radio buttons
Подробнее

UX-дизайн Radio buttons

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

Лучшие статьи, раз в неделю, с доставкой на почту

Total
54
Share