Найти тему
USABILITYLAB

Как отмечать обязательные поля в формах (и отмечать ли)

Оглавление

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

Отмечать только обязательные поля

Самый известный способ обозначить обязательные поля — отметить их “звездочкой”, или астериксом (*), часто красного цвета. Символ размещается рядом с полем или рядом с названием поля, встречаются варианты с размещением внутри поля. Впрочем, с таким обозначением связаны некоторые проблемы. Красные “звездочки” визуально засоряют форму, к тому же не все пользователи понимают их значение.

Создать карусель             Красные звездочки — традиционный, но не самый лучший, метод обозначить обязательное поле
Создать карусель Красные звездочки — традиционный, но не самый лучший, метод обозначить обязательное поле

Другой вариант обозначить обязательное поле — написать слово “обязательно” рядом с его названием. Кажется, что это решает проблему с визуальным шумом, делает форму понятной для всех, независимо от опыта в интернете, а заодно повышает доступность формы. Скринридер сразу читает слово “обязательно”, и в коде не требуются никакие дополнительные расшифровки, как в случае с отметкой в виде астерикса. Тем не менее, исследование Baymard Institute показывает, что если обязательные поля отмечены, а необязательные — нет, у некоторых пользователей возникает вопрос, нужно ли заполнять неотмеченные поля.

Отмечать только необязательные поля

У обязательных полей нет никаких пометок, а рядом с необязательными полями стоит пометка “дополнительно” или “не обязательно”. 

Создать карусель             Около необязательного поля стоит пометка «дополнительно» («optional»), а обязательные поля ничем не отмечены
Создать карусель Около необязательного поля стоит пометка «дополнительно» («optional»), а обязательные поля ничем не отмечены

Тем не менее, исследование Baymard Institute показало, что в таком случае у некоторых пользователей возникают сомнения, нужно ли заполнять все поля, рядом с которыми нет никаких пометок

Иногда под названием формы добавляют поясняющую надпись, например: «Все поля, кроме полей с пометкой “дополнительно”, обязательны для заполнения». Впрочем, у экспертов в области UX есть сомнения, что пользователи читают такие поясняющие надписи.

Отмечать те поля, которых меньше

Подход, рекомендованный Люком Вроблевски. Если форма длинная, то нужно отмечать те поля, которых меньше: так пользователю будет легче их найти. Например, если почти все поля в форме обязательные, то отметить надо только дополнительные. Если дело обстоит наоборот — отметить только обязательные. Если форма состоит из 2-3 обязательных для заполнения полей, то никакие дополнительные пометки вообще не нужны.

Отмечать все поля

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

Поэтому Baymard Institute советуют пометить вообще все поля в форме: рядом с названием каждого из них в скобках написать “обязательно” или “дополнительно”.

Создать карусель             Baymard Institute советуют отмечать все поля в форме. Эта форма еще нуждается в улучшении: символ * понятен не всем пользователям, поэтому слово «обязательно» лучше написать текстом; слово «optional» («дополнительно») лучше писать снаружи поля, например, рядом с его названием, а не внутри.
Создать карусель Baymard Institute советуют отмечать все поля в форме. Эта форма еще нуждается в улучшении: символ * понятен не всем пользователям, поэтому слово «обязательно» лучше написать текстом; слово «optional» («дополнительно») лучше писать снаружи поля, например, рядом с его названием, а не внутри.

Традиционно, ссылки для тех, кто хочет углубиться в вопрос

Исследование Baymard Institute

Презентация Люка Вроблевски с рекомендациями по дизайну форм (основана на книге Web Form Design)

Статья сторонников подхода “отмечать только дополнительные поля”

Любопытное научное исследование. Исследователи выяснили, что люди в принципе склонны заполнять больше полей, чем от них требуется. При этом чем больше в форме обязательных полей, тем меньше полей в целом заполняют респонденты.