Because of these drawbacks, in default iOS apps, dropdowns have basically disappeared.<\/p>\n
Alternatives<\/h3>\n
To achieve better UX, consider using some of the following components instead.<\/p>\n
- \n
- Use Steppers<\/strong> to increase\/decrease integers.<\/li>\n
- Use Sliders<\/strong> for selecting from a range of numerical values.<\/li>\n
- Use Switches<\/strong> for binary choices.<\/li>\n
- Use Segmented controls (iOS)<\/strong> or buttons<\/strong>, which require only one tap, when there are a few options.<\/li>\n
- In case there are a lot of options, the area for listing all the options, if there is any, should be large enough for easy scanning. An additional search\/filter\/auto fill<\/strong> feature could be provided to help users get to the right option faster.<\/li>\n<\/ul>\n
![\"\"](\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2019\/02\/IMG_0537E250D282-1.jpeg\")
The Clock app of iOS on iPad. The area for listing cities is large enough for easier scanning. Additionally, a search box and an index are used to make locating a city faster.<\/figcaption><\/figure>\n And finally, here are some good reads if you’d like to learn more about dropdown usability.<\/p>\n
- \n
- Dropdowns Should be the UI of Last Resort<\/a><\/li>\n
- Dropdown alternatives for better (mobile) forms<\/a><\/li>\n
- Drop-Down Usability: When You Should (and Shouldn\u2019t) Use Them<\/a><\/li>\n
- Mobile: Never Use Native Drop-Downs for Navigation<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
In a project, we may be tempted to use dropdowns to give the user a bunch of options to choose from. These options could be countries, languages, genres etc in a form or a setting page. After all, that’s what we are used to seeing in a lot of apps…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[86],"tags":[15,56,46],"class_list":["post-356","post","type-post","status-publish","format-standard","hentry","category-interaction-design","tag-design","tag-usability","tag-ux"],"_links":{"self":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/comments?post=356"}],"version-history":[{"count":8,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/356\/revisions"}],"predecessor-version":[{"id":408,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/356\/revisions\/408"}],"wp:attachment":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/media?parent=356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/categories?post=356"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/tags?post=356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Dropdown alternatives for better (mobile) forms<\/a><\/li>\n
- Use Sliders<\/strong> for selecting from a range of numerical values.<\/li>\n