EngНравится ли вам заполнять веб-формы на сайтах? Скорее всего, нет. Однако, если вы занимаетесь онлайн-продажами, то вашим клиентам, к сожалению, так или иначе, все равно предстоит заполнять самые разные веб-формы при совершении действий на сайте магазина, будь то подписка на рассылку, вход в учетную запись или – одно из основных – оформление покупки.
Непродуманный дизайн форм регистрации и оформления заказов, несомненно, является одной из главных причин отказа от покупки и появления брошенных корзин (а также поводом для возникновения стресса у посетителей). Однако количество отказов можно снизить, если облегчить сценарии заполнения форм, сделав их как можно более простыми и не требующими большого количества действий пользователей.
Даже если процесс заполнения электронных форм никогда не станет любимым действием для посетителей вашего сайта, есть ряд тактических приемов и хитростей, которые помогут сделать его менее утомительным. Предлагаем вашему вниманию двенадцать практических советов, которые позволят упростить создание форм для владельцев сайтов и облегчить процесс их заполнения для клиентов.
1) Помечайте в форме дополнительные поля вместо обязательных
Некоторую информацию о ваших пользователях зачастую «было-бы-неплохо-получить» нежели «нужно-получить-обязательно».
Заманчиво сделать все поля формы обязательными, но, скорее всего, это серьезно разозлит посетителя. Есть более тонкие способы, чтобы побудить пользователей оставлять больше информации о себе.
Есть такое понятие, как синдром добровольного раскрытия информации – люди по своей природе склонны оставлять о себе гораздо больше сведений (например, при заполнении бланков), чем на самом деле требуется. Но появление астериска – «звездочки» или знака обязательного заполнения поля, наоборот, убивает желание делать это.
Согласно приведенному выше исследованию, если в форме отмечены не обязательные для заполнения поля, а дополнительные, то посетители гораздо охотнее последовательно заполнят все ее поля, а не только необходимые.
2) Используйте автоматическую валидацию данных в полях формы
Ничто не раздражает пользователя больше, чем появление страницы с только что заполненной формой, но пестрящей красными полями с гневными сообщениями об ошибках, после того, когда он уже внес всю требуемую информацию и нажал кнопку «отправить».
Ввод данных с одновременной их проверкой является отличным способом исправления ошибок по ходу заполнения формы. Обычно это довольно легко реализовать с помощью плагина jQuery или встроенным инструментом валидации форм HTML5, который позволяет выдавать динамическое сообщение рядом с каждым полем, предупреждающее пользователя об ошибках или предлагающее вариант его правильного заполнения. Хорошим примером такого рода решений является регистрационная форма Twitter.
3) Используйте инструменты интеллектуального ввода данных
Печатать – довольно утомительно, не так ли? Облегчите эту работу своим посетителям, используя возможности интеллектуального ввода данных. Автоматически предварительно заполните максимум из возможных полей формы данными, которые вы уже знаете о своих пользователях (например, адрес электронной почты, если пользователь уже является вашим клиентом или подписчиком какой-нибудь рассылки).
Еще один хороший способ использования такого рода «умных» инструментов – определение геолокации посетителей по IP и предварительное отображение страны, в которой они находятся, в списке выбора таким образом, чтобы пользователям не приходилось скролить весь список целиком, чтобы сделать выбор.
Для некоторых полей можно заранее предположить варианты выбора. Установка значений таких полей по умолчанию поможет устранить лишние нажатия кнопки мыши и ускорить процесс заполнения формы (однако, не следует пользоваться этим способом для определенной персональной информации, такой как, например, пол, пароль и т. п.).
4) Выравнивайте элементы формы по верхнему и правому краю
Дизайн формы должен быть таким, чтобы не заставлять взгляд пользователя бегать туда-сюда между ее элементами, это увеличивает т. н. когнитивную нагрузку на зрение. Полагаете, это преувеличение? Подумайте, что для вас важнее – чтобы пользователь все-таки заполнил форму или с мыслью «как-нибудь потом» ушел и больше никогда не вернулся?
Когда дело доходит до создания формы, выравнивание элементов имеет первостепенное значение. В лучших формах подписи к полям или их названия выровнены по верхнему краю, поэтому они находятся в непосредственной близости от поля, и расстояние, на которое приходится перемещаться взгляду пользователя, довольно мало.
На втором месте – выравнивание по правому краю, а вот по левому – наихудшее решение, с точки зрения создания когнитивной нагрузки, хотя эстетически выглядит неплохо.
5) Не перегружайте формы всплывающими окнами
Когда посетитель попадает на форму, последнее, чего он ждет – это визуальной атаки. Он всего-навсего хочет быстро и с минимальными усилиями заполнить форму – и ее дизайн должен всячески этому способствовать.
Итак, с одной стороны, вы хотите, чтобы ваши формы были максимально простыми и не перегруженными. С другой, вам необходимо предложить текстовые подсказки, чтобы предотвратить возможность двоякого понимания пользователем того, что от него ожидается при заполнении формы (и в случаях, когда пользователь должен завершить процесс оформления заказа, это может иметь решающее значение). Дилемма.
А каково же решение? Многие интернет-магазины используют динамические всплывающие окна, которые появляются либо в момент, когда пользователь переходит в конкретное поле, либо когда он наводит курсор на значок рядом, после чего появляется текстовая подсказка или дальнейшие инструкции. Вот хороший пример от Topshop.
6) Четко определитесь с тем, что вы собираетесь делать с информацией, которую запрашиваете
Личные данные являются важной онлайн-валютой, и ваши клиенты могут начать скрывать их, если вы просите слишком многого без объяснения причин.
Когда представляется возможность узнать что-то про ваших клиентов, очень сложно отказаться от заманчивой перспективы получить как можно больше информации. То, что у вас просят сведения, которые выходит за рамки конкретной формы, в лучшем случае раздражает, в худшем – выглядит подозрительно.
Обязательно объясните, почему вы просите те или иные данные, если это сразу неочевидно. Телефонный номер покупателя – хороший тому пример. Ваши посетители могут оправданно переживать, что их завалят нежелательными вызовами, если они оставят свой номер мобильного телефона. В двух следующих примерах от известных интернет-магазинов очень четко объясняется, в каких конкретно случаях их сотрудники будут связываться с клиентами по телефону.
Reiss
Argos
7) Не требуйте от клиентов запоминать еще одно имя пользователя
Просить пользователя придумать новое имя (username) может стать проблемой – и не только из-за разочарования, возникающего у клиента при попытке подобрать себе имя, которое еще никем не занято, но и из-за боязни не вспомнить его по возвращении на сайт. Адрес электронной почты клиента уже является уникальным идентификатором, который он вряд ли может забыть – так почему бы не избавить пользователя от хлопот и не использовать его email-адрес?
Если вы все же не можете отказаться от требования имени пользователя, убедитесь, что поле логина в вашей форме разрешает использовать для входа в систему помимо имени пользователя еще и адрес электронной почты – это позволит клиентам избежать напряжения, связанного с неизбежным процессом восстановления логина, когда они забудут, какое username выбрали.
8) Люди должны понимать, на каком этапе заполнения формы они находятся
При заполнении длинных форм хорошим решением считается разбить их на несколько страниц (например, это может быть актуально в процессе оформления заказа). Если вы пошли этим путем, то во избежание отказа от заполнения форм, убедитесь, что вашим потенциальным клиентам понятно, в каком месте этого процесса они находятся.
Многие интернет-магазины показывают прогресс оформления заказа на наглядной диаграмме заказа (при этом каждая стадия сопровождается необходимыми пояснениями).
ASOS
9) Тестируйте влияние капчи
Для тех, кто страдает от спам-ботов, использование капчи в формах может быть отличным способом отделить людей от роботов. Но проблема в том, что капча может мешать на уровне представления и стать реальной причиной отказа пользователями от заполнения формы. В этом случае, решающим аргументом за и против ее использования является тестирование: проверьте конверсию своих форм с капчей и без нее, чтобы судить о ее влиянии на поведение клиентов.
Традиционно капча требует от пользователей вводить невнятную последовательность зачастую непонятных букв и цифр, однако, есть менее напрягающие альтернативы, такие как логические вопросы (например, «Какое из чисел 5, 22, 94, 43 или 651 является наименьшим?») или распознавание образов (см. ниже).
10) Сделайте call-to-action элементы очевидными
Убедитесь, что ваши текстовые СТА-элементы четко обозначают то действие, которое будет происходить при нажатии на этот текст. Так, при многоуровневых проверках убедитесь, что пользователи понимают, куда они будут перенаправлены после нажатия (например, «перейти к оплате» или «завершить оформление заказа»).
Было доказано, что использование кнопки «Применить» рядом с полями промокодов или при выборе способа доставки путают пользователей; они все равно не нажимают на эту кнопку после выбора нужного значения в соседнем поле или же ошибочно принимают ее за основную кнопку подтверждения отправки формы. Лучше всего в этом случае автоматически обновлять страницу в соответствии с очередным выбором пользователя.
11) Отображайте поля формы с платежной информацией так, как они выглядят на карте клиента
Используйте плагин JQuery (например, jQuery.payment) для того, чтобы наглядно отформатировать поля платежной формы. Например, разделите 16-значный номер карты на группу из 4 полей так же, как это выглядит на физических картах («•••• •••• •••• ••••») и убедитесь, что списком по номерам листаются месяцы и годы (как показано ниже), а не имя клиента.
12) Настройте форму так, чтобы адрес доставки автоматически совпадал с платежным адресом
Даже с учетом того, что регион пользователя можно распознать по индексу или IP, ввод адреса доставки является самой трудоемкой и стрессовой частью процесса заполнения формы. А необходимость сделать это дважды, первый раз – при вводе платежного адреса и второй – адреса фактической доставки*), может серьезно демотивировать клиента. Добавьте в вашу форму флажок автоматического заполнения платежного адреса адресом доставки – и проблема будет решена в один клик.
BANK Fashion
*) При совершении покупок в США и других странах и оплате кредитными или дебетовыми картами часто требуется указать два адреса:
- shipping address — адрес доставки,
- billing address — адрес выставления счета, на него обычно оформлена карта.
Материал подготовлен на основе перевода оригинальной статьи маркетингового агентства Ometria «Ecommerce Web Form Design Best Practices: 12 Tricks for Making Your Forms Less Tiresome»
