Drop-down menus have been a thorn in web users' sides for years, but when replicated on mobile websites, they become even pricklier. Mobile ecommerce sites with country and state or province selectors, for example, risk abandonment when drop-downs are too long and difficult to use. Today we look at 5 approaches to handling long drop-downs (of all kinds) in mobile web forms. How long is long?Web usability guidelines suggest dropdown menus with more than 15 items should be avoided. This guideline is also recommended for mobile.
On iPhone, for example, only 5 selections are visible at a time while scrolling through a long menu. Even when menu options are alphabetized, an aggressive swipe can send the menu spinning like the Price is Right's Showcase Showdown wheel. According to Nielsen Norman research, menus of state abbreviations are much faster to type than to select from a drop-down. "Free-form input into fields with restricted options does require data validation on the backend, but from a usability perspective it's often the best way to go." This is, however, much easier on keyboards than touch screens, but is still an option for mobile forms. Input errors are more common on touchscreens as qwerty letters are tiny tap targets. Switching to this form of input is not the perfect solution for mobile. So how can you preserve long drop-downs whilst making them easier to use? 1. Open field autocompletion vs. fixed drop-down menusOpen field autocompletion is just like a search box autocompletion - suggestions appear (in drop-down format) as the user types, and the menu shrinks as letters filter menu options. A user may ignore the drop-down and keep typing, but it serves to speed the process and reduce errors for those that take advantage of it. One example of this in action is Brooks Brothers:
It's important to test, not just multiple mobile browsers, but also orientations. In landscape mode, the overlay covers up the touchable selection area of the dropdown.
2. Present most common countries firstIf the majority of your customers order from a handful of countries, presenting them at the top of them menu eliminates the need to scroll -- especially for United States and United Kingdom customers.
3. Narrow to most common countriesEurocar narrows its menu to its top 40 countries (for its mobile site, only). This is still beyond 15 menu item guideline, and risks making life much more difficult for customers outside of the 40. Use this option cautiously.
Image source: UX Booth 4. Use GPS detection to suggest countryRedeeming itself, Eurocar taps into the GPS capabilities of mobile devices, requesting geolocation permission from mobile users.
An alternative to client-side permission is server-side paid geolocation tools like Akamai and Maxmind, which removes a layer of friction -- user permission is not required (asking for geolocation may provoke FUD anxiety). There's a slight trade-off on accuracy vs. GPS location, but for country selection, pin-point accuracy is not as important as city or exact location. 5. Ask for ZIP code firstWhile this won't solve international selection issues, asking for ZIP or postal code before city / state allows you to prefill or narrow down the selection options for these fields.
Bonus: Other Mobile Drop-down Issues
If you don't absolutely need to ask for information in any form, don't -- especially on mobile. Financial Times may have its reasons for asking profession, role and industry, but it's safer to make these optional, post-conversion requests.
Menus like the above also pose a problem that they are not as straightforward as Country or State. The user really has to read each option and mentally process what is the correct option (unless they cheat and select one at random). Another problem is when menu options don't fully display on mobile devices. In the case of delivery date selection below, this input is better served by a calendar or abbreviated text (Fri 5/24 - $9.99, for example).
Take a moment today to test your site's conversion funnel forms on at least one mobile device (multiple devices and multiple mobile browsers, if possible) in portrait and landscape mode. Do you encounter any problems?