Why does this UI (Google Translate) have a set of toggle buttons instead of radio buttons?

Question

Saw this on Google Translate, where Google uses these segmented controls (or toggle buttons) for listing the languages.

Unlike those present in other products such as Google Calendar or Faceboook tabs (which result in change of views) these are essentially a selection control.

Wondering what's the rationale for substituting radio buttons for these. Edit: Perhaps it's an assumption on my part that they replace radio buttons. Functionality wise, I believe they closely resemble radio buttons rather than check boxes or select drop down menus! Hence the question.

Answer 1

I believe it is a matter of choice. Toggle buttons need less UI as the label is already the input.

Toggle buttons may be used to group related options. Arrange layout and spacing to convey that certain toggle buttons are part of a group.

(...)

Toggle button requirements:

• Have at least three toggle buttons in a group
• Label buttons with text, an icon, or both

The following combinations are recommended:

• Multiple and unselected
• Exclusive and unselected
• Exclusive only

Exclusive selection is the one used in this case:

Answer 2

It's a good UI design decision with the following background:

1. Horizontal radio buttons are hard to scan/read. Otherwise you need too much space to distinguish the options clearly. Compare the images:
   .
   .

2. Better indication of the system's state. For horizontal layout, the entire button's surface indicates current selection in a better way, compared to small round tick. You notice the color difference in much faster way.

.

3. Small size of the radio button makes it hard to interact. Even today some developers don't use proper label to increase the size of a radio button. And some users use only small round tick to click the radio button. So, according to the Fitts's Law, they have increased the size of the selection control, and it's quite clear for users.
   .

Answer 3

In addition to what others have already answered, consider that this is a responsive custom toolbar that lets you select from a huge number of languages, but it also detects languages being spoken. The control has to be flexible enough to allow for long and short language names without messing up the layout at whatever size the user views this interface at. Here's an example of what happens when you go one step deeper into the UI and start selecting different languages. A flyout menu opens below the little arrow. I said "Yesterday I ate a car" using the microphone and it detected English being spoken. Nicely done, Google.

Let's throw it a curve ball. I tested it by speaking into the microphone and it detected Lithuanian. It's got to dynamically indicate that new language choice right on the toolbar. That's asking an awful lot of a set of radio buttons. They are hard to maintain, so I can't imagine using them in this scenario.