В макете стоят два пустых поля: «Номер заявки» и «Номер договора». Названия написаны внутри, места занято немного, ничего лишнего. Теперь заполним их числами 1042 и 5817. Названия исчезли, а два номера остались. Если отвлечься и вернуться к форме, придётся вспоминать, какой из них что означает.
В этом и подвох пустого состояния: оно показывает форму в тот момент, когда названия ещё на месте и ошибок пока нет. Человек же проведёт часть времени за заполнением, потом что-то исправит и захочет проверить результат. Давай пройдём этот путь на учебной форме доставки и посмотрим, где ей понадобятся постоянные подписи.
Заполним форму, прежде чем её оценивать
Для доставки нужны имя получателя, телефон и почта для уведомлений. Пока все три поля пустые, кажется, что их назначение легко запомнить. Но после ввода появляются конкретные сведения, и читать форму хочется уже по-другому: правильно ли написано имя, тот ли номер телефона, на тот ли адрес придёт уведомление?
Подписи над полями помогают проверить каждое значение без возвращения к началу. Они особенно полезны, если данные подставились автоматически: человек не проходил по вопросам вручную и мог вообще не увидеть первоначальные подсказки внутри полей. Поэтому рядом с пустым макетом стоит сразу держать заполненный. Если второй вариант читается хуже первого, форму ещё нужно доработать, как бы аккуратно ни выглядела сетка.
Что меняется на узком экране
Попробуем открыть ту же доставку на телефоне. Короткое «Имя» ещё можно поставить слева от поля, но «Полное наименование организации получателя» займёт гораздо больше места. Если оставить для всех подписей одну узкую колонку, название будет переноситься, а самому значению достанется остаток ширины.
Подпись сверху позволяет отдать полю всю строку. Длинный вопрос займёт две строки, зато введённое название компании будет проще прочитать. Для такой формы это удобная отправная точка, хотя экран станет выше. В рабочем кабинете, где оператор весь день меняет знакомые короткие параметры, расположение сбоку может оказаться удобнее. Разница связана с тем, какие данные человек читает и как часто, поэтому спор о «правильной стороне» лучше решать на настоящих полях.
К какому полю относится ошибка
Вернёмся к заполнению. Человек ввёл почту без символа @, и между почтой и телефоном появилось красное сообщение. Если оно стоит ровно посередине, приходится разбираться, что именно не так: адрес или номер? Красный цвет привлёк внимание, но связи с конкретным ответом сам по себе не объяснил.
Поставим сообщение ближе к почте и оставим больший промежуток до следующего вопроса. Тогда подпись, значение, подсказка и ошибка будут восприниматься вместе. Ту же связь нужно передать в коде: экранный диктор должен назвать поле и относящееся к нему пояснение. Визуальный отступ помогает зрячему читателю, но не заменяет программную связь подписи с вводом.
Дойти до проверки данных
После исправления почты форма снова выглядит спокойно. Но теперь у человека другая задача: перед отправкой убедиться, что доставку получит нужный человек. Названия полей всё ещё нужны, потому что они помогают сопоставить ответы с вопросами. Если подпись работает только до ввода, именно на этом этапе её отсутствие становится особенно досадным.
Поэтому при проверке макета полезно пройти три связанных действия: заполнить, исправить ошибку и перечитать готовые сведения. Повтори этот путь с увеличенным текстом и настоящими переводами, если форма работает на нескольких языках. Короткое русское название ничего не обещает о длине казахского. Когда вопросы и ответы остаются понятными во всех этих состояниях, расположение подписей уже можно оценивать по тому, как форма читается, а не только по виду пустого экрана.
