Оксана Киселёва написала о чекбоксах и радиокнопках.
— Радиокнопки используют для списков из двух и более взаимоисключающих вариантов, когда можно выбрать только один;
— Чекбоксы — когда можно выбрать несколько вариантов или не выбрать ни одного;
— Списки вариантов располагайте вертикально, так их легче просматривать;
— Текстовую подпись размещайте рядом с селектором (квадратным у чекбокса, круглым у радиокнопки), так понятнее, к чему она относится;
— Избегайте отрицания в подписи (если вы, конечно, не адепт тёмных паттернов): «Не присылать оповещения» → «Присылать оповещения». Иногда группа из 2 радиокнопок может быть понятнее одного чекбокса;
— В группе радиокнопок один из вариантов должен быть выбран по умолчанию;
— Нажатие и на селектор и на подпись должно приводить к выбору варианта;
— Нажатие на чекбокс или радиокнопку должно приводить к выбору варианта, а не выполнению действия (для действий используют кнопки);
— Сделанный с помощью чекбоксов и радиокнопок выбор сохраняйте не автоматически, а после подтверждения пользователем (нажатие на кнопку «Сохранить» или «Применить»).
#checkbox #radio_button
— Радиокнопки используют для списков из двух и более взаимоисключающих вариантов, когда можно выбрать только один;
— Чекбоксы — когда можно выбрать несколько вариантов или не выбрать ни одного;
— Списки вариантов располагайте вертикально, так их легче просматривать;
— Текстовую подпись размещайте рядом с селектором (квадратным у чекбокса, круглым у радиокнопки), так понятнее, к чему она относится;
— Избегайте отрицания в подписи (если вы, конечно, не адепт тёмных паттернов): «Не присылать оповещения» → «Присылать оповещения». Иногда группа из 2 радиокнопок может быть понятнее одного чекбокса;
— В группе радиокнопок один из вариантов должен быть выбран по умолчанию;
— Нажатие и на селектор и на подпись должно приводить к выбору варианта;
— Нажатие на чекбокс или радиокнопку должно приводить к выбору варианта, а не выполнению действия (для действий используют кнопки);
— Сделанный с помощью чекбоксов и радиокнопок выбор сохраняйте не автоматически, а после подтверждения пользователем (нажатие на кнопку «Сохранить» или «Применить»).
#checkbox #radio_button
UXPUB 🇺🇦 Дизайн-спільнота
Radio buttons и checkboxes. Что важно знать?
Некоторые дизайнеры делают ошибки используя чекбоксы вместо радио кнопок и наоборот. И не все...
Никита Прокопов написал о круглых чекбоксах [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
Якоб Нильсен ещё в 2004 году написал об использовании чекбоксов и радиокнопок.
— Радиокнопки нужны для выбора из двух и более взаимоисключаемых вариантов. Чекбоксы позволяют выбрать несколько вариантов или не выбрать ни одного;
— Одиночный чекбокс подписывайте так, чтобы было понятно, что будет, когда он выбран (опция включена) и не выбран (опция выключена). Если не выходит, замените его двумя радиокнопками с понятным описанием обоих вариантов;
— В группе радиокнопок один из вариантов всегда должен быть выбран. Если нужна возможность воздержаться от выбора, добавьте такой вариант в группу;
— Чтобы не заставлять пользователя целиться в графическую часть чекбокса (квадрат) или радиокнопки (круг), текстовую подпись тоже делайте кликабельной;
— Чекбоксы и радиокнопки не должны становиться кнопками и запускать различные действия. Используйте их для настроек, которые будут применены после сохранения формы. (Примечание: кажется довольно удобным применять фильтры сразу при нажатии на чекбоксы в интернет-магазинах, хоть это и противоречит рекомендации).
In English. #checkbox #radio_button
— Радиокнопки нужны для выбора из двух и более взаимоисключаемых вариантов. Чекбоксы позволяют выбрать несколько вариантов или не выбрать ни одного;
— Одиночный чекбокс подписывайте так, чтобы было понятно, что будет, когда он выбран (опция включена) и не выбран (опция выключена). Если не выходит, замените его двумя радиокнопками с понятным описанием обоих вариантов;
— В группе радиокнопок один из вариантов всегда должен быть выбран. Если нужна возможность воздержаться от выбора, добавьте такой вариант в группу;
— Чтобы не заставлять пользователя целиться в графическую часть чекбокса (квадрат) или радиокнопки (круг), текстовую подпись тоже делайте кликабельной;
— Чекбоксы и радиокнопки не должны становиться кнопками и запускать различные действия. Используйте их для настроек, которые будут применены после сохранения формы. (Примечание: кажется довольно удобным применять фильтры сразу при нажатии на чекбоксы в интернет-магазинах, хоть это и противоречит рекомендации).
In English. #checkbox #radio_button
vc.ru
Чекбоксы или радиокнопки? — Дизайн на vc.ru
Anatoly Des Дизайн 13.11.2024
Илья Бирман написал о радиокнопках. Можно дополнить статью Якоба Нильсена 2004 года советом 2025 года.
— Классический вид радиогруппы — список подписей с кругами слева, где выбранный вариант обозначен залитым кружком внутри круга;
— Обычно у группы есть общая подпись, помогающая понять, что именно выбирается радиокнопками;
— В качестве подписей радиокнопок не используют «Да» и «Нет», «Вкл.» и «Выкл.» и подобные пары — здесь лучше подходит чекбокс;
— Не стоит располагать их в строку, так как можно перепутать, к каким кружкам какие подписи относятся. В таких случаях лучше подойдут переключатели или раскрывающиеся списки;
— Если ваши радиокнопки действуют мгновенно, без нажатия на кнопку подтверждения, убедитесь, что действия обратимы и что кнопки не запускают процессы (даже обратимые);
— Обычно первым располагают основной вариант, но если список образует логичную последовательность, её не ломают, а по умолчанию выбирают основной вариант;
— В радиогруппе один из вариантов всегда должен быть выбран. Но иногда нежелательно показывать вариант по умолчанию (например, в тестах, исследованиях, при выборе пола). В таких случаях добавляют вариант «Не выбрано»;
— Либо можно отступить от классической реализации и не выбирать ни один из вариантов по умолчанию. В этом случае для возвращения к исходному состоянию после выбора одного из вариантов потребуется кнопка «Сбросить».
#radio_button
— Классический вид радиогруппы — список подписей с кругами слева, где выбранный вариант обозначен залитым кружком внутри круга;
— Обычно у группы есть общая подпись, помогающая понять, что именно выбирается радиокнопками;
— В качестве подписей радиокнопок не используют «Да» и «Нет», «Вкл.» и «Выкл.» и подобные пары — здесь лучше подходит чекбокс;
— Не стоит располагать их в строку, так как можно перепутать, к каким кружкам какие подписи относятся. В таких случаях лучше подойдут переключатели или раскрывающиеся списки;
— Если ваши радиокнопки действуют мгновенно, без нажатия на кнопку подтверждения, убедитесь, что действия обратимы и что кнопки не запускают процессы (даже обратимые);
— Обычно первым располагают основной вариант, но если список образует логичную последовательность, её не ломают, а по умолчанию выбирают основной вариант;
— В радиогруппе один из вариантов всегда должен быть выбран. Но иногда нежелательно показывать вариант по умолчанию (например, в тестах, исследованиях, при выборе пола). В таких случаях добавляют вариант «Не выбрано»;
— Либо можно отступить от классической реализации и не выбирать ни один из вариантов по умолчанию. В этом случае для возвращения к исходному состоянию после выбора одного из вариантов потребуется кнопка «Сбросить».
#radio_button
Бюро Горбунова
Расскажите о радиокнопках
Расскажите о радиокнопках