Лилия!

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

Клиента волнует КПД формы. Если хотите узнать, кто из вас прав — проведите А/Б-тест. Предположу, что явное указание на ошибку в поле ввода повысит конверсию. Добавление звёздочек * для обязательных полей, возможно, также повысит конверсию,— теперь сразу видно, что на половину формы можно забить. Но этот же ход снизит количество указанных адресов электронной почты — ведь сейчас никак не объясняется, для чего её указывать.

Вас волнует эстетика и минимализм — сделайте свой вариант без дословного повторения фраз серым и розовым шрифтом. Используйте правильную терминологию: «электронная почта» вместо «электронного адреса» — тогда не придётся добавлять в скобках email. Внятно назовите поле с пунктом доставки, сейчас нельзя понять, что вы хотите спросить — название деревни или конечный адрес. Не хотите звёздочек — откажитесь от необязательных полей. И снова проведите А/Б-тест.

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

На десерт — бюрошные гайдлайны.

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

Для любых полей, особенно необязательных, рекомендуется объяснять их предназначение. Зачем пользователю сообщать эту информацию, какую он получит пользу?

Фраза «Все поля обязательны для заполнения» имеет смысл непосредственно рядом с кнопкой отправки формы, а не над полями. В начале формы она будет проигнорирована.

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

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

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

Сообщение об ошибке может располагаться рядом с подсвеченным полем ввода (справа или снизу):

или в тултипе, как на «Раз-два-трипе»:

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

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

В коротких формах такой интерфейс будет выглядеть избыточно.

Любое из этих правил может быть пересмотрено в результате А/Б-тестов в конкретном проекте.