Это поле обязательно для заполнения: Пометка обязательных полей в формах — Дизайн на vc.ru

Обязательно или нет? Как отмечать поля в формах / Хабр

Привет, я Антон, UX-дизайнер в eLama — платформе для автоматизации интернет-рекламы. Мы довольно часто работаем с формами. Раньше мы выделяли обязательные поля, но увидели мнение, что этот подход не самый правильный. Мы решили разобраться, а как правильно, но быстро поняли, что единых правил нет: кто-то делает акцент на обязательных полях, кто-то, наоборот, говорит, что некоторые поля можно пропустить. Попробуем сравнить самые распространенные подходы.

Самые распространенные способы

1. Отмечать обязательные поля звездочкой

➕ Занимает мало места.

➖ Обычно обязательных полей больше, чем необязательных, поэтому визуального шума тоже больше.

➖ Требуют расшифровки в коде для скринридера.

2. Подписывать необязательные поля

➕ Скорее всего, таких отметок будет немного, а значит, визуального шума будет меньше, чем от звездочек.

➕ Мы не давим на пользователя и не принуждаем его заполнять поля. Наоборот, мы экономим его время, показывая ему, что некоторые поля можно пропустить.

➖ Отметка может потеряться на фоне заголовка, и пользователь может ее не увидеть.

➖ Неочевидно, что поля в верхней части формы нужно заполнить обязательно. Пользователь может понять это, только когда увидит необязательные поля.

3. Вообще не отмечать поля, а показывать ошибки при отправке формы

➕ Отсутствие визуального шума. Особенно это важно в больших формах.

➖ Не всем понравится заполнять форму повторно после того, как она загорится красным.

➖ Не сразу понятно, какие поля можно пропустить, а какие нет.

4. Отмечать обязательные поля звездочкой, а необязательные —подписывать

➕ Согласно этому исследованию, такие формы самые удобные: пользователь сразу видит, какое поле пропустить можно, а какое нет.

➖ В больших формах такие отметки создают визуальный шум.

➖ Требуют расшифровки в коде для скринридера.

Важно: ставить обязательные поля выше необязательных

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

Как делаем в eLama

Мы решили использовать четвертый способ, потому что удобство пользователя важнее, и это преимущество перевешивает недостатки подхода.

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

Когда не ставим отметки

1. Если поле одно

2. Если можно заполнить любое поле

Вместо заключения

Кроме этих способов наверняка есть и другие. Важно выбрать один-два подхода, которые подходят вашему продукту.

Спасибо Сергею Токареву и Елене Отроковой за помощь в подготовке материала и редактуру.

Обязательные поля в формах — отмечать или нет? | by Elena Sudareva | UX Lunch

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

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

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

2. Они отмечают необязательные поля, так как их обычно меньше.

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

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

Что не так с этими подходами? Тут есть несколько проблем:

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

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

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

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

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

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

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

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

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

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

Маркировка «звездочка» стала очень популярной в web, и пользователи знакомы с ее значением. Ее главное преимущество в том, что она не занимает много места и выглядит иначе, чем текст названия поля, поэтому используйте ее.

Должна ли звездочка предшествовать или следовать за названием поля? Вряд ли это будет иметь практическое значение, но одна из причин, по которой его нужно поместить непосредственно перед описанием поля, состоит в том, чтобы помочь глазам легко распознать, какие поля требуются, просмотрев только самый первый символ названия полей.

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

Должна ли звездочка быть красной? Необязательно, но красный цвет стал ожидаемым требуемым цветом маркера в web, что само по себе является причиной для того, чтобы придерживаться этого выбора (согласно Jakob’s Law). В любом случае, есть некоторая ценность использования разных цветов для звездочки и для текстового названия поля: это позволяет пользователям быстро отделить их и сфокусироваться на названии поля, пытаясь осмыслить, что означает это поле. В то время как красный предпочтителен, мы настоятельно рекомендуем избегать бледно-серых или низко контрастных цветов для звездочки. В некоторых случаях приглушенные цвета могут иметь эстетические преимущества, но в реальности низко контрастные символы создадут проблемы доступности для слабовидящих или пожилых пользователей и замедляют визуальную обработку формы для всех.

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

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

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

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

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

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

Перевод Marking Required Fields in Forms

Какое обязательное поле? Как сделать поле обязательным. : Freshsales Classic

 def create_user (я, электронная почта, имя пользователя, полное_имя, пароль = нет):
    если не электронная почта:
        поднять ValueError("Пользователи должны иметь адрес электронной почты")
    если не имя пользователя:
        поднять ValueError("Пользователи должны иметь имя пользователя")
    если не пароль:
        поднять ValueError("Пользователи должны иметь пароль")
    если не полное_имя:
        поднять ValueError("Пользователи должны иметь имя")
    пользователь = self.model(
        email=self.normalize_email(email), # вернуть нижний регистр
        имя пользователя = имя пользователя,
        полное_имя=полное_имя,
    )
    user.set_password(password) # пользователи устанавливают пароль и меняют пароль
    user.full_name = полное_имя
    user. save(using=self._db)# с использованием базы данных по умолчанию в settings.py
    вернуть пользователя
