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

Заполнить длинную форму? Боюсь-боюсь!

Отмечайте необязательные поля

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

Звездочки создают визуальный шум

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

Отмечайте необязательные поля
Узнайте, как проводить аналитику форм на сайте с помощью «Яндекс.Метрики».

Помещайте текст над полями формы

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

Чтобы заполнить форму, человек совершает 14 визуальных остановок

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

Число остановок сокращается в два раза

В формах не должно быть кнопки «Отменить»

Кнопки «Отменить», «Cancel», «Нет» делают формы менее эффективными. Во-первых, они позволяют пользователю отказаться от покупки, подписки или регистрации. Во-вторых, клиенты могут нажимать эти кнопки случайно.

Кнопка «Отменить» уместна только в диалоговых окнах или индикаторах процесса.

Кнопки «Отменить» или «Cancel» уместны только в этих случаях

Избавляйте пользователей от бесконечных кликов по шаговым регуляторам

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

Шаговые регуляторы затрудняют работу с интерфейсом

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

Скользящий регулятор использовать легче и приятнее

В форме поиска кнопка «Искать» должна быть расположена слева

Большинство дизайнеров помещают кнопку «Искать» справа от формы поиска. Это не лучшее решение: пользователь сначала оценивает форму, потом кнопку, затем возвращается к форме для ввода нужного слова, после чего снова возвращается к кнопке.

Кнопка «Найти» справа создает четыре визуальные фиксации

Если кнопка расположена слева, это сокращает число визуальных остановок до трех.

Кнопка «Найти» слева оставляет три визуальные фиксации

Форма подтверждения возраста должна быть простой

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

Почему я должен указывать точную дату рождения?

Лишние кнопки в форме подтверждения делают форму менее эффективной.

Эта форма имеет лишнюю кнопку

Идеальная форма подтверждения возраста имеет одну кнопку:

Подтвердите свой возраст и войдите на сайт

Длинные формы должны немедленно проверять корректность заполнения полей

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

Форма сообщает о незаполненных полях

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

Сообщение о некорректном заполнении появляется мгновенно

Соединяйте поле поиска и кнопку «Найти»

Если вы оставляете пустое пространство между полем поиска и кнопкой «Найти», это может привести к проблемам восприятия.

Кнопка и поле имеют разную ширину

Если кнопка и поле имеют разную ширину, расположены слишком далеко друг от друга или смещены относительно друг друга, пользователь не воспринимает форму поиска единым целым. Он тратит слишком много времени на восприятие, оценку и интерпретацию объекта, что уменьшает эффективность формы. Хорошая форма поиска выглядит так:

Кнопка и поле объединены

Текст в поле повышает эффективность форм

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

Текст в полях делает формы более эффективными

Капча останавливает не только спам-роботов, но и пользователей

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

Сложная капча защищает от ботов и от людей, а простая капча не защищает от ботов

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

Капча-слайдер

Сделайте форму регистрации максимально простой и удобной

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

  • Просите пользователя придумать ник после регистрации. Поиск незанятого ника часто занимает много времени, что заставляет часть пользователей отказываться от регистрации.
  • Позвольте пользователям вводить пароль один раз. Для этого используйте чекбокс, позволяющий увидеть написанный пароль.
Вводить пароль дважды никто не любит
  • Используйте функцию автозаполнения для полей с географическими данными (страна, город).
  • Позвольте пользователям входить на сайт с помощью ника или адреса электронной почты.
  • Позвольте пользователям входить на сайт через учетные записи в Facebook, Twitter и других социальных сетях.
Вход с помощью учетной записи в соцсетях избавляет пользователей от необходимости регистрироваться

Обеспечивайте возможность ставить флажок в чекбоксе нажатием на текст

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

Чтобы поставить галочку, достаточно кликнуть по тексту ярлыка

Объедините общий поиск по сайту с поиском по разделам

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

Пользователь может искать нужную информацию на сайте в целом или в определенном разделе

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

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

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

Подсказка появляется при наведении курсора на выбранное поле

Сократите форму поиска ближайшего отделения до одного поля

Формы поиска, состоящие из нескольких полей, пугают пользователей.

Чтобы найти отделение, нужно заполнить три поля

Чтобы найти ближайшее отделение, пользователь должен заполнять только одно поле.

Одного поля достаточно

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

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

Подсказки увеличивают скорость заполнения форм

Формы для входа на сайт не должны находиться на главной странице

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

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

Выходом из ситуации может стать кнопка «Войти», после нажатие которой открывается форма для входа.

Еще одна причина поместить текст над полями формы

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

Либо поле не видно, либо текст пропадает

Эта проблема решается помещением текста над полями формы.

Рецепт создания эффективных форм

Чтобы формы на сайте работали эффективно, сокращайте количество полей. Ярлыки должны находится над полями формы, так как это сокращает число визуальных фиксаций и облегчает работу с формой мобильным пользователям. Отмечайте необязательные поля, не используйте кнопку «Отменить», используйте подсказки. Объединяйте кнопку «Найти» с полем поиска, помещайте ее слева от поля. Позвольте пользователям искать в целом по сайту или в отдельных разделах. Сделайте максимально удобными чекбоксы и капчу.

P.S. У этой статьи есть еще одна часть: «Юзабилити для чайников. Часть 1: какими должны быть кнопки на сайте».

По материалам сайта UX Movement.

#
Дизайн Разработка
© «TexTerra», при полном или частичном копировании материала ссылка на первоисточник обязательна.