Как не свести пользователя с ума: проектируем формы правильно

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

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

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

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

Второй путь — сразу дать пользователю предварительные расчеты по условиям кредита. И только после этого собирать информацию для оформления и регистрации.

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

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

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

Не оставляйте клиента наедине с собой и своими мыслями. Четко опишите, что вы хотите от пользователя на каждом этапе. Так ошибок при заполнении формы будет меньше. Например, если вы хотите, чтобы пользователь сделал пароль числовым — так и скажите. Буквенным — опишите свои желания. Если там обязательно должно быть три восклицательных знака — не просите пользователя гадать.

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

Если после ввода какой-то информации пользователь должен ждать проверки или решения, не подвешивайте его в таком состоянии.

Используйте анимированные спинеры или статус-бары, которые покажут процесс работы. Обязательно пропишите текстом, сколько времени займет проверка.

Если результатов нужно ждать долго, анимация уже не сработает: она создаст ложное ощущение, что все решится за минуты. Лучше прописать понятный текст с конкретными временными рамками. Например: «Получили вашу заявку. Рассмотрим ее в течение 2 рабочих дней».

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

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

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

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

Подписывайтесь на наш telegram-канал, там о жизни студии, наших кейсах и много полезного о дизайне и разработке