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

Поля формы: Input и Select

Поля ввода (Input)

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

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

При работе с полями ввода обычно учитывают:

явные состояния поля (default, focus, disabled)
заранее обозначенную обязательность
понятный формат данных
навигацию с клавиатуры
достаточный контраст
логическую группировку связанных полей
разумные значения по умолчанию.

Выпадающие списки (Select)

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

При небольшом количестве вариантов быстрее работают радиокнопки, при большом — поиск или автозаполнение.

Для удобной работы с выпадающими списками важны:

поиск по длинным спискам
группировка и сортировка вариантов
навигация с клавиатуры
четкие визуальные состояния

Datepicker — выбор дат

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

Рекомендации:

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

Валидация форм

Пользователь должен понимать, что введено неверно, еще до отправки формы.

Основные принципы:

явно показывайте обязательные поля
добавляйте подсказки для сложных значений
проверяйте по мере ввода, но не слишком рано
убирайте ошибку сразу после исправления
показывайте все серверные ошибки одновременно
размещайте сообщения рядом с полем
формулируйте ошибки человеческим языком
используйте визуальные маркеры вместе с текстом

Тултипы

Тултип — короткая подсказка, которая появляется рядом с элементом и дает дополнительную информацию, не перегружая интерфейс.

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

Нотификации

Нотификация сообщает о важном и не должна отвлекать дольше необходимого. Их можно разделить:

По типу - информация, успех, предупреждение, ошибка, кастомные сообщения.
По содержанию - только текст, с кнопкой, с действием, со ссылкой.

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

Модальные окна

Модальное окно требует действия пользователя и перекрывает основной контент.

Используется для:

подтверждений
форм
онбординга
поиска
сценариев с прокруткой

Может появляется по центру экрана, сбоку, снизу с затемнением или размытием фона. Анимация — короткая, подчеркивающая модальность.

Меню

Классическое меню в шапке остается стандартом для B2B-интерфейсов:

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

Табы

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

Вывод

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

А есть ли случаи, когда изменения действительно влияют на опыт и дают измеримый результат? Да! И о них мы поговорим позже.

А пока предлагаем вам подумать, что относится к таким ситуациям?

Дизайн интерфейса: когда лучше ничего не менять. Часть 2