Depends on whether the question is mandatory. You need radio buttons if you want to be sure that a user answered the question, as with an empty checkbox you'll never know whether a user just forgot this question.
I would like to advise you not to use Yes/No as radio buttons.
It is advised to use sentence style labels in imperative style.
Now, to answer the question in which order the options should appear, here is what MS UX style guide recommends:
List the options in a logical order, such as most likely to be
selected to least, simplest operation to most ...
If I saw that in an interface - I would assume only one item can be checked, especially before any had been selected. Only the wording of the title would indicate to me that multiple selection is possible. I think this design would lead to a greater than normal number of people choosing a single item rather than a selection of items.
I don't see the benefit ...
You're not supposed to leave radio buttons blank. They're allowed to be blank so you can avoid setting defaults as mentioned in the question about setting a default gender. You can't not pick a gender, it's a required field, though you can leave a "prefer not to say" etc. option; this is different than the user never touching the radio button, however. If ...
Square was easy
The earliest appearance of circular radio buttons that I can find is in Apple Macintosh System 4 (1987). Prior to that Mac OS used squares with beveled corners, which was probably just computationally easier to draw and better-looking on non-anti-aliased low resolution screens of the time. The general favoring of rectilinear shapes was ...
It’s not entirely clear that a black circle means “yes” or selected, while a white circle means “no” or non-selected. Depending on what the user regards as foreground and background, it may go either way. Consider this (rather contrived) example:
Which one is selected? The one that “lit up” like a light? Or the one that is “filled with ink”?
There is an ...
There are a few cautions: 1. Feature discoverability, 2. Icon interpretation in the absence of labels, and 3. Confusion over which state the toggle (or stateful button) represents.
1. Discoverability: Out of sight, out of mind
Lukew, in 'Obvious always wins', cites loss of engagement when vying for menu space:
His mobile example involves lots more space ...
Actually, there could be a way to make this a tad bit less heavy.
In your situation, you're repeating words which are not absolutely necessary. Try something like this in addition to adding more breathing space + visual design to make it easier on the eye. The problem with the wireframing tool, we aren't able to choose different colors to make options ...
There is no single proper answer but the control depends on the context.
Checkbox is suitable to minimize clutter but its use is limited for cases where described choice has also clear opposite meaning (without need of mentioning it) :
[X] include subdirectories
Radio buttons are suitable when making something more explicit or if choices need separate ...
Short answer: Option 1
I don't see any reason to make this more complex than two normal radio buttons. We have had these UI elements for so long for a reason.
The other options presented by you are meant/better suited for other cases.
Basic rule of thumb is:
Use radio buttons for up to a handful (max. 5-7) of mutually exclusive choices and when you ...
This is a very interesting question. Radio buttons were first introduced with the Xerox Star 8010 and I believe they looked like the rectangular selectors in the screenshot below:
I can't provide a citation on this, but I'm assuming that there was originally no visual distinction between components like radio buttons and other selectors like tabs or ...
You don't need to make different appearances for these components.
Your case is similar to well-known toggles in a toolbar of text processors like Word.
These font settings toggles act like checkboxes:
And these Word’s alignment controls act like radio buttons:
Note, they look identically and it doesn't produce any confusion or difficulties because in our ...
There should never be just one radio button, as it breaks the user's expectations on how they work. Radio buttons are meant to allow selection of one and only one item from a set of several radio buttons.
If you really want to use radio buttons, you could either go with this approach:
() I like the following sweeties:
The secret sauce of product design 🦄
You mentioned that the score and rank are determined independently. This sounds to me like a classic example of the feature no one asked for but everyone wanted.
The test designer must have a system in their mind for how score and rank relate — obtuse though it may seem. Dig deeper and see if there isn't a ...
The Apple OSX Human Interface Guidelines (2012) recommend a drop down if you have more than 5 options, while the Microsoft Windows 10 User Experience Guidelines recommend a drop down if you have more than 8 options. So, take the average and stay with radio buttons if you less than 6.5 options (shrug). You’re near the borderline (at least for one ...
A checkbox should look like a box and not a circle. They are not check circles, after all. Subtly rounded corners, as others have mentioned, would be okay, but user interfaces have always represented a checkbox as a square and a radio button as a circle. The designers behind your examples are likely trying to be different, favoring style over function.
I am not aware of the available studies but here are a few thoughts.
Horizontal display seem to be easier to visually scan for all answers since you have "Yes" on one side and "No" on the other. It also I think makes it easier for the user to check all the answers the same way; you just move your cursor down (check, check, check). So I am leaning towards ...
I guess a completely full radio button can be easily confused with a bulleted text:
Whereas an empty circle perceptually gives the feeling of incompleteness: needs filling or has to be filled:
Even in many cases one of these rings is already filled, which increases the feeling that they must be filled (checked):
First of all: why do you ask at all? Why not simply always send the gift card with the order? Who would object to getting more value than what they ordered? If you don't ask, you don't have your problem to begin with. Generally, asking fewer questions from the user results in higher conversion, so from that perspective, removing the whole question would be ...
Slight modification of DesignerAnalyst's solution:
star ratings are commonly used and known
allows no preselection
in contrast to sliders there are exact three allowed states
no header required, each label changes immediately conveying the meaning of the stars before it
Apparently I am the only one who thinks round radio buttons are natural because they were that way on my dad's radio back then...
It was a popular design from german manufacturer Grundig and possibly a few others. A couple of examples:
Note that on those pictures, some of those buttons are just regular on/off buttons, while others are actual "radio buttons"...
It depends. How often do your users see this form / section / settings?
Frequently used, long session applications give users a chance to remember how controls work, especially frequently used ones.
Part of this has to do with Application Posture.
A sovereign application is a program that monopolizes the user's attention for long periods of time.
I would consider accessibility to be one of the reasons of this style of radio buttons in addition to the physical button it originated from.
When a button is fully filled, you are relying on the colour of the button to signify its state. This could confuse a lot of people, especially when using non standard colours.
In the first row of images, one of the ...
Checkboxes vs. Radio Buttons - Nielsen Norman 2004
Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.
Checkboxes are used ...
This kind of UI elements exists and is used in many applications even if differently.
If well designed they are even more affordant than the usual radio buttons.
The thing is, because of this affordance they seem "auto selected" so there is no need of a validation like in your example. Therefore I would say radio buttons ...
A checkbox should be square. As Cooper, Reimann, and Cronin wrote in About Face 3 (emphasis mine):
Traditionally, checkboxes are square. Users recognize visual objects
by their shape, and the square checkbox is an important standard.
There is nothing inherently good or bad about squareness; it just
happens to have been the shape originally chosen ...
I'm not a fan of horizontal layouts for radio buttons for four big reasons:
As soon as you have more than two choices, it becomes difficult to see which label belongs to which radio unless you use a lot of padding. That can cause problems.
Horizontal radio designs do not work if the line wraps. It looks like two questions. This means that you can only add a ...
Context is everything.
Yes, you are right in questioning that some people might be confused by this.
However, the usages of this icon each show in dramatically different contexts. The icon is used as "this is an airport" where it involves a location or direction: a map, a road sign, a list of locations in an app... On the other hand, the icon is used as "...