Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:

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

Россия +7 (495) 960-65-87
Шрифт:
0 15845

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Упрощение

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

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

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

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

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


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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Поделиться 
Поделиться дискуссией:
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
SEOnews и Serpstat запускают конкурс для интернет-маркетологов
Марина Васёва
1
комментарий
0
читателей
Полный профиль
Марина Васёва - Возможности Excel, без которых не обойтись специалисту по контекстной рекламе: 1ps.ru/blog/promotion/2017/vozmozhnosti-excel-dlja-kontekstnoj-reklamy/
Как построить качественную ссылочную массу сайта
Айрат Рахимзянов
39
комментариев
0
читателей
Полный профиль
Айрат Рахимзянов - Спасибо Кирилл. Сейчас восстановилась работа сервиса: take.ms/ttXrw
«Я оптимизировал сайт, а он не в ТОП! Что делать?»
Павел Горбунов
6
комментариев
0
читателей
Полный профиль
Павел Горбунов - Как можно в инструменте tools.pixelplus.ru/tools/text-natural сравнить текст со страницы конкурента и со своей страницы? Я вижу возможность только для проверки одного урла.
Инструкция по применению: обзор сервиса обратного звонка Callbackhunter
Полина Ковальчук
1
комментарий
0
читателей
Полный профиль
Полина Ковальчук - Возможно, но не советую экономить на этом сервисе, функционал то тоже круче, чем у аналогов. Вы создаете сайт для получения денег и чем качественнее Вы выстроите продвижение, тем больше лидов Вы получите!
Мир глазами поисковых систем
Александр Рунов
4
комментария
0
читателей
Полный профиль
Александр Рунов - Какой регион, если не секрет? В Мск, в ряде ВК тематик (в тех же "окнах" или "колесах"), без работы с внешними факторами по ВЧ запросам в ТОП не выплывешь. Хотя в большинстве направлений вполне реально.
Влияние HTTPS на ранжирование региональных поддоменов в Яндексе
Екатерина Иванова
1
комментарий
0
читателей
Полный профиль
Екатерина Иванова - Посмотрите на сколько упал трафик и на сколько потом вырос:упал на 10-20% на 1 месяц, а вырос в итоге в 5 раз. Одним мартовским трафиком всё падение перекрыли. Или можно ждать Яндекс неопределённое количество времени со стартовым уровнем трафика. Упущенные возможности и всё-такое.
SEO-тренды на 2017 год: мнение специалистов
Olga Inventor
1
комментарий
0
читателей
Полный профиль
Olga Inventor - Хорошая статья. То, что SEO - антитренд, уже давно говорят. Нужен комплексный подход.
Чек-лист: SEO для B2B-бизнеса
Антон Зозуля
8
комментариев
0
читателей
Полный профиль
Антон Зозуля - Ваша цель вывести страницу, на которой будет только ваш товар (обычно это фильтр бренд/производитель в нужном каталоге) по СЧ запросам в ТОП. Например, вы продаете "велосипеды Елочка". В каталоге дилера велосипеды, вы выбираете Бренд - "Елочка" и должны получить страницу "велосипеды Елочка". Она должна быть на уникальном урл, иметь уникальные метатеги, лучше, чтобы был SEO-текст. После этого ваша задача получить на нее трафик по запросам: идеально: купить велосипед, цена велосипед хуже: велосипед дешево, китайский велосипед еще хуже (меньше трафика и ниже конверсия, но они есть): велосипед + [регион], велосипед + [фильтр другой]. Тут трудно без прямого влияния на содержимое страницы (метатеги и текст). ПС бренд елочка выдуман. :)
Кейс: продвижение по трафику интернет-магазина мебельной фурнитуры и освещения
Ксения Лапаева
4
комментария
0
читателей
Полный профиль
Ксения Лапаева - Блок "Полезная информация" по факту предложен (и реализуется в других проектах) не для того, чтобы люди уже пришедшие на сайт в Каталог вдруг переходили в статьи и занимались их чтением. Это работает на повышение внутрессылочного веса продвигаемых статей. На статьи переходят из поиска и затем уже по их внутренним ссылкам попадают в каталог... Это помогает выгребать дополнительный трафик по запросам, которые не удалось воткнуть на страницы каталога по тем или иным причинам.
Интеграция call tracking и CRM: углубленный анализ данных о звонках и продажах
Денис
2
комментария
0
читателей
Полный профиль
Денис - Какой смысл вообще в облачных CRM, обрезанный фугкционал, свое дописать невозможно, слив клиентов другим компаниям. Серверные бесплатные CRM куда надежней и кастамизируй как хочешь.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
287
Комментариев
262
Комментариев
218
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
123
Комментариев
97
Комментариев
97
Комментариев
95
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
58
Комментариев
55
Комментариев
52
Комментариев
45
Комментариев
44

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