Энтони Ценг написал о сегментированных переключателях в формах.
— Сегментированные переключатели нужны в основном для переключения между разделами, как табы;
— Ошибка — использовать их для выбора значений в формах и заменять ими группы радиокнопок;
— Вместо групп радиокнопок, особенно, если мало места по вертикали, можно использовать чипы одиночного выбора;
— В отличие от нажатия на сегментированный переключатель, при нажатии на чип сразу ничего не происходит. Пользователь выбирает значение, которое затем подтверждает нажатием на кнопку;
— Свитч (тоггл) — частный случай такого переключателя, и их тоже неправильно используют вместо чекбоксов.
In English. #chips #toggle #segmented_control
— Сегментированные переключатели нужны в основном для переключения между разделами, как табы;
— Ошибка — использовать их для выбора значений в формах и заменять ими группы радиокнопок;
— Вместо групп радиокнопок, особенно, если мало места по вертикали, можно использовать чипы одиночного выбора;
— В отличие от нажатия на сегментированный переключатель, при нажатии на чип сразу ничего не происходит. Пользователь выбирает значение, которое затем подтверждает нажатием на кнопку;
— Свитч (тоггл) — частный случай такого переключателя, и их тоже неправильно используют вместо чекбоксов.
In English. #chips #toggle #segmented_control
Teletype
Как использовать сегментированные переключатели
Хватит совершать одни и те же ошибки!
👍11❤10👎4🤔1
Илья Бирман написал о переключателях (segmented control) и выпадающих списках (select).
— Переключатель предназначен для выбора одного из нескольких вариантов. Варианты объединены в горизонтальный контейнер (важный признак взаимоисключающего выбора), и один из них выбран;
— В отличие от радиогруппы, переключатель может не только быть элементом формы, но и приводить к моментальному действию (например, переключению темы оформления);
— Чтобы варианты поместились в одну строку, подробности можно перенести в подпись. Например, вместо «Автоматически в зависимости от устройства ввода» можно написать «Авто», и при выборе этого варианта в подписи отображать «В зависимости от устройства ввода»;
— Варианты могут быть равной ширины или подстраиваться под длину текста;
— Если их всего 2, иногда непонятно, какой выбран. Проблема решается графическим оформлением;
— Выбранный вариант не реагирует на наведение и нажатие. При выборе варианты не должны менять порядок;
— На узких экранах иногда предусматривают появление горизонтальной прокрутки, но лучше заменить переключатель на выпадающий список;
— Выпадающий список тоже предназначен для выбора одного из нескольких вариантов. Он выглядит как поле со стрелкой, указывающей на возможность выбора;
— Список вариантов обычно появляется под полем, но положение может меняться с учётом свободного на экране места;
— По ширине он должен быть не меньше исходного поля и может быть больше, чтобы уместить длинные варианты;
— Если не хватает высоты экрана, в списке может появиться вертикальная прокрутка;
— Выпадающий список даёт компактность, но усложняет выбор: требуется действие, даже чтобы увидеть список вариантов;
— В отличие от радиогруппы и переключателя, он допускает использование незаполненного состояния — один из вариантов может быть пустой строкой. Он может быть выбран по умолчанию.
#segmented_control #select
— Переключатель предназначен для выбора одного из нескольких вариантов. Варианты объединены в горизонтальный контейнер (важный признак взаимоисключающего выбора), и один из них выбран;
— В отличие от радиогруппы, переключатель может не только быть элементом формы, но и приводить к моментальному действию (например, переключению темы оформления);
— Чтобы варианты поместились в одну строку, подробности можно перенести в подпись. Например, вместо «Автоматически в зависимости от устройства ввода» можно написать «Авто», и при выборе этого варианта в подписи отображать «В зависимости от устройства ввода»;
— Варианты могут быть равной ширины или подстраиваться под длину текста;
— Если их всего 2, иногда непонятно, какой выбран. Проблема решается графическим оформлением;
— Выбранный вариант не реагирует на наведение и нажатие. При выборе варианты не должны менять порядок;
— На узких экранах иногда предусматривают появление горизонтальной прокрутки, но лучше заменить переключатель на выпадающий список;
— Выпадающий список тоже предназначен для выбора одного из нескольких вариантов. Он выглядит как поле со стрелкой, указывающей на возможность выбора;
— Список вариантов обычно появляется под полем, но положение может меняться с учётом свободного на экране места;
— По ширине он должен быть не меньше исходного поля и может быть больше, чтобы уместить длинные варианты;
— Если не хватает высоты экрана, в списке может появиться вертикальная прокрутка;
— Выпадающий список даёт компактность, но усложняет выбор: требуется действие, даже чтобы увидеть список вариантов;
— В отличие от радиогруппы и переключателя, он допускает использование незаполненного состояния — один из вариантов может быть пустой строкой. Он может быть выбран по умолчанию.
#segmented_control #select
❤22👍2