How accessible are dropdown lists on mobile devices?

Question

I am developing as site for mobile devices which requires the user to select a product (there are ~70 in total). I however do not have a testing device with me at the moment (I am also currently on a Mac and do not know of any mobile browser emulators for Macs).

My question is, would a drop down list of length ~70 be way too long? How hard would it be for a user to select an option from it (assuming there is nothing else on the page)? For the sake of argument, how hard would it be to navigate it on the iPhone and the BlackBerry (those are the two most important browsers for me at the moment)?

I would rather not split up the list for the sake of simplicity but I guess I can if necessary. Does anyone have any better ideas for splitting up the list/displaying the form on a mobile device?

For some insight into why I want a drop down list like this, it is so that users can select 2 products (two lists) and the site will return whether or not they are compatible with each other.

Answer 1

I've had this issue with trying to present country codes or airports in mobile web apps. It does work just fine (especially on iPhone & BB), but you should do as much as you can to make the selection easier. We did things like

• Place the nearest airports (geographically) at top of the list
• Remember last selection
• Configure a short list of the most selected products and have these at top of list

This suggestions are based on the context of what the user is trying to do on our webapp. You will have different context with your own optimisations hopefully.

One suggestion for you is to switch your UI from two drop lists to two pages - on the first page display all the products as HTML links. When the user selects a product, navigate to the second page, but you can now populate that only page with products that are compatible with the product selected on the first page. Have a look at http://m.jetstar.com, go to the Booking Process and see how you selecte departure/arrival airports. It might work for you?

BTW - try http://www.iphonetester.com to get a sense of what your website will look like in the iPhone form factor.

Good luck!