0

For example, I have a form, where I should input date, country and my gender.

date(many) - is very-very big list, so, apple make picker for it. Good one.
country(several) - everybody know about countries, there can be twelve, fifteen or one hundred countries to choose. So, I suppose, that should be a list like a table view.
gender(few) - and what about things like gender?
Only two/three/four items to be chosen?
What is the best way to layout them?

1 Answer 1

1

The best way to go when offering small amounts of options is checkboxes or toggles. It's easy to use, you can find out what are the options at a glance, and you know what to do.

Your goal should be to make it feel intuitive and natural, minimizing interactions (number of clicks/taps).

Classic checkboxes

The facebook mobile website uses the classic checkbox element to choose your gender. The con is that it's something you're not that used to see in the native iOS UI, the pro is that it's easy to implement more than two options (Male, Female, "Don't want to tell"?).

Gender selection in Facebook web app

Small Toggle

If you want to choose between only two values (male or female), a slide is an easy way to show two exclusive choices. But as some people pointed out in other posts (see this question), you may introduce confusion: is the displayed gender the current selection or should I press is to select that gender? (state vs action)

Gender by Alexey Anatolievich

Gender by Alexey Anatolievich on Dribbble

Note: Some users might be upset with the stereotype "blue for boys, pink for girls".

Toggle

Here is a more native iOS looking solution, you can indeed remove the image above the Male/Female selector. It may be more obvious which one is selected (compared to the toggle above).

Drink it smart iOS App

Drink It Smart, iOS App

3
  • what are the official names for the UI elements above? as far as I can tell, checkboxes and toggles aren't actual UI elements in iOS. Commented Dec 8, 2015 at 21:01
  • 1
    The first one doesn't exist natively, so developers recreate it themselves or use some kind of framework that provides it. The second one is called a "Switch Control" and the third one is called a "Segmented Control", they're both available natively.
    – refreshfr
    Commented Dec 23, 2015 at 11:21
  • thanks, I keep seeing these elements but could never get their names! Commented Dec 23, 2015 at 18:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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