ypx
INTENSIVE
Попробуй себя в UX/UI-дизайне UX/UI-дизайн бесплатно
7 дней
5 проектов в портфолио
проверка дз
banner-circle
INTENSIVE
Попробуй себя во Frontend разработке Frontend бесплатно
7 дней
1 полноценный проект
проверка дз
banner-circle
5 советов дизайнеру по созданию онлайн-форм
Формы на сайтах и в приложениях — один из ключевых элементов интерфейса, от которого напрямую зависит конверсия ресурса. В новой статье мы открываем секреты дизайна по-настоящему привлекательных и эффективных онлайн-форм.
Веб-дизайн
1599
В мире цифровых продуктов всевозможные онлайн-формы подстерегают нас почти на каждом шагу. Чтобы пользователи совершили целевое действие и заполнили форму заказа, регистрации, подписки на рассылку или обратной связи, дизайнерам нужно делать их максимально удобными и понятными. Для этого им нужно взглянуть на эти элементы интерфейса глазами целевой аудитории.

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

  1. Ввел свои контактные данные: ФИО, email, номер заказа, телефон.
  2. Принял условия обработки данных.
  3. Загрузил фото товара.
  4. Указал, чем не устроила покупка.
  5. Отправил заявку на возврат одним кликом.

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



Совет 1. Помните о потребностях пользователей


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

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

Совет 2. Уберите все лишнее


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

Самыми привлекательными для пользователей являются небольшие формы, состоящие максимум из 3-5 полей. Для первого контакта этого вполне достаточно, все остальные данные можно запросить уже после совершения целевого действия (регистрации, оформления заказа).

Совет 3. Добавьте подсказку около каждого поля


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



Совет 4. Помогите клиентам сэкономить время


Чтобы сэкономить время пользователей на заполнение формы, можно использовать разные приемы:

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

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

Совет 5. Объясняйте пользователям их ошибки


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

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



Заключение


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

Всем нам приходилось сталкиваться с онлайн-формами, заполнить которые стоило немалых усилий. Помните об этом опыте, проектируя дизайн и логику работы форм для собственных проектов, и не допускайте таких же ошибок. Пользуйтесь нашими советами, они универсальны и применимы при создании любых цифровых продуктов, где используются формы для сбора данных о пользователях.
Понравилась статья? Сохраните её в своих соц. сетях!
обучайся с нами профессии
UX/UI-дизайнер
Подробнее о курсе
Читайте другие статьи
10 лучших инструментов для UX/UI-дизайнера в 2022 году
Мы подготовили подборку из десяти лучших программ, незаменимых для UX/UI-дизайнеров в этом году. Пользуясь ими, вы сможете существенно сократить время на создание прототипов, варфреймов и дизайн-макетов сайтов и приложений.
Веб-дизайн
5515
Тенденции в дизайне Email-рассылок на 2022 год
Разберемся, какие тренды наметились в дизайне Email-рассылок в этом году, чтобы вы могли использовать их при создании дизайн-макетов электронных писем для своих заказчиков.
Веб-дизайн
2143
6 фильмов и сериалов, которые полезны дизайнерам
Идеально, когда фильмы или сериалы не только вызывают эмоции, но и помогают развивать насмотренность, эмпатию. Мы знаем 6 таких киноработ!
Веб-дизайн
4254
Получайте первыми свежие статьи из нашего блога прямо на вашу почту
Введите корректный e-mail
Никакого спама. Только ценные и полезные статьи для вас!