Почему форме нужны состояния загрузки и ошибки
Наглядные примеры ожидания, успеха и ошибки: как форма сохраняет ввод и что делает, если подтверждение отправки потерялось.
Вы подробно описали задачу, нажали «Отправить» — и ничего не изменилось. Кнопка осталась прежней. Заявка ушла? Нужно подождать? Нажать ещё раз?
Даже короткая пауза создаёт неопределённость. Хорошая форма отвечает на три вопроса: что происходит сейчас, что случилось с данными и что можно сделать дальше. Разберём это на примере формы связи этого сайта. Ниже — иллюстративные фрагменты интерфейса. Данные в них условные, а сообщения соответствуют состояниям формы этого сайта.
Пока форма работает, ей нужен голос
Между кликом и ответом сервера есть несколько шагов. Сначала форма подготавливает проверку. При включённой защите открывается Яндекс SmartCaptcha. После прохождения проверки начинается отправка.
Фрагмент состояния отправки: текст остаётся на месте, а подпись кнопки объясняет, что происходит.
В этой форме меняются подпись кнопки и индикатор загрузки. На время проверки и запроса поля и отправка недоступны: нельзя случайно запустить вторую отправку или изменить данные посреди первой. Это временное состояние заканчивается результатом либо понятной ошибкой.
Индикатор сам по себе говорит только «что-то происходит». Короткая фраза рядом уточняет действие. Постоянная анимация без объяснения и выхода оставляет человека с тем же вопросом, что и неподвижная кнопка.
Успех должен быть подтверждён
Сообщение «Заявка успешно отправлена» появляется после успешного ответа сервера. Сам клик ещё не означает, что обращение принято.
Успех сформулирован явно. Рядом — пояснение, что произойдёт дальше, и действие для новой задачи.
После успеха человеку полезно знать, что произойдёт дальше: «Свяжусь с вами по указанному контакту». Здесь не нужен выдуманный срок ответа. Если понадобится отправить ещё одну задачу, для этого есть действие «Новая заявка».
Ошибка не должна заставлять писать заново
Представьте, что посетитель несколько минут составлял описание. Сеть прервалась — а форма очистилась. Теперь ему приходится повторять не только отправку, но и всю работу.
При ошибке в этой форме ввод сохраняется. Рядом с объяснением есть повторная отправка и возможность связаться через Telegram или email. У человека остаётся выбор, как продолжить.
Тот же введённый текст остаётся над сообщением. Повторная попытка не требует составлять его заново.
Сравните два сообщения:
«Что-то пошло не так» — сообщает о проблеме, но не помогает действовать.
«Ваши данные сохранены в форме. Попробуйте ещё раз или свяжитесь со мной другим способом» — объясняет, что осталось и как продолжить.
Полезное сообщение не обвиняет посетителя и не показывает ему технический журнал. Если нужно исправить конкретное поле, пояснение должно помогать найти его. Если проблема в соединении, переписывание текста её не решит.
Неизвестный результат — отдельный случай
Иногда сервер уже сохранил заявку, но его ответ не дошёл до браузера. В таком случае нельзя уверенно сказать ни «всё отправлено», ни «ничего не отправилось».
Сообщение об неизвестном результате отличается от обычной ошибки: данные могли сохраниться, поэтому повторяется именно та же заявка.
Для этого случая форма показывает «Не удалось подтвердить отправку». Она сохраняет исходный контекст и повторяет запрос с тем же идентификатором. Если запись уже есть, сервер возвращает подтверждение без создания копии.
Пока результат неизвестен, исходные поля остаются заблокированными. Это сохраняет соответствие между попыткой и её данными, включая выбранную услугу. Посетителю объясняется причина и предлагается повтор той же заявки либо другой способ связи.
Что происходит при закрытии окна?
На внутренних страницах форма открывается в диалоге. Если закрыть его до отправки, можно вернуться к черновику в той же открытой странице. Закрытие окна проверки отменяет подготовку, сохраняя ввод.
Уже начавшийся запрос завершается независимо от закрытия диалога. После возвращения форма показывает его результат. Фокус возвращается на кнопку, с которой окно открыли: это помогает продолжить работу с клавиатуры.
Быстрая проверка своей формы
Попробуйте пройти не только успешный путь:
- включите медленное соединение: понятно ли, что форма ждёт ответ;
- проверьте отказ запроса: сохранились ли поля и есть ли следующий шаг;
- нажмите отправку повторно: не создаётся ли лишняя заявка;
- пройдите сценарий с клавиатуры: можно ли найти сообщение и вернуться к форме.
Такие детали редко заметны на статичном макете. Но именно они определяют, будет ли человеку спокойно пользоваться готовым интерфейсом.