
Dropdowns Should Be the UI of Last Resort - mathattack
http://www.lukew.com/ff/entry.asp?1950
======
deanclatworthy
There 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.

~~~
cbaleanu
Chrome on Android has a very useful setting to force zoom. Go to Settings -
Accessibility - Force Enable Zoom - Profit :)

Not sure if Safari has something similar though.

~~~
0942v8653
Here's a bookmarklet you can use to enable zoom:

    
    
        javascript:m=document.querySelector('meta%5Bname=viewport%5D');m.content=m.content.replace(/.*(width=%5B%5E,%5D+).*/,%22$1,maximum-scale=10,minimum-scale=0.1,user-scalable=1%22);
    

I found it on HN a while ago, I wish i knew where. To add it bookmark another
page then go into bookmarks edit mode and change the URL to that.

~~~
el_duderino
[https://news.ycombinator.com/item?id=9414599](https://news.ycombinator.com/item?id=9414599)

------
anc84
If 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
While 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.

~~~
dublinben
Those 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)

------
userbinator
IMHO 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...?

~~~
mattmanser
Those things suck. Tiny click area requiring fine mouse control.

~~~
simoncion
Are 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.

------
justuk
I 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
It'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
It 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
So 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.

------
kalleboo
This 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.

~~~
minikites
MM/DD or DD/MM?

~~~
JupiterMoon
YYYY-MM-DD?

------
brudgers
GUI'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.

~~~
warbastard
While I agree with your point that computers should do the most they can to
take the work out of things for the user, the flight search example used in
the article is exactly the sort of thing that at some point you're likely to
need to input. It's a plan that the user has that they want to action. While
you could use voice recognition or call a person to do the same, some people
are probably going to want to type it into a flight search or calendar app or
similar, so the GUI for that is necessary.

"Making rounded corners and gradients is easier than making something useful.
that's why it gets so much attention"

It's not about it being easier, it's about making it obvious that the user can
use it. Following established design conventions for buttons by gradating
backgrounds or rounding borders, however right or wrong they may be, can help
a user to know the intention behind something without needing to think about
it.

~~~
bonif
This would be the perfect use case for SIRI (or alternatives), but we're still
a little far from that.

"I want to fly from X to Y in the first week of september"

------
vortico
>4 tap operation

Click dropdown, select item

>Stepper

Click +, click +, click +, click +, click +, click +, click +

wut

~~~
mkagenius
Lot 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.

~~~
cubancigar11
This 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.

------
Aoyagi
As 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.

------
aembleton
This 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.

~~~
auganov
Yes. And please - if you feel like reinventing the dropdown be decent enough
to re-implement that feature. Example of an offender:
[https://www.google.com/advanced_search](https://www.google.com/advanced_search)

~~~
softawre
Yikes. What's funny is the article writer is a product director at Google.

Fix this Luke!

[http://www.lukew.com/about/](http://www.lukew.com/about/)

~~~
GFischer
To be fair, that page predates Luke's stint at Google by a long time (I don't
know how long has it been since it last received an update, many of Google's
features are sadly neglected).

------
bbx
The 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.ht...](http://jgthms.com/dont-use-dropdowns-for-a-few-items-only.html)

------
staz
When 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 ?

~~~
J_Darnley
Because twitter needs to know you have visited the page.

------
mschuster91
The advantage of dropdowns is their integration in the browser UI - which
means stuff like VoiceOver works just fine.

~~~
eterm
I 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
Exactly - using standard html is a plus.

------
adamzerner
Bret Victor talks about the inadequacy of normal form controls in Magic Ink -
[http://worrydream.com/MagicInk/#p169](http://worrydream.com/MagicInk/#p169).

------
kraig911
So 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.

------
ivanhoe
This 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
Any 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
typing would involve 6 actions:

click, type 4 digits, return

a select would involve 3 or 4

~~~
adwn
You 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.

------
dabernathy89
I 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.

------
Animats
The 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
at 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.

------
hit8run
Would 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
What'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.

------
mkagenius
Lot 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/UserEx...](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/)

------
akurilin
On 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! :)

~~~
toufka
Apple 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/UserEx...](https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html)

------
devy
Visit 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.

------
seattle_spring
Dropdowns and modals

------
tempodox
What the hell is “idertion”?

------
geniium
Nice article

------
fgtx
I just read (two times) that "Dropdowns should be the UI of _Minority Report_
". Guess I need some sleep.

