Как сделать удобнее форму заказа: 12 советов

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

Вот 12 советов, как это сделать, от редактора e-commerce-портала Econsultancy.com, Грэма Чарльтона

1. Пользуйтесь встроенной валидацией

Если при заполнении формы пользователь ошибся, сообщите ему об этом сразу же, а не в момент нажатия кнопки "Отправить".

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

2. Сопровождайте поля четкими пояснениями

Укажите формат, в котором пользователь должен вводить информацию. Например, желаемую длину пароля и то, должны ли в нем присутствовать цифры.

На сайте ASOS описан требуемый формат пароля. Это помогает свести к минимуму количество ошибок.

3. Располагайте подписи сбоку от полей

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

Чтобы посетитель не запутался, название поля можно прописать и в самой пустой строке, как это показано в следующем примере.

4. Разместите рядом список уже выбранных товаров

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

5. Сообщения об ошибках должны быть понятными

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

Вот более удачное решение с сайта Peugeot:

6. Используйте куки для запоминания пользовательских паролей

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

7. Предвосхищайте распространенные ошибки и умейте с ними справляться

Даже если форма составлена понятно, некоторые посетители все равно будут ошибаться.

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

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

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

Это очень досадно, и разъяренный клиент часто после этого покидает сайт.

9. Формы должны быть краткими

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

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

Хороший пример – процесс получения автомобильного страхового полиса на сайте Confused.com:

10 Формы должны быть интересными

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

Вот пример с сайта svn2ftp:

Не менее гениальное решение мы видим и в следующем примере: форма обратной связи выполнена виде открытки:

11. Используйте радиокнопки, где это целесообразно

Еще один способ упростить жизнь пользователю. Посмотрим на выпадающее меню для указания пола покупателя на сайте ASOS:

Поскольку здесь было всего два варианта ответа, целесообразнее было бы применить радиокнопки – как это сделано в той же форме заказа ASOS для указания вариантов доставки. Кстати, такое оформление, как на скриншоте, помогает клиенту быстро сравнить все доступные варианты.

12. Прореагируйте на отправку заполненной формы

Дайте знать пользователю, что введенная им информация не канула в недра Интернета – подтвердите, что заказ сделан успешно.

Лучше сделать и еще один шаг: описать, что будет дальше и как скоро клиент получит ответ на заполненную форму.

Об авторе:

Грэм Чарльтон – редактор в Econsultancy.com – ведущем англоязычном портале о e-commerce.