Пометка обязательных полей в формах

Перевод статьи Nielsen Norman Group.

Аннотация: Использование звездочки для пометки обязательных полей — это простой способ улучшить удобство использования ваших форм. Отметка только необязательных полей затрудняет заполнение формы.

Общий вопрос на многих наших UX Conference: следует ли помечать обязательные поля в форме? Если большинство полей в форме являются обязательными, должны ли мы пометить их? (Это много пометок,в конце концов.) Краткий ответ — да. И оставшуюся часть статьи я объясню, почему.

Часто дизайнеры считают, что наличие пометок для каждого обязательного поля это уродливо, повторяющееся, занимает слишком много места, а с более длинными формами, может даже показаться деспотичным (форма требует от пользователя так много!). Таким образом, они обычно принимают одну или обе из следующих стратегий:

• Дизайнеры показывают инструкции в верхней части формы, говоря, что Все поля обязательны для заполнения или Все поля обязательны для заполнения, если не указано иное.
• Они помечают необязательные поля, так как их обычно меньше.

(Редко, в некоторых ситуациях дизайнеры ничего не делают: они просто предполагают, что пользователи будут волшебным образом знать, какие поля требуется обязательно заполнить; если пользователи этого не делают, им просто придется иметь дело с возникающей ошибкой.)

Приложение для кредитных карт Citicards (слева) содержит инструкции, написанные маленьким шрифтом и курсивом. Все поля обязательны для заполнения, если не указано иное в верхней части формы; Форма American Express (справа) вообще не содержала инструкций. В обеих формах были отмечены только необязательные поля: в случае Ситибанка с несколько неясной аббревиатурой опт.

Что не так с этими “стратегиями”? Есть несколько проблем:

Люди не читают инструкции в верхней части форм

Известно, что пользователи не читают инструкции, и еще реже они читают инструкции в верхней части формы. Поля формы кажутся самодостаточными — в конце концов, каждое поле имеет определенную инструкцию — свою метку, зачем нужно читать что-то еще, чтобы заполнить ее?

Даже если люди прочитали инструкции, они могут забыть их.

Вы можете подумать: если пользователи прочитали инструкцию сверху, то как они смогут так быстро забыть? Но они забывают — особенно если форма длинная или если они отвлекаются при заполнении (ситуация, которая часто встречается на мобильных устройствах). И даже если люди не забывают инструкции, вы увеличиваете их когнитивную нагрузку, заставляя помнить ненужную информацию. Другими словами, вы усложняете им задачу. Заполнение формы — это итак задача не из легких для пользователей, почему вы хотите усложнить это еще?

Люди должны анализировать форму, чтобы определить, является ли поле обязательным

Мы увидели, что независимо от того, указали ли вы инструкции в верхней части формы или нет, результат, скорее всего, будет одинаковым — люди будут их игнорировать или забывать. Итак, что происходит, когда пользователь заполняет форму? Как они узнают, обязательно ли поле для заполнения?

Что ж, более прилежные пользователи будут оглядываться, пытаясь выяснить — они анализируют форму и находят поле, помеченное как необязательное (иногда прокручивая страницу выше, как в примере с American Express, где первое необязательное поле появляется ниже мобильного сгиба); если пользователи найдут такое поле, они будут считать, что все, что не отмечено, обязательно для заполнения. Но это требует времени и затрат на взаимодействие — и опять же, зачем вам усложнять заполнение формы для ваших пользователей?

Однако большинство пользователей не будут искать примеров и анализировать форму, они просто сделают предположения. Например, они скажут: «Ну, номер телефона — им действительно не нужен мой номер телефона, не так ли? Может быть, я оставлю это поле пустым ». И даже если они заполняют это поле, необходимость сделать паузу, чтобы решить, нужно ли заполнение, замедляет взаимодействие и делает процесс более длительным и утомительным.(Помните, как бы вам ни хотелось думать иначе, никто не хочет заполнять форму — ни на маленьком, ни на большом экране.) Результатом будет ошибка отправки формы, которая означает, что потребуется еще больше времени на решение проблемы.

Решение простое: отметьте все обязательные поля. Будьте максимально честными и прозрачными: каждое поле, которое необходимо заполнить, отметьте как обязательное.

