Действительно ли вашей форме нужен выпадающий список?

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

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

Определение

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

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

Привлекательность выпадающих списков

Выпадающие списки популярны благодаря нескольким преимуществам:

• Экономия места: выпадающие списки компактны и могут содержать любое количество вариантов, занимая при этом одну строку на экране. Если вариантов больше, чем позволяет пространство, их можно свернуть одним щелчком мыши.
• Ограничение ввода: пользователи могут выбирать только из заранее определенных допустимых вариантов; опечатки и недопустимые записи не допускаются. Это помогает поддерживать структурированность и чистоту данных.
• Знакомство: Выпадающие списки - это стандартный шаблон ввода, существующий десятилетиями. Значение является сильным — пользователи распознают шаблон со стрелкой вниз на разных платформах.

Скрытые недостатки выпадающих списков

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

Низкая доступность

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

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

Высокая стоимость взаимодействия

Взаимодействие с раскрывающимся списком состоит из трех этапов:

1. Откройте список (щелчком мыши, касанием или с помощью клавиатуры)
2. Прокрутите до нужного варианта
3. Нажмите еще раз, чтобы выбрать его

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

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

Барьеры доступности

ПРАВИТЕЛЬСТВО.Великобритания провела обширное исследование выпадающих списков и задокументировала постоянные проблемы с удобством использования клавиатуры и пользователей с нарушениями моторики, в том числе:

• Пытается закрыть выпадающее меню
• Пытается что-то в него ввести
• Путает выделенные элементы с выбранными
• Не понимает, что можно прокрутить страницу, чтобы увидеть больше вариантов
• Пытается использовать жесты «щипок» и «зум» на маленьких экранах

Эта организация настоятельно рекомендует использовать выпадающие списки только в крайнем случае при работе с общедоступными сервисами.

Иллюзия чистоты данных

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

Существует несколько способов представить один и тот же ответ

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

Британский пользователь, ищущий информацию о своей национальности, может ожидать увидеть Соединенное Королевство, UK, Британия или Великобритания, и у него нет возможности узнать, какой из вариантов скрыт в списке, не пролистывая его целиком.

То, что ищут пользователи, отсутствует в списке

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

Когда ожидаемый вариант отсутствует в списке, пользователи вынуждены:

• Тщательно изучите весь список
• Выберите ближайший (но, скорее всего, неточный или неправильный) вариант
• Сдайтесь и оставьте поле пустым

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

Эта проблема часто возникает при выборе названия должности или отрасли. Такие списки, как правило, отражают жесткие внутренние (и зачастую устаревшие) классификации, а не то, как люди описывают свою работу. Например, дизайн часто отсутствует в отраслевом списке или объединен с архитектурой, искусством или медиа.

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

Когда лучше избегать выпадающих списков

Слишком мало вариантов

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

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

Понятие «несколько вариантов» варьируется в зависимости от контекста. Во многих системах проектирования установлен минимальный порог, при котором следует использовать выпадающие списки. В американской системе веб-дизайна (USWDS) рекомендуется использовать радиокнопки, если вариантов меньше 7. В Google Material Design (M3) порог установлен на уровне 6 вариантов, а в системе проектирования IBM Carbon — на уровне 3 вариантов. Точное ограничение будет зависеть от вашего макета и сложности информации, но принцип остается неизменным: когда на экране с комфортом помещается несколько вариантов, раскрывающийся список создает больше неудобств, чем реальной пользы.

Слишком много вариантов

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

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

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

Хорошо знакомые или предсказуемые данные

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

Правильно настроенный текстовый ввод с соответствующим режимом ввода (например, числовым), который автоматически активирует нужную мобильную клавиатуру, работает быстрее, в нем меньше ошибок и он более удобен, чем выпадающий список.

Пользователям нужно визуальное сравнение

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

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

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

Когда выпадающие списки все еще имеют смысл

Несмотря на свои недостатки, выпадающие списки не всегда плохи. Они по-прежнему уместны в ограниченном числе случаев.

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

Элементы управления выбором (к которым, помимо выпадающих списков, относятся флажки, переключатели и другие типы списков) хорошо работают, когда:
Н

• абор допустимых входных данных предопределен и ограничен. Пользователи могут выбирать только из тех вариантов, которые разрешены компанией, и они могут не знать об этих вариантах заранее. Например, доступные способы доставки должны быть выбраны из тех, что предлагаются в данный момент.
• Стандартизация данных крайне важна. Ввод данных в виде свободного текста может привести к несоответствиям, ошибкам или проблемам с последующей обработкой. Если система не может надежно очистить некорректные входные данные, ограничение выбора на начальном этапе позволяет сохранить целостность данных.
• Данные являются категориальными, а не непрерывными. Варианты конечны и дискретны и не существуют в непрерывном спектре. Выбор размера футболки (S, M, L) требует выбора, в то время как ограничение бюджета (10–500 долларов) лучше подходит для ползунка или числового ввода.
• Выбор упрощает задачу. Один клик зачастую проще, чем подробный ответ. Например, в опросе об отмене подписки пользователи, которые уже решили уйти, вряд ли захотят тратить время на подробный отзыв. Представление списка вариантов снижает порог вхождения и повышает вероятность того, что они вообще оставят отзыв.

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

Умеренное количество вариантов (примерно 5–10)

Выпадающие списки лучше всего работают в узком промежутке: вариантов достаточно, чтобы оправдать их скрытие для экономии места, но не настолько много, чтобы по списку было сложно перемещаться. Если вариантов меньше 5, лучше использовать радиокнопки, потому что они позволяют видеть все варианты и выбирать их одним касанием. Если список состоит более чем из 15 вариантов, рассмотрите возможность использования выпадающего списка.

Поле является второстепенным по отношению к основной задаче

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

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

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

Поле является частью целого

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

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

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

Давайте рассмотрим несколько примеров, в которых раскрывающийся список прошел проверку временем.

Пример 1: Выбор языка

В нижнем колонтитуле сайта 1Password используется раскрывающийся список для выбора языка, предлагающий десять вариантов. Нижний колонтитул и так был перегружен информацией: по всей ширине страницы располагались десятки ссылок на продукты, функции, решения, ресурсы и информацию о компании.

Здесь уместно использовать элемент управления выбором, поскольку языковые опции представляют собой фиксированный, заранее определенный набор: пользователи могут выбирать только те языки, которые поддерживает 1Password, и каждая опция соответствует определенной переведенной версии сайта.

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

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

Пример 2: настройка логики пропуска

В пользовательских интервью с помощью выпадающих списков создавались правила логики пропуска в скрининговом опросе. Каждое правило выглядело как предложение: Если [вопрос] [условие] [ответ], перейти к [пункту назначения].

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

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

Заключение

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

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