Состояния кнопок в интерфейсах: какие бывают и как их задизайнить

Начинающие дизайнеры часто ограничиваются одним состоянием кнопки — по умолчанию. Но что увидит пользователь, если наведет на неё курсор? Или нажмет? Если не продумать такие сценарии, разработчики либо засыплют вопросами, либо сделают всё на свой вкус. Чтобы упростить жизнь и пользователям, и разработчикам (и даже, возможно, дизайнерам, которые далее будут работать с вашим проектом), хорошей практикой будет с самого начала продумать все состояния кнопок, с которыми может столкнуться пользователь. И это вопрос не только эстетики.

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

Большинство дизайн-систем, с которыми я сталкивалась, продумывают 6 состояний кнопок:

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

Что сообщает пользователю: указывает, что кнопка активна и доступна для взаимодействия.

Рекомендации по дизайну

Дизайн зависит от типа кнопки, которых, как правило, 3:

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

Рекомендации по дизайну

Допустимо добавить ненавязчивую анимацию. Это может быть:

Чтобы эффекты наведения казались плавными и естественными, используйте переходы длительностью 200-300 мс.

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

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

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

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

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

В каких случаях состояние фокуса нужно продумать

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

Если вам не нравятся дефолтные стили или они конфликтуют с дизайном сайта — измените их.

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

Рекомендации по дизайну

Многие авторитетные источники советуют добавлять очевидную обводку вокруг элемента, находящегося в фокусе. Вы можете прочитать подробнее об этом в статье NNGroup или в рекомендациях по внешнему виду фокуса на сайте руководства по обеспечению доступности веб-контента (WCAG). Если кратко, то совет будет таким: используйте высококонтрастную обводку толщиной не менее 2 px, чтобы кнопка в фокусе была хорошо видна.

Кстати, вы можете добавить отступ в 2 px между элементом и его обводкой. Это поможет сделать границу фокуса чёткой и заметной, даже если фон или цвет элемента изменятся.

Что сообщает пользователю: кнопка была нажата. Это помогает предотвратить яростные клики, если ваш пользователь посчитает, что его запрос не был выполнен.

Рекомендации по дизайну

В активном состоянии рекомендуют делать кнопку визуально «вдавленной», имитируя нажатие на физическую кнопку. Для этого можно сделать заливку и границу кнопки немного темнее, а также добавить внутреннюю тень.

Что сообщает пользователю: кнопка временно недоступна для взаимодействия.

Рекомендации по дизайну

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

В Material Design 2 четко прописано, что отключенные состояния отображаются с непрозрачностью в 38% от включенного состояния. Однако в Material Design 3 конкретная рекомендация по этому вопросу уже отсутствует, а в Material 3 Design Kit для неактивных кнопок используется серый цвет.

Интересно, что независимое издательство по дизайну пользовательского опыта, UX Movement поддерживает именно идею снижения прозрачности. Авторы объясняют это тем, что серые кнопки могут восприниматься пользователями как активные элементы, так как на некоторых сайтах серый цвет используется для второстепенных кнопок, например, для «Отмена».

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

Что сообщает сообщение: действие, связанное с нажатием на кнопку, в настоящее время выполняется.

Когда нужно вводить

Согласно данным все того же UX Movement, состояние загрузки стоит показывать, если действие занимает более 2-х секунд. Пользователи ожидают, что страница загрузится именно за это время. Если состояние загрузки не показывать, они могут не понять, что действие обрабатывается, и начать нажимать кнопку снова и снова. Это может привести к нежелательным последствиям, таким как несколько оплат одной покупки или повторная отправка сообщения.

Рекомендации по дизайну