Главная -> Победители -> Оптимизация веб-форм с данными на сайте

Оптимизация веб-форм с данными на сайте

Практически на каждом сайте присутствует какая-либо веб-форма, к примеру, форма регистрации, форма авторизации, форма обратной связи, форма заказа товара и т.д. Данные в эти формы обычно вводит посетитель сайта, то есть простой человек, который может вообще не разбираться в HTML, CSS, PHP, в том, как устроен сайт. Поэтому и создавать веб-формы нужно с учетом особенностей мышления такого посетителя (делать их максимально простыми и понятными). Распишем все по пунктам.

• Наличие автопроверки. Принцип действия автопроверки заключается в том, что поля формы, заполненные ненадлежащим образом, будут мгновенно выделяться соответствующим цветом. Кроме того, будет появляться краткое пояснение (чтобы человек понял, что именно он сделал не так). К примеру, если в форме регистрации человек указал слишком короткий пароль, то напротив формы с паролем появится примечание, а само поле будет выделено другим цветом. Автопроверка позволяет существенно экономить время пользователей, сообщая обо всех допущенных при заполнении формы ошибках в реальном времени.
• Указание на допущенные ошибки после заполнения формы. Если автопроверка указывает на ошибки в реальном времени, то здесь ошибки должны указываться при попытке отправить данные, введенные в форму. К примеру, если человек не обращает внимания на сообщения автопроверки и все равно нажимает кнопку «отправить» в конце формы, то высветится сообщение о том, что данные невозможно отправить. Также будет указана причина, по которой данные нельзя отправить, и указаны поля, в которых допущены ошибки.
• Краткость формы. Нужно стремиться к тому, чтобы число полей в форме было минимальным. Ведь никому не хочется вводить кучу ненужной информации и тратить на это много времени. В идеале человек должен ввести лишь самые необходимые сведения и нажать кнопку отправки. К примеру, в форме для отправки комментария можно сделать всего лишь 2 поля – имя комментатора и текст сообщения, а можно сделать 5-7 полей – имя, сайт, текст комментария, капча, вторая капча и т.д. В первом случае посетителю значительно проще оставить комментарий, поэтому человек с большей вероятностью оставит его.
• Наличие пояснений к полям формы. Желательно, чтобы к каждому полю формы было привязано краткое текстовое пояснение. В пояснении обычно говорится о том, какую именно информацию следует ввести в данное поле (в том случае, если название поля формы может быть неправильно понято или не понято вообще). К примеру, к полю с названием «сайт» в форме для отправки комментария можно сделать следующее пояснение - «укажите адрес своего сайта».
• Запоминание данных. Желательно сделать так, чтобы вводимые в форму данные запоминались. Особенно актуальным этот принцип является при работе с формой для отправки комментария и формой авторизации (именно их один и тот же посетитель сайта вынужден заполнять несколько раз). К примеру, если форма запоминает введенные логин и пароль, то человеку не нужно каждый раз вводить их заново (и тратить на это время).
• Наличие максимально простой для посетителей проверки на спам. Нежелательно использовать слишком сложные и нечитабельные капчи (или сразу несколько капч) с целью защиты от спама. Во-первых, заполнение такой капчи отнимает у посетителя лишнее время и силы. Во-вторых, некоторые капчи выдают символы, которые очень сложно распознать. Если человек ошибется 1-2 раза, то у него пропадет всякое желание заполнять форму.