Листбоксы и выпадающие списки: в чем отличие, как правильно оформлять, когда использовать

Sc1.jpg
Перевод статьи Anna Kaley, NNGroup

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

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

Листбоксы

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

Есть 4 типа листбоксов по типу выбора элементов. В каждом типе может быть скролл — если все элементы не помещаются в контейнер.

  • Листбокс с единичным выбором: пользователь может выбрать только одну из опций в списке.
  • Листбокс с множественным выбором: пользователь может выбрать несколько элементов путем нажатия клавиши Shift, Command или Control. Снять выбор можно аналогично.
  • Листбокс с множественным выбором через чекбоксы: выбрать можно несколько элементов, но не путем нажатия какой-либо клавиши, а при помощи встроенных в список чекбоксов. Это делает возможность множественного выбора более очевидной.
  • Листбокс с множественным выбором и двумя контейнерами: фактически здесь два листбокса: в левом содержатся все доступные опции, а в правом отображаются выбранные опции. Есть кнопки Добавить и Удалить, при помощи которых элемент можно перенести в правый контейнер или убрать из него. Пользователи также могут менять порядок элементов в списке.

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

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

Выпадающие списки

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

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

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

Как использовать листбоксы и выпадающие списки

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

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

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

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

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

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

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

Преимущества и недостатки листбоксов

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

  • Низкая стоимость взаимодействия: Пользователю не нужно никуда кликать, чтобы увидеть все элементы списка (максимум, что потребуется — это проскроллить вниз по листбоксу, если элементов много).
  • Хорошая видимость всех элементов: Когда пользователь видит все опции сразу, ему проще сделать выбор, и он с меньшей вероятностью передумает.
  • Отображение в несколько колонок: В контейнере листбокса может быть больше одной колонки. Таким образом, листбокс может вмещать больше элементов. Единственное, чего стоит избегать — это горизонтальный скроллинг. Если вы используете несколько колонок, ширины контейнера должно быть достаточно для их отображения.
  • Хороший обзор и произвольный порядок: Двойные листбоксы с множественным выбором (как на рис.2) дают пользователю больше контроля над содержимым списка. Он четко видит, какие элементы выбраны, и может менять порядок их отображения.

Есть у листбоксов и свои недостатки:

  • Экранное пространство: Каким бы компактным ни был листбокс, он все равно занимает больше места на странице, чем тот же выпадающий список.
  • Непривычность: Пользователю может потребоваться некоторое время, чтобы научиться взаимодействовать с листбоксом: особенно если листбокс поддерживает множественный выбор, но без чекбоксов. Не каждый пользователь догадается зажать  Control, Command или Shift, чтобы проверить, нет ли возможности множественного выбора? Поэтому лучше все же использовать чекбоксы — если, конечно, они не слишком перегружают интерфейс.
  • Не все выбранные элементы могут быть видны пользователю: Если листбокс длинный, то по мере прокрутки списка некоторые выбранные элементы могут скрыться из поля зрения пользователя. Поэтому лучше показывать выбранные элементы над контейнером листбокса, в виде токенов. А если листбокс без скролла — достаточно просто подсветить все выбранные элементы.
Преимущества и недостатки выпадающих списков

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

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

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

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

Что касается выбора между типами списка, сориентироваться поможет таблица:

Критерий

Выбирайте выпадающий список

Выбирайте листбокс

Любой тип подойдет

Когда стоит выбрать другой элемент управления

Список элементов состоит из объектов (существительных) или атрибутов (прилагательных)

Для выбора команд (глаголов) лучше подойдут кнопки.

Вариантов выбора немного (5 или меньше)

XXX

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

Вариантов выбора от 5 до 15

Если экранное пространство ограничено, выбирайте выпадающий список, если нет — листбокс.

X

Вариантов выбора больше 15

X

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

X

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

Пользователи могут выбрать только один вариант из списка взаимоисключающих элементов.

Лучше выбрать выпадающий список, если:  

- экранное пространство ограничено;

- есть оптимальное значение по умолчанию;

- не нужно обращать внимание пользователя на возможность выбора;

Если экранное пространство не ограничено, а выбор пользователя важен — используйте листбокс.

Если опций немного, используйте радиокнопки.

Пользователи могут выбрать один или несколько вариантов из списка элементов.

X

Используйте листбокс множественным выбором и чекбоксами (чтобы подчеркнуть возможность выбрать несколько опций).  

X

Если опций немного, используйте отдельные чекбоксы.

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

XXX

Возможность легко просмотреть все опции (выбранные или нет) помогает быстрее решить задачу.

XXX

Не существует четкого или наилучшего варианта по умолчанию.  

XXX

Порядок отображения элементов в списке — важный фактор при принятии решения.

X

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

XX
Заключение

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

Источник