Николай Бабич написал, что такое чекбоксы и переключатели, как их правильно использовать и чем они друг от друга отличаются.
«Когда пользователь взаимодействует с чекбоксами (например, заполняя какую-то форму), он не ждёт мгновенной обратной связи. Изменения произойдут потом, когда он нажмёт „Сохранить“ или „Отправить“.
С переключателями всё наоборот. Когда пользователь двигает переключатель, он ожидает немедленных изменений. Мы привыкли к этому в реальной жизни: когда щёлкаешь выключателем, сразу загорается свет».
In English. #checkbox #toggle
«Когда пользователь взаимодействует с чекбоксами (например, заполняя какую-то форму), он не ждёт мгновенной обратной связи. Изменения произойдут потом, когда он нажмёт „Сохранить“ или „Отправить“.
С переключателями всё наоборот. Когда пользователь двигает переключатель, он ожидает немедленных изменений. Мы привыкли к этому в реальной жизни: когда щёлкаешь выключателем, сразу загорается свет».
In English. #checkbox #toggle
Продуктовый дизайн (UX/UI), брендинг и аналитика
Когда использовать чекбокс, а когда переключатель - Продуктовый дизайн (UX/UI), брендинг и аналитика
Переключатели предназначены для моментальных действий. Чекбоксы требуют нажатия кнопки. Почему так? Читайте в этой статье.
Оксана Киселёва написала о чекбоксах и радиокнопках.
— Радиокнопки используют для списков из двух и более взаимоисключающих вариантов, когда можно выбрать только один;
— Чекбоксы — когда можно выбрать несколько вариантов или не выбрать ни одного;
— Списки вариантов располагайте вертикально, так их легче просматривать;
— Текстовую подпись размещайте рядом с селектором (квадратным у чекбокса, круглым у радиокнопки), так понятнее, к чему она относится;
— Избегайте отрицания в подписи (если вы, конечно, не адепт тёмных паттернов): «Не присылать оповещения» → «Присылать оповещения». Иногда группа из 2 радиокнопок может быть понятнее одного чекбокса;
— В группе радиокнопок один из вариантов должен быть выбран по умолчанию;
— Нажатие и на селектор и на подпись должно приводить к выбору варианта;
— Нажатие на чекбокс или радиокнопку должно приводить к выбору варианта, а не выполнению действия (для действий используют кнопки);
— Сделанный с помощью чекбоксов и радиокнопок выбор сохраняйте не автоматически, а после подтверждения пользователем (нажатие на кнопку «Сохранить» или «Применить»).
#checkbox #radio_button
— Радиокнопки используют для списков из двух и более взаимоисключающих вариантов, когда можно выбрать только один;
— Чекбоксы — когда можно выбрать несколько вариантов или не выбрать ни одного;
— Списки вариантов располагайте вертикально, так их легче просматривать;
— Текстовую подпись размещайте рядом с селектором (квадратным у чекбокса, круглым у радиокнопки), так понятнее, к чему она относится;
— Избегайте отрицания в подписи (если вы, конечно, не адепт тёмных паттернов): «Не присылать оповещения» → «Присылать оповещения». Иногда группа из 2 радиокнопок может быть понятнее одного чекбокса;
— В группе радиокнопок один из вариантов должен быть выбран по умолчанию;
— Нажатие и на селектор и на подпись должно приводить к выбору варианта;
— Нажатие на чекбокс или радиокнопку должно приводить к выбору варианта, а не выполнению действия (для действий используют кнопки);
— Сделанный с помощью чекбоксов и радиокнопок выбор сохраняйте не автоматически, а после подтверждения пользователем (нажатие на кнопку «Сохранить» или «Применить»).
#checkbox #radio_button
UXPUB 🇺🇦 Дизайн-спільнота
Radio buttons и checkboxes. Что важно знать?
Некоторые дизайнеры делают ошибки используя чекбоксы вместо радио кнопок и наоборот. И не все...
Саадия Минхас написала о чекбоксах и переключателях.
— У чекбокса есть 3 состояния: выбран, не выбран, частично выбран (бывает у родительского чекбокса, у которого часть дочерних чекбоксов выбрана, а часть — нет);
— У переключателя 2 состояния: включено, выключено;
— При этом нажатие на переключатель — это одновременно и выбор опции и её включение или выключение. За включение или выключение опций, выбранных с помощью чекбоксов, обычно отвечает отдельный элемент управления (вроде кнопки сохранения);
— Используйте переключатель, если пользователь ожидает мгновенной реакции на свой выбор, результатом будет включение или выключение чего-либо, действие не нуждается в проверке или подтверждении;
— Используйте чекбоксы, если есть родительские и дочерние опции, которые можно выбирать произвольно;
— А также если надо выбрать между опциями «да» или «нет» (согласие пользователя с условиями предоставления услуг).
In English. #checkbox #toggle
— У чекбокса есть 3 состояния: выбран, не выбран, частично выбран (бывает у родительского чекбокса, у которого часть дочерних чекбоксов выбрана, а часть — нет);
— У переключателя 2 состояния: включено, выключено;
— При этом нажатие на переключатель — это одновременно и выбор опции и её включение или выключение. За включение или выключение опций, выбранных с помощью чекбоксов, обычно отвечает отдельный элемент управления (вроде кнопки сохранения);
— Используйте переключатель, если пользователь ожидает мгновенной реакции на свой выбор, результатом будет включение или выключение чего-либо, действие не нуждается в проверке или подтверждении;
— Используйте чекбоксы, если есть родительские и дочерние опции, которые можно выбирать произвольно;
— А также если надо выбрать между опциями «да» или «нет» (согласие пользователя с условиями предоставления услуг).
In English. #checkbox #toggle
vc.ru
Чекбокс или переключатель: что выбрать UX-дизайнеру при создании форм выбора — Дизайн на vc.ru
Перевод статьи UX-дизайнера Садии Минхас.
Никита Прокопов написал о круглых чекбоксах [In English].
— Чекбоксы от радиокнопок отличаются тем, что они квадратные, внутри отображается галочка, когда чекбокс выбран, можно выбрать любое количество чекбоксов в группе. Радиокнопку в группе можно выбрать только одну;
— В ранних версиях операционных систем (Mac OS 7.5, 1994 год и Windows for Workgroups 3.11, 1993 год) можно встретить крестики вместо галочек;
— Но форма радиокнопок и чекбоксов отличалась уже в 90-х, и операционные системы придерживались этого правила;
— В последнее время в вебе можно было встретить радиокнопки с галочками (Twitter), а также квадратные радиокнопки с галочками (Yandex Maps);
— Веб всегда был пластичнее, но подобное стало встречаться и в нативных приложениях (Telegram for macOS);
— В некоторых продуктах (Yandex Maps, опросы в Telegram Web) рядом можно встретить радиогруппу и группу чекбоксов, которые работают по-разному (чекбоксов можно выбрать несколько), но визуально вообще никак не отличаются;
— Создатели операционных систем до сих пор придерживались изначальной концепции, но теперь в библиотеке Apple для visionOS появились круглые чекбоксы. Видимо, стройной концепции с круглыми радиокнопками и квадратными чекбоксами пришёл конец.
#radio_button #checkbox
— Чекбоксы от радиокнопок отличаются тем, что они квадратные, внутри отображается галочка, когда чекбокс выбран, можно выбрать любое количество чекбоксов в группе. Радиокнопку в группе можно выбрать только одну;
— В ранних версиях операционных систем (Mac OS 7.5, 1994 год и Windows for Workgroups 3.11, 1993 год) можно встретить крестики вместо галочек;
— Но форма радиокнопок и чекбоксов отличалась уже в 90-х, и операционные системы придерживались этого правила;
— В последнее время в вебе можно было встретить радиокнопки с галочками (Twitter), а также квадратные радиокнопки с галочками (Yandex Maps);
— Веб всегда был пластичнее, но подобное стало встречаться и в нативных приложениях (Telegram for macOS);
— В некоторых продуктах (Yandex Maps, опросы в Telegram Web) рядом можно встретить радиогруппу и группу чекбоксов, которые работают по-разному (чекбоксов можно выбрать несколько), но визуально вообще никак не отличаются;
— Создатели операционных систем до сих пор придерживались изначальной концепции, но теперь в библиотеке Apple для visionOS появились круглые чекбоксы. Видимо, стройной концепции с круглыми радиокнопками и квадратными чекбоксами пришёл конец.
#radio_button #checkbox
tonsky.me
In Loving Memory of Square Checkbox
History of checkboxes and radio buttons in user interfaces