Сколько людей любят заполнять формы? Я думаю, не так много. Это не то, что пользователи хотят от сервиса – они просто хотят покупать билеты, общаться с друзьями и т.д. И регистрация – это как-то неизбежное зло, с которым им приходится иметь дело. Так в чем же проблема с отправкой форм?

  1. Это занимает много времени.
  2. Сложные формы трудно понять.
  3. Формы могут запрашивать информацию, которой пользователи боятся делиться – данные кредитной карты, номера телефонов, адреса.

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

Обеспечьте возможность регистрации и входа через аккаунты в социальных сетях — Facebook, Google и т.д.

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

возможность регистрации и входа через аккаунты в социальных сетях — Facebook, Google
Изображение: New York Times

Сохраняйте введенные данные

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

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

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

Разделите форму на несколько этапов

Авто-фокус первого поля ввода в форме

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

Авто-фокус первого поля ввода в форме
Изображение: Udacity

Избегайте флажков для подтверждения Политики конфиденциальности

Вместо флажков используйте текст со ссылками о принятии условий и политик. УТОЧНЕНИЕ: в некоторых случаях (например, в ЕС) разрешены только флажки вместо автоматического принятия условий, поэтому лучше свериться с законом (спасибо Томасу Лейтерману).

Избегайте флажков для подтверждения Политики конфиденциальности
Изображение: Coursera

Вы можете использовать одну форму для регистрации и входа (но будьте осторожны)

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

Вы можете использовать одну форму для регистрации и входа
Изображение: Bookmate

Размещайте поля в одну колонку

Удерживайте пользователей в процессе, придерживаясь одной колонки, чтобы избежать переориентации. (Исключения: короткие и связанные поля, такие как город, штат и почтовый индекс).

Размещайте поля в одну колонку

Обеспечьте четкий заголовок

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

Обеспечьте четкий заголовок
Изображение: New York Times

Установка ввода

Поле ввода – это основной элемент любых форм. Простой ввод состоит из нескольких частей: поле ввода, подпись, метка-заполнитель.

Поле ввода

Обычно в текстовом поле 6 состояний: по умолчанию, наведение курсора, фокус, ошибка, успешно и не активно.

Поле ввода
Состояния текстового поля

Подпись

Золотое правило – выравнивать по верху подписи, так как они быстрее читаются. В коротких формах НОРМАЛЬНО использовать выразительные иконки вместо подписей. Другой способ –использовать всплывающие подсказки, как в материальном дизайне. У подписей должны быть короткие и понятные микрокопии. Капитализация начальной буквы только первого слова или капитализация начальных букв всех слов в предложении – решать вам, но сохраняйте системность в названиях подписей. Группируйте связанные подписи и поля – помещайте подписи рядом с полями, к которым они относятся.

Подписи полей
Подписи полей

 

Метки-заполнители

Метки-заполнители – это подсказки, которые помогают пользователям понять, какой тип и формат данных можно ввести. Избегайте использования заполнителей в качестве подписей, что делает форму компактной. Это хорошо подходит для коротких форм с 2-3 полями, но не для более длинных форм. Когда пользователь вводит информацию в поле, заполнитель исчезает, и пользователь может не иметь возможности проверить, вводит ли он правильный тип данных.

Метки-заполнители
Избегайте использования меток-заполнителей как подписей

Будьте осторожны с полем пароля

Я обратил внимание на поле пароля, потому что у него есть свои ограничения и хитрости.

Позвольте пользователям видеть свои пароли

Это помогает пользователям проверять свои пароли перед отправкой.

Позвольте пользователям видеть свои пароли

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

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

Показывайте надежность пароля
Изображение: Dropbox

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

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

Показывайте требования к паролю перед отправкой
Изображение: MailChimp

Предупреждайте пользователей, что Caps Lock ВКЛЮЧЕН

Это помогает предотвратить такую распространенную ошибку, как внезапное нажатие клавиши Caps Lock с клавишей Shift.

Предупреждайте пользователей, что Caps Lock ВКЛЮЧЕН
Картинка: Privat24

Создавайте функцию ‘Забыли пароль?’ для форм входа

Люди часто забывают свои пароли (и я тоже), поэтому облегчите напоминание или восстановление пароля.

Создавайте функцию ‘Забыли пароль?’ для форм входа
Картинка: Bookmate

Создавайте функциональные кнопки

Называйте кнопки правильно

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

Называйте кнопки правильно

Делайте кнопку неактивной, пока все необходимые данные ввода не будут заполнены

Это еще один способ визуально проверить данные ввода перед отправкой.

Делайте кнопку неактивной

Правильно используйте первичные и вторичные кнопки

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

Правильно используйте первичные и вторичные кнопки

Избегайте кнопок “Сброс” и “Очистить”!

Избегайте кнопок “Сброс” и “Очистить”!

Подумайте о предотвращении ошибок

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

Автоматизация ввода

Автоматизация ввода данных пользователя предотвращает ошибки, сокращая поля, которые необходимо заполнить.

  1. Автозаполнение текстовых полей города и штата на основе почтового индекса или данных геолокации.
  2. Выбор типа карты по введенному номеру кредитной карты.

Автоматизация ввода

Форматирование полей с помощью масок ввода

Для исправления проблем ввода используйте маски ввода в форматированных полях данных. Маски ввода автоматически вставляют правильный формат в поле.

Форматирование полей с помощью масок ввода

Ограничения полей

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

Ограничения полей

И помните о проверке ошибок

1. Используйте встроенную проверку

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

1. Используйте встроенную проверку
Изображение: LinkedIn, Asos

2. Используйте понятную микрокопию для сообщения об ошибке

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

2. Используйте понятную микрокопию для сообщения об ошибке

3. Проверяйте поля с несколькими требованиями перед отправкой

2. Используйте понятную микрокопию для сообщения об ошибке

4.Выделяйте поля с ошибками цветом, значками и текстом

Сделайте сообщение об ошибке четко видимым, используйте различные способы, чтобы выделить его – цвет, текст и иконку.

4.Выделяйте поля с ошибками цветом, значками и текстом

Заключение

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

Что еще можно прочитать:

Виталий Дуленко
UI/UX дизайнер | Муж | Верующий. Подписаться в Twitter.