Что такое радиобаттон в тестировании
Перейти к содержимому

Что такое радиобаттон в тестировании

  • автор:

Общие сведения об элементе управления RadioButton (Windows Forms)

Элементы управления RadioButton Windows Forms представляют набор из двух или более взаимоисключающих вариантов для выбора пользователем. Переключатели и флажки функционируют похожим образом, но существует важное различие: когда пользователь выбирает переключатель, он не может выбрать и другие переключатели в той же группе. В отличие от этого, можно выбрать любое количество флажков. Определение группы переключателей сообщает пользователю: «Вот набор вариантов, из которых можно выбрать один и только один».

Использование элемента управления

При щелчке элемента управления RadioButton для его свойства Checked устанавливается значение true и вызывается обработчик событий Click. При изменении значения свойства Checked возникает событие CheckedChanged. Если для свойства AutoCheck задано значение true (по умолчанию), при выборе переключателя все остальные элементы в группе автоматически очищаются. Обычно для этого свойства задается значение false только в том случае, если используется код проверки, чтобы убедиться, что выбранный переключатель является допустимым вариантом. Текст, отображаемый в элементе управления, задается свойством Text и может содержать сочетания клавиш доступа. Благодаря клавишам доступа пользователь может «щелкнуть» элемент управления, нажав клавишу ALT с клавишей доступа. Дополнительные сведения см. в разделах Практическое руководство. Определение клавиш доступа для элементов управления Windows Forms и Практическое руководство. Определение текста, отображаемого элементом управления Windows Forms.

Элемент управления RadioButton может отображаться как кнопка команды. При выборе этого элемента управления он может выглядеть как нажатая кнопка, если для свойства Appearance задано значение Button. Переключатели также могут демонстрировать изображения с помощью свойств Image и ImageList. Дополнительные сведения см. в разделе Практическое руководство. Определение изображения, отображаемого элементом управления Windows Forms.

См. также

  • RadioButton
  • Общие сведения об элементе управления Panel
  • Общие сведения об элементе управления GroupBox
  • Общие сведения об элементе управления CheckBox
  • Практическое руководство. Определение клавиш доступа для элементов управления Windows Forms
  • Практическое руководство. Определение текста, отображаемого элементом управления Windows Forms
  • Практическое руководство. Создание переключателя для выбора одной из нескольких установок на базе элементов управления RadioButton в Windows Forms
  • Элемент управления RadioButton

Совместная работа с нами на GitHub

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

Radio buttons и checkboxes. Что важно знать?

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

Когда использовать элементы?

Radio buttons (радио кнопки) используются, когда есть список из 2 и более взаимоисключающих вариантов. Пользователь может выбрать только один вариант из предложенных. Когда пользователь выберет другой вариант, это приведёт к отмене варианта, который был выбран до этого действия. Checkboxes (чекбоксы) используются, когда из списка параметров можно выбрать множетсво вариантов, один или ноль. Когда пользователь выберет ещё один вариант, это не приведёт
к отмене другого варинта.

Как выглядят элементы?

Радио кнопки — небольшой круг, при выборе которого внутри появляется сплошной круг.
Checkboxes (чекбоксы) — небольшой квадрат, отмеченный галочкой при выборе.

Radio buttons, checkboxes и другие виды селекторов

