×
Россия +7 (495) 139-20-33

12 способов оптимизировать веб-форму на сайте

Россия +7 (495) 139-20-33
Шрифт:
0 22533
Подпишитесь на нас в Telegram

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

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

В данной статье мы рассмотрим 12 способов оптимизировать веб-форму на сайте.

Автопроверка корректного заполнения полей

Если пользователь заполнил поле неправильно, стоит немедленно ему сообщить об этом, а не ждать, пока он нажмет кнопку «Принять». Функция поможет пользователям быстро исправить ошибки и удостовериться, что форма заполнена правильно.

В примере компании Autoglass, если информация, введенная в поле, корректна, рядом с ним появляется зеленая галочка, если нет — красный крестик и объяснение ошибки.

(кликните для увеличения)

Четкие требования к заполнению полей

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

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

(кликните для увеличения)

Расположение название поля слева от него

Многие сайты размещают название поля над ним, что делает форму очень длинной (как на примере ниже). Однако самый лучший вариант — расположить название слева от поля (как в примере от ASOS в предыдущем пункте).

(кликните для увеличения)

Название поля также можно поместить внутрь него (пример в следующем пункте). Однако и здесь есть свои минусы — название может не исчезнуть и перемешаться с информацией, которую вводит пользователь, а кроме того, некоторые пользователи, увидев, что в поле уже есть информация, просто его пропускают.

Дополнительная информация рядом с формой

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

(кликните для увеличения)

Четкое объяснение ошибок

Не используйте общее объяснение «Поле заполнено неверно», конкретизируйте в зависимости от совершенной пользователем ошибки. Например, в форме на сайте VW непонятно, что не так с индексом (postcode):

(кликните для увеличения)

На сайте Peugeot это реализовано гораздо лучше:

Сохранение пароля

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

(кликните для увеличения)

Подсказки пользователям

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

(кликните для увеличения)

Сохранение данных в форме при перезагрузке страницы

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

Сокращение количества полей

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

(кликните для увеличения)

Немного юмора

Стандартная форма не обязательно представляет собой три поля на белом фоне. Проявляйте креативность!

(кликните для увеличения)

Упрощение

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

(кликните для увеличения)

Инструкция, что пользователю делать дальше

Как только пользователь заполнил форму, ему нужно не только сказать «Спасибо!», но и дать дальнейшую инструкцию — его запрос передан на обработку, ему позвонят, напишут по email и т.д.

(кликните для увеличения)


Есть о чем рассказать? Тогда присылайте свои материалы Марине Ибушевой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Накрутка поведенческих факторов: дорого, сложно, но можно. Если очень хочется
Oleg_bobr2012
1
комментарий
0
читателей
Полный профиль
Oleg_bobr2012 - Мда...Может Анне сразу в Яндекс написать кейсы по накрутке ПФ. Я бы такого сотрудника гнал вон.
28 способов повысить конверсию интернет-магазина
Татьяна
1
комментарий
0
читателей
Полный профиль
Татьяна - Очень действенные рекомендации представлены в статье! Всё четко расписано и легко внедряемо в работу интернет-магазинов.Удобство и наглядность+различные бонусы и скидки-именно то, что и цепляет покупателя.
Создали ресурс для металлургов, который позволяет следить за аналитикой рынка и осуществлять продажи
Наталья Сталь
3
комментария
0
читателей
Полный профиль
Наталья Сталь -
Какие сайты лидировали в поиске Яндекса и Google в 2023 году
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Если что по рейтингу вы не правы, есть ядро по которому производиться оценка и вы можете по нему самостоятельно все посмотреть. Единственный объективный рейтинг по SEO. Других не знаю Ну я вам скажу что это не так и в предыдущие года сайт моего клиента попадал в рейтинг, при чем несколько раз. И я прекрасно знал еще до объявления результатов кто лидер - рейтинг прозрачный, есть фразы по которым набираются баллы. В этом году наш сайт не попал в рейтинг например и это было понятно, что не попадет (по статистике позиций)
5 способов увидеть сайт глазами поисковика: анализируем скрытый контент и cloaking
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Сейчас клоаку прячут, так что под нее можно глянуть только с гуггловских ip. Сейчас только гуггл сервисами можно глянуть
Михаил Сливинский (Яндекс): об алгоритмах качества в поиске, сгенерированных текстах и накрутке ПФ
Анна Макарова
388
комментариев
0
читателей
Полный профиль
Анна Макарова - Интересно, из каких именно слов Михаила, вы сделали такой вывод?
Optimization 2023: текстовый анализ в 2024 году и методы увеличения релевантности страниц
Игорь
1
комментарий
0
читателей
Полный профиль
Игорь - это информация максимум уровня middle seo. что такой проходняк делает в секции hard seo когда-то великой ашмановки, еще и в исполнении токсичного инфоцыгана большая загадка)) ходил последние 5 лет на нее, но больше пожалуй не стоит
5 ошибок отдела продаж, из-за которых вы теряете клиентов
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - Крутая статья! Можно еще указать: Работу без CRM-системы - я считаю, что это основа отдела продаж. Потому что не все компании решаются на внедрение отдельно системы для отдела продаж. Но зато можно что то многофункциональное внедрить аспро.клауд или что то подобное
Контекстная реклама, таргет и SEO вошли в топ-3 каналов продвижения бизнеса в 2023 году
Сергей
1
комментарий
0
читателей
Полный профиль
Сергей - Например, так {censored} - продвижение карточки в органике Google :) Также в Яндекс.Директ есть направление контекста для маркетплейсов.
Как продвигать сайт на Tilda: особенности продвижения и рекомендации специалистов
Konstantin Bulgakov
15
комментариев
0
читателей
Полный профиль
Konstantin Bulgakov - Спасибо за рекомендации, полезно. Но кажется, что тематика в кейсе не самая конкурентная + часть запросов в продвижение брендовые, там и без сео позиции будут в топе.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
388
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
120
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
64
Комментариев
60
Комментариев
59

Отправьте отзыв!
Отправьте отзыв!