UI and the Art of Motorcycle Maintenance

Back in the early days of the web, one of the first use cases to really spread was “e-commerce”. This was a straightforward advance on catalog-based mail order where you'd pick items from an HTML version of a catalog, enter your payment information and address details, and then from there UPS or postal service would send out your package much like in the old days. The convenience of cutting out the “get the catalog” and “mail in the order form” parts of the process was already a big advance, but many aspects of this experience have been improved since then. Now we can search and find multiple variants of exactly what we're looking for, read what previous purchasers think of them, check on availability and delivery time (always much faster than in the days of “4-6 weeks”), and more.

But what I want to talk about here is one aspect of the process that hasn't changed that much, which is entering the address to ship or bill to, and specifically the ‘state’ portion of it. Now the US has 50 states with names of varying length, but mostly long, and in the 1960’s the US Postal Service introduced zip codes and at the same time created two-letter abbreviations to free up space for the zip on the last address line. In the very earliest days of the web, when we needed to enter an address we'd get a text box for the state and could type in the two letter abbreviation. This worked more or less reasonably, particularly when the box would automatically capitalize for you.

Unfortunately web developers couldn’t leave well enough alone and someone came up with the bright idea of putting all 50 state abbreviations into a big dropdown menu. I suppose the theory went that it’s one less thing that would need to be checked for errors since the user would be forced to make one of the choices, and also it would be good because it reduced the need for typing and typing was bad. But it turned what was about a one-second process of typing two letters into a much longer one of guiding the mouse to a small area then dragging or scrolling to find the needed selection.

Screen Shot 2018-09-26 at 7.38.11 PM.png

Jakob Nielsen himself analyzed this very issue ten years ago, and the article about it on their web site is an interesting read.

Now one would have thought that in this day and age where great effort is expended to remove any and all obstacles to a user arriving at a site and being converted to a customer, even a minor stumbling block like this would be optimized away. But it has not. And this is also despite numerous experts in the user interface and experience field arguing that, when other factors such as learnability or memory load are equal, ease of use can be judged by the (measurable) amount of time it takes a user to perform an action. Nielsen’s explanation of this persistence is that, while the sites with state dropdowns are measurably worse, it’s generally just one of many issues impacting usability on any given site. The effect is therefore diluted enough that it hasn’t been eliminated from the web by natural selection in the competition between e-commerce sites.

I disagree. One thing we’ve learned about natural selection in real, biological evolution is that even traits with small disadvantages are eliminated over time just by the shear force of statistics. E-commerce is very much a process of natural selection. There must be something else involved.

One thing to notice about the state dropdowns that a dropdown menu, even with 50 entries, just looks and feels “slicker” than a simple text box. Now, slickness has been overcome in other areas of design after disadvantages were realized. For example digital dashboards were briefly popular in cars back in the 1980’s, but increasing realization that they were harder to read and react to than analog displays led to their decline. They’ve only recently made a comeback, but it’s generally by using digital means to draw analog representations. Likewise, the use of a dial instead of buttons was long seen as a hallmark of cheapness in kitchen appliances, like microwave ovens. But realization slowly built over the years that not only are button-based interfaces for setting time and heat difficult to learn, but they are slower to use even when you are familiar with them. Now plenty of high-end appliances come with dials, and their users are grateful.

So why hasn’t this happened on the web? Well, maybe the “slickness” is more important than we think in this case. Some ideas from Robert Pirsig’s famous book, Zen and the Art of Motorcycle Maintenance, can shed some light. Pirsig takes a uniquely Midwestern approach to philosophy, digging stubbornly and good-naturedly into the deeper truths underlying his experiences while motorcycling. In one case, his friend John’s handlebars are loose, and Robert proposes to wrap a thin strip of metal around them beneath the clamp so they’ll stay tight. John is fine with this up until Robert says he’s going to make the shim by cutting a strip from the can of beer he’s drinking. At that point John just shuts down and refuses to go any further. Eventually Pirsig understands that, while he was seeing the strip of beer can as the ideal material for the job, John couldn’t bear the thought that his precision-engineered German machine was going to be patched together by a piece of junk! And these two ways of seeing it, the book goes on to analyze, are deeply different. The one which sees the functional side of the can supplying a strip of metal with the right thickness and consistency, Pirsig calls the Classical, and the one which considers more the appearance and associations of the metal as coming from a can of beer, he calls the Romantic. We also know this distinction as “function” vs. “form”, or “artsy” vs. “techie”. Pirsig describes riding a motorcycle as primarily a Romantic activity, while fixing one is primarily Classical.

In this view, the “slickness” of the state dropdown might not just be in how it looks, but also in the experience of using it. Jerkily reaching for the keyboard and jabbing at some keys, versus clicking and smoothly drawing the mouse to a point of release. From this perspective, the fact that typing the state would be a few seconds quicker doesn’t matter. The whole process of selecting the state is smooth, beautiful, and hypnotic. It provides a rhythmic interlude of peace and absorption between the restlessness of typing the address and the zip code.

The approach to user experience that Jakob Nielsen and other UX consultants often take is fundamentally a Classical one. The time it takes to do something, or to learn to do it, or some combination of the two is the ultimate metric. Faster times mean more practicality and utility and should be the goal. They assume that users are annoyed when something takes longer, because that is what they can most easily measure. But just as motorcycles are not generally ridden to get from A to B the fastest, neither is online shopping always about getting it most quickly done. Users can be annoyed by things that take longer, for example when that time is spent trying to figure out how something is supposed to work. But when it’s engaging in some mildly absorbing process, it can be more like playing a game or otherwise something not unpleasant. I would submit that state dropdowns continue to exist because the majority of users aren’t annoyed by them, slower though they may be than the alternative.