5171
Формы ввода бывают разными: пошаговое оформление заявки, однообразная заявка с несколькими полями ввода или форма регистрации. Все эти компоненты несут огромную ценность для дизайна продукта и его конверсий, бывают такие случаи когда львиная доля отказов приходится на форму заполнения какой либо простой анкеты регистрации и через некоторое время выясняется, что хороший процент потенциальных конверсий был потерян банально из за неудобства расположения этих самых форм.
В этой статье мы максимально понятно и наглядно расскажем, как правильно оформлять формы заполнения и покажем как это делать так, что бы посетителям вашего ресурса любые действия по заполнению данных не причиняли каких либо неудобств. Конечно же среди всего описанного ниже есть исключения, но мы расскажем вам об основных принципах составления форм.
Формы должны быть в одну колонку
Формы составленные в несколько колонок не дают пользователю сконцентрироваться на процессе заполнения. Вообще никто не любит бегать глазами по экрану, что бы сделать несколько простых действий.
Ставьте метки и подписи к формам прямо над ними
Метки и подписи к формам легче и интуитивно понятно воспринимаются пользователями. К тому же верхние подписи для форм отлично смотрятся на мобильных устройствах, что часто решают проблему мобильной адаптации. Однако стоит рассматривать расположение подписей слева в тех случаях, когда формы предусматривают собой заполнение большого количества информации.
Классифицируйте подписи соответственно формам
Ставьте подпись как можно ближе к самой форме и делайте расстояния от формы до подписи к следующей формы такими, что бы пользователю было в первую же секунду понятно какая форма за что отвечает. Одинаковые расстояния от подписи до формы и до следующей формы довольно частая ошибка среди разработчиков веб-интерфейсов.
Избегайте подписей CAPS'ом
Их очень сложно читать и воспринимать. Следуя опросам, некоторые считают такой подход к подписям форм заполнения, как ошибку в разработке и не уверены в том, что их данные будут правильно обработаны.
Избегайте подписей внутри форм заполнения
Это очень заманчивая идея для оптимизации места на странице и некоторые подумают, что так будет удобно пользователям. Но это далеко не так, подумайте о мобильных пользователях некоторым из которых такие подписи попросту не будут видны или людях которые не сориентируются в том, что заполнять. Такой подход хорош для ввода данных о кредитной карте, но в целом как форма для заполнения данных очень сомнителен, как с визуальной так и технической точек зрения.
Ставьте чекбоксы и радиобатоны как список
Такая расстановка чекбоксов повысит читабельность и понимание того, что требуется сделать. Если ставить в ряд, то может возникнуть каша из непонимания того, что же нужно отметить.
Описывайте Call-to-Action
Call-to-action должен наглядно описывать свои цели, что произойдет, когда пользователь который только что заполнил форму на него нажмет. Избегайте непонятных слов, которые могут сбить с толку.
Не прячьте маленький текст подсказки, когда он необходим
Раскрывайте текст подсказки, если он простой и короткий. Для сложных описаний используйте текст, вложенный в всплывающее поле, появляющееся при наведении на знак вопроса.
Разделяйте приоритетное действия в форме от второстепенного
Выделяйте именно то, на чем сконцентрирован пользователь заполняя форму. Дайте ему понять, что он делал первостепенную задачу. Чем проще найти Call-to-action, тем больше будет конверсий
Группируйте связанные поля
Пользователи любят всё структурировать и раскладывают всё по полочкам. Создавая логические группы для форм заполнения, вы облегчите им этот процесс и дадите понять, что конкретно они заполняют. Для больших форм регистраций это очень ценный совет.
Старайтесь исключать обязательные поля из форм заполнения и упростить этот процесс. И прежде чем добавлять очередную форму заполнения подумайте, а так ли она нужна и как бы вы сами поступили в этом случае?
Процесс заполнения форм и сбор информации становится все более и более автоматизированым, мобильные телефоны и другие портативные девайсы уже довольно собирают информацию без ведома пользователя и при согласии последнего сами заполняют нужные поля, так что старайтесь правильно прописывать id и названия к каждому input в форме заполнения. Это упростит процесс регистрации или чего-либо еще и скорее всего повысит ваши конверсии.
