Дизайн кнопок в интерфейсе: размеры, состояния, тексты

Из чего складывается хорошая кнопка

У кнопки одна задача: показать, что действие доступно, и объяснить, что произойдёт после нажатия. Для этого нужны четыре вещи:

• Иерархия — главное действие выделяется, остальные отходят на второй план.
• Состояния — кнопка заметно реагирует на наведение, фокус с клавиатуры, нажатие и ожидание.
• Размер — в неё легко попасть мышью или пальцем.
• Текст — короткая фраза с глаголом, которая называет результат.

Если чего-то не хватает, пользователь сомневается, нажимает не то или нажимает дважды.

Иерархия: основная, второстепенная, третичная

Правила, которые сохраняют иерархию читаемой:

• Одна основная кнопка на экран или блок. Если всё главное, то ничего не главное.
• Постоянный порядок. В диалогах выберите, где стоит основное действие, и повторяйте это по всему продукту. В нативных приложениях следуйте соглашениям платформы.
• «Отмена» не должна весить столько же, сколько «Удалить». Безопасный вариант не должен выглядеть как опасный, а для необратимых действий нужны подтверждение или отмена.

Состояния, которые нужны каждой кнопке

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

Минимальная база в CSS для фокуса и загрузки:

.btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.btn[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.8;
}

Размеры

• Тач-зоны. Apple рекомендует минимум 44×44 pt, Material Design — 48×48 dp. Видимая кнопка может быть меньше, если область нажатия расширена вокруг неё.
• Шкала размеров. Задайте в дизайн-системе два-три размера (small, medium, large) и используйте только их, а не новую высоту на каждом экране.
• Внутренние отступы. Горизонтальные больше вертикальных, текст не прилипает к краям.
• Расстояние между кнопками. Достаточное, чтобы палец не попадал в соседнюю.
• Ширина. Кнопка на всю ширину хорошо работает для главного действия мобильной формы. На широком десктопе не растягивайте её на весь макет.

Как писать тексты

• Начинайте с глагола: «Отправить счёт», а не «Счёт».
• Называйте результат, а не механику: «Скачать отчёт» понятнее, чем «Отправить» или «ОК».
• Будьте конкретны в диалогах: «Удалить проект» и «Оставить проект» вместо «Да» и «Нет».
• Коротко: обычно одно-три слова.
• Совпадение со следующим шагом: если на кнопке «Перейти к оплате», следующий экран должен быть оплатой.
• Один стиль регистра. Обычный регистр читается легче, чем ВСЕ ЗАГЛАВНЫЕ.
• Кнопкам-иконкам нужно имя. Добавьте доступную подпись (aria-label) и, желательно, тултип.

Частые ошибки

• Несколько основных кнопок конкурируют на одном экране.
• Ссылки оформлены как кнопки и наоборот. Кнопка выполняет действие, ссылка ведёт на другую страницу.
• Убранная обводка фокуса «потому что некрасиво».
• Кнопки-призраки с такой бледной обводкой, что их не видно. WCAG требует контраст не ниже 3:1 для визуальных границ элемента управления и 4,5:1 для обычного текста.
• Кнопка меняет ширину при появлении спиннера, и макет прыгает.
• Общие тексты, которые скрывают последствия действия.