47

My question is simple:

Why do most radio buttons not fill their entire outer circle?

Example of standard radio button:

Example of standard radio button

(Unusual) Example of an entirely filled radio button:

enter image description here

Is this for some skeuomorphic reasoning or something entirely different?

Bonus Question: Is it ever acceptable in an interface or design system to use fully filled radio buttons?

  • 51
    How would you distinguish the states of a fully filled radio button and an empty radio button? For all the user knows, you might have chosen black as the color of an empty radio button. Good UX design should be obvious, and should not require fiddling with the controls to see how they behave. – Cody Gray Mar 19 at 23:14
  • 16
    Why would it be any more confusing than choosing white, or blue, or any other color? Maybe it's a "dark" user interface. The point is, the user doesn't know which color corresponds to which state independent of context, which means there is a UI problem. – Cody Gray Mar 20 at 7:38
  • 13
    I see that kind of design error everywhere. Two buttons, one is selected, the other is not. One is (for example) light blue and the other is orange. Clicking one toggles the colors, but there's no default understanding of which color is the 'selected' color. – Graham Mar 20 at 13:44
  • 4
    Something often forgotten about old physical radio buttons is that once you pressed one in, you could half-press a different button and it would cause the selected button to pop back out, while not actually engaging the newly pressed button. So you COULD return to a "no selection state" quite easily. – Graham Mar 20 at 14:25
  • 4
    @Graham Whilst it was physically possible to return to a "no selection state", I don't believe this served any purpose. In fact, I think the radio would continue to behave as if the button that just popped out were still pressed in. Hence not being able to do this with the GUI version. – bornfromanegg Mar 20 at 15:05
97

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:

Simply a black and white circle on a gray background

Which one is selected? The one that “lit up” like a light? Or the one that is “filled with ink”?

There is an implicit assumption that being selected should include a graphic addition of something. Thus the addition of a circle within the circle. It may also be thinking by analogy with checkboxes, where you add a check to the square to show selection.

This “works” even when we break the standard and reverse the colors:

White filled circle for selected

This implies it also works when users don’t know the colors, something which matters especially today when we are not confined to grayscale. For this reason, in addition to it just being non-standard, I would always avoid fully filled radio buttons.

Personally, I think the term “radio buttons” refers metaphorically to the behavior (that it’s one-of-many selection), not to the appearance. Other historical factors may have determined the general appearance. At the time GUIs were being invented in the 1970s and 1980s, the most common radio buttons were the presets in car radios. While I’m sure you can find an exception (I have), these generally were (1) rectangular, not circular, and (2) did not indicate a selected state –once pressed, they popped back out, and did not show a mechanical flag or light. So I don’t think skeuomorphism had anything to do with it.

  • 7
    The radio buttons in my car do show selected state by staying pushed in. Also, you set them to the desired station by pulling them out (past the normal position) and pushing them back in. – Glen Yates Mar 20 at 15:08
  • @Yates: Stays pushed in? Interesting. What car/radio is that? What happens when you then turn the tuning knob? Does the button pop out automatically or does it continue to (falsely) show the preset as still in effect, which also prevents you from re-selecting the button? – Michael Zuschlag Mar 20 at 16:19
  • 4
    @MichaelZuschlag See for example the photo at uxplanet.org/radio-buttons-ux-design-588e5c0a50dc — These were extremely common (although I associate them more with tape/cassette players than radios). I’m not sure how the tuning button is relevant in this context; the button always showed the correct state (e.g. AM/FM, Playing/Paused/Stopped/Fwd/Rev/Record). – Konrad Rudolph Mar 20 at 18:08
  • 4
    My car has mechanical "radio buttons" for heat/ac settings (which location, external vent vs recirculate) and they definitely stay depressed once selected. – R.. Mar 21 at 12:47
  • 1
    Check the third answer from this question to a example of a radio with classic radio buttons! – T. Sar Mar 21 at 19:34
34

I guess a completely full radio button can be easily confused with a bulleted text:

