Расскажите о переключателях и выпадающих списках

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

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

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

Так левое значение выглядит нейтральным, а выделен только правый:

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

Значения могут подстраиваться под длину текста или быть равной ширины:

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

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

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

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

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

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

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

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

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

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

Частая ошибка в таком случае — писать на месте пустоты призывы вроде «Выберите страну».

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

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

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