pop up(modal) vs dropdown to display field in form containing long list

Question

The problem I am facing is - customer choses carrier and then he/she has to chose location of pickup place from dropdown. Is the dropdown best solution for mobile users? Location lists contains about 100+ items(options).

I have read that dropdown menu is not very mobile user friendly solution. According to this:

Is it more user friendlier to display long lists (when filling a form) inside pop up (modal/pop-up) with search field and radio buttons or not? What are the main cons compares to dropdown (are there any possibilities that advertisement blockers might not show pop-up or ...)?

Has anyone made a user research how difficulty it is to use dropdown in mobile devices when filling forms and are there any alternatives?

When user has chosen the value from pop-up box what are the best practices where should the chosen value appear (checkout page)?

Answer 1

There is a general recommendation by Luke Wroblewski to avoid using dropdowns in mobile interfaces. This is because they have high interaction cost and the available options are hidden.

They are best replaced by radio buttons/groups because they have much lower interaction cost compared to dropdowns: only 1 tap to select a certain option. With the dropdowns you have the following interaction cost:

• 1 tap to open the dropdown,
• scrolling (finding your intended item),
• 1 click to select option
• 1 click to close the dropdown modal (not always)

However, in a case where you have ~100 items then search with dropdown component is a good option in my opinion.

Solution 1: search with dropdown

The advantage over the normal dropdowns is that the user can filter results by keyword and select the intended option. The drawback of this approach is that to enter a keyword, a mobile keyboard should be loaded which may take time and has considerable interaction cost.

Solution 2: group items in the dropdown

When you group options you improve the visual search of elements inside the dropdown. Therefore, this approach is 1 idea better than using normal dropdown.

Test if you can

The best solution to your problem of course is to test those approaches. We cannot predict which way would be better for your specific case, that is why the best thing to do is test.

Answer 2

Yes, Luke Wroblewski is right (pls read http://www.lukew.com/ff/entry.asp?1950). No dropdown on mobile, especially for 100+ items list. This is a looong list, so you definitely need a search attached to it.

You have several options here (to avoid the dropdown on mobile).

1. So, when you click on the “chose the pickup location” field you focus on the field (in the same page/new page/animation etc.) with the input on top of the screen where you can search - predictive search/autocomplete - the location and the list sorted by proximity listed below, if you don’t know what to search in the first place etc. Something like this:

Maybe put a map view too, an alternate view to the list.

2. or get an off canvas menu with the list and the search above or a side table view with the list and the search above https://youtu.be/nmKMz3Fg76M?t=1h3m16s