Переключатель, радиопереключатель, горизонтальный переключатель, segmented control. Элемент графического интерфейса, предназначенный для выбора одного из нескольких взаимоисключающих вариантов. Варианты, иногда называемые кнопками или сегментами, объединены в общий горизонтальный контейнер; один из вариантов выделен как выбранный:

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

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

Показывать полосы прокрутки
🔘 автоматически в зависимости от устройства ввода
○ во время прокрутки
○ всегда

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

Уважаемые советчики! Что бы вы исправили или дополнили?

Интерфейс
Отправить
Поделиться
Запинить

Рекомендуем другие советы