Fuck Dropdowns: 6 Ways to Eliminate Dropdowns From Your Design
In my last post “You Know What? Fuck Dropdowns” I gave Eric Campbell and Golden Krishna’s thirty two reasons why dropdown are the worst, a place to live outside of their 2016 SXSW Keynote Presentation video.
Dropdowns are constantly misused in design, but the reality is there are a lot of other UI options out there that make a lot more sense for certain jobs. Campbell and Krishna point this out in the second portion of their SXSW presentation. So whether you’ve watched their presentation and just want to review, or this is the first time you’re learning about this, here are the options Campbell and Krishna present.
Radio Buttons
A lot of times you’ll run into a dropdown that only has a few options in it. This is a great example of a situation where there’s a better solution, and you can eliminate the dropdown all together. Campbell and Krishna suggest simple radio buttons instead to “expose all the options to the user.” This solution makes things much more clear and puts everything out in the open.
Sliders
Another common kind of dropdown are ones that contain quantitative values. A better solution? Move the information into a slider. This solution presents the information visually so you can see the minimum and maximum instead of scrolling through yet another dropdown. Campbell and Krishna point out that a common example of this is ecommerce sites with shipping information. Shipping terms may be difficult to understand, but presenting them in a slider allows you to clearly see shipping options from slowest to fastest.
Graphical Elements
Chances are you’ve probably come across dropdowns that contain graphical elements like color. Replace dropdowns like these with better UI and “let them be what they are: graphical elements.” Here, displaying the options as graphical elements is much simpler to the end user.
Typing
Occasionally you come across dropdowns like this one, that have three things about the same category. You encounter this in situations that require month, day, and year. Instead of forcing people to use three God awful dropdowns, just combine them into one element. Campbell and Krishna point out the example, Google Forms. Here, the calendar UI uses a combo-box element that you can type right into.
Type-ahead
Oh the agony of the state dropdown. You all know this one — these long, predictable content lists. When you come across these dropdowns, you don’t need the entire list because you already know the contents of the list. Campbell and Krishna suggest converting that dropdown into a type-ahead element. An example of this is a jQuery plugin called Chosen.js which is pictured below.
Detect Information
You also come across dropdowns that really just serve as a label for another input field. In these situations Campbell and Krishna advise us to think outside the box and eliminate the dropdown all together. Instead, make the input smarter to accept and understand more natural language. In the example below, Campbell and Krishna point the International Telephone Number jQuery plugin that does just that.
Watch Campbell and Krishna’s full talk at www.fuckdropdowns.com and stay tuned for part III of this Fuck Dropdowns blog post series.
