Sliders are the new drop-downs

Seth Godin, author of “The Purple Cow” and other books on building great products has a wonderful rant on the persistence of really bad ideas (albeit tangential to his point) around the overabundance of pull-downs [and checkboxes and radio buttons] in forms:

There are fifty states (proof: Clickable Map of US States.) This is a problem. If there were 5 states or 500 states, programmers would never have been tempted into forcing consumers to scroll through a pull down menu to enter their state when shopping online. This means everyone from Texas or New York or heaven forfend, West Virginia, has to scroll all the way down in order to buy something. … No wonder so many people abandon shopping carts online.”

One important take-away from the Ajax Summit was that many of the interface innovations are going to be small and all-but-unnoticable — except in their experiential effect. There will be a steady trickle of mouse-overs and keyboard shortcuts; highlighting and guiding; backgrounded consideration and action; filtering, sorting, and suggesting into our interactions with the web. In particular, forms (and, by extension, form-driven sites) will begin to behave more like we expected them to.

We who are steeped in the capabilities and inabilities of the Web have come to accept that the user experience has left much to be desired and manage to avoid the parts where things have gone all soft. The end-user, on the other hand, routinely runs into those rough patches and is genuinely surprised and rather confused. Just about any airline reservations system (Southwest Airlines has cleaned up about 1/5th of their act) is exemplary of what is broken about the form-driven experience on the web. Select a combination of departure and arrival locales, dates and times, and click the Submit button to throw the dice. Unless you’ve the kind of a priori knowledge I have about flights between my home and office cities, odds are even at best that you’ll net a match or two. Not to mention the chances (and they’re high, given the number of fields on a typical reservation form) that “You did not fill in all the required information.” and will need to “Go back to the previous page and complete your selection.” And to add insult to injury, only recently has clicking the back button on your browser not wiped out all of your hard work (I’m looking at you, Alaska Airlines). These sorts of daily indignities make customers feel dumb.

Javascript and Ajaxian techniques (and Flash, in it’s componentized rather than appletized form) are starting to file down some of these rough edges. Flickr‘s gentle integration of Flash and Javascript, Backpack‘s subtle actions and notifications, Kayak‘s user-driven attenuation of options: all (while certainly early iterations) suggest a path toward the guessability for which Mac OS was so famous and closing the consistency gap between similar actions on the desktop and on the web.

Getting — finally, I’ll admit — to the subject line of this missive, a post on reemer.com points out the recent uptake of choosing along a continuum with sliders. “Dropdowns are the Excel of interface elements: when you see them, you know you have serious tabbing or mouse clicking to do. Sliders are a pleasingly zippy alternative.” He points to Amazon’s Diamond Search, Kayak.com‘s choice attenuation, and MyRatePlan.com‘s Flash-based chooser as good uses of sliders over dropdowns and the like.

Ajax-to-the-nth Google Maps is clearly different and chock full of genuine GUI goodness. But it’s in the Ajaxian combination of developers and designers taking a fresh look at the officially boring yet still very much broken bits on the web that my interest is piqued.

  • http://www.raelity.org/ Rael Dornfest

    Apropos of the direction I suggest Ajax promises, I just ran across James Fallows’s NYT article, “Finally, Sisyphus, There’s Help for Those Internet Forms”:

    The query-and-reply procedure is reminiscent of the old days of sending data to mainframe computers for processing. At least half of all items placed in online “shopping carts” are never bought. One reason is the cumbersomeness of the typical Web checkout process.

  • http://www.nivi.com/blog Nivi

    I really really really like your blog.

    A suggestion for an improvement:

    Can you put full excerpts in the RSS? Right now, reading the Radar in a newsreader is an exercise in true frustration. I can never tell if what I’m reading in the newsreader is the full article, an excerpt, a link to another page, or what.

    Keep on rocking.

  • http://www.raelity.org/ Rael Dornfest

    Hi Nivi,

    Thanks for the kind note. We actually have full-content in our Atom feed.

    Rael

  • http://www.raelity.org/ Rael Dornfest

    While not yet in the end-user domain, Greasemonkey is doing it’s part to improving the form-dweller’s lot. I just added zoomtextarea to my arsenal: zoom any textarea on any page of any site to fit the available page/browser width.

  • Ray

    This article would be better if it didn’t start out with a red herring. Seth Godin needs to learn to use drop-downs. I can’t remember the last time that I had to “scroll through a pull down menu to enter their state when shopping online.” Type the first letter of your state name. Repeat until your state appears.

    I am not saying that this is the ultimate in user experience that you have to remember this trivia to interact with your user interface, but you don’t have to scroll down to select your state. Also, state is a particularly poor choice, because everyone knows where their state appears in the alphabetical list. West Virginians can learn pretty quickly to type “W,” “W”.

  • http://www.raelity.org/ Rael Dornfest

    Hi Ray,

    (This assumes of course that you can even tab to the field in the first place and that your browser supports more than single letter type-along. Mac OS X, for instance, skips pulldowns when tabbing by default and even the pref that fixes this in Safari does nothing for Firefox.)

    But the bigger picture is that these forms tend to be a mass of tangled pull-downs, check-boxes, and radio buttons. There’s most often no intelligence in the order (so as to allow pre-filling of city and state just after you type in your ZIP). Not to mention (and this was the point of bringing in Seth’s rant) the fact that dropping in pull-downs where a simple text field (everyone knows their state’s abbreviation and can type it in two keystrokes) would suffice adds more complexity than is strictly necessary. Just look at Kayak’s wonderful handling of offering choices for airport code when you start typing into their flight search form. Yes, it’s a Javascript equivalent of a drop-down, but it doesn’t get in the way of your simply typing SFO or the like.

    The point of this post was around rethinking those tried-and-untrue UI bits now that Ajax and associated technologies are widespread and well-supported enough in browsers to give it a whirl (again).

  • pb

    I thought you were going to mention the Ajax way of filling in City and State based on Zip:
    http://www.webpasties.com/xmlHttpRequest/

  • http://kawika.blogs.com Kawika Holbrook

    Curious why any site even asks for the city and state if the ZIP Code is already known. Is it possible to have a ZIP Code cover more than one city? Why not simply eliminate the fields altogether and save everyone some time? Simplifying forms is just as important as improving the user interface, I suspect.

  • Wicked Draft

    Is rambling the new screen shot?