Обязательно или нет? Как отмечать поля в формах / Хабр
dyakonov_designВремя на прочтение 2 мин
Количество просмотров 7.8KВеб-дизайн *Интерфейсы *
Из песочницы
Привет, я Антон, UX-дизайнер в eLama — платформе для автоматизации интернет-рекламы. Мы довольно часто работаем с формами. Раньше мы выделяли обязательные поля, но увидели мнение, что этот подход не самый правильный. Мы решили разобраться, а как правильно, но быстро поняли, что единых правил нет: кто-то делает акцент на обязательных полях, кто-то, наоборот, говорит, что некоторые поля можно пропустить. Попробуем сравнить самые распространенные подходы.
Все делают по-разномуСамые распространенные способы
1. Отмечать обязательные поля звездочкой
➕ Занимает мало места.
➖ Обычно обязательных полей больше, чем необязательных, поэтому визуального шума тоже больше.
➖ Требуют расшифровки в коде для скринридера.
2. Подписывать необязательные поля
➕ Скорее всего, таких отметок будет немного, а значит, визуального шума будет меньше, чем от звездочек.
➕ Мы не давим на пользователя и не принуждаем его заполнять поля. Наоборот, мы экономим его время, показывая ему, что некоторые поля можно пропустить.
➖ Отметка может потеряться на фоне заголовка, и пользователь может ее не увидеть.
➖ Неочевидно, что поля в верхней части формы нужно заполнить обязательно. Пользователь может понять это, только когда увидит необязательные поля.
3. Вообще не отмечать поля, а показывать ошибки при отправке формы
➕ Отсутствие визуального шума. Особенно это важно в больших формах.
➖ Не всем понравится заполнять форму повторно после того, как она загорится красным.
➖ Не сразу понятно, какие поля можно пропустить, а какие нет.
4. Отмечать обязательные поля звездочкой, а необязательные —подписывать
➕ Согласно этому исследованию, такие формы самые удобные: пользователь сразу видит, какое поле пропустить можно, а какое нет.
➖ В больших формах такие отметки создают визуальный шум.
➖ Требуют расшифровки в коде для скринридера.
Важно: ставить обязательные поля выше необязательных
Если пользователь не заметит отметки, он скорее заполнит верхние поля. Если форма разбита на смысловые группы, в каждой из них обязательные поля должны быть выше, чем необязательные.
Как делаем в eLama
Мы решили использовать четвертый способ, потому что удобство пользователя важнее, и это преимущество перевешивает недостатки подхода.
Так обязательное поле не теряется даже в большой формеНо в некоторых случаях мы используем и третий способ.
Когда не ставим отметки
1. Если поле одно
Чтобы разблокировать кнопку, можно сделать только одно: заполнить поле2. Если можно заполнить любое поле
Кнопка разблокируется, если заполнить любое из полейВместо заключения
Кроме этих способов наверняка есть и другие. Важно выбрать один-два подхода, которые подходят вашему продукту.
Спасибо Сергею Токареву и Елене Отроковой за помощь в подготовке материала и редактуру.
Теги:- обозначение полей
- формы ввода
- обязательные поля
- Веб-дизайн
- Интерфейсы
Обязательные поля в формах — отмечать или нет? | by Elena Sudareva | UX Lunch
Published in·
6 min read·
Jun 19, 2019Популярный вопрос, часто задаваемый на наших занятиях UX Conference: следует ли отмечать обязательные поля в форме? Как быть, если большинство полей в форме являются обязательными, следует ли их все отметить? (Это же так много отметок, в конце концов.) Короткий ответ — да. И в этой статье я дам объяснение, почему.
Искушение не отмечать обязательные поляЧасто дизайнеры чувствуют, что наличие отметки для каждого отдельного элемента — уродливое повторение, которое занимает слишком много места и, с более длинными формами, даже может выглядеть угнетающе (форма требует от пользователя очень много!).
Таким образом, они обычно принимают одну или обе из следующих стратегий:
1. Они дают инструкцию в верхней части формы, говоря, что все поля обязательны для заполнения или все поля обязательны для заполнения, если не указано иное.
2. Они отмечают необязательные поля, так как их обычно меньше.
(В некоторых редких ситуациях они вообще ничего не делают: они просто полагают, что пользователи сами волшебным образом догадаются, какие поля обязательны. Ну а если они этого не сделают, им просто придется иметь дело с возникающей ошибкой.)
Приложение для кредитных карт Citicards (слева) содержит инструкции, написанные мелким курсивным шрифтом: «Все поля обязательны для заполнения, если не указано иное» в верхней части формы; Форма American Express (справа) вообще не содержит инструкций. В обеих формах были отмечены только необязательные поля: в случае Ситибанка с несколько туманной аббревиатурой «opt».Что не так с этими подходами? Тут есть несколько проблем:
• Люди не читают инструкции в верхней части формы.
Это общеизвестный факт, что пользователи не читают инструкции, и наименее вероятнее всего они станут читать инструкции в верхней части формы. В конце концов, поля формы выглядят самодостаточно, каждое поле имеет собственную специфическую «инструкцию» — своё название, зачем вам нужно читать что-то еще, чтобы заполнять поля формы?
- Даже если люди читают инструкции, они могут забыть их
Вы можете подумать: если пользователи прочитают инструкцию перед заполнением формы, они не смогут ее забыть — это же так просто? Однако, они забывают — особенно если форма длинная или если они прерываются при заполнении (ситуация, которая часто встречается на мобильных устройствах). И даже если люди не забывают инструкции, вы увеличиваете их когнитивную нагрузку, заставляя хранить прочитанное в своей рабочей памяти. Другими словами, вы усложняете им задачу. Заполнение формы само по себе вызов для ваших пользователей — зачем вы хотите усложнить этот процесс?
- Люди должны просмотреть форму, чтобы выяснить, является ли поле обязательным
Мы выяснили, что независимо от того, предоставили вы инструкции пользователю в шапке формы или нет, результат, скорее всего, будет одинаковым: их будут игнорировать или забывать.
Итак, что происходит, когда пользователь заполняет форму? Как они понимают, что поле обязательно для заполнения? Наиболее прилежные пользователи будут присматриваться внимательно, пытаясь выяснить это — они просмотрят всю форму и найдут поле, отмеченное как необязательное (иногда для этого необходимо проскроллить страницу, как в примере с AmericanExpressвыше, где первое необязательное поле появляется ниже, за пределами экрана; если они найдут одно такое поле, они будут считать, что все не отмеченные поля — обязательные. Но это взаимодействие потребует времени и усилий — и опять же, зачем вам усложнять для пользователей заполнение формы?
Однако большинство пользователей не будут осматриваться по сторонам — они просто будут строить предположения. Они скажут: «Ну, номер телефона — им же реально не нужен мой номер телефона, не так ли? Оставлю это поле пустым». И даже если они не оставляют это поле пустым, необходимость сделать паузу, чтобы принять решение, нужно ли заполнять поле, замедляет взаимодействие и делает процесс более долгим и утомительным.
(Помните, как бы вам ни хотелось думать иначе, никто не хочет заполнять форму — ни на маленьком, ни на большом экране.) Результатом будет ошибка отправки формы, которая будет означать еще больше потраченного времени на решение этой задачи.
Решение простое: отметьте все обязательные поля. Будьте настолько очевидными и прозрачными, насколько это возможно: для каждого обязательного поля, которое необходимо заполнить, поставьте отметку.
Как пометить обязательные поля?Здесь есть как минимум два варианта: звездочка (красная или нет) и слово «обязательно».
Приложение iOS Wallet использует в качестве автоматического заполнения слово «Required/Обязательно» для указания обязательных полей. (В целом, особенно для более длинных форм, лучше иметь слово «Обязательно» вне поля, а не внутри него, чтобы упростить идентификацию полей, которые все еще необходимо заполнить.)Маркировка «звездочка» стала очень популярной в web, и пользователи знакомы с ее значением.
Ее главное преимущество в том, что она не занимает много места и выглядит иначе, чем текст названия поля, поэтому используйте ее.
Должна ли звездочка предшествовать или следовать за названием поля? Вряд ли это будет иметь практическое значение, но одна из причин, по которой его нужно поместить непосредственно перед описанием поля, состоит в том, чтобы помочь глазам легко распознать, какие поля требуются, просмотрев только самый первый символ названия полей.
Оба этих сайта использовали звездочку для пометки обязательных полей: UPS (слева) отметил обязательные поля звездочкой в конце названия, а USPS (справа) отметил ее в начале и красным цветом. Отображение его в начале другим цветом облегчает идентификацию обязательных полей, которые могут оказаться полезными, когда форма длиннее. (Однако мы не рекомендуем использовать такой маленький размер шрифта, какой используется для звездочки USPS.)Должна ли звездочка быть красной? Необязательно, но красный цвет стал ожидаемым требуемым цветом маркера в web, что само по себе является причиной для того, чтобы придерживаться этого выбора (согласно Jakob’s Law).
В любом случае, есть некоторая ценность использования разных цветов для звездочки и для текстового названия поля: это позволяет пользователям быстро отделить их и сфокусироваться на названии поля, пытаясь осмыслить, что означает это поле. В то время как красный предпочтителен, мы настоятельно рекомендуем избегать бледно-серых или низко контрастных цветов для звездочки. В некоторых случаях приглушенные цвета могут иметь эстетические преимущества, но в реальности низко контрастные символы создадут проблемы доступности для слабовидящих или пожилых пользователей и замедляют визуальную обработку формы для всех.
Хотя это и не обязательно, отметка опциональных полей снижает когнитивную нагрузку пользователя: при отсутствии этого обозначения пользователь должен осмотреть поля и сделать вывод, какие именно из них являются необязательными, если часть из них помечена как обязательные. Если слово «необязательно/опционально» находится рядом с названием поля, эта задача становится немного легче.
Не указать, что поле является необязательным, не является ошибкой, но, если его также отметить — это будет очевидным плюсом.
Приложение Sephoraдля iOS пометило как обязательные, так и необязательные поля.Как насчет форм авторизации?Формы авторизации короткие и обычно состоят из двух полей: имени пользователя и пароля, оба из которых всегда обязательны для заполнения. Если вы используете звездочку, возможно необходимость пометки этих полей будет минимальной, однако это не будет ошибкой. Тем не менее, большинство пользователей сталкиваются со множеством форм авторизации, и они знают, что для входа в систему обязательно нужно ввести адрес электронной почты или имя пользователя и пароль. Так что, если вы категорически против звездочки, то можно совсем отказаться от неё в этих формах.
Форма входа USPS (слева) имеет пометки в двух обязательных полях. Kayak (справа) не отметил их. Любой из этих дизайнов допустим для форм авторизации в системе.Однако опасно не отмечать обязательные поля в форме регистрации.
Формы регистрации сильно различаются на разных сайтах — разные компании требуют разные типы информации при создании учетной записи. Если ваша регистрационная форма похожа на форму входа в систему, то можно безопасно пропустить необходимую информацию. Но если оно включает в себя больше полей, чем имя пользователя и пароль, отметьте все обязательные поля (включая поля имени пользователя и пароля).
Формы — отнюдь не забава. Они требуют от пользователей достаточно работы. В реальности, многие формы оказываются брошенными, потому что заполнять их слишком сложно или утомительно. Чтобы повысить шансы того, что ваша форма будет до конца заполнена, минимизируйте усилия, которые придется приложить пользователям, и информацию, которую они должны запомнить.
Есть много аспектов, которые способствуют этому, но отметить обязательные поля (и, опционально поля необязательные) — легкое и простое решение.
Перевод Marking Required Fields in Forms
Какое обязательное поле? Как сделать поле обязательным. : Freshsales Classic
Изменено: Ср, 18 марта 2020 г., 15:26
Применимые планы
Sprout Blossom Garden EstateForest
Некоторая базовая информация о лиде/контакте/учетной записи/сделке, безусловно, необходима, чтобы связаться и предложить продукт потенциальному клиенту. Также иногда, чтобы отличить один лид от другого, требуется по крайней мере одна ключевая информация, такая как фамилия лида или около того. Вот тогда и пригодится возможность сделать поле обязательным.
Сделав поле обязательным, вы сможете собирать самую важную информацию от своих потенциальных клиентов, лучше понимать их и, в конечном счете, лучше вести беседу.
В Freshsales по умолчанию некоторые поля являются обязательными для разных организаций.
— Лиды: Фамилия и название компании
— Контакты : Фамилия
— Счета: Имя
9001 2 — Сделки: Имя, имя учетной записи и сумма сделки
Это свойство для вышеуказанных полей не может быть изменено. то есть: Это поле необходимо заполнить для создания записи.
Для других полей возможность пометить их как обязательные или нет по выбору администратора.
Вы можете сделать поле обязательным при создании или редактировании поля любого объекта в настройках администратора. Если сделать поле обязательным, пользователь должен ввести значение при сохранении записи.
Эта функция доступна для полей «Интерес», «Контакт», «Организация» и «Сделка».
Примечание: Если сделать поле обязательным, это повлияет на импорт данных, мобильное приложение, интеграцию и процесс конверсии потенциальных клиентов. |
Последствия перечислены ниже. Поэтому, делая поле обязательным, убедитесь, что об этих областях позаботились.Прежде чем сделать поле обязательным, убедитесь, что вы обработали следующие области: —
Сохранить запись — Если вы сделаете поле обязательным, пользователи не смогут сохранить запись, если поле пустое. Убедитесь, что вы сделали обязательными только те поля, для которых пользователи должны иметь значение для ввода. В противном случае ваш процесс продаж будет затруднен или пользователи будут вводить ненужные значения для сохранения записи. Для существующих записей убедитесь, что вы выполняете массовое обновление или импортируете обновление в обязательном поле, чтобы приложение работало правильно.
Импорт данных — Сопоставление обязательных полей при импорте данных обязательно.
Вы не можете продолжить импорт, если в вашем .
CSV нет сопоставления для обязательного поля.
Записи, которые не имеют значения в обязательных полях, не будут выполнены, и о них будет сообщено в отчете журнала ошибок, отправленном по электронной почте.
Мобильное приложение — приложения для iOS версии 1.2 (и выше) и Android версии 1.1.2 (и выше) совместимы с этой функцией. Убедитесь, что ваша команда обновилась до этой версии.
Интеграции — Обязательная проверка полей также запускается для интеграций. Убедитесь, что вы обработали эти поля во всех своих интеграциях. Любая интеграция, которая создает или обновляет запись (лид/контакт/сделка/аккаунт), должна включать обязательные поля.
Freshsales для веб-библиотек
Преобразование потенциальных клиентов — Если какое-либо поле для контакта, организации и сделки является обязательным, убедитесь, что эти поля сопоставлены в сопоставлении интересов.
Если эти поля не сопоставлены, конверсия лидов не произойдет.Автоматическая переадресация — Автоматическая переадресация электронной почты не влияет на создание лида, если в лиде есть обязательные поля. Однако, когда пользователь пытается отредактировать запись, Freshsales указывает значение в обязательных полях при сохранении записи.
Если эти поля не сопоставлены, конверсия лидов не произойдет.Вот как это сделать:
Войдите на свой портал Freshsales как администратор.
Перейти к Настройки администратора > Модуль Лид/Контакт/Счет/Сделка > Добавить поля .
Вы можете сделать поле обязательным либо при добавлении нового поля (настраиваемые поля), либо при редактировании одного (поля по умолчанию и настраиваемые поля). Чтобы изменить поле, щелкните значок «Изменить» поля в списке настраиваемых полей.
В наложении «Добавить поле/редактировать поле» можно установить флажок «Сделать это поле обязательным», чтобы сделать это поле обязательным.
Появится всплывающее окно, подтверждающее это.
Всплывающее окно:
Появится всплывающее окно, подтверждающее это. Нажмите .
Сценарий понижения:
При понижении до планов Garden и ниже ,
- Все обязательные поля теряют свойство «обязательный» и становятся необязательными. Если вы обновите свою учетную запись до плана Estate и выше, вам придется повторно настроить необходимые поля.
Примечание: Эта функция доступна для всех типов полей. Для флажка, если поле сделано обязательным, то по умолчанию оно остается включенным.
Вы нашли это полезным? Да Нет
Не могли бы вы рассказать нам, как мы можем улучшить эту статью?
Как сопоставить настраиваемые поля лидов с другими полями во время преобразования лидов?
Что такое поля поиска? Как настроить поле поиска?
Как настроить права доступа к полям для ролей в Freshsales?
Что такое поле только для чтения? Как сделать поле лида/контакта/счета/сделки доступным только для чтения?
Как отформатировать числовое поле
Какое поле является обязательным? Как сделать поле обязательным.
: Свежие продажи Дата изменения: Вт, 10 августа 2021 г., 9:22
Продукт Применимые планы
Freshsales
Рост
Enterprise
Freshmarketer
Growth
Enterprise
Freshsales Suite
Growth
Enterprise
Некоторая базовая информация о контакте/учетной записи/сделке, безусловно, необходима. протянуть руку и представить продукт потенциальному клиенту. Также иногда, чтобы отличить один контакт от другого, требуется хотя бы одна ключевая информация, такая как фамилия контакта или около того. Вот тогда и пригодится возможность сделать поле обязательным.
Сделав поле обязательным, вы сможете собирать самую важную информацию от своих потенциальных клиентов, лучше понимать их и, в конечном итоге, лучше вести беседу.
Некоторые важные поля являются обязательными по умолчанию в разных модулях:
- Аккаунты: Имя
- Сделки: Имя и стоимость сделки
- Контакты: одно из трех полей – адрес электронной почты, мобильный или внешний идентификатор вышеуказанные поля не могут быть изменены, т. е. это поле необходимо заполнить для создания записи. Для других полей возможность пометить их как обязательные или нет по выбору администратора.
Вы можете сделать поле обязательным при создании или редактировании поля объекта в настройках администратора. Если сделать поле обязательным, пользователь должен ввести значение при сохранении записи. Эта функция доступна для полей «Контакт», «Организация» и «Сделка».
Примечание: Обязательный статус поля влияет на импорт данных, мобильное приложение и интеграцию. Последствия перечислены ниже.
Прежде чем сделать поле обязательным, обязательно проверьте следующие области:
- Сохранение записи. Если вы сделаете поле обязательным, пользователи не смогут сохранить запись, если поле пусто. Убедитесь, что вы сделали обязательными только те поля, для которых пользователи должны иметь значение для ввода. В противном случае ваш процесс продаж будет затруднен или пользователи будут вводить ненужные значения для сохранения записи. Для существующих записей убедитесь, что вы выполняете массовое обновление или импортируете обновление в обязательном поле, чтобы приложение работало правильно.
- Импорт данных – необходимо сопоставить обязательные поля при импорте данных.
- Вы не можете продолжить импорт, если в вашем .CSV нет сопоставления для обязательного поля.
- Записи, не содержащие значения в обязательных полях, не будут выполнены, и о них будет сообщено в отчете журнала ошибок, отправленном по электронной почте.
- Мобильное приложение. Эта функция совместима с приложениями для iOS версии 1.2 (и выше) и Android версии 1.1.2 (и выше). Убедитесь, что ваша команда обновилась до этой версии.
- Интеграции. Обязательная проверка полей также активируется для интеграций. Убедитесь, что вы обработали эти поля во всех своих интеграциях. Любая интеграция, которая создает или обновляет запись (контакт/сделку/счет), должна включать обязательные поля.
- Библиотека кодов. При использовании этих библиотек обязательные проверки полей не выполняются.
- Автоматическая переадресация. Автоматическая переадресация электронной почты не влияет на создание контакта, если в контактах есть обязательные поля. Однако, когда пользователь пытается отредактировать запись, задает значение в обязательных полях при сохранении записи.
Чтобы сделать поле обязательным,
Перейдите в «Настройки администратора» > Модуль «Контакт/Учетная запись/Сделка» > «Добавить поля».
Вы можете сделать поле обязательным либо при добавлении нового поля (настраиваемые поля), либо при редактировании существующего поля (поля по умолчанию и настраиваемые поля).
Установите флажок «Обязательно» для нужного поля.
Кроме того, в наложении «Добавить/редактировать поле» можно установить флажок «Сделать это поле обязательным».
- Сохранение записи. Если вы сделаете поле обязательным, пользователи не смогут сохранить запись, если поле пусто. Убедитесь, что вы сделали обязательными только те поля, для которых пользователи должны иметь значение для ввода. В противном случае ваш процесс продаж будет затруднен или пользователи будут вводить ненужные значения для сохранения записи.
е. это поле необходимо заполнить для создания записи. Для других полей возможность пометить их как обязательные или нет по выбору администратора.
Для существующих записей убедитесь, что вы выполняете массовое обновление или импортируете обновление в обязательном поле, чтобы приложение работало правильно. 
