Состояния кнопок в интерфейсах: какие бывают и как их задизайнить
Начинающие дизайнеры часто ограничиваются одним состоянием кнопки — по умолчанию. Но что увидит пользователь, если наведет на неё курсор? Или нажмет? Если не продумать такие сценарии, разработчики либо засыплют вопросами, либо сделают всё на свой вкус. Чтобы упростить жизнь и пользователям, и разработчикам (и даже, возможно, дизайнерам, которые далее будут работать с вашим проектом), хорошей практикой будет с самого начала продумать все состояния кнопок, с которыми может столкнуться пользователь. И это вопрос не только эстетики.
Разное оформление разных состояний сообщает пользователю, что происходит. Навел курсор — видит, что кнопка готова к нажатию. Нажал — понимает, что действие выполняется. Это помогает избежать путаницы и делает интерфейс интуитивным, удобным и приятным.
Какие состояния кнопок в дизайне следует учитывать
Большинство дизайн-систем, с которыми я сталкивалась, продумывают 6 состояний кнопок:
- Default — включена, готова к действию.
- Hover — реагирует на наведение курсора.
- Focus — выделена при использовании клавиатуры, голосового ввода или другого способа.
- Active — кнопка нажата.
- Loading — запрос выполняется.
- Disabled — отключена, на неё не нажать.
Рекомендации по оформлению этих 6 состояний мы и разберем в материале. Но помните, что в зависимости от специфики проекта количество состояний кнопок может меняться. Например, могут быть добавлены новые: состояние успеха, ошибки и так далее. Их особенности оформления постараемся описать в Telegram-канале нашего проекта.
Default (состояние по умолчанию)
Что сообщает пользователю: указывает, что кнопка активна и доступна для взаимодействия.
Рекомендации по дизайну
Дизайн зависит от типа кнопки, которых, как правило, 3:
- Основная (primary) — главная кнопка на странице, подталкивающая пользователя к ключевому действию. В интернет-магазине это может быть «Оформить заказ». Она должна привлекать внимание пользователей и побуждать их к нажатию. Именно поэтому основные кнопки делают яркими. Обычно используют сплошную заливку и фирменный цвет, который контрастирует с фоном. Источник
- Вторичная (secondary) — предлагает альтернативу основному действию, например, «Сохранить в избранное» или «Продолжить покупки». Обычно менее заметная по сравнению с основной кнопкой: либо имеет контурный контейнер без заливки, либо окрашена в менее яркий и контрастный к фону цвет. Кстати, кнопки, которые состоят из контура и текста еще называют кнопками-призраками.
- Третичная (tertiary) — кнопки действия с наименьшим приоритетом. Они могут представлять собой вспомогательные функции. С точки зрения разработчиков третичные кнопки создаются как кнопки, но для пользователя они выглядят как обычные текстовые ссылки.
Нover (состояние наведения)
Что сообщает пользователю: когда пользователь наводит курсор на кнопку, это состояние сигнализирует, что она готова к действию.
Рекомендации по дизайну
Допустимо добавить ненавязчивую анимацию. Это может быть:
- Изменение оттенка кнопки (её можно слегка осветлить или затемнить).
- Изменение цвета кнопки — например, в дефолтном состоянии кнопка была синей, а при наведении становится желтой.
- Инверсия— визуальный эффект, при котором цвета кнопки и её текста меняются местами при наведении курсора. Например, по умолчанию кнопка синего цвета с белым текстом, а при ховере фон кнопки становится белым, а текст — синим.
- Увеличение кнопки на 3-5% при наведении. Главное, чтобы масштабирование было плавным и ненавязчивым.
- Усиление или добавление тени под кнопкой.
- Смещение кнопки на пару пикселей вверх, вниз или в сторону.
Чтобы эффекты наведения казались плавными и естественными, используйте переходы длительностью 200-300 мс.
Не сопровождайте состояние наведения сложными анимациями. Да, может возникнуть соблазн добавить впечатляющие эффекты (некоторые примеры таковых можно найти тут). Но такие трюки больше вредят, чем помогают.
Почему? Во-первых, сложные эффекты могут замедлять работу интерфейса, особенно на устройствах с низкой производительностью. Во-вторых, они могут раздражать пользователей, особенно если такие анимации встречаются на каждом шагу. Представьте, что каждый раз, когда вы наводите курсор на кнопку, видите одну и ту же долгую и сложную анимацию — это утомляет.
Лучше использовать простые и плавные эффекты, которые только слегка подчеркивают интерактивность кнопки. Они делают интерфейс приятным и понятным, не отвлекая пользователя от основного действия.
Focus (состояние фокуса)
Что сообщает пользователю: показывает, что кнопка выбрана и готова к взаимодействию. Это особенно важно для тех, кто перемещается по интерфейсу с помощью клавиатуры, используя клавишу Tab. Среди таких пользователей могут быть люди с ограниченной подвижностью, пользователи программ чтения с экрана, а также продвинутые пользователи, такие как разработчики.
Фокус помогает пользователю понимать, с каким элементом он взаимодействует в данный момент. Без видимого фокуса клавиатурные пользователи могут просто потеряться в интерфейсе, не зная, какой элемент сейчас выбран.
В каких случаях состояние фокуса нужно продумать
Большинство браузеров стилизуют фокус по умолчанию, обычно это синяя сплошная обводка или серая пунктирная линия. Из-за этого некоторые дизайнеры решают не разрабатывать свои стили для состояния фокуса. И тут можно столкнуться с одной из следующих ситуаций:
- Настройки браузера по умолчанию конфликтуют с пользовательским дизайном, из-за чего контур фокуса становится трудно или невозможно увидеть. Например, синий контур кнопки в фокусе будет сложно разглядеть, если она расположена на синем фоне.
- Разработчики могут отключить состояние фокуса. Иногда это происходит случайно, а иногда намеренно, если им не нравятся стандартные стили фокуса. Пожалуйста, не удаляйте стили фокуса полностью: без них пользователи не смогут понять, на каком элементе они находятся.
Если вам не нравятся дефолтные стили или они конфликтуют с дизайном сайта — измените их.
Обратите внимание, что состояние видимого фокуса является обязательным условием для того, чтобы сайт считался доступным в соответствии с руководством по обеспечению доступности веб-контента (WCAG).
Рекомендации по дизайну
Многие авторитетные источники советуют добавлять очевидную обводку вокруг элемента, находящегося в фокусе. Вы можете прочитать подробнее об этом в статье NNGroup или в рекомендациях по внешнему виду фокуса на сайте руководства по обеспечению доступности веб-контента (WCAG). Если кратко, то совет будет таким: используйте высококонтрастную обводку толщиной не менее 2 px, чтобы кнопка в фокусе была хорошо видна.
Кстати, вы можете добавить отступ в 2 px между элементом и его обводкой. Это поможет сделать границу фокуса чёткой и заметной, даже если фон или цвет элемента изменятся.
Active (активное состояние)
Что сообщает пользователю: кнопка была нажата. Это помогает предотвратить яростные клики, если ваш пользователь посчитает, что его запрос не был выполнен.
Рекомендации по дизайну
В активном состоянии рекомендуют делать кнопку визуально «вдавленной», имитируя нажатие на физическую кнопку. Для этого можно сделать заливку и границу кнопки немного темнее, а также добавить внутреннюю тень.
Disabled (неактивное)
Что сообщает пользователю: кнопка временно недоступна для взаимодействия.
Рекомендации по дизайну
При создании неактивных кнопок важно учитывать, как они воспринимаются пользователями. В интернете широко распространено мнение, что неактивные кнопки лучше всего делать серыми или более прозрачными. Но тут есть свои нюансы.
В Material Design 2 четко прописано, что отключенные состояния отображаются с непрозрачностью в 38% от включенного состояния. Однако в Material Design 3 конкретная рекомендация по этому вопросу уже отсутствует, а в Material 3 Design Kit для неактивных кнопок используется серый цвет.
Интересно, что независимое издательство по дизайну пользовательского опыта, UX Movement поддерживает именно идею снижения прозрачности. Авторы объясняют это тем, что серые кнопки могут восприниматься пользователями как активные элементы, так как на некоторых сайтах серый цвет используется для второстепенных кнопок, например, для «Отмена».
Вне зависимости от выбранного подхода, неактивная кнопка должна выглядеть тусклой и ясно сообщать пользователю о своём статусе.
Loading (состояние загрузки)
Что сообщает сообщение: действие, связанное с нажатием на кнопку, в настоящее время выполняется.
Когда нужно вводить
Согласно данным все того же UX Movement, состояние загрузки стоит показывать, если действие занимает более 2-х секунд. Пользователи ожидают, что страница загрузится именно за это время. Если состояние загрузки не показывать, они могут не понять, что действие обрабатывается, и начать нажимать кнопку снова и снова. Это может привести к нежелательным последствиям, таким как несколько оплат одной покупки или повторная отправка сообщения.
Рекомендации по дизайну
- Хорошим тоном считается добавление на кнопку в таком состоянии понятного индикатора загрузки, например, иконки. При этом заменять текст кнопки на иконку не следует. Комбинация текста и иконки будет более понятной для пользователей.
- Можно изменить текст, чтобы подчеркнуть текущее состояние. Например, вместо «Загрузить» выводить «Загрузка».
- Для более сложных задач можно указывать объем работы рядом с кнопкой, например: «Отправлено 20 сообщений из 32». Это даст пользователям ясное представление о том, что происходит, и сколько времени им нужно ждать.
Чаще полезными постами про оформление кнопок мы делимся в блогах в соц сетях:
всем бы вашу статью прочитать
Прикольно разбирать такое изнутри. Я вчера себе брал подписку в Звуке (просто музыку слушать) и делал все через комп, очень много скролил, нажимал и так далее, интерфейс осматривал одним словом. А теперь с другой стороны на все это могу посмотреть
Это действительно очень интересно!)