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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Упрощение

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

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

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

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

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


Читайте нас в Telegram - digital_bar

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    «Баден-Баден»: как выйти из-под фильтра
    Александр
    27
    комментариев
    0
    читателей
    Полный профиль
    Александр - Сергей, будем рады увидеть исследование, которое докажет мифичность.
    «Прямая линия» с Александром Алаевым («АлаичЪ и Ко»): отвечаем на вопросы
    Александр Алаев
    13
    комментариев
    0
    читателей
    Полный профиль
    Александр Алаев - Роман. Тут ответ очень простой. Каждый запрос можно четко разделить на коммерческий или некоммерческий. "Купить слона" и его длинные хвосты - коммерческий. "Как выбрать слона" и подобные - информационные. Вот под коммерческие ключи должны быть страницы услуг или каталога товаров. А под информационку - блог. Очень важно не путать их, тем более несоответствующая коммерческим факторам страниц просто не продвинется, то есть по запросу с "купить" блог никогда не будет показываться в выдаче, так же как и страница услуги/товаров не покажется по "как выбрать". Понятно примерно?
    Кейс: продвигаем бизнес по продаже пластиковых окон в Москве
    Иван Стороженко
    5
    комментариев
    0
    читателей
    Полный профиль
    Иван Стороженко - 1. По началу вообще не использовали, сейчас уже много каналов используется. 2. Все может быть, в принципе сайты должны быть удобны для пользователя, для этого и нужна схожесть между собой. Честно говоря старались брать все самое интересное у конкурентов + подкреплять своими идеями.
    Инфографика: самые распространенные SEO-ошибки Рунета
    Dmitro Grunt
    2
    комментария
    0
    читателей
    Полный профиль
    Dmitro Grunt - Кстати, у проектов которые продвигает Нетпик все тайтлы не более 65 символов? Или вы надеетесь что кто то послушает советов и отдаст вам часть трафика? :-)
    7 причин не работать на биржах копирайтинга
    Dasha Shkaruba
    6
    комментариев
    0
    читателей
    Полный профиль
    Dasha Shkaruba - Спасибо за мнение! Кстати, на бирже главреда прием анкет закрыт
    День рождения SEOnews: 12 лет в эфире!
    Анна Макарова
    0
    комментариев
    0
    читателей
    Полный профиль
    Анна Макарова - Ура )
    Google.ru внесли в реестр запрещенных сайтов
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - Гон, все работает и будет работать. Да и пусть банят, будет как с рутрекером.
    Западные специалисты выяснили, как повысить позиции ресурса в выдаче Google
    Serhii Diachenko
    1
    комментарий
    0
    читателей
    Полный профиль
    Serhii Diachenko - Спасибо Бернис!
    Как бесплатно публиковать гостевые посты без миралинкс и бирж ссылок
    Александра Емец
    1
    комментарий
    0
    читателей
    Полный профиль
    Александра Емец - Некоторые сеошники почему-то забывают о таком эффективном бесплатном способе продвижения, как гостевые посты. Все внешнее продвижение заключается в закупке ссылок и раскрутке групп в соцсетях. Первое уже начало изживать себя, нужно искать что-то новое. Хорошо, что вы напомнили о гостевых постах. Будем пробовать и развиваться.
    SEMrush: факторы ранжирования в Google в 2017 году
    Анна Макарова
    0
    комментариев
    0
    читателей
    Полный профиль
    Анна Макарова - Уважаемый S1, я тоже понимаю, что есть такие люди, которые заметив допущенную неточность несутся на всех парусах продемонстрировать "силу" своего ума. Спасибо вам за пристальное внимание. Это поможет нам быть лучше.
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    310
    Комментариев
    262
    Комментариев
    228
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    97
    Комментариев
    97
    Комментариев
    95
    Комментариев
    80
    Комментариев
    77
    Комментариев
    67
    Комментариев
    60
    Комментариев
    59
    Комментариев
    55
    Комментариев
    53
    Комментариев
    52
    Комментариев
    48

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