Why are radio buttons circles?

  • I understand that they shouldn't be square to avoid confusion with checkboxes and that today they should be circle for consistency, but why were they originally chosen to be circular? I've never seen a radio with pop buttons (that radio buttons are named after) with circular buttons, always rectangular. Is there any affordance that a circle offers that another shape or designation lacks?

    It seems to me that if you want to invoke the metaphor of this, the buttons should be rectangular. Car radio with mutually exclusive buttons

    Many radios from the 70s in particular (e.g this one) had round radio buttons. The AFC button was almost certainly an independent on/off, but the FM/LW/MW buttons would be mutually exclusive.

    There was a UI toolkit for Windows in the early to mid-1990s that had *diamond*-shaped radio buttons, though I'm struggling to identify it.

    @Dai Not just Windows. Motif (a UI toolkit for X-Windows) had diamond shaped radio buttons, at least until it evolved to become CDE/Motif.

    @Dai Early versions of "Chicago" (what would become Windows 95) had diamond-shaped radio buttons, as seen here.

    @Dai Might it have been Borland's Object Windows Library (OWL) that you are thinking of? I seem to recall it having diamond-shaped radio buttons, but can't seem to easily find a period screenshot to confirm.

    Surely the answer has little to do with radios, and everything to do with tick-boxes being square. This means a user can tell them apart before clicking on any of them.

    Cassette players had push-in "piano key" buttons to control tape movement - very similar to "radio buttons" on a car radio. Also, these were used in earlier "desktop radios" too. Mutual exclusion is not a new idea. Distinguishing things visually is not a new idea. This question is not very deep... "*Off with his head!*"

    @MichaelKjörling https://sourceforge.net/p/owlnext/wiki/Replacing_usage_of_BWCC/ has a screenshot showing diamond radio buttons.

    The multiple-choice tests of my childhood always used round bubbles. To me, radio-buttons always evoked that image.

    As @TripeHound pointed out, there certainly are round _physical_ radio buttons. Did you fail to find a radio with round buttons? Or did you only search for a picture backing your claim, before asking this question?

    You know, I actually thought "radio buttons" were some weird linguistic root like "radial buttons", meaning they got their name BECAUSE they were round, and were mutually exclusive, since, like spokes a wheel, all are connected to each other. It never even occurred to me that it might be referring to a radio receiver set. But, huh, I can find no evidence whatsoever to support this, and Wikipedia (which uses the picture from the OP btw) has citations for the physical set... so I guess I have been wrong about this for a decade.

    @AdamD.Ruppe was gonna post the same thing 8)

    The first radio buttons I have ever seen on a computer screen were diamonds (I think some sun *nix gui)

    @nocomprende: Some of us are interested in history and etymology, and how those things define & guide our choices today. If you're not interested in that, you can read some other questions instead.

    @BoundaryImposition sure, that is fine. But it would be more like "how did it end up being this way" rather than "why". I have had it drilled in to me that *why* questions almost never have useful answers. In the rare case that it was indeed a very well thought out design decision, that is great, but 99% of the time, it was either not well thought out or just plain, "that is how it went". If everything was *really* well thought out the first time, we wouldn't all be here writing software (and maintaining it). If it wasn't that well thought out, asking "why" is: "on a hiding to nothing".

    @nocomprende: The answers below are great.

    @BoundaryImposition well, let's see: we have opinions, contradictory answers, speculation, old radio photos... Do any of these really answer a "why" question? If it was not done for a well thought out (eg: engineering / design) reason, which would probably have to include some psychology, then it doesn't really give a "why", because there isn't really a why, it just turned out that way by guess and by gosh. Not a good subject for learning.

    @nocomprende the paradox of the situation is, how would one who does not know the answer be able to differentiate between something where there is no rhyme or reason, such as mine, and one where there is a good reason, such as this? And while I'd agree that the answers post-HNQ have been mostly bad, the top two current answers do provide useful historical context and insight. If you want to make the argument that history of interface questions are unacceptable and not useful across the board, that's a fine position

    Have you gotten a satisfactory answer, after 5 days and 15,000 views? That's the answer. You can anticipate that some kinds of questions will "generate more heat than light." (or he can ask lots of questions until he learns the difference) (Shh! you'll ruin the story)

    @nocomprende: What's this "Shh! you'll ruin the story" about?

  • 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 dictated by the primitive graphics.

    If not square then…

    I don’t know of any source providing a reason for going with circular, but chances are square was the obvious choice for the checkbox, as they often appear square on paper forms, so designers picked the most obvious non-square shape.

    Rectangular could look too much like a command button. It's vital not to mistake a command button for a radio button because a command button activates (possibly irreversibly) something immediately. You want to signal to the users that they're making a commitment of sorts. Radio buttons typically don't take effect until the user clicks the dialog's OK command button.

    So if not square or rectangular, then what? Triangular? Hexagonal? Motif and IRIX used diamond-shaped radio buttons, which I’d rank as the next-most-obvious non-square shape.

    Your radios may vary

    You say that circular is incompatible with the radio button metaphor, but that’s not necessarily true. There were some car radios with circular buttons, which may have been the inspiration. Personally, I doubt it. I believe such radios date primarily from the 1950s-1960s, not the 1980s when these GUIs were designed. There are rectangular toggling buttons in GUIs that more accurately mimic common car radios from the 1980s, if you’re interested in invoking that metaphor.

    Real answer: Users weren’t expected to see it as a radio

    Actually, the radio button metaphor is a geek thing, not a user thing. Users were not supposed to make the connection to car radios. The Apple Publications Style Guide of 2006 advises tech writers to “Use radio button only in developer documentation; use button in user documentation” (p127). Up until Windows XP, MS referred to radio buttons as “options buttons.” It’s only important that they look like buttons of some sort, which are often circular, and almost never diamond or triangular.

    A paper form metaphor?

    Despite the presence of “buttons,” GUIs, including dialog boxes, owe most of their visual design to a paper-and-desktop metaphor, rather than a control-panel metaphor. They're basically virtual forms to fill out. Text boxes and check boxes obviously come from paper forms. Perhaps circular radio buttons were inspired by optical scan sheets, where a person fills in small circles or ovals with a Number 2 pencil. On such sheets (such as used for SAT tests), the users should only pick one choice in a set, so that’s an apt metaphor. That would also explain why radio buttons are small (smaller than command buttons) and turn black (in most UIs) when selected. That’s what I tell users as a mnemonic anyway.

    Answers like this and I think there should be a UX stack exchange blog/wiki site where a lot of information can go and stay for references.

    Computationally easier to draw? No. Circles are indeed difficult to draw, compared to rectangles, but they're actually easier to draw than rectangles with rounded corners. The real reason that the Mac used "squares with rounded corners" is discussed here. It wasn't a technical limitation, and didn't have anything to do with resolution.

    And while you're right that users weren't expected to see it as a radio, it is only *later* publications (relatively, considering the age of the GUI) where you find it referred to as something else. In all the earliest design documents that I've seen, and all the first-hand accounts that I've read, the programmers/designers actually were using the radio analogy, and this is the true basis for the design. It's simply arbitrary which shape was picked, and as you correctly mention, there was a fair amount of variation among different windowing systems—circles, roundrects, rects, and diamonds.

    "fills in small circles or ovals with a Number 2 pencil": Number 2 is the vital part.

    @Gray#1: Fascinating to learn that rounded rectangles was an Apple/Jobs obsession all the way back to 1981. However, zooming in on the screenshot at http://www.guidebookgallery.org/pics/gui/desktop/full/macos30.png, it’s not clear if the System 3.0 GUI actually used Atkinson’s fast rounded rectangle algorithm, at least for the UI elements shown. All “rounded” corners are actually _beveled_, cut at a straight 45 degrees, which is computationally nearly as easy as drawing a horizontal or vertical line, and looks better at low resolution than true rounding.

    @Gray#2. I agree. I count UI designers as “geeks.” No offense intended.

    Hmm. I never actually made the connection between Radio Buttons and car radios, and I've been programming since the Apple IIe. I always thought the name came from "Radial", as in "round".

    @BradleyUffner – *eyebrows out of bounds, system halted*

    @nocomprende You may consider my world rocked.

    I would call most diamond-shaped buttons square too ;-)

    Actually, the original 1985 edition of Inside Macintosh already had round radio buttons. Doesn't explain why they're round, though.

    My copyright-1984 paper MacWrite manual has a screen capture of the Print dialog on page 40. That window has radio buttons that are referred to in the manual's text as check boxes.

    The 2013 Apple Style Guide says to use "_radio button_ only in developer materials; use _button_ in user materials" and I believe I'd find earlier Style Guides would say the same.

    @Harshal That's what this site *already is*.

    The reason they say to use *radio button* in dev and simply *button* in user-land is because developers care what *type* of button (and related functionality, UX, etc) they need to implement, but users don't care about such details - they aren't expected to be technical experts. I think the term *radio button* comes not from the shape, but from the functionality, which as somebody else mentioned is mutually exclusive when selected, much like frequency selectors on... well, *radios*. The lesson here: don't overthink things.

    There is a lovely answer with 1984 Windows buttons below that needs your votes.

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM