Over все поля обязательны для заполнения. Проверка обязательных для заполнения полей. Одноколоночная форма - лучшее решение
Практически все современные сайты и новые имеют формы, которые проверятся на заполнение без перезагрузки страницы. Так называемые – обязательныеполя формы. Но какие способы для создания таких форм при этом используются?
До недавнего времени самым популярным способом было использование jаvascript. Очень удобной библиотекой является jquery validation. Данный способ является современным, но для его интеграции в форму на сайте нужны некоторые навыки работы и время.
С появлением html 5 и его повсеместной интеграцией на современные сайты можно отказаться от использования jаvascript. При этом для того, чтобы сделать поле в форме обязательным для заполнения нужно только добавить атрибут required.
С атрибутом required браузер перед отправкой формы проверит, заполнено ли конкретное поле или нет. Если нет, то пользователю будет указано на обязательное заполнение поля или даже всех полей формы.
А для создания таких полей потребуется не больше минуты.
Итак, допустим есть небольшая форма:
Вот так она выглядит в браузере:
Теперь делаем некоторые поля в форме обязательными для заполнения:
Вот и все. Мы сделали все поля обязательными для заполнения меньше, чем за 1 минуту. Если не заполнять обязательные поля, то мы увидим следующие сообщения:
И, немаловажное. Данная проверка работает во всех современных браузерах и только для спецификации html 5. Для непосвященных - в начале html кода нужно вставить тег .
Казалось бы в дизайне полей ввода нет ничего сложного: рисуй пустые прямоугольники для ввода данных, все остальное пользователь сделает сам. Однако все не так просто. По объему статьи видно, что правил и особенностей довольно много. Пользователя нужно аккуратно «провести за ручку», все показать, объяснить и помочь. Тогда и только тогда мы сможем получить от него желанные данные. Ну что ж, летс старт!
7+ правил полей ввода
Самое основное правило, как и везде, ставьте себя на место посетителя. Все ли понятно? Можно ли с первого взгляда осознать что нужно ввести в поле? Адекватно ли реагирует поле на введенную информацию?
Пишите описания и подсказки
Подсказки и описания нужны чтобы показать какие данные нужно вводить, как правильно их ввести и как сайт будет использовать эту информацию в дальнейшем.
Есть несколько типов подсказок:
1) Иконки
Иконки - универсальный визуальный язык. Они помогают понять что вводить даже при беглом просмотре. И да, иконки - это дизайнерский фетиш =)
Однако не следует забывать и что их всегда нужно пояснять.
2) Примеры
Самый просто способ рассказать как заполнить поле - показать пример. Пример примера: «[email protected]»
3) Объяснения
Этот тип описаний служит для объяснения как сайт будет использовать данные и для чего они нужны. Например: «Почта нужна нам для уведомления вас о статусе заказа. Мы не будем слать спам».
Используйте маски
Для полей, где требуется определенным образом отформатированные данные (например, номер банковской карты или номер телефона) следует использовать маски. Таким образом мы перекладываем работу по форматированию информации с плеч посетителя на бездушную машину.
Приведу примеры различных масок:
Выделяйте обязательные поля
Если среди необязательных полей есть поля обязательные для заполнения, то их следует выделять среди прочих и делать акцент на обязательности заполнения. Как правило обязательные поля показывают значком звездочки - *.
Все обязательные поля лучше группировать вместе и располагать их в начале формы.
В примере выше, кстати, также показаны 2 типа подсказок: примеры и объяснения.
Фокус и клавиатура
Активное поле, в котором установлен курсор должно иметь отличительный признак. Как правило, браузеры самостоятельно подсвечивают активные поля. Однако не стоит оставлять все на откуп случая и самостоятельно проверять работоспособность этой функции.
При загрузке страницы первое поле ввода должно автоматически становится активным. Как бы приглашая к заполнению всей формы. При заполнении формы должна быть возможность переключения между полями ввода без использования мыши. Обычно это происходит по нажатию кнопки Tab.
При использовании подсказок с автозаполнением (например, в поиске) должна быть возможность выбора пункта стрелками и подтверждения его по нажатию клавиши Enter.
При вводе секретных данных (например, пароля) должна быть возможность спрятать и показать эти данные по желанию пользователя.
Используйте уже введенные данные
Поля ввода должны помнить то, о чем забывают обычные люди. Невежливо спрашивать одну и ту же информацию дважды. Если вы когда то подписывались на рассылку сайта, то при регистрации сайт должен вспомнить вас и ввести вашу почту в соответствующее поле.
Группируйте поля ввода
Для удобства заполнения похожие поля лучше группировать вместе. Например, поля с вводом личной информации (имя, фамилия, почта) - это один блок, поля с адресом доставки - это другой блок.
Помните о размере поля
Размер поля в большинстве случаев служит для оценки объема данных, которые требуются от пользователя. Т.е. там где нужно вводить длинный адрес - поле большое. Так где нужен 6-значный индекс - поле маленькое.
В заключение
Дизайн полей ввода не так прост как кажется на первый взгляд. Нужно помнить много нюансов и постоянно задавать себе вопрос: «все ли будет понятно пользователю?»
Многие дотошные ребята скажут, что правил получилось вовсе не 7 (а кто-то даже и не заметил, ха-ха-ха). Однако многие правила небольшие, поэтому я посчитал их за половину. И вообще мне просто нравится цифра 7 =)
Практически на каждом сайте можно увидеть форму регистрации. Конечно есть такие, кто просто брал чужую форму, вставлял себе, а потом пользователь хочет зарегистрироваться, но не может. Бывают такие случаи что при регистрации определенный пароль допускается и у вас получается зарегистрироваться, но затем когда вы пытаетесь войти на сайт, появляется ошибка что это недопустимый пароль, и так сайт теряет определенное количество посетителей, поэтому будьте внимательны.
Реальный пример можно увидеть здесь:
Скачать
Это уже не первый урок на данную тему, возможно вы не видели прошлые и они вам будут интересны:
HTML часть
Давайте посмотрим из чего же состоит данная форма:
| 21 22 23 24 25 26 27 28 29 | <form class = "contact_form" action = "#" method = "post" name = "contact_form" > <ul > <li > <h2 > Напишите нам</ h2 > <span class = "required_notification" > * поля обязательные к заполнению</ span > </ li > <li > <label for = "name" > Имя:</ label > <input type = "text" placeholder= "Петров Александр" required / > </ li > <li > <label for = "email" > Email:</ label > <input type = "email" name = "email" placeholder= "name@сайт" required / > <span class = "form_hint" > Например "name@сайт"</ span > </ li > <li > <label for = "website" > Веб-сайт:</ label > <input type = "url" name = "website" placeholder= "https://сайт" required pattern= "(http|https)://.+" / > <span class = "form_hint" > Например "https://сайт"</ span > </ li > <li > <label for = "message" > Сообщение:</ label > <textarea name = "message" cols = "40" rows = "6" required > </ li > <li > <button class = "submit" type = "submit" > Отправить</ button > </ li > </ ul > </ form > |
Если вы изучали прошлые уроки, то вам будут знакомы такие атрибуты как placeholder и required .
Но всё же повторю еще раз:
placeholder — присутствие данного атрибута означает что на фоне данного текстового поля будет текст, заданный в значении данного атрибута. А при вводе он исчезает.
required — если у поля есть данный атрибут, значит поле является обязательным для заполнения.
И мы не использовали Javascript потому что HTML5 позволяет нам сделать с помощью своих функций.
Также здесь есть новый атрибут pattern="(http|https)://.+" — он задает то, с чего должен начинаться веб-адрес сайта, иначе будет ошибка.
CSS часть
Теперь с HTML-частью мы закончили и надо придать вид нашей форме. Т.к. все элементы формы находятся в неупорядоченном списке, следовательно с помощью соответствующих селекторов будет задавать стили:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .contact_form ul { width : 750px ; list-style-type : none ; list-style-position : outside ; margin : 0px ; padding : 0px ; } .contact_form li { padding : 12px ; border-bottom : 1px solid #eee ; position : relative ; } .contact_form li :first-child , .contact_form li :last-child { border-bottom : 1px solid #777 ; } |
Последнее свойство значит что мы задаем границу первому и последнему элементу списка. Далее определим основные стили для элементов формы:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .contact_form label { width : 150px ; margin-top : 3px ; display :inline- block; float : left ; padding : 3px ; } .contact_form input { height : 20px ; width : 220px ; padding : 5px 8px ; } .contact_form textarea { padding : 8px ; width : 300px ; } .contact_form button { margin-left : 156px ; } |
А сейчас напишем стили, когда поля активны и когда нет:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .contact_form input, .contact_form textarea { border : 1px solid #aaa ; box-shadow : 0px 0px 3px #ccc , 0 10px 15px #eee inset ; border-radius : 2px ; padding-right : 30px ; -moz-transition : padding .25s; -webkit-transition : padding .25s; -o-transition : padding .25s; transition : padding .25s; } .contact_form input:focus , .contact_form textarea:focus { background : #fff ; border : 1px solid #555 ; box-shadow : 0 0 3px #aaa ; padding-right : 70px ; } |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | .contact_form input:required , .contact_form textarea:required { background : #fff url (images/red_asterisk.png ) no-repeat 98% center ; } .contact_form input:required :valid , .contact_form textarea:required :valid { background : #fff url (images/valid.png ) no-repeat 98% center ; box-shadow : 0 0 5px #5cd053 ; border-color : #28921f ; } .contact_form input:focus :invalid , .contact_form textarea:focus :invalid { background : #fff url (images/invalid.png ) no-repeat 98% center ; box-shadow : 0 0 5px #d45252 ; border-color : #b03535 } |
Осталось совсем чуть-чуть:). Предпоследним шагом необходимо задать стили для подсказок:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .form_hint { background : #d45252 ; border-radius : 3px 3px 3px 3px ; color : white ; margin-left : 8px ; padding : 1px 6px ; z-index : 999 ; /* значит что подсказка будет перекрывать все элементы */ position : absolute ; /* можно подсказку разбить на две строки */ display : none ; } .form_hint : :before { content : "\25C0 " ; color : #d45252 ; position : absolute ; top : 1px ; left : -6px ; } .contact_form input:focus + .form_hint { display : inline ; } .contact_form input:required :valid + .form_hint { background : #28921f ; } .contact_form input:required :valid + .form_hint : :before { color : #28921f ; } |
И последним действием будет задание стиля кнопке «Отправить»:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | button.submit { background-color : #68b12f ; background : -webkit-gradient(linear , left top , left bottom , from(#68b12f ) , to(#50911e ) ) ; background : -webkit-linear-gradient(top , #68b12f , #50911e ) ; background : -moz-linear-gradient(top , #68b12f , #50911e ) ; background : -ms-linear-gradient(top , #68b12f , #50911e ) ; background : -o-linear-gradient(top , #68b12f , #50911e ) ; background : linear-gradient(top , #68b12f , #50911e ) ; border : 1px solid #509111 ; border-bottom : 1px solid #5b992b ; border-radius : 3px ; -webkit-border-radius : 3px ; -moz-border-radius : 3px ; -ms-border-radius: 3px ; -o-border-radius : 3px ; box-shadow : inset 0 1px 0 0 #9fd574 ; -webkit-box-shadow : 0 1px 0 0 #9fd574 inset ; -moz-box-shadow : 0 1px 0 0 #9fd574 inset ; -ms-box-shadow: 0 1px 0 0 #9fd574 inset ; -o-box-shadow : 0 1px 0 0 #9fd574 inset ; color : white ; font-weight : bold ; padding : 6px 20px ; text-align : center ; text-shadow : 0 -1px 0 #396715 ; } button.submit :hover { opacity : .85; cursor : pointer ; } button.submit :active { border : 1px solid #20911e ; box-shadow : 0 0 10px 5px #356b0b inset ; -webkit-box-shadow : 0 0 10px 5px #356b0b inset ; -moz-box-shadow : 0 0 10px 5px #356b0b inset ; -ms-box-shadow: 0 0 10px 5px #356b0b inset ; -o-box-shadow : 0 0 10px 5px #356b0b inset ; } |
Вывод
Ну вот и все! 🙂 Интернет-технологии настолько быстро развиваются, что вы и заметить не успеете как все будут применять связку HTML5+CSS3. Конечно надо предусматривать как будет выглядеть тот или иной элемент в старых браузерах, но и про новые возможности забывать нельзя!
В мире разработки программных продуктов бытует немало мифов и заблуждений. Чтобы двигаться вперед, а не топтаться на месте, их совершенно необходимо разрушить. Сегодня об одном из самых закоренелых заблуждений, которое к тому же достаточно вредное - называется «Миф об обязательном поле».
Речь пойдет о практически любых системах, использующих для ввода информации формы. Обязательное поле - это поле формы, без заполнения которого система не примет у вас информацию. Среди подавляющего большинства разработчиков ПО бытует мнение, что обязательными полями должны быть:
- Все необходимые с точки зрения предмета поля (например, ФИО и дата рождения человека, если речь о паспортном столе);
- Все необходимые для функционирования системы поля (те, без которых не будут работать алгоритмы - например, дата, с которой начинается предоставление услуг, чтобы делать по ним начисления);
- Важные поля - такие, которые не необходимо, но желательно заполнить (например, обоснование вносимого изменения) - с той мотивацией, что пусть лучше пользователь попотеет, когда не нужно, чем забудет ввести значение, когда будет нужно.
Традиционно программисты считают, что делают одолжение всему остальному миру, создавая для них такой замечательный продукт, как «подставьте любое название продукта». Их программа - это чуть ли не платоновский эйдос, чистейшая абстракция, математическая формула, вычислимая, естественно, строго на наборе параметров из своей области определения. С этой точки зрения обязательные поля - та досадная мелочь, которую приходится вставлять, чтобы обучить глупых и неотесанных пользователей, как правильно вводить информацию в систему, с которой они получили честь работать.
Считается также, что некорректные (неполные) данные настолько страшны, что даже хранить их в базе данных уже некорректно. Ну и лень, разумеется - с точки зрения разработчика легче проверить корректность данных на этапе ввода и послать пользователя перепроверять свои данные, чем писать обработку ошибок там, где в системе эти данные будут реально использоваться.
Что на это имеет сказать современная наука проектирования взаимодействия с пользователем? Во-первых, стало ясно (уж не знаю, кому и когда, но достаточно давно точно, см. и ), что все-таки программы разрабатываются для пользователей. В этом смысле программист уже не диктует условия, а скромно создает сугубо утилитарный продукт, инструмент, которым будут пользоваться люди для решения своих задач и достижения своих целей. Как утюг - если тебе нужно что-то погладить, ты его включаешь. Если он будет вместо того, чтобы гладить, модально предлагать скачать обновления из интернета, понятно, куда такой утюг полетит. Алан Купер рекомендует представлять пользователей вашего продукта как очень умных, но очень занятых людей. Они, мол, не тупые и поймут, как вашим продуктом пользоваться, главное, вы только не вставайте у них на пути.
Я вообще считаю, что каждому программисту (дизайнеру, менеджеру, аналитику) следует проделать медитацию, упомянутую Сергеем Бодровым-мл.:
Ты становишься на углу оживленной улицы и представляешь, что тебя здесь нет. Вернее, тебя нет вообще. Пешеходы идут, сигналят машины, открываются двери магазинов, сменяются пассажиры на остановке. То есть в принципе мир продолжает жить и без тебя. Понимать это больно. Но важно...Я, конечно, вовсе не хочу сказать, что программист - профессия ненужная, я сам программист и совсем так не считаю. Просто это неблагодарная профессия. Никто не придет и не похвалит за хорошо реализованный алгоритм. Если программа хороша, ей будут пользоваться без дополнительных вопросов. Так и должно быть, просто, чтобы быть программистом, надо к этому привыкнуть. А эти вот люди, которые идут по улице и сменяются на остановке - это ваши пользователи. Они используют вещи так, как они им нужны. В том числе и ваш продукт. Без вас. Они ничего о вас не знают, не хотят знать и никогда не узнают. Сергею Витальевичу, когда он в полярной тундре пытается вбить в систему снятые со счетчика показания, совершенно не интересно, почему система говорит ему, что сперва требуется указать какой-то там тип тарификации, даже если в момент проектирования вам казалось, что без типа тарификации ну уж никак не обойтись. А что касается примера про утюг, скачивающий обновления, то он взят совсем не из пальца - обратите внимание, как ведет себя при включении браузер Файерфокс.
Тут вообще будет что-нибудь про обязательные поля, спросит хабраюзер? Как раз сейчас начнется.
Штука в том, что реальный наш мир - это не математическая модель, параметры которой известны в любой момент времени. Для реальной жизни характерна скорее нехватка информации, чем ее наличие. У человека, заполняющего форму, требуемых данных может не быть - и не быть их может во всех обозримых пределах досягаемости, то есть не быть ваще. Эту проблему нельзя решить, просто сделав поле обязательным - значение из воздуха не возьмется. Вводя на формах обязательные поля в угоду целостности и полноте данных, мы на самом деле мешаем пользоваться системой . Столкнувшись с такой ситуацией, пользователь либо не станет заполнять форму (и не сможет работать с системой вовсе), либо заполнит недостающие данные рыбой - выдуманными или бессмысленными данными. И это свидетельствует не о том, что пользователь плохой или плохо старался, а лишь о том, что разработанная система недостаточно гибка для использования в условиях реального мира. То, что произошло во втором случае (ввод рыбы) - это вообще обман. Разработчик системы может сколько угодно делать вид, что все в порядке, но на самом деле в этом обмане виноват именно он. Причем непонятно, кто и что вообще выиграл - пользователь поимел головную боль, а в систему попали некорректные данные. Да попали так, что обнаружить, отфильтровать или подчистить их автоматически уже невозможно - в отличие от случая, если бы пользователь просто указал, что информация отсутствует.
Что же делать? Делать нужно хорошие программы. А именно, да, таки не ставить целостность схемы БД во главу угла, а ставить туда цели и задачи пользователей. Другими словами, принимать у пользователя неполные, а в некоторых случаях и некорректные данные, естественно, с возможностью исправить их в будущем. Вопреки заблуждению (да, еще одному) это возможно, это не так сложно и это даже работает. Кроме этого, нужно еще каким-то образом помогать, подсказывать пользователю, где, каких данных и для чего ему не хватает. Чтобы он видел и контролировал ситуацию.
Сколько обязательных полей должно быть на форме? В идеале, ноль. Всегда ли такое возможно? Для меня одним из примеров высшего пилотажа является операция создания папки в Виндоус. Казалось бы, уж меньше одного поля тут не сделаешь, однако нет, они умудрились реализовать создание так, что система не спрашивает ничего - даже несмотря на то, что технические ограничения не позволяют системе создать папку без имени. Это идеал, к которому нужно стремиться.
Естественно, система должна быть минимально умной, спрашивая у пользователя только то, что имеет отношение к задачам пользователя, а не к потребностям самой системы. Система как инструмент, помните? Как раз про пример с Файерфоксом - Гугл Хром, например, решил проблему Файерфокса, обновляясь тихонько в тот момент, когда пользователь его перезагружает. Пользователю об этом знать совсем не нужно - он и не знает. Достойный пример для подражания. Я, признаться, даже сперва не понял, чегой-то он меня ни разу не спрашивал, когда ему обновляться?
Еще был миф о важных полях (это те, которые необязательны, но желательны к заполнению). Здесь все еще проще - принудительно заставить заполнить поле нельзя. Следовательно, хоть помечай поле как обязательное, хоть не помечай - все равно напишут рыбу, чушь, отписку, если не захотят заполнять. Интерфейсного решения у этой проблемы нет. Важность полей нужно доносить до сотрудников на местах. А разработчику пометить поле как необязательное. И позволить редактировать.
Литература:
- Алан Купер об интерфейсе. Основы проектирования взаимодействия. Символ-Плюс, 2009 г.
- Джеф Раскин. Интерфейс: новые направления в проектировании компьютерных систем. Символ-Плюс, 2005 г.
UPD: В комментариях и понятнее сформулировали основную мораль топика: речь о системе черновиков, о снятии требования ввести все данные сразу и непротиворечиво. То есть да, делать необязательными даже те поля, без которых система не будет работать. Естественно, она и не будет работать, но пусть хотя бы данные похранит.
UPD #2: Уточню еще одну вещь, которую я сам не осозновал ясно, когда писал топик. Я не обсуждаю здесь вопросов уместности тех или иных полей на форме (это важная, но все-таки немного другая тема, чем та, которую мне хочется донести). Я скорее предлагаю переосмыслить саму концепцию ввода информации с помощью форм, тот традиционный подход, когда нужно заполнить всю форму сразу и корректно. Вместо этого я предлагаю промежуточное состояние (неполное, некорректное, противоречивое) тоже позволять сохранять в БД, явным образом помечая такое состояние как неполное/некорректное/противоречивое . Таким образом все ситуации «я сейчас знаю не все, но завтра, может быть, узнаю», которые традиционно решаются записыванием на бумажку, можно обрабатывать с помощью информационной системы. Естественно, такие данные не нужно пускать в бизнес-процесс в силу их некорректности - тут все остается как раньше. Они просто полежат в БД до лучших времен - не пригодятся, ну и бог с ними.
13 января 2011 в 01:09- Интерфейсы
- Перевод
Веб-формы играют большую роль в ежедневном использовании интернета. Если вы разрабатываете веб-сайты, то скорее всего они в них присутствуют: будь то простая форма обратной связи или навороченное веб-приложение. Вот несколько советов, которые помогут создавать удобные в использовании формы.
1. Четко выделяйте обязательные для заполнения поля
Когда пользователь отправляет заполненную форму и потом узнает, что пропустил обязательные поля - это раздражает.Общепринято выделять обязательные поля звездочкой (*) рядом с их названием. Явное обозначение того, что поле требуется заполнить или нет, является правильным решением.
На форме регистрации Zappos.com обязательные поля выделены звездочкой (*). Необязательные поля так же явно обозначены.
2. Используйте удобные и подробные сообщения об ошибках
Я уверен, что вы ненавидите ситуации, когда при неправильном заполнении формы появляются уведомления об ошибке, говорящие: “Вы должны заполнить все необходимые поля”, вместо того, чтобы сообщить более подробные сведения, например: “Вы забыли заполнить адрес электронной почты”.Использование проверки достоверности введенных данных в реальном времени является хорошим решением. Например, сразу после заполнения адреса электронной почты, веб-форма должна проверить правильность введенного формата, и если что-то не так, то немедленно уведомить об этом пользователя.
3. Используйте проверку формата данных на стороне клиента (JavaScript)
Использование JavaScript проверки данных экономит время пользователя, а также снижает нагрузку на веб-сервер, освобождая его от обработки входящих значений полей формы. Проверка на стороне клиента позволяет пользователям видеть, что они сделали ошибку только что, а не после отправки формы. Это справедливо для любых полей, которые не связываются с вашей базой данных. Такие например, как проверка формата адреса электронной почты или количество цифр в номере телефона.
Форма регистрации на SurveyGizmo дает знать, если формат введенного вами адреса электронной почты неверный.
4. Визуально выделяйте заполняемые поля, чтобы пользователь не потерялся
Убедитесь в том, что визуально можно определить какое именно поле пользователь заполняет в данный момент. Это можно реализовать с помощью селектора псевдо-класса focus: в CSS.
Веб-форма на Wufoo визуально выделяет активные элементы цветом фона.
Как минимум реализуйте выделяемую границу для полей - по умолчанию это сделают за вас браузеры, но убедитесь что цвет отличается от дизайна сайта (фона).
Google Chrome выделяет активный элемент желтой рамкой. Firefox светло голубой.
5. Показывайте результаты прогресса
Если ваша веб-форма объемная и состоит из нескольких страниц (или имеет несколько шагов), убедитесь что пользователь постоянно получает сведения о ходе выполняемых действий, о том, сколько еще времени может ему понадобиться для заполнения. Такое часто встречается в случаях онлайн-опроса (исследования) с множеством вопросов или в процессе оформления заказа в интернет магазине.Все что нужно, это писать “Шаг 4 из 5” или что-то в этом роде. Если пользователи будут продолжают нажимать кнопку “продолжить”, четко не понимая когда будет последний шаг, то они прекратят заполнение формы раньше, чем вы можете предположить.
Оформление заказа на Amazon имеет 4 страницы. Форма сообщает где вы сейчас и сколько еще осталось до завершения.
Конечно лучшей альтернативой было бы сократить вашу веб-форму - если этого сделать нельзя, то хотя бы дайте пользователю информацию о том, насколько он близок от завершения выполняемых действий.6. Периодически сохраняйте (кешируйте) данные формы
На формах с несколькими страницами или шагами часто можно допустить ошибку. Для избежания потери данных необходимо реализовать способ сохранения введенной пользователем информации для каждой сессии. Это повышает надежность и процент того, что форма будет заполнена даже после таких ситуаций, когда пользователь уходит с данной страницы (например нажимает кнопку назад в браузере). Необходимость заново заполнять все поля формы может заставить пользователя уйти.7. Не используйте стандартный текст “Submit” (отправить)
Вместо того, чтобы ваша кнопка на форме называлась “Submit” (отправить), используйте такой текст, чтобы он напоминал пользователю о его действиях. Например “Зарегистрироваться”, или еще лучше - дайте пользователю узнать о преимуществах после заполнения формы.
На форме регистрации Basecamp текст «Submit» заменили на более полезный.
8. Кнопка “Отменить” заставляет колебаться
Представьте, что вы в магазине покупаете новую рубашку и продавец спрашивает у вас: “Вы действительно хотите именно эту рубашку?”. Вы все равно ее купите? Скорее всего нет. Возможно вы будете сомневаться, думая что продавец посчитал рубашку неподходящей.Тоже происходит и с веб-формами: использование кнопки “отменить” может заставить ваших пользователей дважды подумать о том, что они заполняют.
9. Показывайте пользователям поля в правильном формате
Если вы спрашиваете у пользователей определенную информацию - такую как номер телефона или кредитной карты - дайте им им знать, что вы ожидаете. Если пароль должен иметь определенное количество знаков или он должен содержать определенный набор символов, четко описывайте эти требования. Это снижает неясность и ускоряет процесс заполнения.
Форма регистрации Geico предоставляет однозначные инструкции о том, в каком формате ожидаются вводимые данные.
10. Одноколоночная форма - лучшее решение
В соответствии с исследованием движения глаз от cxpartners, дизайн агенства по изучению пользовательского взаимодействия, сканирование формы вниз предпочтительнее, чем слева направо. Это уменьшает количество движения глаз, которое нужно совершить для заполнения формы.Одноколоночная форма
Форма регистрации Backpack имеет одноколоночную форму.
Форма с несколькими колонками