Здесь есть как минимум два варианта: звездочка (красная или нет) и слово «обязательно».

Приложение iOS Wallet использовало заполнитель Required для указания обязательных полей. (В целом, особенно для более длинных форм, лучше использовать слово «Обязательно» вне поля, а не внутри него, чтобы упростить идентификацию полей, которые все еще необходимо заполнить.)

Звездочка стала очень распространенной в сети, и пользователи знакомы с ее значением. Главное преимущество в том, что она не занимает много места и выделяется, поэтому используйте её.

Звездочка должна находится перед полем или за ним? Одна из причин, по которой ее нужно поместить перед описанием поля, является помощь глазам пользователя распознать какие поля обязательны, отсканировав левый символ метки.

Оба этих сайта использовали звездочку для пометки обязательных полей: UPS (слева) отображал звездочку в конце метки, а USPS (справа) показывал ее в начале красным цветом. Отображение его в начале другим цветом облегчает идентификацию обязательных полей, которые могут оказаться полезными, когда форма длиннее. (Однако мы не рекомендуем использовать такой маленький размер шрифта, какой используется для звездочки USPS.)

Звездочка должна быть красной? Не обязательно, но красный стал ожидаемым цветом обязательного маркера в сети, что само по себе является причиной для выбора (согласно закону Якоба). В любом случае, есть некоторая ценность использования разных цветов для звездочки и для метки поля: это позволяет пользователям быстро разделить их и сфокусироваться на метке поля, пытаясь расшифровать, что означает это поле.

В то время как красный рекомендуется, мы настоятельно рекомендуем избегать бледно-серых или низкоконтрастных цветов для звездочки. Слегка приглушенные цвета могут иметь эстетические преимущества, но по-настоящему низкоконтрастные символы создают проблему доступности для слабовидящих или пожилых пользователей и замедляют визуальную обработку формы для всех.

Вы должны отметить также и необязательные поля?

Хотя это и не обязательно, отметка необязательных полей облегчает когнитивную нагрузку пользователя: при отсутствии этого слова пользователь должен проанализировать, что поле является необязательным, если другие поля помечены как обязательные. Если слово «optional» находится рядом с дескриптором поля, то задача становится немного легче.

Не указывать, что поле является необязательным — это не нарушение условий, но указывать — приятнее.

Приложение Sephora для iOS пометило как обязательные, так и дополнительные поля.

Формы входа короткие и традиционно состоят из двух полей: имени пользователя и пароля, оба из которых всегда обязательны для заполнения. Если вы используете звездочку, затраты на пометку этих полей должны быть минимальными, поэтому вы не ошибетесь. Однако большинство пользователей сталкивались со многими формами входа в систему, и они знают, что для входа в систему вам необходимо ввести адрес электронной почты или имя пользователя и пароль. Так что, если вы абсолютно помечать формы, то здесь можно оставить ее в таком виде.

Форма входа USPS (слева) помечена двумя полями, как требуется.Kayak(справа) не пометили их. Любой дизайн приемлем для форм входа в систему.

Однако опасно не отмечать обязательные поля в регистрационной форме. Формы регистрации сильно различаются на разных сайтах — разные компании требуют разные типы информации при создании учетной записи. Если ваша регистрационная форма похожа на форму входа в систему, то можно безопасно пропустить необходимую информацию. Но если она включает в себя больше полей, чем имя пользователя и пароль, отметьте все обязательные поля (включая имя пользователя и пароль).

В регистрационной форме Sephora (на рабочем столе) отмечены обязательные поля (включая адрес электронной почты и пароль). (К сожалению, сайт нарушил другие правила юзабилити — в частности, он показывал метки полей внутри полей и автоматически устанавливал флажок «Подписаться».)

Формы — это не просто. Они требуют от пользователей много работы. Фактически, многие формы остаются незаполненными или брошенными на пол пути,потому что заполнять их слишком сложно или утомительно. Чтобы повысить вероятность того, что ваша форма будет заполнена, минимизируйте усилия, которые придется приложить пользователям, и информацию, которую они должны запомнить. Есть много аспектов, которые способствуют этому, но пометить обязательные поля (и обязательные, и необязательные) легко.

При поддержке Telegram-канала.