Состояния кнопок: руководство

В сегодняшней статье мы поговорим о том:

• что такое состояния кнопок и какими они бывают,
• как передать их наиболее эффективно,
• как они соотносятся со стилями кнопок.

Резюме: Небольшие визуальные изменения помогают пользователям различать 5 состояний кнопок: включенная (доступная), отключенная (заблокированная), наведение, фокус, нажатие (активная).

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

Состояния кнопок

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

Вот наиболее популярные состояния кнопок: 

• Включенное (Enabled)
• Отключенное (Disabled)
• Наведение (Hover)
• Фокус (Focus)
• Нажатое (Pressed)

(1) Включенное состояние (Enabled)

Включенное состояние, которое также иногда называют состоянием по умолчанию, показывает, что кнопка доступна для взаимодействия (нажатия или касания).

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

Чаще всего активные кнопки имеют следующие визуальные характеристики:

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

(2) Отключенное состояние (Disabled)

Противоположное состояние, которое указывает на то, что в данный момент кнопка недоступна для взаимодействия. В отключенном состоянии внешний вид кнопки не меняется, когда пользователь пытается нажать или коснуться ее.

Пример — кнопка «Отправить» в форме, которая остается неактивной, пока человек не заполнит все необходимые поля.

Отключенная кнопка никак нее реагирует на действия пользователей

Чаще всего неактивные кнопки имеют следующие визуальные характеристики:

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

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

Для отключенных состояний следует также добавить в код атрибут ARIA-disabled: true. Так кнопка будет по-прежнему будет попадать в фокус с клавиатуры, но скринридеры поймут и объявят пользователям, что она неактивна.

(3) Состояние наведения (Hover)

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

Чтобы изменение цвета не происходило, когда пользователи просто перемещают курсор по экрану и не собираются нажимать на кнопку, следует добавить к этому состоянию небольшую задержку — около 150–200 мс.          

Чаще всего кнопки в состоянии наведения имеют следующие визуальные характеристики:

• легкое затемнение цвета фона по сравнению с активным состоянием,
• изменение курсора со стрелки на руку.
  ‍

Внешний вид кнопки меняется, когда пользователь наводит на нее курсор

(4) Состояние фокуса (Focus)

Аналог состояния наведения, но при взаимодействии с клавиатуры. Когда пользователь нажимает клавишу Tab для перемещения между активными элементами на странице, состояние фокуса указывает, какой элемент выбран в данный момент (и может быть активирован с помощью клавиши Enter). 

Состояние фокуса должно появляться довольно быстро (спустя 100–150 мс), в противном случае пользователь может перейти к следующему элементу и пропустить нужную кнопку.
‍

Белая обводка позволяет пользователю узнать, какая кнопка сейчас в фокусе

По умолчанию состояние фокуса обозначается синей обводкой. Однако вы можете легко настроить его в соответствии с вашим визуальным дизайном или стандартами бренда. 

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

(5) Состояние нажатия (Pressed)

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

Это состояние должно запускаться в течение 100–150 мс, чтобы показать, что действие было зафиксировано мгновенно. Если же обратная связь не будет своевременной, пользователи начнут нажимать на кнопку еще и еще, что может вызвать дополнительные проблемы.

Состояние нажатия дает пользователям понять, что совершенное ими действие было зарегистрировано системой

Другие состояния

Есть еще несколько состояний, которые стоит включить в дизайн-систему.

Состояние загрузки (Loading)

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

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

Состояние загрузки указывает на то, что действие находится в процессе выполнения

Выбранное состояние (Selected)

Выбранное состояние характерно для чекбоксов и радиокнопок и указывает на то, что пользователь выбрал конкретную опцию. Обратите внимание, это состояние неприменимо для кнопок, но мы включили его сюда, потому что иногда его путают с состоянием нажатия (pressed).

Состояния vs стили кнопок

Стиль кнопки — это то, как она визуально представлена в интерфейсе и насколько важной и акцентной она является. Обычно различают три стиля кнопок: первичные, вторичные и третичные. Одна и та же кнопка может находиться в разных состояниях в разное время, в зависимости от действий пользователя и статуса системы. Но у одной кнопки будет только один стиль. 

Первичные кнопки

Первичные кнопки выделяются в интерфейсе сильнее всего. Они привлекают внимание пользователя и направляют его к совершению важного или основного действия, например, «Создать», «Сохранить» или «Оформить заказ». Как правило, первичные кнопки имеют сплошную, однотонную заливку.

Вторичные кнопки

Вторичные кнопки не такие акцентные. Они предназначены для менее важных или реже совершаемых действий, например, «Отменить» или «Ответить». Обычно это контурные кнопки.

Третичные кнопки

Третичные кнопки наименее заметны. Они отвечают за опциональные или дополнительные действия, например, «Показать больше».

Не забудьте о подписи

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