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

Оптимизация веб-формы и правильный дизайн — основные необходимые шаги в увеличение эффективности вашего сайта. Мы выбрали 21 пример качественно выполненных веб-форм с разных сайтов, опираясь на статью Graham Charlton на econsultancy.com. В нашей подборке: формы регистрации отелей, формы обратной связи, формы, оптимизированные под мобильные девайсы и еще несколько интересных решений.

Ясное и понятное указание к заполнению форм

Отличный пример - Threadless. Простой текст в скобках предвосхищает возможные проблемы при заполнении формы.

Индикаторы надежности пароля

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

Построчная валидация заполнения

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

Исправление некорректного e-mail

Форма обратной связи Kickstarter's анализирует самые популярные опечатки при наборе e-mail и ненавязчиво указывает пользователям на допущенные ошибки при заполнении.

Легкое заполнение для смартфонов

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

Инструмент календарь — один из лучших примеров мобильной онлайн-формы. Большие квадраты с числами максимально снижают риск неверного выбора дат из-за неудобной формы.

Адаптируйте формы для вашей аудитории

Компания по доставке еды Wiltshire Farm Foods имеет преимущественно очень старую базу своих постоянных клиентов. Автозаполнение некоторых форм (не забывайте о защите персональных данных своих клиентов) при оплате заказа делает процесс покупки более дружелюбным и простым.

Не нужно кричать

На Flickr, если люди набирают все сообщение капслоком (от эмоций или случайно забыв его выключить), оно будет автоматически конвертировано в более читаемый и удобный формат. Возможно, Mail Online надо бы посмотреть на этот пример...

Читать продолжение.

Всем, кто следит за трендами интернет-рынка - подарок. Промокод A25-1572 на 25% скидку на трудочасы, отзывы и любые услуги магазина А25.