Почему формы на сайтах так раздражают? Разбираю одну запись к врачу

Форма записи к врачу была короткой: имя, телефон, дата рождения, почта и галочка согласия. Я заполняла её в трамвае, второй рукой держась за поручень, и отправила с третьего раза. Подтверждение по СМС так и не пришло. Почему, я поняла только вечером, когда открыла ту же форму на ноутбуке и прошла её ещё раз, медленно, поле за полем. Звонить в регистратуру, пока не поняла, что сломалось, мне не позволяет профессия.

Я седьмой год проектирую интерфейсы, а до этого верстала журналы. Формы — самая частая моя работа и самая нелюбимая: красоты в них немного, а каждое неудачное решение человек чувствует пальцами. Разберу тот экран по косточкам, прихватив пару соседних. Сайтов называть не стану: почти все эти ошибки я в своё время делала и сама.

Серый текст вместо подписи

Подписей у полей не было. Внутри каждого стоял бледный серый текст: «Имя», «Телефон», «Дата рождения». Это плейсхолдер, подсказка внутри поля, и пропадает она с первым же символом. На макете так выглядит чисто и воздушно, дизайнера я понимаю. Хотя в журнале, где я начинала, никому не пришло бы в голову убирать подпись под фотографией в ту секунду, когда читатель на фотографию посмотрел.

Плохо становится, когда человека отвлекают. На остановке я подняла глаза от экрана, вернулась к форме и засомневалась в первом же поле. Я написала «Анна», а просили имя или имя с фамилией? Подсказки уже нет. Чтобы её увидеть, надо стереть написанное.

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

Рецепт скучный: подпись над полем, обычным тёмным текстом, и она никуда не девается. Плейсхолдер можно оставить для формата, например «ДД.ММ.ГГГГ» в поле даты. Подпись, которая при вводе уезжает вверх и съёживается, лучше пустого поля, но на телефоне её часто проще угадать, чем прочитать.

Маска против восьмёрки

Номер я вставила из заметок, где он записан так, как я привыкла его диктовать, с восьмёркой: 89001234567 (здесь он условный). В поле уже стояли «+7» и скобки — маска. Она добросовестно разложила мои одиннадцать цифр по своим десяти местам, и получилось «+7 (890) 012-34-56». Восьмёрка уехала в код оператора, последняя семёрка не влезла. Форма промолчала, и подтверждение ушло на номер, которого у меня нет.

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

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

• принимать номер в любом виде, со скобками, пробелами и дефисами, и самому вынимать из него цифры;
• понимать, что восьмёрка в начале одиннадцати цифр означает то же, что «+7»;
• не мешать курсору, чтобы можно было поправить цифру в середине;
• открывать на телефоне цифровую клавиатуру. Для этого полю ставят тип tel, одно слово в разметке.

Ошибка, о которой сообщают в самом конце

Я нажала «Записаться». Страница моргнула, прокрутилась наверх, и над формой появилась красная плашка: «Проверьте правильность заполнения полей». Каких именно, не сказано. Имя, почта и дата рождения исчезли. В трамвае я набрала всё заново, наугад поменяла дату, и с третьего раза форма сдалась.

Вечером выяснилось, что ей не нравился день. Я написала его без нуля впереди, «3.03», а форма ждала «03.03». Неправильный номер она пропустила, правильную дату — нет.

Первый промах здесь — место. Ошибка показана далеко от поля, которое надо исправлять. Сообщение должно стоять прямо под ним и говорить по-человечески: «Введите дату в формате ДД.ММ.ГГГГ». А лучше бы форма приняла «3.03» и сама дописала ноль.

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

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

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

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

Звёздочки и лишние вопросы

Красная звёздочка у подписи означает «обязательно», это давняя договорённость, её понимают без объяснений. Только когда звёздочка стоит у девяти полей из десяти, она превращается в рябь. В таких формах я помечаю наоборот, необязательные поля, словом в подписи: «Отчество (необязательно)».

Потом задаю команде неудобный вопрос про каждое поле: зачем оно нам? В форме записи к врачу почта была обязательной, хотя подтверждение всё равно шло по СМС. За скачивание какого-то чек-листа у меня однажды просили должность, размер компании и телефон. В заявлении на госуслугу полей много, и там это понятно. Форме ради одного файла столько не нужно.

С полем «Повторите адрес почты» у меня отношения особые. Его ставят, чтобы человек не ошибся, а я послушно копирую в него первое, вместе с опечаткой, если она там была. По-моему, лучше один раз показать адрес крупно перед отправкой и дать его поправить.

Пароль с шестой попытки

Самый длинный мой поединок с формой случился в личном кабинете управляющей компании. Я придумала пароль, форма ответила: «Минимум 8 символов». Добавила символов — «Пароль должен содержать заглавную букву». Добавила заглавную — «и цифру». Добавила цифру — «и специальный символ». Поставила восклицательный знак — «Недопустимый символ». Какие допустимы, не сообщалось. Точку форма приняла с шестой попытки. Через неделю я восстанавливала этот пароль по почте.

Сами требования задают обычно не дизайнеры, и спорить с ними я тут не буду. Плохо, когда их выдают по одному, как загадки. Все условия должны стоять под полем сразу, до первой буквы, и отмечаться по мере выполнения: набралось восемь символов — галочка, появилась цифра — ещё одна. Запрещённые знаки перечисляют там же.

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

Пусть телефон заполнит за меня

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

С кодом из СМС похоже. Мой телефон показывает пришедший код прямо над клавиатурой, и надёжнее всего это срабатывает, когда поле помечено как поле для одноразового кода (у того же атрибута есть значение one-time-code). Если нет, приходится бегать в сообщения и обратно, и однажды за это время форма успела решить, что код устарел.

Перед тем как отдать форму в разработку, я теперь прохожу её сама, на телефоне, одним большим пальцем:

Что-нибудь находится каждый раз, чаще всего в моих же макетах.

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