Выбери меня! Выбери меня! Нет, выбери меня! В сегодняшней статье мы рассмотрим селекторы и чем они различаются. В отличие от большинства других моих статей, основное внимание будет уделено двум компонентам (радиокнопкам (radio buttons) и флажкам (checkboxes), а также их сравнению с парой других селекторов. Читайте также: Советы по дизайну селекторов (checkboxes, radio buttons, switches и тд.)

1. Что такое селекторы

Селектор (selector) – это поле ввода, в котором пользователь должен выбрать один (или несколько) параметров, в отличие от текстового поля, в котором пользователь имеет полную свободу действий. Селекторы, как прически Lady Gaga, бывают разных форм и стилей. Выпадающие списки, флажки, переключатели, ползунки и т.д. – это разные типы селекторов, но они не похожи друг на друга. Основное функциональное различие между этими типами селекторов состоит в том, сколько вариантов пользователь может выбрать: один или несколько. В идеальном мире, где нет голода, браконьерства, парниковых газов или преступлений, я бы ходатайствовала об изменении названия радиокнопок на «одиночные селекторы», а флажков на «мультиселекторы». Я думаю, что подобные названия намного лучше описывают их функциональность, но, увы, эти устаревшие названия слишком укоренились, и, вероятно, останутся с нами навсегда.

2. Анатомия флажков и радиокнопок

Хотя, в этой статье мы рассмотрим различные типы селекторов, мы сосредоточимся на радиокнопках (radio buttons) и флажках (checkboxes). Ниже их анатомия. Анатомия радиокнопок и флажков Примечание: Иногда люди говорят «radio button»/ «checkbox», когда имеют ввиду метку и селектор вместе, в то время, как в других случаях они подразумевают только селектор. Я предпочитаю последний вариант.

3. В чем разница между радиокнопками и флажками

  1. 1
  2. 3
  3. Неограниченное кол-во
  4. 0

2) Какова форма селектора радиокнопки?

  1. Квадрат
  2. Круг
  3. Шестиугольник
  4. Треугольник

3) Если вы хотите создать интерфейс, в котором пользователь сможет выбрать несколько начинок для мороженого, вы должны использовать:

4) Если вы хотите создать интерфейс, в котором пользователь может выбрать тип банковского счета, который он может открыть, вы должны использовать:

5) Если бы вы хотели создать селектор «Подписаться на рассылку», какой тип вы бы использовали?

6) Выберите на картинке ниже вариант с радиокнопкой.

ОТВЕТЫ:
1): 3. Неограниченное кол-во

4): 1. Радиокнопки

Вы справились! (Надеюсь).

4. Распространенные стили селекторов

Ниже представлен ряд распространенных стилей флажков и радиокнопок, с которыми вы можете столкнуться в Интернете.

Стандартный стиль (радиокнопки / флажки)

Самый стандартный стиль флажков и радиокнопок – это кнопки с «галочками» или заполненные кружки. Я предпочитаю кнопки с галочкой, если вы не имеете дело с образовательными тестами (см. ниже).

Стандартный стиль с галочками

Стандартный стиль без галочек

Стиль кнопки в тестах (радиокнопки / флажки)

Когда пользователь отвечает на вопросы теста или викторины, мы должны убедиться в двух вещах: 1) что он может четко видеть, какие ответы выбирает, 2) что он не запутается, когда получит фидбек на свой ответ.

Если вы посмотрите на приведенный ниже пример, то увидите, что «галочка» может сбить с толку – кажется, что эти ответы верны, хотя еще не проверены.

Селекторы викторины, показывающие, что наличие галочки вызывает путаницу

Основной стиль с изображением (радиокнопки/ флажки)

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

Радиокнопки и флажки с изображениями. Изображения: (с unSplash): Гамбургер от @amir_v_ali | Чикенбургер от @amir_v_ali | Веджибургер от @swimstaralex | Сыр от @swimstaralex | Помидоры от @lmablankers | Латук от @producteurslocaux

Изображения в стиле сетки (одно / несколько)

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

Селекторы с сеткой изоражений. Изображения (с unSplash): Гамбургер от @amir_v_ali | Чикенбургер от @amir_v_ali | Веджибургер от @swimstaralex | Сыр от @swimstaralex | Помидоры от @lmablankers | Латук от @producteurslocaux

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

Многоуровневые флажки

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

Это один из наиболее сложных элементов интерфейса, потому что верхний элемент (родительский) действует одновременно, как селектор и, как аккордеон. А что, если вы нажмете на метку, она выберет селектор или откроет / закроет аккордеон? Я не смогла найти определенное исследование того, какой вариант лучше, поскольку это необычный паттерн, но в прошлом я делала метку не селектором, а частью аккордеона. Пишите в комментариях, если у вас есть предложения, как решить эту дилемму.

