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

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

В данной статье мы рассмотрим 12 способов оптимизировать веб-форму на сайте.

Автопроверка корректного заполнения полей

Если пользователь заполнил поле неправильно, стоит немедленно ему сообщить об этом, а не ждать, пока он нажмет кнопку «Принять». Функция поможет пользователям быстро исправить ошибки и удостовериться, что форма заполнена правильно.

В примере «Магазина интересных подарков», если информация, введенная в поле, корректна, рядом с ним появляется зеленая галочка, если нет — красный крестик и объяснение ошибки.

Примеры

    http://www.sabidom.ru/credits/credits_invest/

    http://thepresents.ru/basket/

Чёткие требования к заполнению полей

Пользователям должно быть понятно, в каком формате они должны вводить информацию в поле — длина пароля, необходимость цифр в нем и т.д.

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

Примеры

    https://geoid.ru/booking/show?additional=true&dateTo=30.08.2013&adults...

Расположение название поля слева от него

Многие сайты размещают название поля над ним, что делает форму очень длинной. Однако самый лучший вариант — расположить название слева от поля (как в примере от СКББанка).

Примеры

    http://skbbank.ru/personal/credits/request

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

Дополнительная информация рядом с формой

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

Примеры

    http://dvrgroup.ru/basket/purchase/

Четкое объяснение ошибок

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

На сайте АктионМедиа это реализовано гораздо лучше:

Примеры

    http://www.radugainternet.ru/connect

    http://partners.glavbukh.ru/#mail

Сохранение пароля

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

Примеры

    http://shop.econika.ru/register

Подсказки пользователям

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

Примеры

    http://www.okonti.ru/service/calculator/sizes/

Сохранение данных в форме при перезагрузке страницы

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

Примеры

    http://svyaznoybank.artgorbunov.ru/card_openform.html

Сокращение количества полей

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

Примеры

    http://kefir.by/#/orderproduct/

Немного юмора

Стандартная форма не обязательно представляет собой три поля на белом фоне. Проявляйте креативность!

Примеры

    http://den2013.glavbukh.ru/phase4/

Упрощение

Если форма предполагает введение стандартной информации — дата, пол и т.д. используйте форматы автозаполнения. Однако форматы используйте в соответствии с типом данных — например, для даты следует использовать готовый список временных интервалов (как на сайте Дениса Власова), а для выбора пола лучше использовать не его, а радиокнопку.

Примеры

    http://denisvlasov.ru/

Инструкция, что пользователю делать дальше

Как только пользователь заполнил форму, ему нужно не только сказать «Спасибо!», но и дать дальнейшую инструкцию — его запрос передан на обработку, ему позвонят, напишут по email и т.д.

Примеры

   

Оригинал: http://econsultancy.com/ru/blog/62987-12-useful-tips-for-web-form-optimisation