enter image description here

Whereas an empty circle perceptually gives the feeling of incompleteness: needs filling or has to be filled:

enter image description here

Even in many cases one of these rings is already filled, which increases the feeling that they must be filled (checked):

enter image description here

  • 2
    On your first example, the title of the "list" would probably be a question and in the list itself, only one of the option would be a black circle. The other one would be regular radios. – Zasul Mar 19 at 14:54
  • 2
    I think your best assumption is not correct, because with radio elements you would have only one radio input selected at most. – Devin Mar 19 at 14:55
  • 2
    @Devin that's not strictly true. you can have more than radio button selected if you're feeling like breaking with convention. it's not a great idea, but it's generally possible in most interfaces. – worc Mar 19 at 20:44
  • 1
    @worc native radio buttons ARE a convention, and a convention that motivates the question. Furthermore, to "break the convention" you would need to use checkboxes and disguise then as radio (so it wouldn't be a radio, it would be a checkbox with an image over it). Radio buttons allows for just one selected option at a time, see developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio – Devin Mar 19 at 20:56
  • 3
    @Devin Suppose you had radio buttons with two choices (and a situation where radio buttons would be preferable to a checkbox, like say for Male/Female). How do you easily tell whether a circle filled with black or a circle filled with white represents the selected choice? I think the typical partially filled circle is clearer. – jamesdlin Mar 20 at 3:55
30

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.


Radio button styles

In the first row of images, one of the pictures in itself does not convey the information regarding the state of the button. Maybe with black and white you could assume a state but this will fail for other colours.

In the second row of images, the state of the inner circle clearly denotes what the state of the button is.

  • 6
    The second row has the same problem as the first. Is that a selected white dot with a circle around it, or a selected black dot with a circle around it? – Mr.Mindor Mar 21 at 15:10
  • @Mr.Mindor I would argue that is where the outer circles help. The inner circle being "filled" denotes that it is activated. What denotes "filled", while subjective, can be deduced from how the inner circle behaves w.r.t to the outer ring (in colour). – Sinstein Mar 22 at 7:09
  • I'll grant you that it does help, it's not quite as bad as the first row; however, if you have to argue, then there is clearly room for confusion. How is one to deduce the behavior of the inner circle? If you have to interact with it to be sure, then it clearly isn't communicating its state well enough. The standard radio button does a better job: only the selected option has an inner dot at all. (no 'empty' inner circle.) – Mr.Mindor Mar 22 at 15:51
22

Radio buttons were inspired by the physical radio buttons ( obviously enough ). Buttons were popping out from a frame or were "3d". I would consider these as signifiers. Those signifiers made their way to the first interfaces. Practically a button popping out from a frame that when pressed would cancel all the other pressed buttons.

As of today, the radio button should also be recognizable even after it is checked. So having it according to the "standards" would be best. Even though I have seen examples of radio buttons like your example and inside the context I did identify them as radio buttons for some users it might cause some confusion or it might not but some user testing might be needed.

  • 4
    Radio buttons were inspired by the physical radio buttons ( obviously enough ). Perhaps not. Personally, I only know what real-life radio buttons are because I was told about them in the first web development class I took. I don't think I've ever seen them myself. – Justin Lardinois Mar 19 at 22:57
  • 7
    I don't understand how this addresses the difference between the icon being filled or not – mowwwalker Mar 20 at 1:12
  • 1
    @JustinLardinois - Here is an article about the history of radio buttons. jitbit.com/alexblog/242-the-history-of-a-radio-button To be honest in my family the last radio with "radio-buttons" was thrown away 5 - 6 years away. So not that far away. – Zasul Mar 20 at 6:58
  • @mowwwalker - Can you please detail ? I did try to explain why the radio button looks how it looks , where it came from and as it got standardized to look like it is looking this days, any changes might cause some confusion but not necesary. This would be better proven by doing some user testing. – Zasul Mar 20 at 7:00
  • @Zasul so why are these arguments (answers to the question "should I do this?") in comments and not in the actual answer? – Pierre Arlaud Mar 21 at 8:44
16

This is a nice article about the history of radio buttons: https://www.jitbit.com/alexblog/242-the-history-of-a-radio-button/

As said in the article:

Radio buttons are named after the actual buttons used on old radios to switch between radio waves and, sometimes, preset frequencies. When a button was pressed, all other buttons would pop out.

So, it was a skeuomorphic reason.

I believe a fully filled radio button would confuse users, based on the principle of "Match Between the System and the Real World". It states that:

Interfaces that follow real-world conventions and make information appear in a natural and logical order demonstrate empathy and acknowledgement for users.

Users are used to radio buttons in this format in other websites, so unless you have a really good reason to change that, I think you should use the standard.

  • 3
    Match Between the System and the Real World is only applicable when users are acclimated with the real world item. In today's world, most people don't know or haven't even seen the actual Radio button. – Private Mar 20 at 5:04
  • 3
    But people are acclimated with radio buttons in another websites. It's like the floppy disk for saving, people don't use it anymore, but everyone recognizes as the save button. – Aline Mar 20 at 11:01
  • 3
    Yes, I think the principle here is "least surprise" or "most familiar" rather than any reference to the real world. If the aim was to make them look like the real world, we could create a much better visualisation with modern graphics resolutions; but the aim is actually to mimic older user interfaces, whose origins are of historical curiosity but mostly irrelevant. – IMSoP Mar 20 at 11:11
  • 1
    Since no picture in that article actually shows the buttons in a selected state, I went and dug one up Hopefully a useful example. Radio buttons were really really chunky. It's meant to be sight-unseen levels of tactile, you instantly know which button is currently pressed because you can feel it, whether you're wearing gloves or it's in your pocket. – Ruadhan2300 Mar 21 at 9:17
7

Because if a checked radio button would be completely filled, it would be confusing to tell which button is actually selected, especially if there are only 2 radio buttons. You could just as easily think the "white filled" button is active instead of the "blacked out one".

2

While the other answers are quite valid, I think they miss a key point: an entirely filled radio button would be invisible on a black background. Having alternating colors on the selected item prevents this by causing contrast to be forced within the radio button.

  • I don't think that was a concern in the original HTML specs - but it surely is valid today. – Mayo Mar 22 at 13:08
2

This is not directly an answer to your question but some interesting information about the subject as a whole.

Skeumorphism is an aspect of Human Computer Interaction - its a design choice that relates a real world object with known function to a digital object with similar function. This usually works because people develop mental models for how things operate so when we reproduce an item digitally with a similar function its purpose is conveyed automatically.

The mental model for the radio button is that a radio button can be depressed to make a single selection. From this understanding multi-selections were reserved for check boxes because the mental model is that a check next to an item in a list indicates selection.

There are some issues with relying on skeumorphsim and mental models, such as, what if your user had never encountered a radio button in the real world? In that case they would have no mental model for how this work. This is becoming ever more likely because some of the real world items used as bases for various digital constructs were from the 1960s and 1970s. This is what I think you were touching on; is the radio button the right object to use as the basis of skeumorphism for a single selectable item from a list today? Maybe.

Even though people are less likely to come in contact with an old radio, the prevalence of radio button selectors in digital form has given most people a mental model of their function. As mentioned in other answers, a good design should be able to indicate which selection was made by two users with different mental models. With that said, a radio button does not have to be the basis for this type of selection. Keep in mind that going against the majority of people's mental models can be a struggle. User testing can help you identify if the change you are suggesting will translate well to your intended audience. Some good advances in design have come about because someone was willing to try a new approach and honed their design via testing.

0

I can remember seeing radios with mechanical buttons where there was a visual indicator that showed which of the buttons was pressed. The one I remember had black buttons, and inside it was moving parts, shaped like a kind of a beak that opened up when the button was pressed showing the white indicator at the center of the top of the button. This looks the same as your illustration, just with colors reversed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.