Selection-Dependent Inputs
Автор: Luke Wroblewski
Источник: UXmatters

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

Контекстно-зависимые поля ввода, в сущности, простое и красивое понятие: после того как пользователь выбирает одно из значений в селекторе (или нескольких селекторах), он получает доступ к дополнительным полям, которые непосредственно связаны с только что сделанным выбором. На рисунке показаны два шага заполнения формы на сайте eBay. После того как пользователь выберет Sold в выпадающем списке Listings and records, на форме откроются дополнительные поля для указания даты. Если пользователь выберет другое значение в списке, ему, соответственно, будет показан другой набор дополнительных полей.

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

Контекстно-зависимые поля не создают проблем, если они воспринимаются пользователем как часть интерфейса. Проблемы могут возникнуть, если на форме вдруг появится большая группа полей разного типа, после того как пользователь просто что-то выберет в списке.

Я приведу несколько примеров пользовательских интерфейсов, решающих – успешно и не очень – проблему контекстно-зависимых полей.

Разделение на страницы

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

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

Вкладки (табы)

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

Многие пользователи знают, как работают вкладки, но то, как большинство пользователей заполняет формы в Интернете, практически сводит на нет все их преимущества. Заполняя форму, многие пользователи перемещаются сверху вниз, и часто игнорируют горизонтальные опции. Есть еще одна проблема вкладок – взаимная исключительность. Должен ли я заполнить поля на всех имеющихся вкладках или достаточно заполнить только те поля, что расположены на активной по-умолчанию?

Вертикальные (пальчиковые) вкладки

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

Чтобы преодолеть проблему взаимной исключительности, можно расположить рядом с каждой вкладкой радио-кнопку и таким образом показать, что ему достаточно заполнить только одну вкладку (этот способ можно использовать и с горизонтальными вкладками).

Селектор + фрейм

Горизонтальные и вертикальные вкладки выделяют выбранное значение среди остальных – пользователь видит, что и из чего он выбрал. Это хорошо, но занимает место на экране. Когда число вариантов выбора будет увеличиваться, то вкладки будут масштабироваться не очень хорошо.

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

Расположение под радио-кнопками

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

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

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

Расположение между радио-кнопками

Этот метод – модификация предыдущего. Поля показываются непосредственно после радио-кнопки (как показано на рисунке). Когда набор дополнительных полей небольшой – одно или два поля – такой метод может помочь пользователю сделать выбор: поля появляются именно в том месте, где в момент выбора находится фокус внимания пользователя.

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

Блокировка

Следующий метод предполагает, что все контекстно-зависимые поля видны на экране и размещены под соответствующими радио-кнопками. Поля, относящиеся к выбранной кнопке – активны, а все остальные поля – заблокированы.

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

Фреймы

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

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

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