Форма заполнения на сайте

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

Для чего они нужны

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

Как организовать и оформить форму

• Поля для заполнения следует расположить в последовательности сверху и постепенно опускаясь вниз, от простых к сложным.
• Старайтесь не размещать поля и данные вместе в одной строчке, это затрудняет восприятие, проще для пользователя, когда он, пробежав по полю глазами способен оценить объем информации, который ему придется заполнить. Оптимально, когда в левой колонке поля с названием, а в правой колонке ячейки для ввода.
• Объемную форму рекомендуется разбить поэтапно, например, показать текущий шаг и количество оставшихся шагов или в процентах. Таким образом вы создаете эффект легкости заполнения и тем самым не пугает покупателя. У каждого шага должно быть название чтобы было ясно что в этом разделе от пользователя требуется и также должна быть возможность вернуться в предыдущий шаг.
• Сочетайте поля по содержанию, к примеру, в поле с адресом ячейка с индексом, городом, улицей и прочее.
• Поясняйте значение поля, оставляйте подсказки и примеры, например, если требуется телефон, то разъясните в каком формате его писать, расположить их можно под полем для заполнения или это может быть всплывающая подсказка. Не делайте слишком большие предложения пусть оно не превышает пяти слов.
• Название поля можно расположить над ним или слева от него. Зачастую пользователи привыкли читать слева направо и сверху вниз, отталкиваясь от этого следует располагать ячейки в привычной для чтения последовательности и поэтому рекомендуется назначения поля делать по левую сторону, а ячейку для заполнения по правую. Если это мобильная форма заполнения, то для экономии пространства есть смысл назначение и ячейку для заполнения объединить в одну.
• Формат поля. Если в форме нужно выбрать один из двух или трех вариантов, то рекомендуется воспользоваться радиокнопками, если вариантов больше трех, то лучше подойдет выпадающий список. При выборе нескольких значений подходят чекбоксы, в случае с датами воспользуйтесь календарем или тремя полями, отдельно для года, месяца и дня.

Как правильно заполнять

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

Рекомендации

• Если вы запрашиваете личные данные, то акцентируйте внимание на то что эта информация находится в безопасности. Любой человек не захочет утечки его личных данных, поэтому желательно оговаривать причину, почему вы ее просите.
• Запрашивайте данные по минимуму, чем меньше полей для заполнения, тем выше вероятность что их заполнят.
• Старайтесь использовать стандартные формы, не стоит изощряться. Классические привычные формы пользователю будет проще заполнять.
• Указывайте какие поля обязательны к заполнению, а какие нет, обычно их помечают «*».
• Когда используете кнопки в форме воспользуйтесь кнопкой чтобы акцентировать внимание на основное действие и на ссылку для добавочных действий.
• Используйте цвета для кнопок для обозначения назначения, например, для основного действия зеленый цвет, а для возврата или отмены серый.
• Правильно давайте названия кнопкам, вместо «ок» лучше воспользуйтесь формулировкой «отправить заявку».
• Для некоторых полей можно использовать маску ввода, например, если вводить номер телефона укажите +7 и оставьте место чтобы пользователь сам ввел номер. Также можно раздробить поля при вводе паспортных данных.
• Клиент хочет быть уверен, что если он отлучится от компьютера (а он может отвлечься) то, когда он вернется все вводимые им данные, будут на месте и что он четко поймет на чем остановился.
• Пользователи не сильно одобряют использование капчи (captcha) как защиту от роботов, так как в основном там тяжело понять, что изображено на них.
• Держите направление на неопытного пользователя, который преимущественно будет пользоваться курсором, а не клавиатурой.
• Если есть возможность заполните за клиента его данные, например, авторизоваться через социальную сеть и после уточнить верны ли данные, но не требовать повторного заполнения.
• Представляйте варианты по умолчанию, в которых выбор не имеет большого значения и вы знаете наверняка что большинство отвечает именно так.
Для проверки корректности ваших форм можно воспользоваться полезными сервисами Яндекс.Метрика, Google Analytics и Clicktale, эти сервисы укажут количество пользователей, начавших заполнять форму и которые довели заполнение до финала.

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

Прочитав статью, становится понятно, что форма для ввода пользователями своих личных данных должна быть максимально простой, доступной, интуитивно понятной и легкой для отображения на любом устройстве, будь то компьютер, либо мобильное устройство. Это и понятно, так как клиента нужно максимально завлечь.
Мне не понятно только одно. Ведь принцип отображения форм заполнения, я так понимаю, на разных сайтах одинаков. Иногда при регистрации на форумах сталкиваюсь с тем, что при подтверждении своих введенных данных выходит сообщение о том, что такое имя пользователя уже существует, либо пароль подтвердила неверно, либо в капче ошиблась и т.д. и после этого возвращает снова на страницу с формой заполнения. Так вот в этой форме при этом чуть ли не половина строк оказываются пустыми, и их приходится заполнять повторно. Это очень нудно и не удобно, особенно если речь идет о повторном заполнении е-майла. А на некоторых сайтах все сделано нормально, при возврате к форме пустая лишь та строка, в которой обнаружена ошибка.
Для чего так делают? Почему при возврате к форме заполнения удаляются верно введенные данные, если ошибка не вних? Ведь это отпугивает потенциальных пользователей сайта/форума. Лично я частенько покидаю такие форумы, так и не зарегистрировавшись.

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

Форма должна быть удобной и визуально приятной для пользователя. Иначе он может просто уйти с сайта. Также нужен элементарный контроль вводимых данных. Например, недопустимо вводить в поля «Имя», «Фамилия», «Отчество» цифры или спецсимволы.