Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm an ios developer by profession and was told of by a UX Architect for suggesting the use of the ios Segmented Control as a group of radio buttons.

We have to present a mutually exclusive choice between - "Futures" vs "Options" to the user. To me, it seems like the segmented button would be ideal to represent this choice. Note that, this choice would not result in a change of view, it is just to get the user's input. This is what the UX Arch. had to say:

Please find the screenshots below. All the screenshots are taken from applications and other system screens developed by Apple. (All the segmented button have related data fields below the segmented button control. Behaving like tabs)

Let’s not get misled by the random designs available on internet.

iOS Human Interface Guideline’ doesn’t go into detail about the usage of segmented button. This is the best practice following the usage of Apple while designing any iOS interface.

The option/alternative he recommended was basically picking one option from a list (table like) of two.

Is it bad UX to use segmented controls in this manner? Just wanted a wider view on this.

share|improve this question
1  
If you share a link to the screenshots someone can add them to the question. –  Matt Obee Apr 25 '13 at 15:09
1  
Wow, the HIG really doesn't give you much help: "Use a segmented control to offer closely related, but mutually exclusive choices." –  Charles Wesley Apr 25 '13 at 15:27

3 Answers 3

iOS segmented controls are only recommended for switching views, as stated in the Apple HIG:

A segmented control is a linear set of segments, each of which functions as a button than can display a different view

You can think of them as the iOS equivalent to Android view control spinner.

If every mutually exclusive choice open a new set of fields and act like "views" in that sense you can use a segmented control, but the "iOS way" to create radio buttons, as you can see in some applications like Calendar or Settings, is creating a row with the radio button label and a new screen with a table view and all the mutually exclusive options. The selected option has a checkmark at the right of the row. A "Cancel" button is usually placed at the top left corner and a "Done" button at the top right.

I don't have any iPhone screen at hand, but is the same idea as this iPad popover

If you have only two options, I wouldn't recommend using a new screen: you can create a grouped table with the "radio button" label at the top, like in WiFi settings.

share|improve this answer
1  
+1, I believe you're correct in the matter, as is the UX architect. iOS already offers a solution that is easy to interact with, no need to try to re-interpret controls that are used for something else. –  Koen Lageveen May 1 '13 at 20:09

For what concern the Apple HIG, the only thing that is stated in the guideline section is exactly:

Use a segmented control to offer closely related, but mutually exclusive choices.

For what concern the effect of selecting a segment, it doesn't sound that strict. It says that can display a different view, but it's not imposed.

Given that some apps already adopted this alternative for mutually exclusive options selection, my suggestion is:

  • if the options you have to select can fit the available space in a segmented control (remember the localizations in different languages in case you are going to internationalize your app), I don't see any problem in the UISegmentedControl. It saves and optimize the space if compared to a cumbersome table view, and it looks way better if the options are just two;
  • otherwise, if the content of the choices is gonna take some more space, and, moreover, there are gonna be some more of them (> 3 starts being already too much), a fraction of the screen width may probably be not enough to display them decently. In this case I would just go for a table view, as @PaRaP suggested.

So, given your case, where you have just two short words to display, I would go for a segmented control.

share|improve this answer

If there is a primary choice to make between a small number of options, you can use this. Take a look at the 'Add Mail Account' screen (Settings > Mail Contacts, Calendars > Add Account > "Other") — on the second screen you will see the control is used in this manner.

Edit: Thanks for the welcome. - I hope this clarifies things:

To clarify - in my opinion the segment control is fine for using in place of radio buttons when the following criteria are met:

  • Use the normal style, not the 'BarButton' style, as this should most definitely be reserved for filtering.
  • The number of choices is small, I'd say 3 or less. Any more consider something else (UIPicker perhaps)
  • If you have two choices, they should not be 'On/Off' type values (otherwise use UISwitch)
  • The choice is a fundamental, important choice you want to draw a lot of attention to, this is a big control that takes a lot of space (in its default look, at least)
share|improve this answer
    
Hi Marc! Welcome to the UX Stack Exchange. Thanks for including an example. Could you clarify what you think this method of display makes for a good user experience? –  3nafish Apr 26 '13 at 16:35
    
The placement and usage of the segmented control in your example is actually in line the guideline that option of such a control should switch views. Here it switches the view between IMAP and POP, it's just that they're the same. –  Koen Lageveen May 1 '13 at 20:01

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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