На многих сайтах форма — главный инструмент конверсии посетителей и для меня остается загадкой, почему её разработку доверяют бездарным и некомпетентным дизайнерам. Иначе как объяснить засилье столь убогих, сложных и нечитабельных форм?
[exec] get_template_part(‘share’);[/exec]
Формы должны быть простыми и понятными, без множества скучных и бесполезных полей. И подходить к их разработке нужно так же ответственно, как и разработке главной страницы. Для достижения лаконичности и высокой конверсии, следует соблюдать несколько простых, но очень эффективных правил.
Избавьтесь от лишнего
Выбросить все лишнее, пожалуй, лучшая идея на самом первом этапе разработки. Если это регистрационная форма — оставьте только обязательные поля. Остальное можно подсунуть после регистрации. Если это заявка на кредит — разбейте её на несколько шагов, оставив на первом только ФИО и контактные данные.
Плохо
Хорошо
В первом случае банк запрашивает сведения не имеющие прямого отношения к заявке (пол, стаж, дата рождения) и абсолютно игнорирует контактные данные. Если пользователь раздумает заполнять форму дальше, у банка останется масса бесполезной информации, вместо телефонного номера.
Кстати, если вы хотите сделать удобным весь сайт, а не только его отдельные элементы, рекомендую прочитать вот эту статью.
Структурируйте информацию
Никому не интересно разбираться в тонкостях работы форм. Все должно быть максимально легко и прозрачно. Как не заставить пользователя думать — вот о чем должны думать вы. Разделите информацию на категории и подавайте «к столу» небольшими порциями.
Плохо
Хорошо
В первом случае пользователь не сможет контролировать заполняемую им информацию, ибо кровь будет сочиться из его глаз. Нужно очень сильно не любить своих клиентов, чтобы подсовывать им подобный шлак.
Включите автосохранение
В процессе заполнения объемных веб-форм могут возникнуть форс-мажорные обстоятельства, которые неизбежно приведут к потере уже введенной пользователем информации. В этом случае ситуацию легко спасет функция автосохранения данных.
Плохо
Хорошо
Реализовать автосохранение проще простого и очень странно, что абсолютное большинство предпочитает игнорировать столь замечательную возможность сохранить нервные клетки своих потенциальных клиентов. Но будьте осторожны, в некоторых случаях, например банковском секторе, хранить пользовательские данные не очень безопасно :)
Не будьте оригинальными
Не очевидная работа очевидных элементов — самая бесячая херня на этой планете. Всегда нужно помнить, что форма — это как раз тот случай, когда оригинальным быть не просто вредно, но и опасно.
Существует большая вероятность запутать и напугать клиента, отбив дальнейшее желание разбираться с особенностями работы отдельных элементов.
Плохо
Хорошо
В первом случае чекбоксы выполняют роль радиобаттанов, что, как вы понимаете, не совсем очевидно. Я не могу придумать причину, почему банк такое пропустил. Возможно у них просто нет дизайнера, способного нарисовать красивые радиобаттоны.
Включите валидацию
Проверка введенных данных должна происходить до нажатия на основной call to action. А еще лучше — блокировать его до заполнения всех необходимых полей.
Плохо
Хорошо
В первом случае банку абсолютно фиолетово, какие данные попадают в форму, пока вы не нажмете кнопку «Отправить». После этого на вас свалится множество ошибок и заполнение формы придется начинать с самого начала.
В заключение
Учитывая приведенные выше правила при создании веб-форм, вы легко сможете добиться высокой конверсии и лояльности от настоящих и будущих клиентов.
В последнем скриншоте сообщение валидации неинформативное, да ещё и с многоточием, то есть без отображения полного текста.
Да, но это другой вопрос. Оно показывается до нажатия на кнопку и это гуд. В остальном сообщением конечно нужно поработать. Бедный дизайнер зассал расширять расстояние под 2-3 строчки
Не поленюсь и оставлю коммент…
Не знаю каким боком набрёл на ваш блог, но прочитав 2 статьи и с двумя вообще не согласен… В данной статье я б с Вами поспорил примерно в 50% случаев… И вторая, где Вы смеетесь над сайтами явно новичков… Пилю сайты много лет и разные допиливал и могу отличить сайты новичков от просто бюджетом 1000 рублей) Очень жаль, что Вы критикуете сайты начинающих без правда весомых аргументов. Думаю Ваш блог интересен как раз тем, кто только учит как писать … Успехов!
Спасибо Артемий, за ваш комментарий.
1. Хорошо что у вас есть свое мнение.
2. Я не над кем не смеялся, а указывал на ошибки. Это разное.
3. Сайты, что я «критиковал» стоят гораздо больше 1000.
Может хотите написать статью для onjee о том как делается настоящий дизайн? Я готов обсудить условие и вознаграждение.
Готов «снять шляпу» и пожать руку каждому дизайнеру, кто думает о возможных формах контента (длина, локализация и прочее). Я это к чему: читал как-то статью в которой говорилось, что дизайнер — это по сути архитектор, с чем я полностью согласен.
Причем архитектор, который не просто спроектирует «дом», а еще и предусмотрит что будет с «домом», когда туда заселится 1000 человек и начнет танцевать радуясь своему заселению ;)
Из первого примера с банком, вся информация важна, поэтому пример неудачный как по сути и остальные…
Вся информация и сразу. Зачем? Если это банковская форма, то можно разбить на несколько этапов и в первую очередь просить самые простые и важные данные – телефон, имя, фамилия. Грубо говоря, если человек заполнит их, перейдёт на второй шаг, а потом убежит, то мы как банк уже будем иметь при себе контакты потенциального клиента/заемщика.
Полезная информация, но это и так многие знают…
спасибо за статью. у вас на сайте тоже кстати ошибка после нажатия «добавить коммент» вылазиет