Принудительный выбор

Иногда вам нужно разрешить пользователям выбирать только определенное количество элементов. Если пользователь выберет на одно значение больше разрешенного количества, самый первый выбранный вариант будет заменен («вытеснен») последним выбранным вариантом.

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

Стиль кнопки (одиночный / множественный выбор)

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

Селектор в стиле кнопки

Этот стиль очень распространен, когда пользователя просят выбрать несколько тегов контента (хотя он может не знать об этом). В приведенном ниже примере Apple Music просит пользователей выбрать свои любимые жанры, которые, в свою очередь, порекомендуют песни и исполнителей в зависимости от выбора пользователя.

Переключатель (одиночный выбор)

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

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

5. Состояния

Флажки и радиокнопки должны изменять свое состояние / внешний вид, чтобы пользователи знали, что они были выбраны. Нам нужно добавить эти маленькие визуальные подсказки, чтобы подтолкнуть пользователя в правильном направлении, используя паттерны, которые они уже знают и понимают.

По умолчанию / активно (Default/active)

Это начальное состояние селекторов. Это состояние указывает пользователю, что он может кликать по пунктам в вопросах.

Пример радиокнопок и флажков в их стандартном / активном состоянии

Неактивно (Inactive)

Когда установлено неактивное состояние, пользователь не сможет взаимодействовать с вариантами ответа. Пользователь редко сталкивается с этим состоянием, если это не указано в правилах продукта.

Пример радиокнопок и флажков в их неактивном состоянии

Наведение курсора (Hover)

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

Пример радиокнопок и флажков в состоянии наведения курсора

Совет для нубов: у сенсорных устройств нет состояния наведения курсора

Фокус / выделение (Focus/highlighted)

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

Пример радиокнопок и флажков в их состоянии фокуса / выделения

Нажато (Pressed)

Это состояние, когда пользователь удерживает свою мышь / палец, и элемент указывает пользователю, что на него нажимают.

Пример радиокнопок и флажков в их нажатом состоянии

Выбрано (Selected)

После того, как пользователь щелкнул по элементу, интерфейс должен сообщить ему об этом. Как упоминалось ранее, радиокнопки могут иметь только один выбранный элемент, а флажки могут иметь несколько, в зависимости от бизнес-правил.

Пример радиокнопок и флажков в их выбранном состоянии

Ошибка обратной связи (Fail feedback)

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

Пример радиокнопок и флажков в состоянии ошибки

6. Правила для текста метки

Существует только одно жесткое правило для меток селектора: быть последовательным.

  1. Убедитесь, что регистр на каждой метке селектора одинаков (регистр предложений, регистр заголовков и т. д.)
  2. Убедитесь, что все элементы либо заканчиваются точкой, либо нет.
  3. Постарайтесь убедиться, что все элементы являются либо предложением, либо фразой, либо словом. Старайтесь избегать, чтобы часть вариантов была предложениями, а другая – отдельными словами. Использование комбинации усложняет решение вопроса о том, какой регистр и пунктуацию использовать.

Пример меток элементов

7. Когда вы должны их использовать

Когда следует использовать радиокнопки или флажки? Это целиком зависит от того, какой вопрос вы задаете. Если вы хотите, чтобы пользователи выбрали несколько вариантов ответа, используйте флажки. Если хотите, чтобы пользователи выбрали только один вариант, используйте радиокнопки (или другой тип селектора).

Когда использовать радиокнопки

У меня есть четыре правила, когда использовать радиокнопки. Вот они:

  1. Когда вы хотите, чтобы пользователь выбрал только один элемент
    Если вы хотите, чтобы пользователь выбрал более одного элемента, лучше использовать флажки.
  2. Если у вас меньше шести вариантов ответа
    В зависимости от ваших правил дизайна, если есть более пяти или шести элементов, используйте раскрывающийся список. Да, да, я знаю, что они неуклюжие, но они экономят много пространства вашего дизайна.