def create_superuser (я, электронная почта, имя пользователя, полное_имя, пароль = нет):
    пользователь = self.create_user(
        email=self.normalize_email(email), # вернуть нижний регистр
        имя пользователя = имя пользователя,
        полное_имя=полное_имя,
        пароль=пароль,
    )
    user.is_admin = Истина
    user.is_staff = Истина
    user.is_superuser = Истина
    user.save(using=self._db) # использование базы данных по умолчанию в settings.py
    вернуть пользователя
 

 электронная почта = models.EmailField (
    verbose_name="электронная почта",
    максимальная_длина=60,
    уникальный = Верно,
)
имя пользователя = models.CharField (max_length = 30, уникальный = True)
full_name = models.CharField (max_length = 30, пусто = True, null = True)
date_joined = models.DateTimeField (verbose_name = 'дата присоединения', auto_now_add = True)
last_login = models.
  DateTimeField (verbose_name = 'последний вход', auto_now = True)
is_admin = models.BooleanField (по умолчанию = False)
is_active = models.BooleanField (по умолчанию = True)
is_staff = models.BooleanField (по умолчанию = False)
is_superuser = models.BooleanField (по умолчанию = False)
profile_image = models.ImageField (max_length = 255, null = True, пусто = True, default = default_profile)
hide_email = models.BooleanField (по умолчанию = True)
USERNAME_FIELD = "электронная почта"
REQUIRED_FIELDS = ["имя пользователя", "полное_имя"]
objects = UserManager() # привязать учетную запись к моему пользовательскому менеджеру
защита __str__(я):
    вернуть self.username
# "У пользователя есть особое разрешение?"
def has_perm(self, perm, obj=None):
    вернуть Истина
# "Есть ли у пользователя права на просмотр приложения `app_label`?"
def has_module_perms (я, app_label):
    вернуть Истина
 

 пользователь = запрос.пользователь
если user.is_authenticated:
    вернуть перенаправление («домой»)
если request.method == 'POST':
    форма = Форма регистрации (запрос.POST)
    если form.is_valid():
        форма.сохранить()
        электронная почта = form.cleaned_data.get('электронная почта').lower()
        raw_password = form.cleaned_data.get('пароль1')
        пользователь = аутентификация (электронная почта = электронная почта, пароль = необработанный_пароль)
        логин(запрос, пользователь)
        вернуть перенаправление («домой»)
еще:
    форма = Форма регистрации ()
return render(запрос, 'account/register.html', {'registration_form': form})
 

 контекст = {}
пользователь = запрос.пользователь
если user.is_authenticated:
    вернуть перенаправление ("домой")
если запрос. POST:
    форма = AccountAuthenticationForm (запрос.POST)
    если form.is_valid():
        электронная почта = запрос.POST.get('электронная почта')
        пароль = запрос.POST.get('пароль')
        пользователь = аутентификация (запрос, электронная почта = электронная почта, пароль = пароль)
        если пользователь не None:
            логин(запрос, пользователь)
            вернуть перенаправление ("домой")
еще:
    form = AccountAuthenticationForm()
    контекст['login_form'] = форма
return render(запрос, "account/login.html", контекст)
 

 full_name = forms.CharField()
email = form.EmailField(max_length=60, help_text='Обязательно. Добавьте действительный адрес электронной почты.')
пароль1 = формы.CharField (виджет = формы. PasswordInput)
пароль2 = формы.CharField (виджет = формы.PasswordInput, метка = 'Подтвердить пароль')
Мета класса:
 модель = учетная запись
 поля = (
 'электронная почта',
 'имя пользователя',
 'полное имя',
 'пароль1',
 'пароль2',
 )
защита сохранения (я, фиксация = True):
 пользователь = супер (регистрационная форма, я). сохранить (фиксация = ложь)
 user.email = self.cleaned_data.get('электронная почта')
 user.username = self.cleaned_data.get('имя пользователя')
 user.full_name = self.cleaned_data.get('full_name')
 если совершить:
 пользователь.сохранить()
 вернуть пользователя
защита clean_email (я):
 электронная почта = self.cleaned_data.get('электронная почта')
 qs = User.objects.filter(email=email)
 если qs.exists():
 поднятьforms.ValidationError(f"Электронная почта {email} уже занята")
 ответная электронная почта
def clean_username (я):
 имя пользователя = self.cleaned_data.get('имя пользователя')
 qs = User.