Кнопки, формы и поля ввода

Форма — это место, где пользователь даёт вам деньги, данные или согласие. Каждая лишняя секунда сомнения здесь стоит конверсии.

«Лучшая форма — та, которую не замечаешь, пока не нажмёшь „Готово“».

Кнопки и формы — самые «рабочие» элементы интерфейса. Тут важнее всего две вещи: иерархия (видно главное действие) и обратная связь (видно, что происходит).

Иерархия кнопок

На экране обычно одно главное действие. Оно — primary (залитая акцентом). Второстепенные — secondary (контур) или ghost (только текст). Три одинаковых ярких кнопки = ноль приоритета.

.btn {
  padding: 12px 20px;       /* комфортная тач-цель */
  border-radius: 8px;
  font-weight: 600;
}
.btn-primary {
  background: var(--color-action);
  color: #fff;
}
.btn-primary:hover    { filter: brightness(0.92); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible    { outline: 3px solid var(--color-action); }

Доступные формы

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

<label for="email">Email</label>
<input id="email" type="email" autocomplete="email"
       aria-describedby="email-err">
<p id="email-err" class="error">Введите корректный email</p>

  ОШИБКА: ГДЕ ПОКАЗАТЬ
  --------------------
  ПЛОХО:                 ХОРОШО:
  [!] Есть ошибки  <- верх  Email
  ...                       [ neil@      ]
  Email [        ]          (X) Введите корректный email
  (где именно ошибка?)      сразу видно, что чинить

Разбор глубже: формы как точка, где теряют пользователей

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

Иерархия кнопок напрямую управляет тем, что сделает пользователь. На экране почти всегда есть одно главное действие — оно должно быть единственной залитой акцентом кнопкой (primary). Остальные действия ослабляют до контурных (secondary) или текстовых (ghost). Когда новичок делает три ярких кнопки в ряд, он фактически снимает с себя ответственность за выбор и перекладывает её на пользователя — а тот теряется. Сильная иерархия кнопок — это форма заботы: интерфейс мягко подсказывает «вот это вы, скорее всего, хотите сделать».

Доступность форм держится на двух вещах: связанных подписях и понятных ошибках. <label>, привязанный к полю, — это не украшение: он озвучивается скринридером при фокусе и увеличивает кликабельную зону. Плейсхолдер его не заменяет, потому что исчезает при вводе — и пользователь, отвлёкшись, забывает, что вообще вводил в это поле. Ошибки же показывают у конкретного поля, текстом, связанным через aria-describedby, а не общим баннером «есть ошибки» наверху, по которому непонятно, что чинить. Состояния (hover, focus, disabled) и тач-цели достаточного размера завершают картину: пользователь всегда видит, где он, что нажимаемо и что происходит.

Как делают ПЛОХО

Три ярких кнопки в ряд — непонятно, что главное. Поля без label, только плейсхолдер, который исчез при вводе. Ошибки — общим баннером сверху, без указания, какое поле виновато. Нет состояний hover/focus/disabled.

Как делают ХОРОШО

Одна primary-кнопка на экран. У каждого поля есть label и autocomplete. Ошибка — текстом рядом с полем, связана через aria-describedby. Все состояния кнопок проработаны, тач-цели комфортны.

Чек-лист

• Одно главное (primary) действие на экран.
• У каждого поля есть видимый label (не только placeholder).
• Ошибка — рядом с полем, текстом, связана aria-describedby.
• Кнопки имеют hover/focus/disabled.
• Есть autocomplete и удобные тач-цели.

Итог. Кнопки строят иерархией (одна primary), формы — на label, понятных ошибках у поля и состояниях. Это прямо влияет на конверсию и доступность.