Оставьте ваше сообщение поля обязательные для заполнения
Обновлено: 08.07.2024
Аннотация: Использование звездочки для пометки обязательных полей — это простой способ улучшить удобство использования ваших форм. Отметка только необязательных полей затрудняет заполнение формы.
Общий вопрос на многих наших UX Conference: следует ли помечать обязательные поля в форме? Если большинство полей в форме являются обязательными, должны ли мы пометить их? (Это много пометок,в конце концов.) Краткий ответ — да. И оставшуюся часть статьи я объясню, почему.
Часто дизайнеры считают, что наличие пометок для каждого обязательного поля это уродливо, повторяющееся, занимает слишком много места, а с более длинными формами, может даже показаться деспотичным (форма требует от пользователя так много!). Таким образом, они обычно принимают одну или обе из следующих стратегий:
- Дизайнеры показывают инструкции в верхней части формы, говоря, что Все поля обязательны для заполнения или Все поля обязательны для заполнения, если не указано иное.
- Они помечают необязательные поля, так как их обычно меньше.
(Редко, в некоторых ситуациях дизайнеры ничего не делают: они просто предполагают, что пользователи будут волшебным образом знать, какие поля требуется обязательно заполнить; если пользователи этого не делают, им просто придется иметь дело с возникающей ошибкой.)
Приложение для кредитных карт Citicards (слева) содержит инструкции, написанные маленьким шрифтом и курсивом. Все поля обязательны для заполнения, если не указано иное в верхней части формы; Форма American Express (справа) вообще не содержала инструкций. В обеих формах были отмечены только необязательные поля: в случае Ситибанка с несколько неясной аббревиатурой опт.
Что не так с этими “стратегиями”? Есть несколько проблем:
Люди не читают инструкции в верхней части форм
Известно, что пользователи не читают инструкции, и еще реже они читают инструкции в верхней части формы. Поля формы кажутся самодостаточными — в конце концов, каждое поле имеет определенную инструкцию — свою метку, зачем нужно читать что-то еще, чтобы заполнить ее?
Даже если люди прочитали инструкции, они могут забыть их.
Вы можете подумать: если пользователи прочитали инструкцию сверху, то как они смогут так быстро забыть? Но они забывают — особенно если форма длинная или если они отвлекаются при заполнении (ситуация, которая часто встречается на мобильных устройствах). И даже если люди не забывают инструкции, вы увеличиваете их когнитивную нагрузку, заставляя помнить ненужную информацию. Другими словами, вы усложняете им задачу. Заполнение формы — это итак задача не из легких для пользователей, почему вы хотите усложнить это еще?
Люди должны анализировать форму, чтобы определить, является ли поле обязательным
Мы увидели, что независимо от того, указали ли вы инструкции в верхней части формы или нет, результат, скорее всего, будет одинаковым — люди будут их игнорировать или забывать. Итак, что происходит, когда пользователь заполняет форму? Как они узнают, обязательно ли поле для заполнения?
Что ж, более прилежные пользователи будут оглядываться, пытаясь выяснить — они анализируют форму и находят поле, помеченное как необязательное (иногда прокручивая страницу выше, как в примере с American Express, где первое необязательное поле появляется ниже мобильного сгиба); если пользователи найдут такое поле, они будут считать, что все, что не отмечено, обязательно для заполнения. Но это требует времени и затрат на взаимодействие — и опять же, зачем вам усложнять заполнение формы для ваших пользователей?
Решение простое: отметьте все обязательные поля. Будьте максимально честными и прозрачными: каждое поле, которое необходимо заполнить, отметьте как обязательное.
Звездочка стала очень распространенной в сети, и пользователи знакомы с ее значением. Главное преимущество в том, что она не занимает много места и выделяется, поэтому используйте её.
Звездочка должна находится перед полем или за ним? Одна из причин, по которой ее нужно поместить перед описанием поля, является помощь глазам пользователя распознать какие поля обязательны, отсканировав левый символ метки.
Оба этих сайта использовали звездочку для пометки обязательных полей: UPS (слева) отображал звездочку в конце метки, а USPS (справа) показывал ее в начале красным цветом. Отображение его в начале другим цветом облегчает идентификацию обязательных полей, которые могут оказаться полезными, когда форма длиннее. (Однако мы не рекомендуем использовать такой маленький размер шрифта, какой используется для звездочки USPS.)
Звездочка должна быть красной? Не обязательно, но красный стал ожидаемым цветом обязательного маркера в сети, что само по себе является причиной для выбора (согласно закону Якоба). В любом случае, есть некоторая ценность использования разных цветов для звездочки и для метки поля: это позволяет пользователям быстро разделить их и сфокусироваться на метке поля, пытаясь расшифровать, что означает это поле.
В то время как красный рекомендуется, мы настоятельно рекомендуем избегать бледно-серых или низкоконтрастных цветов для звездочки. Слегка приглушенные цвета могут иметь эстетические преимущества, но по-настоящему низкоконтрастные символы создают проблему доступности для слабовидящих или пожилых пользователей и замедляют визуальную обработку формы для всех.
Вы должны отметить также и необязательные поля?
Не указывать, что поле является необязательным — это не нарушение условий, но указывать — приятнее.
Бывают ситуации, когда нужно обязательно получить от пользователя телефон или почту, но не обязательно и то и другое вместе. Из коробки CF7 не даёт такого функционала, поэтому ниже напишем его сами.
Ищем WP-разработчика! Фулл-тайм, удаленка, хорошая зарплата, соц. пакет. Подробности.
Компания Boosta.
Вариант 1: без проверок на форму
Как видно из разметки, поля user-email и user-phone не обязательные. Проверим их в коде ниже.
Если бы они были обязательные, то форма требовала бы заполнения их обоих, а нам нужно: телефон или почта (оба необязательно).
Проверим нашу форму перед отправкой — заполнено хотя бы одно из двух полей:
Этот способ подойдет, если у вас:
- одна форма на сайте.
- в форме используются уникальные относительно всех форм сайта имена полей.
- во всех формах нужна такая проверка.
Вариант 2: проверка формы по скрытому полю
Чтобы точно знать, что проверяются поля нужной формы, необходимо эту формы как-то вычислить (пометить). В роли метки можно использовать скрытое поле.
Теперь проверим, пришла ли наша метка с нужным значением. Если "Да" - проверяем поля.
Этот способ хорош, но есть маленький недостаток. Бывает формы не создают с нуля, а дублируют уже созданные, а потом редактируют. Есть шанс, что скрытое поле забудут удалить и описанная нами логика проверок может помешать корректной работе продублированной формы. Впрочем, вероятность такого события очень мала и описанный способ подойдёт в 99% случаев.
Вариант 3: проверка формы по переданному в шорткод CSS классу
Этот способ решает недостаток способа описанного выше.
Мы в шорткоде использовали его стандартный атрибут html_class со значением my-form-check-marker , то есть передали css класс как метку. Да, этот атрибут предназначен для вывода у формы указанных css классов (их может быть несколько), но для решения нашей задачи подойдёт.
Проблема в том, что при отправке формы мы можем получить на стороне сервера только значения полей этой самой формы. То есть нам не доступны атрибуты шорткода, ведь они используются только при генерации (рендере) самой формы.
По сути в этом варианте, мы воспроизводим предыдущий способ, но выносим "метку" из шаблона формы в атрибут шорткода html_class .
Вариант 4: проверка формы по переданному в шорткод своему атрибуту
К коду из прошлого примера теперь нужно дописать поддержку собственного атрибута в шорткоде формы.
Теперь, в отличие от предыдущих способов, мы уберегли себя от случайного дублирования скрытого поля или использования атрибута html_class не по назначению.
Но и тут есть свой минус - помнить какой атрибут и с каким значением надо дописывать в шорткод.
В общем, всегда есть какие минусы и плюсы, выбирайте вариант который больше подходит для вашего случая.
Напоследок стоит упомянуть, что передавать значение в атрибут необязательно и можно упростить шорткод:
можно вполне сделать так:
или для понятности так:
Теперь, форма остаётся без изменений, а вот код немного изменится:
Какой из способов вам больше всего понравился? А может вы используете уже готовые решения в виде плагина? Поделитесь своим мнением в комментариях!
Привет, я Антон, UX-дизайнер в eLama — платформе для автоматизации интернет-рекламы. Мы довольно часто работаем с формами. Раньше мы выделяли обязательные поля, но увидели мнение, что этот подход не самый правильный. Мы решили разобраться, а как правильно, но быстро поняли, что единых правил нет: кто-то делает акцент на обязательных полях, кто-то, наоборот, говорит, что некоторые поля можно пропустить. Попробуем сравнить самые распространенные подходы.
Все делают по-разному
Самые распространенные способы
1. Отмечать обязательные поля звездочкой
➕ Занимает мало места.
➖ Обычно обязательных полей больше, чем необязательных, поэтому визуального шума тоже больше.
➖ Требуют расшифровки в коде для скринридера.
2. Подписывать необязательные поля
➕ Скорее всего, таких отметок будет немного, а значит, визуального шума будет меньше, чем от звездочек.
➕ Мы не давим на пользователя и не принуждаем его заполнять поля. Наоборот, мы экономим его время, показывая ему, что некоторые поля можно пропустить.
➖ Отметка может потеряться на фоне заголовка, и пользователь может ее не увидеть.
➖ Неочевидно, что поля в верхней части формы нужно заполнить обязательно. Пользователь может понять это, только когда увидит необязательные поля.
3. Вообще не отмечать поля, а показывать ошибки при отправке формы
➕ Отсутствие визуального шума. Особенно это важно в больших формах.
➖ Не всем понравится заполнять форму повторно после того, как она загорится красным.
➖ Не сразу понятно, какие поля можно пропустить, а какие нет.
4. Отмечать обязательные поля звездочкой, а необязательные —подписывать
➕ Согласно этому исследованию, такие формы самые удобные: пользователь сразу видит, какое поле пропустить можно, а какое нет.
➖ В больших формах такие отметки создают визуальный шум.
➖ Требуют расшифровки в коде для скринридера.
Важно: ставить обязательные поля выше необязательных
Если пользователь не заметит отметки, он скорее заполнит верхние поля. Если форма разбита на смысловые группы, в каждой из них обязательные поля должны быть выше, чем необязательные.
Как делаем в eLama
Мы решили использовать четвертый способ, потому что удобство пользователя важнее, и это преимущество перевешивает недостатки подхода.
Так обязательное поле не теряется даже в большой форме
Но в некоторых случаях мы используем и третий способ.
Когда не ставим отметки
1. Если поле одно
Чтобы разблокировать кнопку, можно сделать только одно: заполнить поле
2. Если можно заполнить любое поле
Кнопка разблокируется, если заполнить любое из полей
Вместо заключения
Кроме этих способов наверняка есть и другие. Важно выбрать один-два подхода, которые подходят вашему продукту.
Спасибо Сергею Токареву и Елене Отроковой за помощь в подготовке материала и редактуру.
Исходные файлы текущей статьи вы можете скачать по ссылке.
Итак, перед нами есть простейшая форма с полями, каждое из которых мы хотим сделать обязательным к заполнению. Каждое поле формы имеет тип text и примерно следующий код:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Перед отправкой формы мы должны проверить каждое поле на предмет того, заполнено ли оно и, если какое-то из полей оказалось не заполнено, тогда мы должны уведомить об этом пользователя и не отправлять форму на сервер. В общем, нам необходима валидация формы в части проверки заполнения обязательных полей.
Ранее для валидации формы на клиенте нельзя было обойтись без возможностей JavaScript. Есть множество плагинов, позволяющих гибко провести валидацию формы и, в частности, проверить, заполнены ли обязательные поля. Однако в HTML5 можно вовсе обойтись без JavaScript и провести валидацию только средствами HTML5. Давайте посмотрим, как это сделать.
Итак, мы договорились, что все поля формы обязательны. Для того, чтобы это было так, нам достаточно использовать всего один атрибут, который необходимо добавить к обязательному полю, это атрибут required. Добавим его:
Также стоит упомянуть о том, что кроме атрибута required, HTML5 предлагает нам и другие средства, позволяющие произвести простейшую валидацию и проверку формы на клиенте. Например, мы может проверить введен ли именно email в поле email, а не просто некая строка. Как это сделать — мы узнаем уже в следующей статье. Также не забывайте о том, что гибкая валидация формы возможно с помощью JavaScript. По этой теме вы можете посмотреть данный урок. На этом все. Удачи!
Читайте также: