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