Пара советов по использованию «выключателей»

Вольный перевод статьи Toggle Switch: 5 Simple Design Tips For Better Design.

Выключатель, он же Toggle Switch, он же тумблер, он же тоггл, он же свитчер... В общем, осуществляет переключение между взаимоисключающими состояниями. Например, On и Off. Дизайн и функционал основан на реальном переключателе, который позволяет нам что-то переключать — например, свет.

У тумблера должно быть значение по умолчанию

Переключатель изначально должен быть либо в положении Off, либо On — одно из двух. Если нужно позволить юзерам сделать выбор, лучше использовать чекбокс — у него нет дефолтного значения.

Пишите хорошие метки (label)

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

Вот пара вещей, на которые стоит обратить внимание:

• Пишите понятно. В метке должно быть чётко описано, что произойдёт, когда вы переключите тумблер в положение On.
• Пишите коротко и прямо. Например, Microsoft рекомендует 1-2 существительных.

Нет: Хотите увидеть полную цену всех товаров?

Да: Показать полную цену

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

• Избегайте описания состояния переключателя. У переключателей всего два состояния — On и Off. Добавление лишнего текста лишь «замусорит» интерфейс.

Прим. переводчика: а вот Microsoft очень даже предлагает использовать эти дополнительные ярлыки состояний. В Windows 10 они, соответственно, используются повсеместно.

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

Когда юзеры имеют дело с тумблерами, они не должны нажимать никакие «Сохранить» или «Подтвердить». Изменения должны вступать в силу сразу.

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

Если же изменения невозможно применить сразу (иногда на вступление их в силу требуется какое-то время), можно добавить спиннер.

Стремитесь создавать привычный дизайн

Не будьте слишком креативны. Да, креативность это хорошо, но любой незнакомый визуальный стиль может сбить юзера с толку.

Не указывайте текст состояния внутри самого тумблера. Это затрудняет распознавание юзером состояния элемента.

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

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

Будьте последовательны. Не превращайте приложение в зоопарк из десятков разновидностей одних и тех же элементов управления. Старайтесь использовать единый стиль.

Следуйте стайлгайдам платформы. Самый безопасный вариант — это следовать стайлгайдам платформы, для которой вы дизайните. Это помогает юзерам не привыкать к вашему приложению с нуля, а пользоваться знакомыми им элементами.