Home » Why are radio buttons circles?

Why are radio buttons circles?

Solutons:


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.

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 checkboxes. Somewhere along the implementation of radio buttons (whether it was in Apple Lisa, Apple Macintosh, Atari ST, or Commodore Amiga) this visual distinction was probably made to improve UX. As to why they’re circular; it was probably a fairly arbitrary design choice that simply caught on.

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” (the FM / AM buttons on the second picture for instance). Can’t find a picture of my dad’s radio, but I distinctly remember it having several round “radio buttons”.

Related Solutions

Extract file from docker image?

You can extract files from an image with the following commands: docker create $image # returns container ID docker cp $container_id:$source_path $destination_path docker rm $container_id According to the docker create documentation, this doesn't run the...

Transfer files using scp: permission denied

Your commands are trying to put the new Document to the root (/) of your machine. What you want to do is to transfer them to your home directory (since you have no permissions to write to /). If path to your home is something like /home/erez try the following:...

What’s the purpose of DH Parameters?

What exactly is the purpose of these DH Parameters? These parameters define how OpenSSL performs the Diffie-Hellman (DH) key-exchange. As you stated correctly they include a field prime p and a generator g. The purpose of the availability to customize these...

How to rsync multiple source folders

You can pass multiple source arguments. rsync -a /etc/fstab /home/user/download bkp This creates bkp/fstab and bkp/download, like the separate commands you gave. It may be desirable to preserve the source structure instead. To do this, use / as the source and...

Benefits of Structured Logging vs basic logging

There are two fundamental advances with the structured approach that can't be emulated using text logs without (sometimes extreme levels of) additional effort. Event Types When you write two events with log4net like: log.Debug("Disk quota {0} exceeded by user...

Interfaces vs Types in TypeScript

2019 Update The current answers and the official documentation are outdated. And for those new to TypeScript, the terminology used isn't clear without examples. Below is a list of up-to-date differences. 1. Objects / Functions Both can be used to describe the...

Get total as you type with added column (append) using jQuery

One issue if that the newly-added column id's are missing the id number. If you look at the id, it only shows "price-", when it should probably be "price-2-1", since the original ones are "price-1", and the original ones should probably be something like...

Determining if a file is a hard link or symbolic link?

Jim's answer explains how to test for a symlink: by using test's -L test. But testing for a "hard link" is, well, strictly speaking not what you want. Hard links work because of how Unix handles files: each file is represented by a single inode. Then a single...

How to restrict a Google search to results of a specific language?

You can do that using the advanced search options: http://www.googleguide.com/sharpening_queries.html I also found this, which might work for you: http://www.searchenginejournal.com/how-to-see-google-search-results-for-other-locations/25203/ Just wanted to add...

Random map generation

Among the many other related questions on the site, there's an often linked article for map generation: Polygonal Map Generation for Games you can glean some good strategies from that article, but it can't really be used as is. While not a tutorial, there's an...

How to prettyprint a JSON file?

The json module already implements some basic pretty printing in the dump and dumps functions, with the indent parameter that specifies how many spaces to indent by: >>> import json >>> >>> your_json = '["foo", {"bar":["baz", null,...

How can I avoid the battery charging when connected via USB?

I have an Android 4.0.3 phone without root access so can't test any of this but let me point you to /sys/class/power_supply/battery/ which gives some info/control over charging issues. In particular there is charging_enabled which gives the current state (0 not...

How to transform given dataset in python? [closed]

From your expected result, it appears that each "group" is based on contiguous id values. For this, you can use the compare-cumsum-groupby pattern, and then use agg to get the min and max values. # Sample data. df = pd.DataFrame( {'id': [1, 2, 2, 2, 2, 2, 1, 1,...

Output of the following C++ Program [closed]

It works exactly like this non-recursive translation: int func_0() { return 2; } int func_1() { return 3; } int func_2() { return func_1() + func_0(); } // Returns 3 + 2 = 5 int func_3() { return func_2() + func_1(); } // Returns 5 + 3 = 8 int func_4() { return...

Making a circle out of . (periods) [closed]

Here's the maths and even an example program in C: http://pixwiki.bafsoft.com/mags/5/articles/circle/sincos.htm (link no longer exists). And position: absolute, left and top will let you draw: http://www.w3.org/TR/CSS2/visuren.html#choose-position Any further...

Should I use a code converter (Python to C++)?

Generally it's an awful way to write code, and does not guarantee that it will be any faster. Things which are simple and fast in one language can be complex and slow in another. You're better off either learning how to write fast Python code or learning C++...

tkinter: cannot concatenate ‘str’ and ‘float’ objects

This one line is more than enough to cause the problem: text="რეგულარი >> "+2.23+ 'GEL' 2.23 is a floating-point value; 'GEL' is a string. What does it mean to add an arithmetic value and a string of letters? If you want the string label 'რეგულარი...