Тост или ошибка под полем — где показывать, чтобы её действительно исправили

Форма не отправилась. Ты выводишь «Проверьте правильность заполнения» — и выбираешь: всплывающей плашкой в углу или подписью под полем.

Кажется, что это вопрос вкуса. Он не про вкус. От выбора зависит, исправят ошибку или закроют вкладку — потому что у этих двух способов разная работа.

Короткий ориентир, если некогда читать дальше: если человек может это исправить прямо сейчас — пиши у поля. Если исправлять нечего — можно плашкой.

Что каждый из них на самом деле делает

Ошибка под полем (inline) привязана к месту. Она сообщает не только «что-то не так», но и «вот здесь». Она никуда не исчезает и остаётся на экране, пока проблема не решена.

Тост — плашка, которая появляется поверх интерфейса и уходит по таймеру. Она ни к чему не привязана и по устройству своему не задерживает внимание.

Разница между ними — не «мелкая ошибка против крупной». Разница в том, есть ли у человека действие, которое надо сделать в конкретной точке экрана.

Сравнение по тому, что реально решает

Заметят ли. Inline выигрывает, если она рядом с полем, куда человек и так смотрит. Проигрывает, если форма длинная: ошибка вверху, кнопка внизу, между ними экран прокрутки. Тост заметен ровно первые секунды и только тем, кто в этот момент смотрел в нужный угол.

Можно ли вернуться и перечитать. Inline — да, хоть через минуту. Тост — нет: ушёл и не восстановишь. Для сообщения из десяти слов это решает.

Понятно ли, что чинить. Inline отвечает сама фактом расположения. Тост вынужден описывать словами: «В поле "Телефон" неверный формат» — а человеку всё равно потом искать это поле глазами.

Доступность. У поля с ошибкой ставят aria-invalid="true" и связывают текст через aria-describedby — тогда скринридер читает ошибку вместе с полем, при переходе на него. Тост живёт в отдельной области с role="status" и озвучивается один раз, без связи с полем: услышал — и ищи. Требование стандарта тут строгое: ошибка должна быть описана текстом и указывать на элемент, в котором она произошла. Одной красной рамки недостаточно — цвет не текст.

Длина сообщения. Inline тянет две строки и подсказку формата. Тост — не больше одной короткой фразы, иначе не успеют прочитать.

Мобильный экран. Inline остаётся у поля и работает при прокрутке. Тост часто вылезает снизу и накрывает кнопку отправки — прямо ту, куда человек целится.

Несколько ошибок сразу. Inline показывает все три одновременно, каждую на своём месте. Тост — либо очередь из трёх плашек подряд, либо одно расплывчатое «Проверьте форму».

Кому что подойдёт — прямой ответ

Только у поля:

• всё, что человек ввёл сам, — почта, телефон, пароль, дата;
• обязательные поля, оставшиеся пустыми;
• ошибка проверки, пришедшая с сервера, если её можно отнести к конкретному полю (например, «Такая почта уже зарегистрирована»).

Только тостом:

• результат фонового действия: «Файл загружен», «Отчёт готов»;
• отмена действия: «Задача удалена — Отменить»;
• события, которые человек не вызывал: «Соединение восстановлено».

Оба сразу: отправка не прошла целиком — упал сервер или пропала сеть. Плашка сообщает факт, а рядом с кнопкой остаётся строка «Не удалось отправить — попробуйте ещё раз», которая никуда не исчезает. Это как раз тот случай, когда ответ 500 не относится ни к какому полю, но и молчать нельзя.

Ошибка, которую делают почти все

Показать ошибку и тостом, и под полем, и вдобавок покрасить рамку. Кажется, что «надёжнее». На деле это три сообщения об одной проблеме: человек тратит время, чтобы понять, три это ошибки или одна.

Правило простое: одна проблема — одно место. Если совсем хочется продублировать, дублируй не текст, а сигнал: рамка привлекает внимание, текст объясняет.

Второй частый промах — показать inline-ошибку, пока человек ещё печатает. «Неверный формат почты» на третьем символе выглядит как придирка. Проверяй при потере фокуса или при отправке, а вот убирай ошибку сразу, как только человек начал править поле.

Как написать сам текст

Стандарт разделяет два уровня: сообщить об ошибке и подсказать, как её починить. «Неверная почта» — это первый уровень. «Похоже, пропущен символ @ — например, имя@почта.ру» — сразу оба, и стоит это ровно одной лишней фразы.

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

Можно ли вообще без тостов?

Да. Форма, которая пишет ошибки у полей и показывает результат прямо на месте кнопки, обходится без плашек. В форме обратной связи это самый надёжный вариант: сообщение «Отправлено» появляется там, где только что была кнопка.

Красной рамки достаточно?

Нет. Цвет не читается скринридером и не различается частью пользователей. Рамка — дополнение к тексту, а не замена ему.

Куда девать ошибку, если полей нет вообще?

Например, при загрузке файла — привязывай сообщение к самой области загрузки. Даже без поля ввода принцип сохраняется: текст рядом с элементом, а не в углу экрана.