On mobile, when should I use which dropdown list equivalent?

Question

Everytime I start designing for an App project I get stuck on user's list of options which my brain instantly associate with a desktop dropdown list like this:

From what I could gather Android have 4 possibilities and iOS 3:

Spinners: works well on mobile and tablets and seems to be more often used in small list of options (only Android supports it)

Pickers: iOS and Android have them but I seem to see the android version more often used for dates, maybe because they have the alternative spinner.

Dialogs: I've seem many applications using this for tablets while the phone version turns them into drill down/table view although can't see a problem in having them as dialogs/modals on mobile as well.

Drill down/Table View: Nice solution but don't work on a tablet as is, it needs a dialog or stacked screens

Whenever I decide on a solution, I often find myself wondering if this is just a case by case situation or if there shouldn't be some sort of rule of thumb. So my question is, when is best to use each of the options?

Answer 1

I think a good practice is to start by referencing the design guidelines for the specific OS to see what controls they have standardized and when they suggest to use them. Since it seems you may have already done that, I’ll go into an example of how you might be able to handle a situation where the guidelines don’t seem to give you clear direction.

For example, let’s say you are on a settings page. You have a list of different settings presented on the page. For each setting, the user has multiple options to choose from. In reading the Spinner and Dialog guidance (pasted below), it seems like either one could be appropriate. I would say that a dialog might be more appropriate because a user has chosen to drill down on a specific setting—we know they want to focus on that setting and the dialog provides a cleaner UI and larger touch areas. If you used a spinner, it would overlap other settings and the user could accidentally touch another part of the screen. So, I think a dialog would just make it much simpler to choose from the list.

1. Spinner:

   Spinners provide a quick way to select one value from a set. In the default state, a spinner shows its currently selected value. Touching the spinner displays a dropdown menu with all other available values, from which the user can select a new one.

2. Dialog:

   Dialogs prompt the user for decisions or additional information required by the app to continue a task. Such requests can range from simple Cancel/OK decisions to more complex layouts asking the user to adjust settings or enter text."

That’s just one example. I am trying to illustrate that I think that it really does depend on your context.

A proposed structure for making decisions: 1) reference design guidelines for the appropriate OS and 2) in the event that it is still unclear, think through the positives and negatives of each design option before making a decision 3) look at examples of how similar situations are implemented in other apps and analyze the pros/cons 4) feedback during any sort of usability testing.