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

Эффективное отображение списка

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

Практические рекомендации:

• Если список состоит из менее чем четырех пунктов, предпочтительным вариантом является использование радиокнопок;
• Количество вариантов для выбора должно быть ограничено и сведено к наиболее необходимым пользователю;
• Следует избегать использования полос прокрутки для ограничения высоты отображаемого списка — это создает лишние затруднения;
• Желательно предоставить пользователю возможность собственного варианта посредством использования комбо-боксов.

Облегчение выбора

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

• тип действия;
• частота использования;
• по алфавиту;
• вокруг графического изображения.

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

Практические рекомендации:

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

Создать благоприятные условия для выбора

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

Пример: выпадающие меню выбора шрифтов (OpenOffice и InDesign).

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

Пример: представление текстового фрагмента выбираемым шрифтом (Office 2007).

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

Пример: выбор отображаемых элементов меню в WindowsExplorer7 и на французском сайте CadresOnline.

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

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

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

Практические рекомендации:

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

Заключение

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