2

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

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.

enter image description here

enter image description here

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.

  • Are you saying that toggle buttons should change the view when pressed, and radio buttons simply switch options? – Alvaro Dec 2 '16 at 22:05
  • Not necessarily. Just wondering why, that is all. – Anusha Dec 2 '16 at 23:03
5

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:

enter image description here

| improve this answer | |
3

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:
    enter image description here . enter image description here
    .

  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.

.

  1. 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.
    .
| improve this 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.

Google Translate Screen Shot

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. Lithuanian to Spanish

| improve this answer | |

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.