Веб-форма — это любое пространство на сайте, в которое пользователь вводит данные. Например, когда вы регистрируетесь или авторизуетесь, вводите платежные данные, оставляете отзывы, контакты и прочее. И даже когда вы что-то ищете в Гугле, вы тоже заполняете форму.
Чем лучше дизайн вашей веб-формы, тем эффективнее будет ваш сайт. Формы фактически соединяют потенциальных покупателей и ваш бизнес. Дата-ресурс для бизнеса Clutch сообщает, что 86% людей успешно пользуются веб-формами на постоянной основе. Но при этом многие аналитические исследования говорят, что самая частая причина отказов посетителей сайтов (уходов их с веб-страниц) — это невозможность или нежелание разобраться в форме. Подсчитано, что порядка 80% людей бросают форму после того, как начали её заполнять.
«Создать форму очень легко. Сложная часть — сделать так, чтобы люди всё-таки заполнили её» — говорит Лийен Роджерс, вице-президент по маркетингу в JotForm.
Каковы же лучшие наработки в сфере создания веб-форм? Главный секрет успеха — помнить, что ваши клиенты реальные люди, которые заслуживают простой и понятной коммуникации. Следуя этим десяти простым и резонным принципам дизайна веб-форм, вы создадите простые и полезные интерактивные элементы сайта.
Общие советы по дизайну
Как говорят мои коллеги UI/UX дизайнеры, даже следование нескольким простым правилам сделает ваши веб-формы более профессиональными на вид и (что более важно) функциональными.
- Оставляйте прост ранство между разными элементами форм, поскольку это очень упрощает навигацию.
- Избегайте мелких деталей и нечитаемых шрифтов.
- Подсвечивайте поле, где находится курсор, или отметьте его другим способом.
Откажитесь от форм, где это возможно
Это правда. Первым делом спросите себя: действительно ли форма в вашем случае необходима?
Например, когда я вижу опрос из 15 (или хотя бы 10) вопросов о забронированном мною недавно отеле или покупках в магазине одежды, я прихожу в отчаяние ещё до его заполнения. И я всегда стараюсь избегать таких опросов.
До того, как создавать форму, убедитесь, что она нужна. Люди, как правило, неохотно оставляют персональную информацию, либо им просто скучно и лень отвечать на вопросы. Чаще всего они заполняют онлайн-формы только тогда, когда у них есть какого-то рода проблема.
Если ваш бизнес это позволяет, подключите социальный логин: дайте людям войти с помощью их аккаунтов в Google или в соцсетях. Это проще и удобнее для пользователей, и большинство из них не любит создавать новые аккаунты на разных сайтах.
Дайте людям причину заполнить вашу форму до конца
Люди должны знать, что это им даст. Опишите преимущества, которые получит пользователь: это может быть создание персонального аккаунта, возможность совершаь покупки, 30-дневный бесплатный период и так далее. Добавьте призыв к действию, который сообщит, что весь процесс займет не больше пары минут. то особенно важно для громозких форм на получение кредитной карты и других подобных.
Следуйте гайдлайнам
В давние школьные годы одна из моих подруг получила «3» за свой доклад о распределении населения. Она закрасила наименее населенные районы самым темным оттенком, тогда как обычно для них используют наиболее светлый.
Большинство пользователей обычно имеют представление, как выглядит веб-форма, поэтому они ожидают увидеть форму, состоящую из знакомых им компонентов. Оставайтесь в пределах того функционала, которого ожидают от формы. Избыток креатива может смутить и отпугнуть пользователей.
Спрашивайте только то, что необходимо
Французский математик Паскаль сказал отличную фразу: «Я мог бы написать короче, но у меня не было времени».
French mathematician Blaise Pascal once famously said: “I would have written a shorter letter, but I did not have the time”. Достигать краткости действительно сложно, но это совершенно необходимо, когда дело касается дизайна форм. Если вы сделаете список слишком длинным, то сведете свои усилия на нет. На самом деле, каждый дополнительный вопрос снижает конверсию примерно на 7%. Как говорит исследование, для пользователей оптимально 5-7 полей в форме.
Четко отделите поля, обязательные для заполнения. Обычно это делается астериском («звездочкой»). Если почти все поля в вашей форме обязательны, можете отметить особым знаком те, что опциональны.
Используйте визуальный контраст, чтобы показать людям примерный объем данных, которые нужно ввести. Исследование юзабилити говорит, что людей смущает, когда поле формы не соответствует по высоте объему вводимых данных.
Повторюсь, я не хочу сказать, что вы должны бояться длинных форм. У них есть одно большое преимущество: люди, которые их заполняют, больше вовлечены, чем те, которые заполняют короткие.
«Более короткая форма означает, что её заполнит больше людей, а значит, в sgjkexbnt больше лидов. Но качество лидов будет выше, если посетители готовы заполнить больше полей формы и оставить вам больше информации о себе» — Памела Вон, главный менеджер по маркетингу в HubSpot.
Используйте шаблоны и автозаполнение
Главная трудность в заполнении форм — ввод данных в нужном формате. Автозамена обычно справляется с этой сложностью. Но всё же процент ошибок остается высоким. Чтобы минимизировать проблему, используйте шаблон заполнения как пример.
Проследите, чтобы пользователям не пришлось вводить специальные символы вроде $ или @ и переводите данные в корректный формат автоматически.
Автозаполнение, в свою очередь, помогает избежать опечаток и улучшить UX.
Например, заполнение полей, связанных с адресом, в регистрационной форме может быть утомительным. Автозаполнение с помощью геолокации поможет пользователю ввести адрес быстрее.
Кстати, автозаполняемыми могут быть не только поля со страной и индексом. Российский банк Tinkoff использует нестандартную форму для кредитной карты, где автоматически заполняются поля с именем и фамилией. Это впечатляюще!
Источник: Kate Shokurova, uxdesign.cc
Посмотрите, как работают формы на лучших сайтах августа по версии престижной онлайн-награды Awwwards.