Что такое радиобаттон в тестировании
Переключатели
Если у вас установлено приложение галереи элементов управления XAML, откройте его, чтобы увидеть элемент управления RadioButtons в действии.
Общие сведения о RadioButtons в WinUI
В элементе управления RadioButtons реализованы оптимизированные возможности доступа и навигации с помощью клавиатуры, чтобы опытные пользователи клавиатуры и люди с ограниченными возможностями могли легко и быстро перемещаться между вариантами.
Мы не только улучшили эти возможности, но и оптимизировали визуальный макет по умолчанию для отдельных переключателей в группе RadioButtons с помощью автоматизированных параметров для ориентации, расстояния и полей. Теперь вам не нужно указывать эти параметры, как раньше при использовании более примитивного элемента управления для группирования, такого как StackPanel или Grid.
Навигация по группе элементов RadioButtons
В элементе управления RadioButtons реализована специальная возможность навигации, благодаря которой пользователи с клавиатурой могут перемещаться по списку быстрее и проще.
Фокус клавиатуры
Элемент управления RadioButtons поддерживает два состояния:
В следующих разделах описывается поведение фокуса элемента управления в каждом состоянии.
Переключатель не выбран
Если переключатель не выбран, фокус устанавливается на первый переключатель в списке.
Элемент, на который переходит фокус из исходной позиции при навигации с помощью клавиши TAB, не будет выбран.
Список без фокуса, установленного с помощью клавиши TAB, и без выбранного элемента
Список с исходным фокусом, установленным с помощью клавиши TAB, и без выбранного элемента
Выбран один переключатель
Когда пользователь использует клавишу TAB в списке с выбранным переключателем, фокус устанавливается на этот переключатель.
Список без фокуса, установленного с помощью клавиши TAB
Список с исходным фокусом, установленным с помощью клавиши TAB
Навигация с помощью клавиатуры
Дополнительные сведения об общем поведении навигации при использовании клавиатуры см. в разделе Навигация руководства по взаимодействию с помощью клавиатуры.
Когда на элемент в группе RadioButtons установлен фокус, пользователь может использовать клавиши со стрелками для внутренней навигации между элементами в группе. Клавиши со стрелками вверх и вниз позволяют переходить между следующим и предыдущим логическими элементами согласно определению в разметке XAML. Клавиши со стрелками влево и вправо реализуют возможность пространственного перемещения.
Навигация в макетах с одним столбцом или строкой
В макете с одним столбцом или одной строкой навигация с помощью клавиатуры выполняется следующим образом:
Один столбец
Клавиши Стрелка вверх и стрелка вниз переходят между элементами. Клавиши Стрелка влево и стрелка вправо не выполняют никаких действий.
Единственная строка
Клавиши со стрелками влево и вверх позволяют перейти к предыдущему элементу, а клавиши со стрелками вправо и вниз — к следующему.
Навигация в макетах с несколькими столбцами или строками
В макете сетки с несколькими столбцами или строками навигация с помощью клавиатуры выполняется следующим образом.
Клавиши со стрелками влево и вправо
Клавиши со стрелками влево и вправо перемещают фокус по горизонтали между элементами в строке.
Когда фокус установлен на последнем элементе в столбце и нажата клавиша со стрелкой вправо или влево, фокус перемещается на последний элемент в следующем или предыдущем столбце (если они есть).
Клавиши со стрелками вверх и вниз
Клавиши со стрелками вверх и вниз перемещают фокус по вертикали между элементами в столбце.
Когда фокус находится на последнем элементе в столбце и нажата клавиша со стрелкой вниз, фокус перемещается на первый элемент в следующем столбце (если они есть). Когда фокус находится на первом элементе в столбце и нажата клавиша со стрелкой вверх, фокус перемещается на последний элемент в предыдущем столбце (если они есть).
Создание программы-оболочки
В группе RadioButtons нельзя переносить фокус с первых строки или столбца на последние строку или столбец, а также с последних строки или столбца на первые строку или столбец. Это связано с тем, что при использовании средства чтения с экрана теряется понятие границы и четкое определение начала и конца, что затрудняет для пользователей с ослабленным зрением навигацию по списку.
RadioButtons Элемент управления также не поддерживает перечисление, поскольку элемент управления должен содержать разумное число элементов (см. RadioButtons ).
Выбор элемента при наведении фокуса
Если для перехода по элементам в группе RadioButtons используется клавиатура, при перемещении фокуса с одного элемента на другой выбирается новый элемент в фокусе, а выбор элемента, который был в фокусе, отменяется.
Перед навигацией с помощью клавиатуры
Установка фокуса и выбор элемента перед навигацией с помощью клавиатуры.
После навигации с помощью клавиатуры
Установка фокуса и выбор элемента после навигации с помощью клавиатуры, когда при нажатии клавиши со стрелкой вниз фокус перемещается на переключатель 3, который выбирается, а выбор переключателя 2 отменяется.
Вы можете переместить фокус, не изменяя выделение, нажав клавишу CTRL и клавишу со стрелкой для перемещения. После перемещения фокуса можно использовать клавишу ПРОБЕЛ, чтобы выбрать элемент, на котором сейчас установлен фокус.
Навигация с помощью геймпада Xbox и пульта дистанционного управления
Если для навигации по переключателям вы используете игровой контроллер Xbox или пульт дистанционного управления, выбрать элемент при наведении фокуса нельзя, а для выбора переключателя с установленным фокусом необходимо нажать кнопку A.
Режим специальных возможностей
В следующей таблице описано, как экранный диктор работает с группой RadioButtons и что он при этом озвучивает. Это зависит от параметров озвучки информации экранным диктором, установленных пользователем.
Действие | Сообщение экранного диктора |
---|---|
Перемещение фокуса на выбранный элемент | имя, RadioButton, выбрано, x из N |
Перемещение фокуса на невыбранный элемент (Если переходить по клавишам Ctrl-стрелка или к игровому планшету Xbox, что означает, что выделение не находится за фокусом.) | имя, RadioButton, не выбрано, x из N |
Имя, которое экранный диктор озвучивает для каждого элемента, — это значение присоединенного свойства AutomationProperties.Name, если оно доступно для этого элемента. В противном случае это значение, возвращаемое методом ToString элемента.
x — это номер текущего элемента. N — это общее число элементов в группе.
Создание группы RadioButtons в WinUI
В рамках этого документа в XAML мы используем псевдоним muxc для всех API библиотеки пользовательского интерфейса Windows, которую мы добавили в проект. Мы добавили это в наш элемент Page :
В коде C# мы также используем псевдоним muxc для всех API библиотеки пользовательского интерфейса Windows, которую мы добавили в проект. Мы добавили эту инструкцию using в начало файла:
Здесь вы объявляете простой элемент управления RadioButtons с тремя вариантами. Свойство Header задано для присвоения метке группы, а свойство — для предоставления параметра по умолчанию.
Результат имеет следующий вид:
Чтобы активировать действие, когда пользователь выберет нужный вариант, используйте событие SelectionChanged. Здесь вы изменяете цвет фона элемента border с именем «ексамплебордер» ( ).
Состояния выбора
Содержание RadioButtons
В предыдущем примере вы заполнили элемент управления RadioButtons простыми строками. Элемент управления предоставляет переключатели и использует строки в качестве метки для каждого из них.
Но вы можете заполнить элемент управления RadioButtons любым объектом. Как правило, необходимо, чтобы объект предоставил строковое представление, которое может использоваться в качестве текстовой метки. В некоторых случаях вместо текста может оказаться уместным изображение.
Здесь элементы SymbolIcon используются для заполнения элемента управления.
Можно также использовать отдельные элементы управления RadioButton для заполнения элементов. Это особый случай, который мы обсудим позже. См. раздел Элементы управления RadioButton в группе RadioButtons.
Преимуществом использования любого объекта является возможность привязки элемента управления RadioButtons к пользовательскому типу в модели данных. Это показано в следующем разделе.
привязка данных,
Элементы управления RadioButton в группе RadioButtons
При использовании элементов управления RadioButton в группе RadioButtons элемент управления RadioButtons может представлять RadioButton таким образом, чтобы предотвратить двойное выполнение цикла выбора.
В этой таблице показаны связанные события и свойства для обоих элементов управления.
RadioButton | RadioButtons |
---|---|
Checked, Unchecked, Click | SelectionChanged |
IsChecked | SelectedItem, SelectedIndex |
Определение нескольких столбцов
По умолчанию элемент управления RadioButtons упорядочивает переключатели по вертикали в одном столбце. Можно задать свойство MaxColumns, чтобы элемент управления мог упорядочивать переключатели в нескольких столбцах. (При этом они располагаются в порядке, характерном для столбцов, когда элементы заполняются сверху вниз, а затем слева направо.)
Чтобы элементы были расположены в одной горизонтальной строке, установите для MaxColumns значение, равное числу элементов в группе.
Создание собственной группы RadioButton
Переключатели работают в группах. Отдельные элементы управления RadioButton можно сгруппировать одним из двух способов:
В этом примере первая группа переключателей неявно группируется путем размещения в одной панели стека. Вторая группа делится между двумя панелями стека, поэтому GroupName используется для явной группировки их в одну группу.
Эти две группы элементов управления RadioButton выглядят следующим образом:
Состояния переключателей
Варианты визуализации
На следующих изображениях показана предпочтительная величина интервалов между переключателями в группе.
Если используется элемент управления RadioButtons WinUI, то расстояния, поля и ориентация уже оптимизированы.
Рекомендации
Получение примера кода
Связанные темы
С помощью переключателей (или дополнительных кнопок) пользователи могут выбрать один вариант из двух взаимоисключающих, но связанных вариантов. Переключатели всегда используются в группах, и каждый вариант представлен одним переключателем в группе.
По умолчанию переключатели в группе RadioButtons не выбраны. То есть все переключатели очищены. При этом после выбора переключателя пользователь не может отменить выбор, чтобы восстановить исходное состояние группы.
В отличие от флажков, которые позволяют выбирать несколько вариантов, отменять выбор или выполнять очистку, переключатели поддерживают один тип поведения для всей группы RadioButtons.
Получение библиотеки пользовательского интерфейса Windows
Элемент управления RadioButtons является частью библиотеки пользовательского интерфейса Windows — пакета NuGet, который содержит новые элементы управления и компоненты пользовательского интерфейса для приложений Windows. Дополнительные сведения, включая инструкции по установке, см. в описании библиотеки пользовательского интерфейса Windows. |
RadioButtons и RadioButton
Создать группу переключателей можно двумя способами.
Выбор правильного элемента управления
С помощью переключателей пользователи могут выбирать один из нескольких взаимоисключающих вариантов.
Используйте переключатели, когда пользователям требуется просмотреть все варианты выбора. В переключателях все предлагаемые варианты выделены одинаково, это означает, что некоторые варианты могут привлекать больше внимания, чем нужно или хотелось бы.
Если же все варианты не заслуживают одинакового внимания, мы рекомендуем использовать другие элементы управления. Например, чтобы рекомендовать наилучший вариант параметра по умолчанию большинству пользователей и в большинстве ситуаций, лучше использовать поле со списком.
Если есть только два возможных варианта, из которых можно выбрать один, например, «Вкл.» и «Выкл.» или «Да» и «Нет», объедините их в один элемент управления: флажок или выключатель. Например, используйте единый флажок с надписью «Принимаю» вместо двух переключателей «Я принимаю» и «Я не принимаю».
Не используйте два переключателя для выбора одного варианта:
Вместо этого используйте флажок:
Когда пользователь может выбрать несколько вариантов, используйте вместо этого флажки.
Когда параметры пользователей находятся в диапазоне значений (например, 10, 20, 30. 100) используйте элемент управления ползунок.
При наличии более восьми вариантов, используйте поле со списком.
Если доступные варианты основаны на текущем контексте приложения или могут динамически варьироваться по другим причинам, используйте элемент управления «Список».
Как улучшить любой интерфейс: радиобаттоны
27 Дек 2013, 12:00, написал Максим Шайхалов в разделе «Интерфейс»
— радиобаттон, переключалка или радиокнопка. Кнопка, позволяющая выбрать один параметр из группы. Служит для уточнения параметров и отвечает на вопросы «что именно?», «какой именно?». В отличие от чекбоксов в группе радиобаттонов можно выбрать только один параметр, поэтому они довольно часто используются для опросов.
Правила при использовании радиобаттонов
Многие правила в использовании радиобаттонов схожи с использованием чекбоксов. Однако есть существенные отличия и правила свойственные только радиокнопкам.
1. Не размещайте радиобаттоны по горизонтали.
Верхний пример ощутимо лучше. Радиокнопки должны идти в столбик потому что их нельзя отрывать друг от друга. Тоже самое касается и чекбоксов. Исключением может быть разве что группа кнопок, ведущая себя как радиобаттоны. Но об этом далее.
2. Радиобаттоны должны быть группой.
Из предыдущего примера становится понятно, что радиобаттоны должны идти группой и их нельзя отрывать друг от друга. Группа радиобаттонов — это один цельный элемент. Именно поэтому переключение радиокнопок происходит внутри всей группы.
3. Увеличивайте рабочую область
Эта проблема роднит радиобаттоны с чекбоксами. У них обоих слишком маленькая область для клика. Можно использовать те же приемы что и для чекбоксов: превратить радиобаттон в кнопку, добавить псевдоссылку.
В бинарном состоянии, когда выбор состоит из двух пунктов (например, выбор между пунктами «Самовывоз» и «Доставка курьером» в интернет-магазине) радиобаттон можно превратить в переключатель.
4. Выбирайте по умолчанию самый популярный вариант
Радиобаттон не может существовать в неопределенном состоянии. Всегда должен быть выбран какой-то вариант. В этом случае разумно выбирать самый популярный вариант как вариант «по умолчанию».
Если выбор не очевиден, как например, в выборе пола, то стоит добавлять пункт «выбора без выбора». Так я называю радиобаттон, который служит для того, чтобы показать что выбор пока что не сделан. Но тем не менее всегда нужно помнить о том для кого мы делаем интерфейс: на сайте для будущих мам можно устанавливать женский пол полом «по умолчанию». Тогда как на новостном сайте такой выбор будет попахивать дискриминацией.
Серия статей об улучшении интерфейса:
Ждите следующую статью уже в новом году! Подписывайтесь на блог, чтобы не пропустить. Всем клевых праздников!
Также по теме:
5 комментариев
Как по мне радиобаттоны на обычном сайте нужно использовать только при создании опросов, продумывая каждый пункт. Чтобы их названия не пересекались по смыслу и человек мог с легкой душой выбрать один пункт. Прежде, чем использовать их на сайте – необходимо продумать названия
Их использование на страницах описания товаров в интернет-магазинах очень полезно (понравился вариант превращение в переключатель), так как позволяет максимум инфо сосредоточить на маленьком площади экрана. Перед использованием радиобаттонов, нужно все тщательно обдумать.
Спасибо за обзор. Буду рекомендовать своим знакомым)
Хотелось бы добавить, что если у вас остался вопрос, использовать при фильтрации определенного параметра радиобаттоны или чекбоксы, вам следует задать себе вопрос «правда ли вашему пользователю нужно получать результаты, соответствующие нескольким значениям одновременно?». Если вы отверстие себе да, то скорее всего вам нужны чекбоксы.
Исключением является только ситуация когда пользователя может интересовать вариант, в котором пересекаются все значения (как в примере с полом и значением «не важно»).
Т.е. если вам, к примеру, нужно 3 из 18 значений, то однозначно чекбоксы.
И ещё один хак, который я использую — если есть 2 значения, но одно из них важно пользователю, а второе нго просить отрицает, я заменяю радиобаттоны на чекбоксы. Например, вместо радиобаттанов «со скидкой, без скидки, неважно» я оставляю чееюокс «показывать только товары со скидками».
Думаю, что блок кнопок гораздо удобнее всех остальных вариантов. Мы же можем иметь дело с совсем-совсем непродвинутыми юзерами, которые могут не догадаться о назначении и правильном использовании радиокнопок. Кстати, очень понравилось замечание о гендерной особенности. Действительно, многие дамы могут посчитать автоматический выбор пола как личное оскорбление.
Радиокнопки RadioGroup
Группа радиокнопок используется для выбора одного значения из нескольких.
Радиокнопки (от англ. radiobutton) получили свое название от кнопок в старых радиоприемниках: нажатие на кнопку включало определенную частоту, остальные кнопки отскакивали вверх. Визуально такие кнопки были больше похоже на переключатель, но, почему-то среди дизайнеров такое название не прижилось.
Тем не менее при общении с пользователями мы говорим не «радиокнопка», а «переключатель», см. Глоссарий
Когда использовать
Группу радиокнопок используют, когда вариантов выбора немного — 2–5.
Если названия вариантов короткие, вместо группы радиокнопок можно использовать переключатель, так форма будет выглядеть компактнее:
Если значений 5–25, используйте раскрывающийся список.
Если 25–50, то комбобокс со списком, а если больше 50, то без списка.
Описание работы
Клик по названию или по самой радиокнопке приводит к ее выбору. Повторное нажатие не снимает выбор.
В группе радиокнопок только один пункт может быть выбран. Группа радиокнопок не может состоять из 1 пункта.
Если группа радиокнопок используется для настройки параметров и показывает текущее состояние системы, одна из радиокнопок всегда выбрана. Так видно, в каком состоянии система находится по умолчанию. При желании пользователь может вернуть настройку в исходное состояние.
Выбранный по умолчанию пункт ставьте первым в списке:
Если группа радиокнопок нужна для сообщения каких-то сведений, то по умолчанию может быть не выбран ни один из пунктов:
Название группы
Название группы радиокнопок пишут с заглавной буквы и формулируют так, чтобы:
Название радиокнопки
Название радиокнопки пишется с заглавной буквы, и отвечает на вопрос «Как?» или «Какой?».
Если пользователю может быть не очевидно, что произойдет при выборе, объясните это дополнительным текстом или картинкой:
Расположение
Радиокнопки располагают в строку, только если их 2 штуки. Если больше — только в столбец. Не располагайте радиокнопки из одной группы в несколько столбцов. Группы радиокнопок смешиваются, и непонятно, к какой группе относится конкретная радиокнопка:
Работа с клавиатурой
Если до получения фокуса ни одно значение не выбрано, фокус получает первая кнопка в списке.
Рамка фокуса появляется только при переходе табом с клавиатуры. При клике мышью рамка не появляется.
С переходом фокуса на новое значение в радиогруппе, значение которое в фокусе становится выбранным.
Следующее нажатие клавиши Tab переводит фокус на следющий контрол.
Валидация
Варианты, которые нельзя выбрать в списке радиокнопок, должны быть заблокированы. Валидация может быть только в том случае, если обязательно выбрать хотя бы один вариант.
Если заголовок группы находится слева, текст валидации располагайте под группой радиокнопок.
Если заголовок группы находится над группой радиокнопок, текст ошибки располагайте сразу под заголовком группы:
Если для валидации вы используете тултипы, поведение подсказок будет иным. Тултип отображается при наведении на группу радиокнопок. Если заголовок группы расположен слева — выводите тултип сверху.
Если заголовок сверху, выводите тултип справа.
Когда отсутствие выбора в группе радиокнопок не является ошибкой, но скорее всего пользователь пропустил этот выбор — предупреждайте пользователя об этом:
Дизайн
Название группы выравнивайте по базовой линии первого пункта:
UX-дизайн Radio buttons
Radio buttons – одни из важнейших элементов форм. Они используются, когда есть список двух или более взаимоисключаемых опций, из которых пользователь должен выбрать что-то одно. Другими словами, если кликнуть на невыбранный пункт, то выделение с ранее выбранного варианта снимется.
Пример radio buttons
Radio buttons классно работают при корректном использовании – они защищают пользователей от введения ошибочных данных, так как дают выбирать только среди корректных вариантов. В них есть много интересных возможностей, таких как навигация с помощью клавиатуры, стабильный кросс-платформенный рендеринг. В этом посте мы рассмотрим практические советы по использованию radio buttons на основе тестирования юзабилити.
Как radio buttons вошли в обиход?
Radio buttons были названы в честь физических кнопок, используемых на старых автомобильных радиоприемниках для смены станций – когда нажата одна кнопка, остальные отжаты, так что только нажатая остается “активной”. Программная radio button была смоделирована по образу и подобию физических.
Нажать можно только одну кнопку за раз. Источник: Tumblr
Лучшие советы по использованию radio buttons
Используйте radio buttons только для настроек
Используйте radio buttons для замены настроек, а не как кнопки действий для выполнения команд. Также измененные настройки не должны вступать в силу, пока пользователь не нажмет командную кнопку (обозначенной как “Продолжить” или “Сохранить”, например). Если пользователь кликает кнопки Назад или Отмена, изменения, сделанные с помощью radio buttons на странице должны быть изменены, и восстановлены исходные настройки.
Если radio buttons используются только для влияния на то, как выполняется команда, часто вместо этого лучше презентовать варианты команды. Так вы позволите пользователю выбрать нужную команду в одно действие.
Кнопочный ввод позволяет сделать выбор в одно касание. Источник: LukeW
Логический порядок опций
Вы должны располагать варианты в логическом порядке, например, от наиболее вероятного выбора до наименее вероятного, от простейших операций к самым сложным, или от меньшего риска к большему. Алфавитный порядок не рекомендуется, потому что он зависит от языка, поэтому такой порядок не локализуем.
Опции должны быть исчерпывающими и четко отличающимися друг от друга
Самые большие проблемы в юзабилити radio buttons начинаются с неопределенных, расплывчатых надписей, или описаний, которые невозможно понять среднестатистическому пользователю. Контекстные подсказки могут облегчить жизнь пользователю, но все равно лучше сначала протестировать любой важный набор опций на пользователях.
Всегда предлагайте выбор по умолчанию
Одна из 10 эвристик UI-дизайна гласит, что пользователи должны иметь возможность отменить (и повторить) свои действия. Это означает, что нужно позволять людям менять элемент управления на его первоначальное состояние. Это означает, что в radio button всегда должен быть минимум один вариант, выбранный по умолчанию. Выберите самый безопасный (без потери данных или доступа в систему) вариант, самую безопасную опцию. Если безопасность роли не играет, выберите самую вероятную или самую удобную опцию.
Если пользователям понадобится воздержаться от выбора, вы должны предоставить радикнопку для такого варианта, например, с надписью “None.” Предложить пользователям точную, нейтральную опцию – гораздо лучше, чем неявно намекать на возможность не выбрать ни один вариант из списка.
Старайтесь располагать ваши списки вертикально
Горизонтальные radio buttons иногда сложно сканировать и локализировать. Горизонтальное расположение radio buttons также может вызвать сложности с определениям, какая надпись какой кнопке соответствует: надпись над кнопкой или под ней. Вертикальное позиционирование безопаснее.
Постарайтесь располагать списки выборов вертикально, по одному выбору на строку. Если вам все же необходим горизонтальный макет с несколькими опциями на строку, обязательно добавьте интервалы между кнопками и надписями, чтобы было полностью понятно, какая кнопка какой надписи соответствует. Например, вы должны избегать ситуации, при которой сложно понять, на какую кнопку стоит кликнуть, чтобы выбрать вариант четыре.
Плохо: горизонтальные radio buttons.
Используйте теги с надписями как область касания или клика
Radio buttons крошечные по своей природе, и поэтому, по закону Фиттса, их трудно кликнуть или коснуться пальцем. Чтобы увеличить область касания, позвольте пользователю выбрать опцию, кликая или касаясь не только саму кнопку, а и надпись, которая к ней привязана. Пусть пользователи смогут выбрать опцию, кликнув на саму кнопку или на ее надпись.
Слева: кликнуть можно только крошечную область кнопки. Справа: Огромная область клика.
Вы можете увидеть хороший пример горизонтальных radio buttons в приложении Duolingo: они используют классические горизонтальные radio buttons, но сделали области касания визуально отличными друг от друга, и достаточно большими для сенсорного управления.
Хорошо: горизонтальные radio buttons
Используйте radio buttons вместо дроп-даунов.
По возможности, используйте radio buttons вместо выпадающих меню. Radio buttons дают меньшую когнитивную нагрузку, потому что все опции находятся перед пользователем, и их легко сравнить.
Когда на выбор дается менее 7 опций, вы должны использовать radio buttons. Ваши пользователи смогут тут же просмотреть все свои варианты действий без каких-либо манипуляций.
Слева: Пол в выпадающем списке. Справа: выбор пола с помощью radio buttons
Избегайте вложений
Избегайте вложенных radio buttons или чекбоксов. Вы должны располагать все опции на одном уровне, чтобы не сбивать пользователя с толку.
Использование вложенных опций добавляет ненужных сложностей
Используйте анимацию и визуальный отклик
Хорошо прорисованные анимации добавляют удобства интерфейсу. Элементы интерфейса, такие как radio buttons, должны выглядеть осязаемыми, даже если они находятся за слоем стекла. Визуальные подсказки немедленно подтверждают выбор и вносят ясность в действия пользователя с помощью видимой реакции.
Используйте анимацию
Может, лучше использовать чекбокс?
Если есть всего два варианта на выбор, лучше используйте чекбокс. Тем не менее, чекбоксы подходят только для включения/выключения единичной опции, а radio buttons можно использовать для совершенно других альтернатив.
Чекбокс. Источник: Material Design
Вы должны помнить следующее, если оба варианта возможны:
Альтернативы. Используйте radio buttons, если смысл невыбранного чекбокса не до конца понятен. В примере ниже выборы противоположны, так что лучше для этой опции использовать radio buttons.
Выберите ориентацию для документа (Ландшафтная или портретная)
Помощник. Вы должны использовать radio buttons на страницах помощника, чтобы внести ясность в альтернативы, даже если чекбокс тоже приемлем. Дизайны с кликнутой по умолчанию radio buttons дают пользователю твердое предложение выбора. Выбор по умолчанию поможет пользователю сделать наилучший выбор, увеличив их уверенность в процессе выбора.
Если опция настоятельно рекомендуется, добавьте к надписи “(recommended)”. Источник: Dropbox
Простые ответы Да и Нет. Использование чекбокса имеет смысл, когда у вас есть один простой вопрос, и пользователю нужно ответить “да” или “нет”.
Простой вопрос можно задать в форме чекбокса
Заключение
Когда вы создаете radio buttons, очень важно следовать стандартам дизайна, потому что это повышает способность пользователя предугадывать, что случится после выбора той или иной опции, и как с ними работать. В то же время, неследование стандартам делает интерфейс нестабильным – как будто что-то может произойти без предупреждения.
Создавайте свои дизайны с заботой. Radio buttons легко тестировать на бумажных прототипах, так что вам не понадобится ничего реализовывать, чтобы проверить, понимают ли пользователи, как использовать ваше решение.