8 способов создания идеальной формы регистрации
Перевод статьи Карлоса Соузы
Как только бизнес начал переходить в интернет и воспринимать веб серьезно, формы регистрации стали жизненно важной частью сайтов и приложений. Это первый барьер на пути пользователя, решившего совершить онлайн покупку, а значит — ключевой фактор для поддержания стабильных отношений с целевой аудиторией.
Под термином “форма регистрации” я подразумеваю все , что необходимо заполнить для приобретения товара или услуги в интернете. На Amazon нужно зарегистрироваться, чтобы купить что-то, на Airbnb — чтобы арендовать квартиру. Вам придется это сделать также на eBay, Google, Facebook, Twitter и других сервисах.
Почему, если формы регистрации важны, они зачастую столь плохо спроектированы? С этой мыслью в голове я составил список ключевых факторов, которые стоит учесть при их создании.
1. Придайте регистрации ценность
Почему пользователь должен зарегистрироваться? Вы должны понимать, ради чего тратить несколько драгоценных минут своего времени, и уметь убедить клиента в важности этого шага.
Покажите преимущества регистрации. В этом случае пользователи более охотно оставляют личные данные. Они как бы обменивают их на ваше щедрое предложение.
Ниже — несколько примеров, как показать эту выгоду:
2. Откажитесь от обязательных полей
Обязательные поля — возможно самая распространенная ошибка. Не слушайте коллег из отделов IT и маркетинга. Их аргументы — из 90-х, когда все было непонятно и сложно. Мы живем в XXI веке, и сейчас возможно действительно все.
Главная причина большого количества полей в формах — стремление получить как можно больше данных для рекламных компаний. Однако существует много других путей, чтобы сделать это.
При регистрации запрашивайте минимум изначально необходимой информации. Все остальное вы всегда успеете узнать после. Если ваша цель — качество, а не количество, то сфокусируйтесь на анализе данных и качестве выводов.
Откажитесь от подтверждения почты и пароля —это улучшит UX. Нужно избежать ошибок и опечаток? — вместо прямой проверки совпадений используйте альтернативные решения. Например такое, предложенное Крисом Джексоном:
Чтобы не заставлять пользователя подтверждать пароль, предусмотрите возможность увидеть его. Одно это увеличит количество завершенных регистраций.
3. Расставьте заголовки правильно
Вероятно, это один из самых обсуждаемых аспектов в проектировании форм. Было проведено немало исследований и большинство из них пришли к схожим выводам.
Пользователи заполнят форму быстрее, если заголовки расположить над полями, а не слева от них, так в этом случае потребуется меньше зрительных фиксаций.
Исследования говорят также о том, что оптимальный вариант представления — заголовки внутри поля. Плюсы: минимум зрительных фиксаций и компактный, простой для восприятия вид. Подробнее об этом— в статье Энтони из UX Movement.
Эта техника выглядит многообещающей, но парни из Formulate добавили свои мысли на этот счет. Мой вывод (это личная точка зрения), позиционирование подписей над полями ввода — лучший подход к дизайну форм для десктопных устройств. Результат: визуально чистая форма и простой и понятный UI.
4. Добавьте инструкцию
Правильные регистрационные формы направляют пользователя.
Объясните клиентам, попавшим на сайт, зачем вам те или иные данные и в каком формате их вводить. Спросили дату рождения? — расскажите для чего. Это вызовет доверие и благодарность.
Требуете сложный пароль? Не давите и не требуйте минимальную длину, использование букв и цифр, наличие заглавных букв и специальных символов (!#$_). Позвольте каждому выбрать собственный уровень сложности. В конце концов, фраза в качестве пароля более надежна, чем какой-нибудь “П4р0лЬ!”.
5. “Дополнительные” поля, вместо “обязательных”
Обязательные поля сами по себе не так страшны, но могут понизить конверсию получаемых данных. Люди согласны делиться информацией, говорят исследования. Но если вы пометите часть полей как “обязательные”, пользователи ограничатся только ими.
Вместо этого, отметьте “дополнительные” поля — они не вызовут желание побыстрее отделаться от формы. Подробнее об этой технике здесь.
6. Используйте пространство справа
Вспомним еще один способ задавать неправильно правильные вопросы. Сколько раз вы отвечали на вопрос о гендере через выпадающий список? Или указывали дату рождения, выбирая отдельно день, месяц и год?
Проблема выпадающих списков в том, что они перекрывают другую информацию и заставляют делать лишние манипуляции с формой. Есть более приемлемые способы получить те же данные.
Следующий аспект — возможности HTML5. Используйте правильный type-атрибут. Например, type="email" — для электронной почты. Тогда на мобильных устройствах появляться email-дружелюбная клавиатура, и ввести адрес будет проще.
Несколько примеров как улучшить UX форм
- Тип поля URL вызывает клавиатуру, включающую символ “/” и доменную зону:
<input type="url" name="url" - Тип TEL — клавиатуру для набора номера телефона:
<input type="tel" name="telephone" - Тип NUMBER — клавиатуру для удобного ввода чисел. Позволяет задать минимальное и максимальное значение и даже его кратность (шаг изменения значения):
<input type="number" name="number" min="10" ax="100" step="10" value="10"
7. Избегайте captcha
Харри Бригнал:
“Использовать CHPTCHA — это как рассказать миру о проблеме спама, с которой вы не знаете как справиться, и которую вы переложили на пользователя. Короче говоря, это как-то стремно.”
Captcha — одна из главных причин отказа от заполнения форм, и поэтому приносит больше вреда, чем пользы. Есть альтернативные, не столь пагубные с точки зрения UX инструменты.
- reChapcha от Google
- Метод “горшочка мёда” (англ. — honeypot): создайте поле, которое реальный посетитель сайта не увидит, не сможет заполнить и оставит пустым. Что касается спам-ботов, то они не пройдут мимо и заполнят его, а вы сможете отлавливать нежелательные сообщения. Подробнее — здесь.
Плохая новость в том, что проблема спама будет с нами всегда. Но в этом нет вины пользователей, а значит и её решение не должно ложиться на их плечи.
8. Авторизация через социальные сети
Известно ли вам, что средний пользователь имеет от 7 до 25 аккаунтов, в которых он должен авторизоваться каждый день (источник)? А 82% людей склонны забывать пароли от веб-сайтов (источник). Не удивительно, что даже появился термин “усталость от паролей” (password fatigue).
С другой стороны, представьте: человек попадает на сайт и авторизуется одним кликом мыши, а вы собираете урожай в виде большого массива разнообразных данных о нем.
Авторизация через соцсети уменьшает число регистраций по фейковым e-mail и помогает персонализировать подход к клиентам.
Заключение
Я надеюсь, эта статья была полезной и пригодится при обсуждении/проектировании следующий формы на вашем сайте.
Многие успешные компании осознают ценность правильно выстроенного алгоритма регистрации. Среди них Uber, Spotify, Netflix, Mailchimp, Facebook. Но есть много таких, для кого внутрикорпоративные процессы важнее нужд пользователей.
Перечисленные пункты — простой и взвешенный пусть к проектированию хороших регистрационных форм. Техники, которые я описал, опираются на данные исследований, но это не отменяет необходимость подходить с умом к каждому конкретному случаю. Если сомневаетесь, проводите A/B-тестирования, ведь всегда есть то, что можно улучшить.
Перевод статьи Карлоса Соузы “8 ways to create perfect Registration Form”
