2

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

6
  • You refer to a web design question. If you say you need a mobile solution, are you wondering about touch (vs. mice) or about size? Nov 30, 2016 at 8:28
  • I have a couple of questions: What is the source for the text you quoted? and Have you considered breaking the list down into multiple UI elements - i.e. the user can choose a high-level region that then populates a shorter menu of finer detailed locations? Nov 30, 2016 at 8:33
  • Both size and touch. I know that most orders are coming from mobile in ecommerce website. Because of that I need to keep in mind mobil users experience. My question is concerning stores checkout page form fields. Nov 30, 2016 at 8:35
  • Many blog posts in the web has been mentioned that dropdown is not mobile friendly solution. Is that wrong then? Nov 30, 2016 at 8:45
  • @user3748173, Not necessarily wrong but it would help to gain some context if you added a link to your information source. Nov 30, 2016 at 10:43

2 Answers 2

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

search with dropdown component

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

dropdown with grouping

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.

0

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:

predictive search field

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

  1. 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
1
  • Maybe you could name some ecommerce websites that uses those solutions in their checkout page or guide me a forum/page where to ask if anyone knows such ecommerce website. Dec 1, 2016 at 12:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.