На заключительном этапе конверсии пользователям часто приходится заполнять формы. Посетители сталкиваются с ними при оформлении заказов или подписок, скачивании программ, электронных книг и отчетов. Эффективная форма стимулирует конверсию, а неэффективная может привести к отказу от покупки, регистрации и т.п. Из этой статьи вы узнаете, какими должны быть формы на сайте.
Отмечайте необязательные поля
Большинство дизайнеров использует звездочки, чтобы обозначить обязательные для заполнения поля. Это не очень удачная идея. Во-первых, звездочки создают визуальный шум, отвлекающий пользователя от конверсионного действия. Во-вторых, пользователь должен потратить время, чтобы найти в нижней части страницы сообщение о значении звездочек.
Отмечайте необязательные для заполнения поля. Впишите слово «Необязательно» или «По желанию» прямо в поле. Это сделает процесс заполнения формы более комфортным для пользователя.
Помещайте текст над полями формы
Если текст расположен слева или справа от полей формы, пользователь потратит больше времени на ее заполнение. Это связано с особенностями восприятия: чтобы внести нужные сведения, человек совершает больше визуальных фиксаций.
Когда текст расположен над полями формы, пользователь воспринимает поле и текст единым целым. Это сокращает количество визуальных фиксаций в два раза и повышает скорость заполнения формы.
В формах не должно быть кнопки «Отменить»
Кнопки «Отменить», «Cancel», «Нет» делают формы менее эффективными. Во-первых, они позволяют пользователю отказаться от покупки, подписки или регистрации. Во-вторых, клиенты могут нажимать эти кнопки случайно.
Кнопка «Отменить» уместна только в диалоговых окнах или индикаторах процесса.
Избавляйте пользователей от бесконечных кликов по шаговым регуляторам
Когда посетитель пользуется шаговым регулятором, ему приходится несколько раз нажимать на одну из кнопок. Это создает ненужные паузы и затрудняет работу пользователя с интерфейсом.
Альтернативой шаговым являются скользящие регуляторы. Пользователю достаточно один раз нажать на кнопку мыши, чтобы переместить бегунок в нужное положение.
В форме поиска кнопка «Искать» должна быть расположена слева
Большинство дизайнеров помещают кнопку «Искать» справа от формы поиска. Это не лучшее решение: пользователь сначала оценивает форму, потом кнопку, затем возвращается к форме для ввода нужного слова, после чего снова возвращается к кнопке.
Если кнопка расположена слева, это сокращает число визуальных остановок до трех.
Форма подтверждения возраста должна быть простой
Форма подтверждения возраста не должна отпугивать посетителя. Пользователь может решить, что вы требуете предоставить слишком много личных данных:
Лишние кнопки в форме подтверждения делают форму менее эффективной.
Идеальная форма подтверждения возраста имеет одну кнопку:
Длинные формы должны немедленно проверять корректность заполнения полей
Каждый может ошибиться, заполняя форму. Когда человек ошибается или пропускает поле, форма сообщает ему об этом после нажатия кнопки подтверждения.
Если форма достаточно длинная, пользователь может не заметить одно или несколько сообщений об ошибках. Ему придется заполнять форму несколько раз. Эта проблема решается с помощью немедленной проверки корректности заполнения.
Соединяйте поле поиска и кнопку «Найти»
Если вы оставляете пустое пространство между полем поиска и кнопкой «Найти», это может привести к проблемам восприятия.
Если кнопка и поле имеют разную ширину, расположены слишком далеко друг от друга или смещены относительно друг друга, пользователь не воспринимает форму поиска единым целым. Он тратит слишком много времени на восприятие, оценку и интерпретацию объекта, что уменьшает эффективность формы. Хорошая форма поиска выглядит так:
Текст в поле повышает эффективность форм
Выше сказано, что положение текста над полями формы эффективнее, чем слева или справа от полей. Существует еще одно решение: помещение текста в полях формы. Этот подход делает формы более компактными и уменьшает число визуальных фиксаций. Кроме того, пользователю не нужно разбираться, к какому полю относится текст.
Капча останавливает не только спам-роботов, но и пользователей
Капча защищает сайт от спам-ботов. Однако многие пользователи не заполняют формы, если капча слишком сложная. А простые варианты, например, капча-чекбокс, малоэффективны.
Используйте капчу-слайдер. Эта защита эффективно работает против ботов, однако не заставляет людей отказываться от заполнения форм.
Сделайте форму регистрации максимально простой и удобной
Чтобы решить эту задачу, воспользуйтесь следующими рекомендациями:
- Просите пользователя придумать ник после регистрации. Поиск незанятого ника часто занимает много времени, что заставляет часть пользователей отказываться от регистрации.
- Позвольте пользователям вводить пароль один раз. Для этого используйте чекбокс, позволяющий увидеть написанный пароль.
- Используйте функцию автозаполнения для полей с географическими данными (страна, город).
- Позвольте пользователям входить на сайт с помощью ника или адреса электронной почты.
- Позвольте пользователям входить на сайт через учетные записи в Facebook, Twitter и других социальных сетях.
Обеспечивайте возможность ставить флажок в чекбоксе нажатием на текст
Пользователям неудобно ставить галочки в чекбоксе, так как их окошки очень маленькие. Эта проблема легко решается: позвольте посетителям ставить галочку нажатием на текст ярлыка чекбокса.
Объедините общий поиск по сайту с поиском по разделам
Позвольте пользователям искать информацию в целом по сайту или в определенных разделах или категориях товаров. Это актуально для крупных интернет-магазинов, больших информационных ресурсов.
Подсказки в формах должны появляться при наведении курсора
Представьте ситуацию: пользователь оформляет покупку в вашем онлайн-магазине, но не знает, какой способ оплаты выбрать. Он нуждается в подсказке.
Подсказки должны появляться при наведении курсора на соответствующий знак или ссылку. Это избавляет пользователя от страха покинуть форму и потерять введенную информацию.
Сократите форму поиска ближайшего отделения до одного поля
Формы поиска, состоящие из нескольких полей, пугают пользователей.
Чтобы найти ближайшее отделение, пользователь должен заполнять только одно поле.
Подсказывайте пользователям формат заполнения форм
Это значительно увеличивает скорость заполнения и избавляет пользователей от ошибок. Подсказка может находиться непосредственно в полях формы или под ними.
Формы для входа на сайт не должны находиться на главной странице
Если поле для входа на сайт находится в верхнем правом углу страницы, пользователи могут перепутать его с формой поиска.
Выходом из ситуации может стать кнопка «Войти», после нажатие которой открывается форма для входа.
Еще одна причина поместить текст над полями формы
Если мобильный пользователь заполняет форму, где ярлыки находятся слева от полей, человеку придется использовать горизонтальный скролл или переворачивать гаджет.
Эта проблема решается помещением текста над полями формы.
Рецепт создания эффективных форм
Чтобы формы на сайте работали эффективно, сокращайте количество полей. Ярлыки должны находится над полями формы, так как это сокращает число визуальных фиксаций и облегчает работу с формой мобильным пользователям. Отмечайте необязательные поля, не используйте кнопку «Отменить», используйте подсказки. Объединяйте кнопку «Найти» с полем поиска, помещайте ее слева от поля. Позвольте пользователям искать в целом по сайту или в отдельных разделах. Сделайте максимально удобными чекбоксы и капчу.
P.S. У этой статьи есть еще одна часть: «Юзабилити для чайников. Часть 1: какими должны быть кнопки на сайте».
По материалам сайта UX Movement.
