Is there a design pattern for dropdown lists in iOS?

  • 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](http://www.ryadel.com/2015/03/31/downp

  • Paul

    Paul Correct answer

    6 years ago

    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/

    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.

    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?"

    Thanks, Paul. I think the Picker will work for now, though it seems unnecessarily fancy. I'll try my hand at it!

    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.

    Kindly update the link.

    re @Paul comment about possible difficulty having non-standard UI paradigms be approved by Apple: In my experience Apple will approve your UI, as long as it is built out of native widgets (even if you don't strictly follow their guidelines); what they have opposed has been cross-platform solutions that "emulated" widgets. So, for instance, it is necessary that Xamarin "cross-platform" forms actually build into native iOS widgets (which they do).

  • 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 - [email protected] 2014

    Luke Wroblewski Part 2 - [email protected] 2014

    Luke Wroblewski - Mobile Design Essentials Part 1 - [email protected] 2015

    Luke Wroblewski - Mobile Design Essentials Part 2 - [email protected] 2015

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

    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.

    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.

    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?

  • 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)

License under CC-BY-SA with attribution


Content dated before 6/26/2020 9:53 AM