Сравнение раскрывающегося списка и радиокнопок

При этом, если пространство не является проблемой, возможно, стоит использовать радиокнопки – особенно, если вы проектируете для мобильных устройств. Я видела, что это идеально подходит для служб доставки еды.

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

  1. Вы хотите принудить выбрать один вариант ответа

Когда вы выбираете элемент в списке радиокнопок, вы не можете отменить его выбор. Вы можете выбрать что-то еще и изменить выбор, но вы не можете отменить ответ на вопрос, если уже выбрали его.

  1. Если у вопроса есть только два варианта: да / нет

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

Сравнение радиокнопок и переключателя

Дополнение к статье после ее публикации:

5. Если хотите, чтобы пользователи нажимали «Сохранить» для применения выбранного варианта

Если вы находитесь на странице настроек или в месте, где вы хотите, чтобы пользователь мог экспериментировать с параметрами, прежде чем он нажмет большую зеленую кнопку «Сохранить»– лучше использовать радиокнопки (или флажки). Однако, если вы хотите, чтобы ваши настройки были применены немедленно (включение / выключение Wi-Fi), лучше используйте переключатель.

Этот вариант предложил Thomas Veit_, спасибо ему:)

_6. Если метки варианта ответа короткие, рассмотрите возможность использования переключателя с множественным выбором

Вы очень редко будете встречать этот вариант. Переключатели со множественным выбором соединяют в себе лучшее от радиокнопок и переключателей. Компактные, аккуратные и удобные. Я бы рекомендовал использовать их только в том случае, если метки ответов короткие – в противном случае это может стать неудобным на мобильных устройствах.

Пример переключателя с множественным выбором

Когда использовать флажки

У меня есть два правила, когда использовать флажки, и вот они:

  1. Если вы хотите, чтобы пользователь мог выбрать несколько вариантов или вообще не выбирать

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

Тест: почему пункт «Я прочитал условия» всегда в виде флажка, а не радиокнопки? Ведь имеет смысл использовать радиокнопку, так как это лучший тип селектора для вопросов «да / нет»?

Ответ: потому что вы можете отменить его выбор. В отличие от радиокнопок только с одним элементом, где вы не можете отменить его. Если вы нажмете на него, он будет выбран НАВСЕГДА.

8. Проверка доступности

Вы сделали это! Вы завершили проектирование своих селекторов, и пришло время отправить их команде разработчиков. Но погодите! Вы проверили их доступность?

  1. Соответствует ли ваш селектор стандартам цветового контраста WCAG AAA? Вместо этого некоторые дизайнеры используют стандарты АА. Моя любимая программа проверки контрастности – WebAIM.
  2. Варианты ответа / элементы больше, чем 44px для сенсорных экранов? (Иногда используют 36px.)
  3. Расстояние между каждым вариантом ответа / элементом больше 8px?
  4. Всегда ли видна метка / вопрос?
  5. Есть ли в соответствующих полях полезный текст обратной связи? (Например, «Пожалуйста, заполните этот вопрос»)

9. Мысли в заключение

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

Берегите себя, ибо сейчас мир совсем обезумел.

работа с radio-button

Фотография

  • Members
  • PipPipPip
  • 199 сообщений
    • Город: Харьков

    Отправлено 26 марта 2012 — 10:33

    есть два радио баттона, как проверить, что если 1 баттон выбран, то 2 становиться «невыбранным».

    Мне кажется самый простой способ:

    Command — Target — Value
    ——————————————
    verifyValue — name=radiobutton1 — on
    verifyValue — name=radiobutton2 — off

    А вообще ganzalik228, если правой кнопкой кликнуть на элементе — развернётся список «Show All Available Commands». Там можно найти много полезного.

    — Как называется человек, который любит смотреть на страдания других?
    — Программист.

    У тестировщика всегда чётное количество синяков: если он наступил на грабли — обязан воспроизвести ошибку.
    (bash.org)

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *