Как собрать понятную форму: подписи, лишние поля, пометки и тексты ошибок

Подпись над полем видна всё время. Серый текст внутри поля пропадает, как только человек начинает вводить, и вместе с ним пропадает вопрос.

Серый текст внутри пустого поля называют плейсхолдером. Его часто ставят вместо подписи: форма выглядит короче и чище.

Попробуйте сами: введите цену в оба поля. А потом посмотрите на первое и скажите, о чём оно спрашивало.

В Nielsen Norman Group насчитали семь причин не ставить подсказку внутри поля вместо подписи. Четыре из них:

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

Подпись и доступность

Там же — про доступность:

• бледный серый текст плохо виден;
• людям с когнитивными и двигательными нарушениями подсказка вместо подписи добавляет работы;
• экранные дикторы читают её не всегда.

В WCAG 2.2 у поля, куда человек вводит данные, должна быть подпись или инструкция. Это критерий 3.3.2, уровень A, самый базовый.

Подсказка внутри поля с этим не справляется: после ввода её не видно.

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

Иногда в её пользу приводят исследование Google, где подписи над полями «победили». Илья Бирман в «Советах» Бюро Горбунова разбирает, что в улучшенной форме тогда поменяли сразу и подписи, и поля, и кнопки. Так что про подписи оно ничего не доказывает, а довод про ширину экрана проще и надёжнее.

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

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

Лишние поля — не особенность админок. Baymard Institute в 2024 году насчитал в оформлении заказа интернет-магазинов в среднем 11,3 поля, хотя большинству магазинов хватило бы восьми.

Три вопроса к каждому полю

Про каждое поле задайте три вопроса:

1. Что сломается без него? Если ничего — поле лишнее.
2. Может ли система узнать это сама? Артикул, дату добавления и автора она знает лучше человека.
3. Нужно ли это сейчас? Скидку ставят, когда начинается акция, а не когда сорт появляется в каталоге. Такое поле переезжает в другую форму или на другой шаг.

Проверьте себя

Восемь полей из первой версии формы. Оставить, убрать или спросить позже?

Что осталось

После разбора из восемнадцати полей осталось девять: название, страна, обработка зерна, степень обжарки, вес пачки, цена, описание, фото и отметка «Новинка». Для каждого можно сказать, что без него сломается.

Если поле правда нужно, но человек может не понять зачем, объясните это в подсказке. Максим Ильяхов в «Советах» Бюро Горбунова показывает, как объяснение пользы работает лучше сухого «необходимо ввести». И советует спрашивать данные тогда, когда они понадобились, а не все сразу.

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

В новой форме обязательных полей семь из девяти: без названия, страны, обработки, обжарки, веса, цены и фото сорт не выставить на витрину. Необязательных два: описание и отметка «Новинка».

Слово или звёздочка

Здесь руководства расходятся.

GOV.UK Design System: необязательные поля помечать словом «(optional)», а обязательные звёздочкой не отмечать никогда.

Ралука Будиу из Nielsen Norman Group спорит именно с этим. Звёздочку, по её словам, ставят у каждого обязательного поля, даже если таких большинство: она занимает мало места и её все узнают.

Пометка только у необязательных, считает Будиу, заставляет человека угадывать. А объяснение над формой не спасает: инструкции над формой не читают.

Урок держится правила GOV.UK: слово «необязательно» понятно без расшифровки и стоит там, где нужно, — у самого поля.

Артём Горбунов в «Советах» Бюро Горбунова приходит к тому же с другой стороны. Необязательное поле лучше убрать или объяснить, что даст его заполнение, — и тогда отмечать приходится именно его.

Если в вашем продукте приняты звёздочки, ставьте их у каждого обязательного поля, как советует Будиу.

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

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

Контент-менеджер заполнил форму и нажал «Добавить сорт». В двух полях форма нашла ошибку: вес вписан в килограммах, а цена не указана.

Вот три способа об этом сказать.

Требование доступности здесь такое же простое, как с подписями. По WCAG 2.2 ошибку, которую форма нашла сама, надо обозначить и описать текстом — критерий 3.3.1, уровень A.

Красная рамка без слов этому не отвечает. В Nielsen Norman Group к этому добавляют: показывайте ошибку рядом с тем местом, где она случилась.

Сводка ошибок над формой

Её предлагает GOV.UK Design System. Сводка перечисляет ошибки тем же текстом, что у полей, и ведёт ссылками к полям.

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

Сообщение об ошибке ставят между подписью и полем или сразу под полем — главное, одинаково во всей форме. В GOV.UK его ставят под подписью и подсказкой, над полем. У такого места есть и практический плюс: ошибку не закроет выпадающий список или клавиатура телефона.

Хорошая ошибка отвечает на два вопроса: что не так с этим полем и что вписать, чтобы стало так.

«Неверный формат» говорит только, что форма недовольна.

Чтобы исправить, человеку нужно знать, чего форма ждёт: граммы или килограммы, только цифры или можно с «₽», с какого по какое число. Сравните:

Так пишут ошибки в GOV.UK Design System: текст говорит, что случилось и как это исправить, простыми словами и по делу.

Там же список того, чего в ошибках не бывает:

• технических кодов;
• «недопустимо» и «запрещено»;
• «вы забыли»;
• «пожалуйста» — будто можно и не исправлять;
• «извините» — оно ничего не исправляет;
• «верный» и «неверный» — они ничего не добавляют.

В Nielsen Norman Group добавляют: не вините человека и предлагайте выход, а не только называйте сбой.

Пример в тексте ошибки нужен, если его нет рядом. Если подсказка под подписью уже говорит «например, 890», в GOV.UK советуют не повторять пример в ошибке.

Проверьте себя

Восемь текстов ошибок из формы «Новый сорт». Что не так с каждым?

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

Нажимайте на куски формы, которые вы бы переделали. В разборе будет, что с ними не так. Нормальные куски тоже можно нажать.

Возьмите форму своего продукта, сократите её на сколько получится и перепишите все сообщения об ошибках.

Часть 1 · Сократить, 20 минут

1. Выберите форму, которую заполняют часто: заявка, регистрация, карточка товара, новый клиент. Если своего продукта нет, возьмите форму «Новый сорт» из урока в первой версии на восемнадцать полей.
2. Выпишите все поля и у каждого — что сломается без него.
3. Разложите поля: оставить, убрать, потому что знает система, или спросить позже, в другом деле.
4. Решите, что отмечать: обязательных больше — отмечайте необязательные.

ФОРМА: ______________________        Дата: __.__.____
КТО ЗАПОЛНЯЕТ: ______________________
КАК ЧАСТО: ______________________

ПОЛЯ
поле ____________  что сломается без него ____________  оставить / убрать / позже
поле ____________  что сломается без него ____________  оставить / убрать / позже
поле ____________  что сломается без него ____________  оставить / убрать / позже

БЫЛО ПОЛЕЙ: ____   СТАЛО: ____
ОТМЕЧАЕМ: обязательные / необязательные — почему: ______________________

ОШИБКИ
поле ____________  когда ____________
  было: ______________________
  стало: ______________________
поле ____________  когда ____________
  было: ______________________
  стало: ______________________

Часть 2 · Нарисовать, 40 минут

1. Соберите форму с подписями над полями. Пример и формат — подсказкой под подписью.
2. Отметьте поля выбранным способом — одним на всю форму.
3. Нарисуйте второй экран — форму после нажатия кнопки, с двумя–тремя ошибками у полей.
4. Если форма длиннее одного экрана, добавьте сводку ошибок над ней.

Часть 3 · Проверить, 10 минут

1. Прочтите каждую ошибку вслух человеку, который не видит форму. Если он не может сказать, что вписать, — перепишите.
2. Заполните форму на макете до конца и посмотрите на неё: про каждое заполненное поле видно, что в нём?

Что должно получиться

• Два экрана формы: до отправки и после, с ошибками у полей.
• Список полей с причиной у каждого: было столько-то, стало столько-то.
• Список ошибок: было — стало.

План работы: 20 минут на поля, 40 на макет, 10 на проверку. Всего — чуть больше часа.

Частые сложности

• «Все поля нужны, так сказал заказчик». Спросите, что он сделает с ответом. Поле, на которое не нашлось дела, заказчик отдаст сам.
• «Без подсказки внутри форма выглядит пустой». Пустое поле с подписью над ним понятнее серого текста. Пример можно дать подсказкой под подписью.
• «Не знаю, какие ошибки бывают». Для каждого поля спросите: что будет, если его оставить пустым, вписать не то или вписать слишком много? Это и есть ошибки.
• «Разработчики показывают ошибки, которые возвращает сервер». Попросите список кодов и напишите человеческий текст для каждого. Код останется в журнале, а человек увидит, что делать.

Форма готова, если

• У каждого поля есть подпись над ним, и она видна, когда поле заполнено
• Пример и формат — подсказкой под подписью, а не внутри поля
• Для каждого поля названо, что сломается без него
• В форме нет полей, которые система знает сама
• Отмечено то, чего меньше, и одним способом
• Ошибка стоит у своего поля и написана словами
• В тексте ошибки сказано, что вписать
• В длинной форме над полями есть сводка ошибок

Что мешает

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

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

• Исследование Гугля: пользователям легче читать, когда подписи над полямиСоветы Бюро Горбунова, Илья Бирман, 2018 · на русском · бесплатноБирман разбирает исследование Google с ай-трекингом: в «улучшенной» форме поменяли сразу и подписи, и длину полей, и кнопки, так что вывод о подписях не доказан. Короткий совет 2018 года о положении подписи, а не о подсказке внутри поля.
• Хотелось бы разобраться с вопросом выделения обязательных полей на формеСоветы Бюро Горбунова, Артём Горбунов, 2010 · на русском · бесплатноГорбунов отвечает, как помечать обязательные поля: необязательное поле лучше убрать или объяснить, что даст его заполнение, — и поэтому пометка нужна скорее необязательным. Совет 2010 года, примеры из веба тех лет.
• Как сформулировать просьбу заполнить поля, чтобы люди вводили настоящие данные?Советы Бюро Горбунова, Максим Ильяхов, 2014 · на русском · бесплатноИльяхов на шести парах подписей показывает, как объяснение пользы заменяет сухое «Необходимо ввести паспортные данные», и предлагает спрашивать данные тогда, когда они нужны. Совет 2014 года про формы для клиентов.
• Placeholders in Form Fields Are HarmfulNielsen Norman Group, Кэти Шервин · на английском · бесплатноСемь причин, почему подсказка внутри поля вместо подписи мешает: память, проверка перед отправкой, исправление ошибок, клавиатура, доступность. Отдельно разобраны «плавающие подписи». Статья 2014 года, пересмотрена в 2018.
• Marking Required Fields in FormsNielsen Norman Group, Ралука Будиу · на английском · бесплатноРалука Будиу спорит с правилом урока: отмечать звёздочкой каждое обязательное поле, даже если их большинство, а «optional» — по желанию. Объясняет, почему инструкцию над формой не читают и почему метка только у необязательных заставляет угадывать.
• Error messageGOV.UK Design System · на английском · бесплатноРуководство GOV.UK по тексту ошибки: где ставить сообщение, каких слов в нём не бывает («please», «invalid», «you forgot»), когда писать инструкцию, а когда описание, почему не повторять пример и не очищать поля. Примеры из британских госуслуг.