Checkbox vs. Toggle switch

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

Флажок (сheckbox) имеет три состояния: невыбранный, выбранный и неопределенный. Последнее состояние представляет собой ситуацию, когда список подопций группируется под родительским параметром, а подопции находятся как в выбранном, так и в невыбранном состоянии.

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

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

Ниже приведены несколько вариантов использования, а также рекомендации по выбору между этими двумя элементами управления при разработке формы.

Пример 1: Мгновенный ответ

Используйте тумблер, если:

• Требуется мгновенная реакция на примененные параметры.
• Для отображения результатов настройки функций вкл/выкл или показать/скрыть.
• Пользователю необходимо выполнять мгновенные действия, не требующие проверки или подтверждения.

Для требующих мгновенного ответа параметров, лучше всего использовать переключатель

Пример 2: Подтверждение настроек

Используйте флажок, если:

• Настройки должны быть подтверждены и проверены пользователем перед отправкой.
• Определенные параметры требуют действия, например «Отправить», «ОК», «Далее», «Применить» перед отображением результатов.
• Пользователь должен выполнить дополнительные шаги, чтобы изменения вступили в силу.

Флажки предпочтительны, когда для применения настроек требуется явное действие

Пример 3: Множественный выбор

Используйте флажок, если:

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

Выбор нескольких параметров флажками обеспечит лучший опыт использования

Пример 4: Неопределенное состояние

Используйте флажок, если:

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

Неопределенное состояние лучше всего показывать с помощью флажка

Пример 5: Ясное состояние

Используйте флажок, если:

• Существует вероятность путаницы с состоянием тумблера вкл/выкл. Иногда становится трудно понять, отображает переключатель состояние или действие.
• Нужно четко показать выбранное или невыбранное состояние. (Прим. пер. - Эта проблема может быть решена с помощью хорошего дизайна переключателя. Отображение доп. описания включения/выключения повысит ясность. У Microsoft есть хорошая идея: https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/toggles)

Иногда переключатель четко не показывает, является ли это состоянием или действием

Пример 6: Похожие элементы

Используйте флажок, если:

• Пользователю нужно выбрать опцию(и) из списка похожих элементов.

Для выбора из списка похожих элементов, используйте флажки

Используйте тумблер, если:

• Пользователь переключает независимые функции и режимы.

Для выбора из независимых элементов используют переключатели

Пример 7: Один вариант

Используйте флажок, если:

• Дается выбор да/нет.
• Только один вариант может быть выбран или отменен, и его смысл очевиден.

Вариант с да/нет более приемлем для флажка

Используйте тумблер, если:

• Нужен один выбор, и вы хотите предложить выбор включения/выключения.

Одиночный выбор вкл/выкл лучше всего дать с помощью переключателя

Заключение

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