HTML5: атрибут формы required
Логический атрибут required HTML сообщает браузеру о возможности отправки данных формы только при заполнении обязательных полей. Это значит, что поле нельзя оставить пустым, и что в зависимости от других атрибутов или типов полей приниматься могут только конкретные типы значений. Чуть позже мы поговорим о том, как сообщать браузерам о необходимости отправки определенные типы данных.
В терминологии Javascript событие focus запускает элемент формы, когда на нее переключается фокус, когда фокус переходит на другой элемент или она теряет фокус.
В CSS можно использовать псевдокласс :focus для стилизации элементов, которые выделены в данный момент.
Добавим атрибут HTML input required к форме регистрации. Сделаем поля имени, адреса электронной почты, пароля и даты подписки обязательными:
На скриншотах, приведенных ниже, можно видеть, что делает атрибут required HTML при попытке подтвердить форму:
Сообщение об обязательных полях в Firefox
Та же ситуация в Opera…
Стилизация обязательных полей в форме
В данном случае мы добавляем фоновое изображение ( звёздочку ) к обязательным полям формы. В input-элементы нельзя включать генерируемый контент. Поэтому лучше будет использовать фоновое изображение. Кроме этого валидные и не валидные поля можно выделить разными фоновыми картинками. Изменения будут заметны, только если пользователь выделил соответствующий элемент формы.
Предупреждение : Firefox стилизует не валидные элементы
Подсказка : таргетированная стилизация для устаревших браузеров
Дайте знать, что вы думаете по этой теме в комментариях. За комментарии, отклики, подписки, лайки, дизлайки огромное вам спасибо!
Дайте знать, что вы думаете по этой теме материала в комментариях. Мы очень благодарим вас за ваши комментарии, отклики, дизлайки, подписки, лайки!
Почему пользователи вводят меньше данных, если в форме есть обязательные поля
Один раз в неделю ЦП выбирает самые интересные и актуальные темы мира юзабилити и UX, снабдив их мнением ведущих отечественных экспертов. Во втором выпуске рубрики «Интерфейсы» — интересная статья о том, что пользователи вбивают в веб-формы больше данных, если им явным образом не указывать обязательные для заполнения поля, а также мнение по этому вопросу UX-директора Acronis Дениса Кортунова и ведущего проектировщика интерфейсов в Mail.ru Group Геворга Глечяна.
Многие пользователи не заполняют необязательные поля в формах. Эта информация даже не всегда нужна, но всегда полезно знать о своих посетителях чуть больше. Это может помочь облегчить для них использование сайта. Существует подход, при котором звездочек для выделения обязательных к заполнению полей нет вовсе, а помечаются лишь опциональные поля.
Согласно некоторым исследованиям, при необходимости заполнения веб-формы пользователи ведут себя «чрезвычайно открыто на добровольной основе». Это значит, что люди обычно предоставляют больше данных о себе, даже если им сказать, что это сугубо добровольное дело. Это противоречит традиционному мнению о том, что пользователи стараются всеми правдами и неправдами заполнить как можно меньше полей. Однако, когда в форме явно указаны обязательные для заполнения поля, описанный эффект добровольной открытости снижается, и посетители начинают пропускать поля, которые не отмечены звездочками.
Наличие обязательных полей дает пользователю возможность на законных основаниях внести так мало данных, как только возможно. Обязательные поля кажутся людям более важными, поэтому они сначала заполняют их, пропуская остальные. Кроме того, никто не захочет тратить время на вбивание информации, которая, в принципе, и не особенно нужна. Если же попытаться использовать заложенную в посетителях склонность оставлять много данных о себе, и пометить лишь не обязательные поля, то исчезнет сама необходимость «срезать дорогу». Люди начнут вносить данные шаг за шагом, а не искать глазами звездочки обязательных полей.
Не стоит думать, что если явным образом не сказать человеку о том, что конкретную информацию нужно обязательно внести, он этого не сделает. Изначально пользователи склонны оставить о себе больше данных, чем требуется большинством форм. Однако они не станут обращать внимания на необязательные поля, если указаны обязательные, поскольку это дает возможность ускорить процесс заполнения.
Геворг Глечян, ведущий проектировщик интерфейсов Mail.ru Group
В целом я согласен с тем, что пользователи оставляют больше данных, если не указывать какие поля обязательны для заполнения. Однако, соглашаясь с этим принципом и внедряя его у себя, следует помнить о следующем.
Многолетние стандарты и опыт пользователей
Практически с самого начала становления интернета и вплоть до недавнего времени стандартом для форм являлось выделение обязательных полей с помощью звёздочки (*). И этот стандарт мог сформировать у опытных пользователей привычки при работе с формами. Но в последнее время все меняется, и лидеры индустрии отходят от привычных стандартов. В качестве примера приведу формы регистрации на почтовых сервисах:
Mail.Ru — все поля кроме поля «Город» обязательны для заполнения. Необязательное для заполнения поле снабжено подсказкой об этом.
Gmail — все поля в форме выглядят одинаково, при этом поле «Мобильный телефон» можно не заполнять.
Почта «Яндекса» — все поля в форме выглядят одинаково, при этом поле «Мобильный телефон» заполнять не обязательно.
Мотивированность пользователя
Если пользователь сильно мотивирован заполнить форму то он скорее всего заполнит и проберётся даже через самую плохо спроектированную форму (например, подача объявления о продаже автомобиля на сайте лидирующего в этом сегменте сервиса). Если же вы не лидер, то следует учитывать, что пользователь вряд ли готов тратить на вас большое количество времени. И тут как раз надо очень точно найти баланс между длинной формы и теми данными, которые вы потенциально хотите получить.
Надо помнить и применять
1) Приватные данные. Если вы просите пользователя ввести его личные данные, то надо рассказать ему почему вы их просите. Например, если вы просите номер мобильного телефона при регистрации, объясните что он будет использован если потребуется восстановить пароль.
2) Не просите больше, чем вам действительно нужно. Не надо слишком увлекаться идеей получения дополнительных данных от пользователя, ведь его терпение и время не безгранично.
3) Четкие и понятные подсказки. Особенно это касается полей ввода пароля. Напишите такие подсказки, чтобы пользователь мог заполнить форму правильно с первого раза и заполнил их так подробно как вы этого хотите.
4) Inline-валидация. Проверяйте введенные данные сразу после заполнения. Это помогает уменьшить количество ошибок, время на заполнения, увеличивает конверсию и удовлетворенность пользователей.
Денис Кортунов, UX-директор в Acronis, основатель студии «Турбомилк»
С веб-формами очень простая история: это зло. Никто не любит заполнять формы. Если вы можете что-то спросить у пользователя потом, вы должны это сделать потом.
Гениальнейшее предложение инвертировать обозначение полей — плохое по следующим причинам:
1) Вообще стоит задуматься — так ли нужны эти необязательные поля? Честно говоря, с трудом представляю этот «лучший UX», который получают пользователи,заполнившие все.
2) Мы ломаем привычный паттерн пользователей. Наверняка, они уже заполняли формы на других сайтах и там были required поля. Да, иногда полезно что-то поменять в лучшую сторону, но это не тот случай.
3) Пользователь просто сразу же нажмет submit. Мне очень интересно каким образом будет выводиться сообщение об ошибке. Тоже инвертированное?
Вообще, веб-формы — это очень интересно и непросто. Правильная форма, должна легко читаться. Там должно быть минимально возможное (а иногда и невозможное) количество полей. А разработка логики проверки валидности данных и сообщений об ошибках — целое искусство.
Обязательные поля в формах — отмечать или нет?
Популярный вопрос, часто задаваемый на наших занятиях UX Conference: следует ли отмечать обязательные поля в форме? Как быть, если большинство полей в форме являются обязательными, следует ли их все отметить? (Это же так много отметок, в конце концов.) Короткий ответ — да. И в этой статье я дам объяснение, почему.
Искушение не отмечать обязательные поля
Часто дизайнеры чувствуют, что наличие отметки для каждого отдельного элемента — уродливое повторение, которое занимает слишком много места и, с более длинными формами, даже может выглядеть угнетающе (форма требует от пользователя очень много!). Таким образом, они обычно принимают одну или обе из следующих стратегий:
1. Они дают инструкцию в верхней части формы, говоря, что все поля обязательны для заполнения или все поля обязательны для заполнения, если не указано иное.
2. Они отмечают необязательные поля, так как их обычно меньше.
(В некоторых редких ситуациях они вообще ничего не делают: они просто полагают, что пользователи сами волшебным образом догадаются, какие поля обязательны. Ну а если они этого не сделают, им просто придется иметь дело с возникающей ошибкой.)
Что не так с этими подходами? Тут есть несколько проблем:
• Люди не читают инструкции в верхней части формы.
Это общеизвестный факт, что пользователи не читают инструкции, и наименее вероятнее всего они станут читать инструкции в верхней части формы. В конце концов, поля формы выглядят самодостаточно, каждое поле имеет собственную специфическую «инструкцию» — своё название, зачем вам нужно читать что-то еще, чтобы заполнять поля формы?
Вы можете подумать: если пользователи прочитают инструкцию перед заполнением формы, они не смогут ее забыть — это же так просто? Однако, они забывают — особенно если форма длинная или если они прерываются при заполнении (ситуация, которая часто встречается на мобильных устройствах). И даже если люди не забывают инструкции, вы увеличиваете их когнитивную нагрузку, заставляя хранить прочитанное в своей рабочей памяти. Другими словами, вы усложняете им задачу. Заполнение формы само по себе вызов для ваших пользователей — зачем вы хотите усложнить этот процесс?
Мы выяснили, что независимо от того, предоставили вы инструкции пользователю в шапке формы или нет, результат, скорее всего, будет одинаковым: их будут игнорировать или забывать. Итак, что происходит, когда пользователь заполняет форму? Как они понимают, что поле обязательно для заполнения? Наиболее прилежные пользователи будут присматриваться внимательно, пытаясь выяснить это — они просмотрят всю форму и найдут поле, отмеченное как необязательное (иногда для этого необходимо проскроллить страницу, как в примере с AmericanExpressвыше, где первое необязательное поле появляется ниже, за пределами экрана; если они найдут одно такое поле, они будут считать, что все не отмеченные поля — обязательные. Но это взаимодействие потребует времени и усилий — и опять же, зачем вам усложнять для пользователей заполнение формы?
Однако большинство пользователей не будут осматриваться по сторонам — они просто будут строить предположения. Они скажут: «Ну, номер телефона — им же реально не нужен мой номер телефона, не так ли? Оставлю это поле пустым». И даже если они не оставляют это поле пустым, необходимость сделать паузу, чтобы принять решение, нужно ли заполнять поле, замедляет взаимодействие и делает процесс более долгим и утомительным. (Помните, как бы вам ни хотелось думать иначе, никто не хочет заполнять форму — ни на маленьком, ни на большом экране.) Результатом будет ошибка отправки формы, которая будет означать еще больше потраченного времени на решение этой задачи.
Решение простое: отметьте все обязательные поля. Будьте настолько очевидными и прозрачными, насколько это возможно: для каждого обязательного поля, которое необходимо заполнить, поставьте отметку.
Как пометить обязательные поля?
Здесь есть как минимум два варианта: звездочка (красная или нет) и слово «обязательно».
Должна ли звездочка предшествовать или следовать за названием поля? Вряд ли это будет иметь практическое значение, но одна из причин, по которой его нужно поместить непосредственно перед описанием поля, состоит в том, чтобы помочь глазам легко распознать, какие поля требуются, просмотрев только самый первый символ названия полей.
Должна ли звездочка быть красной? Необязательно, но красный цвет стал ожидаемым требуемым цветом маркера в web, что само по себе является причиной для того, чтобы придерживаться этого выбора (согласно Jakob’s Law). В любом случае, есть некоторая ценность использования разных цветов для звездочки и для текстового названия поля: это позволяет пользователям быстро отделить их и сфокусироваться на названии поля, пытаясь осмыслить, что означает это поле. В то время как красный предпочтителен, мы настоятельно рекомендуем избегать бледно-серых или низко контрастных цветов для звездочки. В некоторых случаях приглушенные цвета могут иметь эстетические преимущества, но в реальности низко контрастные символы создадут проблемы доступности для слабовидящих или пожилых пользователей и замедляют визуальную обработку формы для всех.
Можно ли отмечать необязательные поля?
Хотя это и не обязательно, отметка опциональных полей снижает когнитивную нагрузку пользователя: при отсутствии этого обозначения пользователь должен осмотреть поля и сделать вывод, какие именно из них являются необязательными, если часть из них помечена как обязательные. Если слово «необязательно/опционально» находится рядом с названием поля, эта задача становится немного легче.
Не указать, что поле является необязательным, не является ошибкой, но, если его также отметить — это будет очевидным плюсом.
Как насчет форм авторизации?
Формы авторизации короткие и обычно состоят из двух полей: имени пользователя и пароля, оба из которых всегда обязательны для заполнения. Если вы используете звездочку, возможно необходимость пометки этих полей будет минимальной, однако это не будет ошибкой. Тем не менее, большинство пользователей сталкиваются со множеством форм авторизации, и они знают, что для входа в систему обязательно нужно ввести адрес электронной почты или имя пользователя и пароль. Так что, если вы категорически против звездочки, то можно совсем отказаться от неё в этих формах.
Однако опасно не отмечать обязательные поля в форме регистрации. Формы регистрации сильно различаются на разных сайтах — разные компании требуют разные типы информации при создании учетной записи. Если ваша регистрационная форма похожа на форму входа в систему, то можно безопасно пропустить необходимую информацию. Но если оно включает в себя больше полей, чем имя пользователя и пароль, отметьте все обязательные поля (включая поля имени пользователя и пароля).
Заключение
Формы — отнюдь не забава. Они требуют от пользователей достаточно работы. В реальности, многие формы оказываются брошенными, потому что заполнять их слишком сложно или утомительно. Чтобы повысить шансы того, что ваша форма будет до конца заполнена, минимизируйте усилия, которые придется приложить пользователям, и информацию, которую они должны запомнить. Есть много аспектов, которые способствуют этому, но отметить обязательные поля (и, опционально поля необязательные) — легкое и простое решение.
Обязательно или нет? Как отмечать поля в формах
Привет, я Антон, UX-дизайнер в eLama — платформе для автоматизации интернет-рекламы. Мы довольно часто работаем с формами. Раньше мы выделяли обязательные поля, но увидели мнение, что этот подход не самый правильный. Мы решили разобраться, а как правильно, но быстро поняли, что единых правил нет: кто-то делает акцент на обязательных полях, кто-то, наоборот, говорит, что некоторые поля можно пропустить. Попробуем сравнить самые распространенные подходы.
Все делают по-разному
Самые распространенные способы
1. Отмечать обязательные поля звездочкой
➕ Занимает мало места.
➖ Обычно обязательных полей больше, чем необязательных, поэтому визуального шума тоже больше.
➖ Требуют расшифровки в коде для скринридера.
2. Подписывать необязательные поля
➕ Скорее всего, таких отметок будет немного, а значит, визуального шума будет меньше, чем от звездочек.
➕ Мы не давим на пользователя и не принуждаем его заполнять поля. Наоборот, мы экономим его время, показывая ему, что некоторые поля можно пропустить.
➖ Отметка может потеряться на фоне заголовка, и пользователь может ее не увидеть.
➖ Неочевидно, что поля в верхней части формы нужно заполнить обязательно. Пользователь может понять это, только когда увидит необязательные поля.
3. Вообще не отмечать поля, а показывать ошибки при отправке формы
➕ Отсутствие визуального шума. Особенно это важно в больших формах.
➖ Не всем понравится заполнять форму повторно после того, как она загорится красным.
➖ Не сразу понятно, какие поля можно пропустить, а какие нет.
4. Отмечать обязательные поля звездочкой, а необязательные —подписывать
➕ Согласно этому исследованию, такие формы самые удобные: пользователь сразу видит, какое поле пропустить можно, а какое нет.
➖ В больших формах такие отметки создают визуальный шум.
➖ Требуют расшифровки в коде для скринридера.
Важно: ставить обязательные поля выше необязательных
Если пользователь не заметит отметки, он скорее заполнит верхние поля. Если форма разбита на смысловые группы, в каждой из них обязательные поля должны быть выше, чем необязательные.
Как делаем в eLama
Мы решили использовать четвертый способ, потому что удобство пользователя важнее, и это преимущество перевешивает недостатки подхода.
Так обязательное поле не теряется даже в большой форме
Но в некоторых случаях мы используем и третий способ.
Когда не ставим отметки
1. Если поле одно
Чтобы разблокировать кнопку, можно сделать только одно: заполнить поле
2. Если можно заполнить любое поле
Кнопка разблокируется, если заполнить любое из полей
Вместо заключения
Кроме этих способов наверняка есть и другие. Важно выбрать один-два подхода, которые подходят вашему продукту.
Спасибо Сергею Токареву и Елене Отроковой за помощь в подготовке материала и редактуру.
Пометка обязательных полей в формах
Перевод статьи Nielsen Norman Group.
Аннотация: Использование звездочки для пометки обязательных полей — это простой способ улучшить удобство использования ваших форм. Отметка только необязательных полей затрудняет заполнение формы.
Общий вопрос на многих наших UX Conference: следует ли помечать обязательные поля в форме? Если большинство полей в форме являются обязательными, должны ли мы пометить их? (Это много пометок,в конце концов.) Краткий ответ — да. И оставшуюся часть статьи я объясню, почему.
Часто дизайнеры считают, что наличие пометок для каждого обязательного поля это уродливо, повторяющееся, занимает слишком много места, а с более длинными формами, может даже показаться деспотичным (форма требует от пользователя так много!). Таким образом, они обычно принимают одну или обе из следующих стратегий:
(Редко, в некоторых ситуациях дизайнеры ничего не делают: они просто предполагают, что пользователи будут волшебным образом знать, какие поля требуется обязательно заполнить; если пользователи этого не делают, им просто придется иметь дело с возникающей ошибкой.)
Приложение для кредитных карт Citicards (слева) содержит инструкции, написанные маленьким шрифтом и курсивом. Все поля обязательны для заполнения, если не указано иное в верхней части формы; Форма American Express (справа) вообще не содержала инструкций. В обеих формах были отмечены только необязательные поля: в случае Ситибанка с несколько неясной аббревиатурой опт.
Что не так с этими “стратегиями”? Есть несколько проблем:
Люди не читают инструкции в верхней части форм
Известно, что пользователи не читают инструкции, и еще реже они читают инструкции в верхней части формы. Поля формы кажутся самодостаточными — в конце концов, каждое поле имеет определенную инструкцию — свою метку, зачем нужно читать что-то еще, чтобы заполнить ее?
Даже если люди прочитали инструкции, они могут забыть их.
Вы можете подумать: если пользователи прочитали инструкцию сверху, то как они смогут так быстро забыть? Но они забывают — особенно если форма длинная или если они отвлекаются при заполнении (ситуация, которая часто встречается на мобильных устройствах). И даже если люди не забывают инструкции, вы увеличиваете их когнитивную нагрузку, заставляя помнить ненужную информацию. Другими словами, вы усложняете им задачу. Заполнение формы — это итак задача не из легких для пользователей, почему вы хотите усложнить это еще?
Люди должны анализировать форму, чтобы определить, является ли поле обязательным
Мы увидели, что независимо от того, указали ли вы инструкции в верхней части формы или нет, результат, скорее всего, будет одинаковым — люди будут их игнорировать или забывать. Итак, что происходит, когда пользователь заполняет форму? Как они узнают, обязательно ли поле для заполнения?
Что ж, более прилежные пользователи будут оглядываться, пытаясь выяснить — они анализируют форму и находят поле, помеченное как необязательное (иногда прокручивая страницу выше, как в примере с American Express, где первое необязательное поле появляется ниже мобильного сгиба); если пользователи найдут такое поле, они будут считать, что все, что не отмечено, обязательно для заполнения. Но это требует времени и затрат на взаимодействие — и опять же, зачем вам усложнять заполнение формы для ваших пользователей?
Однако большинство пользователей не будут искать примеров и анализировать форму, они просто сделают предположения. Например, они скажут: «Ну, номер телефона — им действительно не нужен мой номер телефона, не так ли? Может быть, я оставлю это поле пустым ». И даже если они заполняют это поле, необходимость сделать паузу, чтобы решить, нужно ли заполнение, замедляет взаимодействие и делает процесс более длительным и утомительным.(Помните, как бы вам ни хотелось думать иначе, никто не хочет заполнять форму — ни на маленьком, ни на большом экране.) Результатом будет ошибка отправки формы, которая означает, что потребуется еще больше времени на решение проблемы.
Решение простое: отметьте все обязательные поля. Будьте максимально честными и прозрачными: каждое поле, которое необходимо заполнить, отметьте как обязательное.
Здесь есть как минимум два варианта: звездочка (красная или нет) и слово «обязательно».
Приложение iOS Wallet использовало заполнитель Required для указания обязательных полей. (В целом, особенно для более длинных форм, лучше использовать слово «Обязательно» вне поля, а не внутри него, чтобы упростить идентификацию полей, которые все еще необходимо заполнить.)
Звездочка стала очень распространенной в сети, и пользователи знакомы с ее значением. Главное преимущество в том, что она не занимает много места и выделяется, поэтому используйте её.
Звездочка должна находится перед полем или за ним? Одна из причин, по которой ее нужно поместить перед описанием поля, является помощь глазам пользователя распознать какие поля обязательны, отсканировав левый символ метки.
Оба этих сайта использовали звездочку для пометки обязательных полей: UPS (слева) отображал звездочку в конце метки, а USPS (справа) показывал ее в начале красным цветом. Отображение его в начале другим цветом облегчает идентификацию обязательных полей, которые могут оказаться полезными, когда форма длиннее. (Однако мы не рекомендуем использовать такой маленький размер шрифта, какой используется для звездочки USPS.)
Звездочка должна быть красной? Не обязательно, но красный стал ожидаемым цветом обязательного маркера в сети, что само по себе является причиной для выбора (согласно закону Якоба). В любом случае, есть некоторая ценность использования разных цветов для звездочки и для метки поля: это позволяет пользователям быстро разделить их и сфокусироваться на метке поля, пытаясь расшифровать, что означает это поле.
В то время как красный рекомендуется, мы настоятельно рекомендуем избегать бледно-серых или низкоконтрастных цветов для звездочки. Слегка приглушенные цвета могут иметь эстетические преимущества, но по-настоящему низкоконтрастные символы создают проблему доступности для слабовидящих или пожилых пользователей и замедляют визуальную обработку формы для всех.
Вы должны отметить также и необязательные поля?
Хотя это и не обязательно, отметка необязательных полей облегчает когнитивную нагрузку пользователя: при отсутствии этого слова пользователь должен проанализировать, что поле является необязательным, если другие поля помечены как обязательные. Если слово «optional» находится рядом с дескриптором поля, то задача становится немного легче.
Не указывать, что поле является необязательным — это не нарушение условий, но указывать — приятнее.
