5 советов дизайнеру по созданию онлайн-форм
Формы на сайтах и в приложениях — один из ключевых элементов интерфейса, от которого напрямую зависит конверсия ресурса. В новой статье мы открываем секреты дизайна по-настоящему привлекательных и эффективных онлайн-форм.
Веб-дизайн
1599
2 авг. 2022
В мире цифровых продуктов всевозможные онлайн-формы подстерегают нас почти на каждом шагу. Чтобы пользователи совершили целевое действие и заполнили форму заказа, регистрации, подписки на рассылку или обратной связи, дизайнерам нужно делать их максимально удобными и понятными. Для этого им нужно взглянуть на эти элементы интерфейса глазами целевой аудитории.
Правильная форма с позиции бизнеса — это форма, увидев которую, пользователь сразу понимает, зачем и как ему действовать. К примеру, в форме обращения в поддержку интернет-магазина алгоритм действий покупателя, недовольного покупкой, может быть таким:
5 приведенных ниже советов помогут вам создавать формы, которые понравятся пользователям и обеспечат вашим проектам высокую конверсию.
Эта фраза набила оскомину всем, кто участвует в создании цифровых продуктов, но своей актуальности она не теряет. Неважно, насколько уникален и оригинален ваш проект. Если вы хотите, чтобы он был успешным, забывать о фундаментальных правилах, определяющих качество решения задач пользователей, нельзя.
Допустим, вам нужно продумать дизайн формы заказа очков для сайта оптики. Учтите, что аудиторией такого ресурса являются люди с плохим зрением. Они не будут в восторге от мелкого шрифта и узких полей формы. В такой ситуации целесообразно сделать текст крупным, а поля формы широкими. Покупатели оценят такую заботу.
Чем меньше в форме полей, тем охотнее пользователи ее заполняют. Но это не значит, что нужно оставить одно-единственное поле. Просто не нужно в стремлении собрать побольше данных о пользователях увеличивать число полей искусственно.
Самыми привлекательными для пользователей являются небольшие формы, состоящие максимум из 3-5 полей. Для первого контакта этого вполне достаточно, все остальные данные можно запросить уже после совершения целевого действия (регистрации, оформления заказа).
Поля в форме могут быть пустыми, заполненными верно или неверно. Каждую из этих ситуаций можно проиллюстрировать наглядными подсказками. Если какое-то из обязательных полей не заполнено или заполнено неверно (текст вместо номера телефона, например), пользователь увидит рядом с ним подсказку о невозможности отправки формы. Если все в порядке, рядом тоже появляется соответствующая подсказка, и пользователь спокойно переходит к другим полям.
Чтобы сэкономить время пользователей на заполнение формы, можно использовать разные приемы:
Эти приемы минимизируют рутинные действия и повышают лояльность пользователей к бренду. У людей остается больше времени и возможностей лучше познакомиться с продукцией, сервисами и самой компанией.
Далеко не всегда пользователи следуют на сайте или в приложении по маршруту, продуманному дизайнером. В итоге некоторые важные шаги остаются невыполненными, из-за чего не удается успешно отправить, к примеру, форму заказа или регистрации на сайте.
Чтобы избежать этого и сохранить высокую конверсию, дизайнеру надо предусмотреть механизм защиты от подобных ошибок. Не должно возникать ситуаций, когда пользователь не может отправить форму из-за непонятных ему причин. Если форма не отправляется, человек должен видеть, почему возникает ошибка, куда ему нужно вернуться и что сделать, чтобы все получилось. Алгоритм может быть любым, главное, чтобы он был понятен клиенту и возвращал его на верный путь.
Онлайн-формы остаются основным методом получения информации об онлайн-пользователях. Поэтому для дизайнеров критически важно уметь проектировать их таким образом, чтобы люди заполняли их с удовольствием, обеспечивая высокую конверсию ресурса.
Всем нам приходилось сталкиваться с онлайн-формами, заполнить которые стоило немалых усилий. Помните об этом опыте, проектируя дизайн и логику работы форм для собственных проектов, и не допускайте таких же ошибок. Пользуйтесь нашими советами, они универсальны и применимы при создании любых цифровых продуктов, где используются формы для сбора данных о пользователях.
Правильная форма с позиции бизнеса — это форма, увидев которую, пользователь сразу понимает, зачем и как ему действовать. К примеру, в форме обращения в поддержку интернет-магазина алгоритм действий покупателя, недовольного покупкой, может быть таким:
- Ввел свои контактные данные: ФИО, email, номер заказа, телефон.
- Принял условия обработки данных.
- Загрузил фото товара.
- Указал, чем не устроила покупка.
- Отправил заявку на возврат одним кликом.
5 приведенных ниже советов помогут вам создавать формы, которые понравятся пользователям и обеспечат вашим проектам высокую конверсию.
Совет 1. Помните о потребностях пользователей
Эта фраза набила оскомину всем, кто участвует в создании цифровых продуктов, но своей актуальности она не теряет. Неважно, насколько уникален и оригинален ваш проект. Если вы хотите, чтобы он был успешным, забывать о фундаментальных правилах, определяющих качество решения задач пользователей, нельзя.
Допустим, вам нужно продумать дизайн формы заказа очков для сайта оптики. Учтите, что аудиторией такого ресурса являются люди с плохим зрением. Они не будут в восторге от мелкого шрифта и узких полей формы. В такой ситуации целесообразно сделать текст крупным, а поля формы широкими. Покупатели оценят такую заботу.
Совет 2. Уберите все лишнее
Чем меньше в форме полей, тем охотнее пользователи ее заполняют. Но это не значит, что нужно оставить одно-единственное поле. Просто не нужно в стремлении собрать побольше данных о пользователях увеличивать число полей искусственно.
Самыми привлекательными для пользователей являются небольшие формы, состоящие максимум из 3-5 полей. Для первого контакта этого вполне достаточно, все остальные данные можно запросить уже после совершения целевого действия (регистрации, оформления заказа).
Совет 3. Добавьте подсказку около каждого поля
Поля в форме могут быть пустыми, заполненными верно или неверно. Каждую из этих ситуаций можно проиллюстрировать наглядными подсказками. Если какое-то из обязательных полей не заполнено или заполнено неверно (текст вместо номера телефона, например), пользователь увидит рядом с ним подсказку о невозможности отправки формы. Если все в порядке, рядом тоже появляется соответствующая подсказка, и пользователь спокойно переходит к другим полям.
Совет 4. Помогите клиентам сэкономить время
Чтобы сэкономить время пользователей на заполнение формы, можно использовать разные приемы:
- автозаполнение,
- всплывающие подсказки,
- образцы заполнения полей,
- пометки для обязательных полей.
Эти приемы минимизируют рутинные действия и повышают лояльность пользователей к бренду. У людей остается больше времени и возможностей лучше познакомиться с продукцией, сервисами и самой компанией.
Совет 5. Объясняйте пользователям их ошибки
Далеко не всегда пользователи следуют на сайте или в приложении по маршруту, продуманному дизайнером. В итоге некоторые важные шаги остаются невыполненными, из-за чего не удается успешно отправить, к примеру, форму заказа или регистрации на сайте.
Чтобы избежать этого и сохранить высокую конверсию, дизайнеру надо предусмотреть механизм защиты от подобных ошибок. Не должно возникать ситуаций, когда пользователь не может отправить форму из-за непонятных ему причин. Если форма не отправляется, человек должен видеть, почему возникает ошибка, куда ему нужно вернуться и что сделать, чтобы все получилось. Алгоритм может быть любым, главное, чтобы он был понятен клиенту и возвращал его на верный путь.
Заключение
Онлайн-формы остаются основным методом получения информации об онлайн-пользователях. Поэтому для дизайнеров критически важно уметь проектировать их таким образом, чтобы люди заполняли их с удовольствием, обеспечивая высокую конверсию ресурса.
Всем нам приходилось сталкиваться с онлайн-формами, заполнить которые стоило немалых усилий. Помните об этом опыте, проектируя дизайн и логику работы форм для собственных проектов, и не допускайте таких же ошибок. Пользуйтесь нашими советами, они универсальны и применимы при создании любых цифровых продуктов, где используются формы для сбора данных о пользователях.
Читайте другие статьи
10 лучших инструментов для UX/UI-дизайнера в 2022 году
Мы подготовили подборку из десяти лучших программ, незаменимых для UX/UI-дизайнеров в этом году. Пользуясь ими, вы сможете существенно сократить время на создание прототипов, варфреймов и дизайн-макетов сайтов и приложений.
Веб-дизайн
5515
22 марта 2022
Тенденции в дизайне Email-рассылок на 2022 год
Разберемся, какие тренды наметились в дизайне Email-рассылок в этом году, чтобы вы могли использовать их при создании дизайн-макетов электронных писем для своих заказчиков.
Веб-дизайн
2143
22 февр. 2022
6 фильмов и сериалов, которые полезны дизайнерам
Идеально, когда фильмы или сериалы не только вызывают эмоции, но и помогают развивать насмотренность, эмпатию. Мы знаем 6 таких киноработ!
Веб-дизайн
4254
23 янв. 2020
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Никакого спама. Только ценные и полезные статьи для вас!