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?
4 Answers
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/
-
6Can 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. Jul 16, 2014 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?" Jul 16, 2014 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! Jul 17, 2014 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.– PaulJul 24, 2014 at 20:36
-
Even though Apple recommended (and surprisingly still recommends) pickers for dropdowns, not even they use it anymore. Spoilers:
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:
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.
-
4I'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. Apr 4, 2017 at 4:07
-
1Also 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. Apr 4, 2017 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? Sep 13, 2017 at 7:46
For those coming from google: Since iOS 14 there are pull-down menus in iOS. After iOS 15 they were renamed as pull-down buttons.
Here is a link to the guidelines: https://developer.apple.com/design/human-interface-guidelines/ios/controls/buttons/#pull-down-buttons
See my answer for some basic example code:
-
-
1Fixed the link, apple has renamed pull-down-menu into pull-down-button Oct 28, 2021 at 8:08
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)
UITextFieldandUIPickerView. It can be used either as custom control (UIDownPicker) or also as control wrapper, upgrading any existingUITextField. 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