Как использовать сегментированные переключатели

Хватит совершать одни и те же ошибки!

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

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

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

В примере справа сегментированный переключатель используется для переключения между разделами настроек "Документ"и "Аудио". Когда пользователь нажимает на него, все опции на экране меняются.

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

Чипы для выбора значений

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

Сегментированный переключатель функционирует как стандартный двоичный переключатель. Анимация подсказывает пользователям, что именно происходит. Бегунок скользит туда и обратно по “дорожке”, когда человек нажимает на него.

Ошибки в использовании двоичных переключателей

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

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

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

Источник:
UX Movement
arrow