34

I've searched quite a bit for this but surprisingly could not find any comprehensive answer. XCode doesn't provide any simple way to add dropdown lists to iOS interfaces. Stackoverflow just showed workarounds and long code just to get a simple dropdown list. This leads me to believe that the design pattern is to not really use dropdown lists! Is this true? And if so, what is the recommended alternative?

  • I also needed a HTML select-like control (single-selection dropdown list) without breaking the XCode legacy GUI interface across past and future iOS releases. I ended up coding DownPicker, a lightweight control which does just that combining UITextField and UIPickerView. It can be used either as custom control (UIDownPicker) or also as control wrapper, upgrading any existing UITextField. Here's how it looks like: !enter image description here For more info and download you can check this [brief tutorial](ryadel.com/2015/03/31/downp – Darkseal Mar 31 '15 at 13:49
7

iOS makes it much easier to use "Pickers". These may work depending on what you need the "Dropdown" to do. See new link https://developer.apple.com/ios/human-interface-guidelines/controls/pickers/

  • 6
    Can you elaborate a bit? While linking to external resources is good, answers that don't contain much more than a link have been deemed unhelpful by the community. – Charles Wesley Jul 16 '14 at 19:43
  • I think he's answer is clear: "use drill downs or pickers" and I saw examples of it in the link. He's answer answers the question "Is there a design pattern for dropdown lists in iOS?" – Chairman Meow Jul 16 '14 at 21:36
  • Thanks, Paul. I think the Picker will work for now, though it seems unnecessarily fancy. I'll try my hand at it! – sabziwalla Jul 17 '14 at 15:40
  • Yeah, those patterns work great in some contexts and not in others. If you try to use something else on iOS (for example a "click to expand" button that reveals more choices), it can be incredibly difficult to implement and/or get approved by Apple. – Paul Jul 24 '14 at 20:36
  • Kindly update the link. – Bista Sep 18 '16 at 14:58
32

Even though Apple recommended (and surprisingly still recommends) pickers for dropdowns, not even they use it anymore. Spoilers:

enter image description here

enter image description here

In both these cases, the "logic" would dictate to use a dropdown + picker. Apple chose a much better solution for their own apps.

Still, a whole screen to pick between "Female" or "Male" (pardon the binary example) seems exaggerated. Personally, I believe the best option is to design what visually looks like a dropdown element that, when tapped, opens an Action Sheet:

enter image description here

The reasoning is that an action sheet is better than a picker because:

1) Action Sheets do not require scrolling to read and/or choose options that are not highlighted;

2) Action Sheets dim the background, providing clear affordance that by clicking outside the action sheet other elements will not be activated (whereas a picker makes the user unsure of where to tap in order to close the picker without accidentally tapping something else);

3) Action Sheets have "Cancel" buttons;

4) Action Sheets items are 44 points high, have margins between buttons and can list more options using more space on the screen;

Action Sheets are also better than the fullscreen listed beforehand, because they don't take the user to another screen, and thus making the flow more... fluid; and they're better than a custom-built alternative because they're native and consequently "more future-proof". Brad Frost would probably correct me, saying they're actually "future-friendly".

By the way, Luke Wroblewski has an excellent article on why dropdowns should be the UI of last resort, and these 4 very excellent videos going into details as to when and why one element works better than the other (and with research to back it up):

Luke Wroblewski Part 1 - Conversions@Google 2014

Luke Wroblewski Part 2 - Conversions@Google 2014

Luke Wroblewski - Mobile Design Essentials Part 1 - Conversions@Google 2015

Luke Wroblewski - Mobile Design Essentials Part 2 - Conversions@Google 2015

Put your headphones and dive in. The videos are worth it.

  • 4
    I'm with you - I avoid pickers wherever practical. HOWEVER, you are wrong about Apple violating their own guidelines. Apple says "Use a table instead of a picker for large value lists." That's why those cases don't use picker. Apple UI docs - Pickers. I would also add that picker is only good when the choices are well-known to a user; if it is an unfamiliar concept, user needs to see all the choices before they can make an informed choice. – ToolmakerSteve Apr 4 '17 at 4:07
  • 1
    Also note from that same link: "Avoid switching screens to show a picker." E.g. expanding the area immediately below the item being picked, not by going to another screen. – ToolmakerSteve Apr 4 '17 at 4:11
  • I've listened too Wroblewski' "last resort" and totally agree with him. The trouble is IMHO that Action Sheets whilst better that Pickers are still taking the user to a different screen. Do you think Spinners like the Date Time one used in iOS Calendar Event Edit is a good approach for short lists? – Pat Long - Munkii Yebee Sep 13 '17 at 7:46
2

Why do you need a dropdown on iOS? Dropdowns are incredibly hard to interact with on mobile (iOS or Android). I'd suggest an alternative pattern like a picker or as Paul mentioned, Drill Down Lists (a series of Table views, for multiple selection)

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.