Как создавать хорошие веб-формы, которые пользователи не будут бросать на половине. Ч.2

30 November 2020
Как создавать хорошие веб-формы, которые пользователи не будут бросать на половине. Ч.2

Продолжаем рассказывать о том, как создавать удобные веб-формы для приложения или сайта. Ведь убрав всего одно поле или изменив названия полей можно существенно повысить конверсию. Читайте руководство и экспериментируйте!

Начало здесь: Как создавать хорошие веб-формы, которые пользователи не будут бросать на половине. Ч.1 | ADDEO В МАССЫ | Яндекс Дзен (yandex.ru)

Используйте пошаговые формы и условную логику

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

Ещё одна крутая идея — использовать условную логику, когда следующий вопрос «вырастает» из предыдущего, как в блок-схеме, приводя пользователей в разные секции в зависимости от их ответов. Например, если они выбрали «Собака» в поле «Питомец» на сайте зоомагазина, они не увидят в форме поля для владельцев других питомцев.

Как создавать хорошие веб-формы, которые пользователи не будут бросать на половине. Ч.2

Помещайте заголовки рядом с полями

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

Для более длинных форм группируйте вопросы по смыслу и объединяйте блоки общими заголовками. Помните, один блок «ФИО» лучше, чем три: «Фамилия», «Имя», «Отчество» — как минимум, это снижает число обязательных полей.

Как создавать хорошие веб-формы, которые пользователи не будут бросать на половине. Ч.2

Сделайте понятные названия полей и сообщения об ошибках

Названия полей и все пояснения должны быть ясными и простыми для понимания. Обозначайте метками, какой тип данных нужно вводить в каждое поле: это сведёт к минимуму ошибки. Используйте существительные, чтобы обозначить главное содержимое поля: например, «Имя». Лучше избегать связки «Глагол+существительное», например, «Введите имя». Излишняя информация и визуальный шум затрудняют восприятие.

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

Также стоит по возможности использовать встроенную проверку, которая указывает на ошибки ввода в реальном времени. Чтобы внедрить эту функцию, используйте специальную технологию Ajax для веб-интерфейсов. Она разработана, чтобы создавать динамические запросы серверу без видимых обновлений веб-страницы. Используя эту возможность, вы позволяете вашему пользователю мгновенно исправлять ошибки. Это гораздо удобнее, чем вносить коррективы после нажатия кнопки «Отправить».

Как создавать хорошие веб-формы, которые пользователи не будут бросать на половине. Ч.2

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

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

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

Как создавать хорошие веб-формы, которые пользователи не будут бросать на половине. Ч.2

Уделяйте внимание приватности

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

Как создавать хорошие веб-формы, которые пользователи не будут бросать на половине. Ч.2

Дополнение: советы для мобильных устройств и доступности форм

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

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

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

Как создавать хорошие веб-формы, которые пользователи не будут бросать на половине. Ч.2

Будущее: голосовые интерфейсы на базе искусственного интеллекта

Появилась новость о том, что в будущем искусственный интеллект (ИИ) заменит веб-формы. Идея в том, что у ИИ много преимуществ перед веб-формами, и это делает его лучшей альтернативой. И я легко могу это представить! С точки зрения UX (опыта пользователя), это гораздо удобнее: вы просто говорите, и Алиса или Сири делают всё за вас. Вам вообще не придется иметь дело с формой.

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

Как создавать хорошие веб-формы, которые пользователи не будут бросать на половине. Ч.2

Заключение

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

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

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

Если вы заметили, что ваши веб-формы на сайте не вполне удобны для пользователей, и вместе с этим вы теряете трафик — пора заняться проблемой.

Проанализируйте специфику и постарайтесь оптимизировать ваши формы в соответствии с итогами анализа. Даже небольшие изменения значат многое. Например, Expedia убрала поле «Компания» из своей формы бронирования, и их ежегодный доход вырос на $12 млн.

Источник: Kate Shokurova, uxdesign.cc