19 ms·
Dropdowns Should Be the UI of Last Resort
- userbinator 11y agoIMHO the best option for inputting a small integer value is the combination of a text field and a stepper, which has been around for a long time and has its own name (for touchscreen operation, the +/- buttons could be made larger and horizontally, like the steppers shown): https://en.wikipedia.org/wiki/Spinner_(computing) https://en.wikipedia.org/wiki/Spinner_(computing) For dates, a calendar control would probably be appropriate. I'm a bit puzzled as to why dropdowns are a "4 tap operation" - once to dropdown and once to select, with possibly some intervening scrolling if it's a lengthy list. Where are the extra 2 taps coming from...?
- liviu- 11y ago>I'm a bit puzzled as to why dropdowns are a "4 tap operation" Either they count 'moving on' as a tap, or they just assume that on average you scroll at least twice: "First tap the control, then scroll (usually more than once), find & select your target, and finally move on."
- eterm 11y agoTap to bring up the dropdown Tap to start it scrolling it downward Tap to stop it scrolling downward Tap to select the actual item you'd like edit: Just noticed you were quoting the grandparent comment to this comment, this is addressing that.
- liviu- 11y ago>Tap to start it scrolling it downward >Tap to stop it scrolling downward Always thought this is a one tap (and hold/swipe) operation?
- eterm 11y agoIt might depend on the length of list, and phone and browser, but a quick swipe usually starts it scrolling down, and a quick tap will stop it (there's usually some momentum, it'll stop itself eventually too). For a short scroll then a single hold and swipe will work.
- threefour 11y agoOn iOS I could three steps: 1. tap dropdown to select 2. scroll list 3. tap 'Done' But with any list of significant length (the reason you would use a dropdown in the first place) you'll probably need a few actions to scroll to the right item.
- coldtea 11y agoOn the other hand, any list of "significant length" is best served by a dropdown. None of the options he shows in the article works well there.
- vidarh 11y agoA list of significant length is often best served by search.
- simoncion 11y agoUnless -of course- you don't have a good idea of what it is that you want to search for! This happens to me far more frequently than I would like. :)
- vidarh 11y agoAt which point a search with instant feedback is still often far better than trying to scan a huge list.
- coldtea 11y agoNot really. If you don't know what you're looking for, search with instant feedback wont work, because while you might find something, you don't know if you missed a better option (under another starting letter or substring).
- coldtea 11y agoOnly if you know the options in advance as the sibling comment says. And mostly for very significant length (e.g. "all my songs") E.g. for up to 20-30 items dropdown is still better, and you can select with one finger without much concetration. Of course there's also the "searchable dropdown", or a dropdown where you can type the first letter(s) of an options to jump there.
- mattmanser 11y agoThose things suck. Tiny click area requiring fine mouse control.
- simoncion 11y agoAre you talking about spinners or calendars? For either, you can just enlarge the widgets to enlarge the click areas. For spinners, one can often scroll one's mousewheel (or equivalent gesture) with the pointer inside the spinner to rapidly increase or decrease the value contained within. The best calendar widgets I've seen also permit you to click a part of the widget -say the displayed date- to type in a desired date.
- pandler 11y agoI find myself having to manually close dropdown menus on my iPhone 5s. 1. Click to open 2. Scroll 3. Select Option 4. Click to close
- simoncion 11y agoThat's awful. They don't work that way on stock Android.
- arrrg 11y agoCalendars are certainly not appropriate for dates of birth, lest anyone get that idea … Calendars are useful when entering recent dates you may not perfectly remember (i.e. you might know that the day you want was a Monday last week, but you might not know the exact date) or for planning (i.e. you might know that you want to depart on some Saturday in September), especially when either days of the week or dates might be relevant points of reference for you. For dates very far in the past that tends to break down a bit, though, depending on the exact use case. Calendars are cumbersome to navigate if you want to go back years and years.
- qmalxp 11y agoIMO the best choice for a calendar is three separate boxes clearly labeled "MM", "DD", and "YYYY" in some order, preferably with the property that once the second (or fourth) character is typed, the cursor is automatically tabbed over to the next box.
- aembleton 11y agoThis is the case for mobile phones. On a desktop or laptop, the dropdowns are preferable because most browsers will let you select the day, month year using your keyboard.
- cstuder 11y agoFor desktop, I generally prefer checkboxes. Instead of having to discover the available options in dropbox, you can see all of them instantly in a list.
- onion2k 11y agoYou're right that people should be able to type in a date, but I'd argue that it's preferable to have a text input with a button to open a calendar control - many users don't know that you can use the keyboard to select dropdown box items so they'll use their mouse, and that negatively impacts their experience. If you want a user to be able to use their keyboard then the input should look like a keyboard input box.
- josteink 11y ago> On a desktop or laptop, the dropdowns are preferable because most browsers will let you select the day, month year using your keyboard. Not only that, but they are text-search using your keyboard too.
- andrewingram 11y agoDo you think an average computer user fills out forms using just the keyboard? I'm a developer and I still use the mouse.
- iopq 11y agoDo you think I can guess where "United States" is in your country dropdown? Oh, it's the sixth country, even though everything else is alphabetic order, but Sweden is on top because apparently you're based in Sweden and so is Denmark and Norway because apparently you have a lot of customers there. But I'm supposed to know this while looking under U and seeing "United States minor islands"? It's really annoying, I just type United and it usually jumps to the correct thing (the first United it sees)
- deanclatworthy 11y agoThere is a small irony that when reading an article about mobile UX, the website has disabled zoom meaning I can't actually see any of the images in the article.
- tgb 11y agoAnd to enlarge the pictures with small font, you have to click twice since the first link takes you to twitter of all places.
- eterm 11y agoAnd once again the top comment here is a meta-comment addressing the article formatting rather than the article itself. Can't we just let that stuff go and address the article itself?
- briandear 11y agoActually, in this particular case, I'd argue that this is incredibly relevant: Preacher preaches against UX sin. Commits UX sin with a non-zooming harlot.
- hellofunk 11y agoAbsolutely. Meta comments are often more important than the article they comment on, especially when they place the worthiness of an article in proper context.
- huskyr 11y agoNo, it's not relevant at all. It's not a dumb rant against dropdowns: it's a well written piece with lots of examples and arguments that show which UX patterns are better than a dropdown for specific usecases. That's not preaching, it's explaining. Finding a small flaw in his site and using that to downplay the quality of the article and the competence of the author is shortsighted, rude and unfair. Nobody's perfect. Everybody makes mistakes. Bragging about it on Hacker News doesn't help anyone.
- bbx 11y agoThe main misuse of dropdowns is as an alternative to a few (or even just two) radio buttons. [1] The only possible reasoning I can see is the flexibility it provides for I18N. [1] http://jgthms.com/dont-use-dropdowns-for-a-few-items-only.html http://jgthms.com/dont-use-dropdowns-for-a-few-items-only.ht...
- staz 11y agoWhen I click on an image on the page to zoom on it, it redirect me to twitter, then I have to click on it again, why ?
- ivanhoe 11y agoThis really depends on the situation: imagine something as classic as a birthday selector, what would you use for a year selection? The only applicable alternative is a slider control, but such a slider with a 100+ values might be very hard to use with the needed precision. Another common example would be a list of countries (or any long list of words actually), you can't use a slider there, it would be very counter-intuitive, and all other alternative controls would take too much space.
- briandear 11y agoAny problem with simply typing the information? It doesn't seem like it's that hard to type. A year selector just so someone can type four digits seems superfluous.
- markyc 11y agotyping would involve 6 actions: click, type 4 digits, return a select would involve 3 or 4
- adwn 11y agoYou forgot "searching" (or maybe "locating"?), which takes quite a while when you have several dozen choices. Just let me type those four digits! It's much faster in the end.
- sirn 11y agoThere are people who are not using A.D. as their calendar year. In this case, it's much less confusing to have a drop down. If the site is primarily US or EU-based, there won't be much of a problem, but in SEA this is rather problematic since the people usually use their local calendar year when talking about birthday. (For example, in Thailand nobody says "I born in 1986", instead most of us says "I born in 2529".) (And B.E. is confusing as it is, since there are difference in interpretion between countries, some has year zero and some do not.)
- lnanek2 11y agoI see country drop downs that allowed typing as well to selection. Usually it's some Javascript UI widget that does progressive enhancement, but it is available.
- kalleboo 11y agoThis reminds me of one of my pet peeves about the iOS UI - the date picker control. Yes, the scrolly spinners are a very cute UI and look awesome. But it'd be 10x faster if they'd just give me a number pad and let me hit the 8 digits rather than scroll up and down to get it just right.
- Bahamut 11y agoBut forces the user to make more inputs and adds cognitive overhead. I think you'll find that many users would disagree with you.
- oneeyedpigeon 11y agoWhy not support both methods? Chrome lets you type, or use a calendar picker (which itself has flaws, but at least they're trying ...)
- Klathmon 11y agoI don't know of the specifics on this one, but in the UI/UX world it's rarely a good idea to "support both". They generally lead to bad looking UIs that "almost" work for everyone, but aren't a good fit for anyone.
- simoncion 11y agoA calendar that also lets you click on the displayed date [0] in order to type in the desired date is almost never disliked. [0] By that, I mean a string somewhere on the widget like "2015-07-20", or however dates are displayed on the system.
- minikites 11y agoMM/DD or DD/MM?
- douche 11y agoISO-8601
- vortico 11y ago>4 tap operation Click dropdown, select item >Stepper Click +, click +, click +, click +, click +, click +, click + wut
- mkagenius 11y agoLot of the advice in the article would fail in some situations like the one you point out. Unless the quantity is less than 5, tap to increase doesn't make sense. Also, the slider wouldn't work in case you are trying to choose from an even average sized list on "min" or "max" side. There are only so many pixels in portrait mode and my big thumb - how can you expect it to be so precise. While in case of the dropdown in almost 2 scrolls i can get to the exact number by varying the speed of scroll, like binary search. Some of the points are correct though, i don't see many people making those mistakes.
- LoSboccacc 11y agomost of the page doesn't make sense. in at least every sample of 'good pattern' there is also an implicit dropdown, whether airport name autocompletion, calendar, something about being in sale and pre market in the search filters... the whole page basically contradicts itself. yes the bad UI has a fugly stile sheet. that doesn't make the good UI any functionally better, especially because you can still see a shitton of places where a drop down is essential. the only real improvement is that the date picker is one dropdown instead of three, but I don't think that warrants a whole blog page XD
- cubancigar11 11y agoThis happens to me on some online shopping websites. When I search for some generic term, I am shown a slider between minimum and maximum where minimum is so often 0 and maximum is 10^5, while I am interested in something, say, between 500 to 1500.
- ryanworl 11y agoOn iOS at least, the dropdown example would require: 1 tap to select the input field 1 swipe to move the desired item into view (I guess this is a tap) 1 tap to select the desired item 1 tap to move on to the next field using the arrow utilities, or one tap for "Done" That's four.
- mkagenius 11y agoLot of the advice would break and you will have to resort to dropdown depending on the use case, so its better to let the use case drive your design than some hard and fast rule against dropdowns. I refer to this article while designing for mobile - https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/ https://developer.apple.com/library/ios/documentation/UserEx...
- Aoyagi 11y agoAs someone who browses used cars market on a smartphone very often, I'm OK with dropdown menus. They take up less space and I prefer to see everything at glance instead of seeing some fancy control schemes.
- brudgers 11y agoGUI's embody micromanagement as a virtue. GUI's in general should be a last resort. Computers are supposed to do our work automatically. Barring that, by delegation. Making rounded corners and gradients is easier than making something useful. that's why it gets so much attention. NoGUI.
- Trufa 11y agoI don't think it's a matter of last resort, rather correct use. GUIs are inevitable. You basically should only ask from the user what a computer can't possibly know, for example what date you want to travel for your holidays and how many units of that product do you want.
- ff_ 11y agoI firmly believe that in a short time computers will predict all of those little things really well. Let's see.
- Trufa 11y agoWhat things? One seems highly unlikely, the other might be impossible. In on would have to be able to read complex human thought, in the other we would basically would have to predict the future.
- lmm 11y agoMy phone already suggests where I might want to go for dinner tonight. It's getting pretty good at it. Holiday suggestions don't seem that far beyond our capabilities.
- Jweb_Guru 11y agoYes, but you are free to disregard the suggestion and do something else, so UI still has to be built for that case.
- 11y ago
- akurilin 11y agoOn that note, is there a really basic caveman-friendly resource out there for UX-illiterate developers like me to help us make decent user experience decisions? A best practices text, or a guide for how to avoid the most obvious usability mishaps? I've had to "teach" myself most of this stuff by looking at other people's UX, but my results are still "meh" at best. Help! :)
- kraig911 11y agoMy best advise is to think of it almost procedural. Start off making something and test it yourself and you'll start smelling all the things off about it. Ideas to get to a good understanding incorporate a MLS into a search and try to pull off the simplest search (less form elements) you can getting the queried data you want.
- toufka 11y agoApple has their Human Interface Guide [1]. Even if you don't program using their elements, it's still an excellent first read to understand the thinking behind a number of the visual elements you often take for granted. Google and a number of others often publish their interface guides as well. [1] https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html https://developer.apple.com/library/mac/documentation/UserEx...
- Volrath89 11y ago> A best practices text, or a guide for how to avoid the most obvious usability mishaps? https://www.goodui.org https://www.goodui.org
- tempodox 11y agoWhat the hell is “idertion”?
- hit8run 11y agoWould be good if the browsers could offer more sane styled default elements. Why do I have to create a iOS like switch myself!? This is so often needed and a classic checkbox is not sufficient from UI perspective.
- douche 11y agoWhat's wrong with a checkbox? We've been using checkboxes for a hundred years at least, between computer and paper forms, before this "switch" concept became popular.
- err4nt 11y agoWell, thanfully it doesn't have to take much to turn standard HTML inputs into the types of eye-catching animated UI common on mobile. Here are two snippets from sites I've built that I have isolated for re-use. Feel free to use them in your own projects: - Smooth toggle checkbox http://codepen.io/tomhodgins/pen/vOKjXW http://codepen.io/tomhodgins/pen/vOKjXW - smooth sliding radio button tabs http://codepen.io/tomhodgins/pen/zGYmor http://codepen.io/tomhodgins/pen/zGYmor
- fgtx 11y agoI just read (two times) that "Dropdowns should be the UI of Minority Report". Guess I need some sleep.
- justuk 11y agoI dislike the way mobile has become the new lowest common denominator for web development. It used to be IE6 because it was antiquated but now it's anything with a touch screen - mainly thinking how hover has been relegated to visual effects even though it's fine on non-touchscreens.
- cjsaylor 11y agoIt's not about lowest common denominator. It's about what devices users are actually using to browse your site. If you make an awesome desktop version of the site at the expense of mobile, but majority are visiting on a small device, then you are alienating the majority. You have to keep perspective of why your are building something; if it is not for the users, then it is pointless.
- justuk 11y agoIt seems like a step backwards in sophistication all because these mobile devices were grouped into the same category as desktop. We go from tools that look like they were aimed at adults to simplistic toys. I see it all the time in user comments when websites switch to responsive designs. It's like we don't give a damn about desktop users because they are no longer fashionable.
- BonoboBoner 11y agoSo true. I hate it when CMS administration areas are rewritten to be responsive and end up wasting a huge amount of space on the screen. A CMS admin area is a power user , that most people us on their computer. Yet characteristics such as high information density and very accurate mouse interaction are all thrown out of the window, because of how the admin looks like on a phone. How is it responsive to ALL devices, when mobile first enforces such restrictions on a design.
- pyre 11y ago> mainly thinking how hover has been relegated to visual effects even though it's fine on non-touchscreens. It's fine to make it (hover effects) functional for desktop users rather than just using it for visuals, but you need to make sure that said functionality exists in another form for mobile. Otherwise, you're just giving a be "F* You!" to mobile users since the experience on your site is broken.
- adamzerner 11y agoBret Victor talks about the inadequacy of normal form controls in Magic Ink - http://worrydream.com/MagicInk/#p169 http://worrydream.com/MagicInk/#p169.
- anc84 11y agoIf you want to see the images in actual 1:1 resolution, here is how: * Click on the image in the text. * Click on the image in the tweet. * Right-click on the image in the pop-up. * Open image in new tab. * Change the "large" at the end of the URL to "orig". Load that URL. Congrats, you now see a huge (blurry upscaled) image that you can actually read. You are out 3 times the network traffic that was needed. Why would anyone link to their own tweet just to show an (already thumbnailed) image in an article is beyond me. And don't even ask me about my thoughts on Twitter's UI, showing a tiny version of images when you click on them is not sane.
- leftnode 11y agoWhile I completely agree with you - it's an ridiculous choice - you can just right click and click "Open Image in New Tab" in Chrome. Which ironically is located on the authors own domain.
- anc84 11y agoNice! I "gave up and tried something the author did not intend" only when I ended up with Twitter's tiny images.
- dublinben 11y agoThose aren't actually the full size images. It looks like the author has replaced the image links to go directly to the full size image now. Example: http://static.lukew.com/dropdowns_compare_2x.png http://static.lukew.com/dropdowns_compare_2x.png
- smpetrey 11y agomy guess is he is mining for twitter interactions. not justifiable IMO, but a reason nonetheless
- scoggs 11y agoOn an article about saving precious clicks and time due to poor UX/UI choices, no less. Oh sweet irony.
- mschuster91 11y agoThe advantage of dropdowns is their integration in the browser UI - which means stuff like VoiceOver works just fine.
- eterm 11y agoI actually strongly agree here. If dropdown menus are so bad, then it's up to the user-agent to fix that. Remember that they're not actually <dropdown> elements, they're <select> elements. If actions that require performing a <select> can be implemented with a much better different UI for mobile or touch, then user agents are free (and encouraged) to do so.
- ape4 11y agoExactly - using standard html is a plus.
- mschuster91 11y agoThe advantage of dropdowns is their integration in the browser UI - which means stuff like VoiceOver works just fine.
- dabernathy89 11y agoI won't say you should never use switches... but so many people do them poorly. I come across so many examples of switches where it's impossible to tell which position is "on" or "off". In many cases checkboxes should be preferred. Heck, you could even put a little "check" on the switch if you want to.
- kraig911 11y agoSo I do UI dev lately in liferay (I've done a lot of UX though too) and trying to accomplish what is so easily stated by Luke in say Alloy/Spring from a back end developer who doesn't have the 'resources' to incorporate fuzzy search et al I feel all this rage. But then there's nothing I can do about it :(. Sucks having to bill hourly and not be able to bill the time to a client for 'nice-ities' such as this advise. Clients just don't see the benefit.
- geniium 11y agoNice article
- devy 11y agoVisit njtransit.com on the mobile phone, you will see they use dropdowns for station names and locations extensively. Some of the dropdown has a few hundred items there. Their site (njtransit.com) is probably the worst and yet one of the largest public transit company site in the U.S.
- Animats 11y agoThe article glosses over the two hard selections - from/to airport, and date. For both of those, the number of options is large. The author offers no advice on that hard problem. His suggested UI would seem to force the user to bring up a keyboard and type airport codes.
- marcstreeter 11y agoat the very end of the article it states "All these alternatives to dropdown menus don't mean you should never use them in a user interface design. Well-designed forms make use of the most appropriate input control for each question they ask". The from/to airport, at least, is a candidate for dropdown. The point of the article is that it's best not to default to "what works", and approach "what's works best" or what's most appropriate for the data to be input.
- deleted 11y ago[deleted]
- seattle_spring 11y agoDropdowns and modals