Том заметил странную вещь в аналитике: пользователи открывали страницу регистрации на курсы, но 30% уходили, даже не заполнив первое поле. Он предполагал проблемы с дизайном или текстом. Правда оказалась проще и хуже.
После запуска записи сессий он увидел, что многие пользователи кликают на текст рядом с полем ввода, ожидая, что фокус переместится в поле. Ничего не происходило. Они кликали снова, потом сдавались и закрывали вкладку.
Что было не так
Том использовал обычные div с текстом вместо настоящих label. Они выглядели как подписи, но браузер не понимал связи между текстом и полем ввода. Пользователи привыкли, что клик по подписи активирует поле. Здесь это не работало.
Он переписал все формы, заменив div на label с правильным атрибутом for. Добавил визуальную обратную связь при фокусе. Проверил, что плейсхолдеры не заменяют подписи, а дополняют их.
Дополнительные улучшения
Пока Том исправлял формы, он обнаружил ещё проблемы. Сообщения об ошибках появлялись красным цветом, но без текста — только подсвечивали поле. Пользователи с проблемами цветовосприятия не понимали, что именно не так.
Он добавил текстовые сообщения под каждым полем. Связал их с полями через aria-describedby, чтобы экранные дикторы зачитывали ошибки. Улучшил автофокус, чтобы при открытии формы курсор сразу был в первом поле.
Показатель отказов упал с 30% до 12% за две недели. Том получил несколько писем от пользователей, которые благодарили за то, что формы стали удобнее.