Poor Design in the Wild

February 21, 2017

Old-Fashioned Bicycle with Square Wheels

I call it, “The Ideal Bicycle.”

Purloining a quote from myself, “Have you ever pulled a door only to realize it must be pushed? Or struggled to read squint-worthy text? Or felt repelled by sloppy-looking things? Or wrestled with a timed sink that stops while you are still washing and forces you to rub your soapy hands all over the button that activates it?”

Poor design frustrates.

But from it we can glean great lessons. Herein, I will illustrate three commonplace cases of poor design and offer my own solutions.

The Dentist’s Sink

If you drop by a dentist’s office, you might spot a sink like this one:

Poorly Designed Sink at My Dentist’s Office

A poorly designed sink.

The small grey-ish circles are buttons. One button triggers the front faucet. The other button triggers the rear faucet. Riddle me this: which button corresponds to which faucet?

We cannot know the answer to that question unless we investigate by trial and error. This is poor design.

To illustrate the problem and provide one feasible solution, I have drawn an overhead diagram of the sink. Examine with care:

Overhead Diagram of the Poorly Designed Sink

The poorly designed sink.

How can we clarify which button corresponds to which faucet? We can rearrange the buttons:

Overhead Diagram of My Version of the Sink

The Howard Sink, as we may immodestly call it.

Unlike the original, my revision acknowledges the fact that people instinctively associate objects that lie in close proximity to each other. A button near a faucet indicates, “I activate this faucet, not the other one.”

If all the world’s dentist’s offices would implement this simple fix, we could conserve a wealth of time and energy.

Berkeley Symphony

Episode II of our design quest confronts us with the perils of “flat design,” a now-popular software philosophy that rejects visual dimension and realism (an ideological transition that Eli Schiff’s “Humanist Interface: Introduction” so expertly catalogues).

Review this image of the Berkeley Symphony ticket website:

Incoherently Designed Berkeley Symphony Checkout Page

Hint: there is no special color pattern separating buttons and plain old text boxes. Two of the orange boxes are buttons; the other two are not. One of the purple boxes is a button; the other is not. One of the green boxes is a button; the other is not.

Four of these eight “buttons” are actually buttons. I challenge you to choose the correct answers. Useful web design would (almost) never force you to puzzle over such a basic question as, “Is that a button?”

Instead of creating the monstrosity pictured above, software designers can employ thoughtful shading to render a recognizable button, instantly signifying its button-ness (buttonitude?) to their users. Real-world metaphors aid understanding by reminding users of concepts they already know.

Designers can extend the metaphor even further by furnishing the button with a depressed state (the only case in which depression makes me smile), a feedback mechanism alerting the user that the button has registered her press and this press is about to invoke the button’s designated action. As software is, for many people, an everyday thing, I contend it should be designed like one.

Facebook Messenger

Facebook, too, perpetrates (and perpetuates) poor design. Observe this menu in the Facebook Messenger app for iPhone:

Incoherent Facebook Messenger Camera Button

Without pressing anything, can you tell what that blue circle represents? I certainly could not.

Not until I pressed the blue circle did I discover its true identity: a camera button. One might reasonably expect a camera symbol, or another clue that implies the button’s function. But Facebook offers no such luxury. Its mystery button keeps us guessing.

Imagine if the button instead looked like this:

Facebook Messenger Camera Button, As Rendered by Me

My rendition of the menu, with a camera glyph that implies the function of the button.

Alas. Such clarity is anathema for today’s designers, who seem to prefer non-representational minimalism.

Believe it or not, the enigma deepens for Facebook Messenger. As Super Bowl LI approached, Facebook replaced its already non-communicative camera button with a downright misleading camera button:

Facebook Messenger Camera Button with Promotional Football Glyph

What does the Super Bowl have to do with Facebook Messenger’s camera function? I suppose the fervent football fanatic snaps a few photographs at the Super Bowl. But that connection is such a stretch as to render the graphic meaningless. Facebook’s button shouts “football,” rather than “camera.”

Valentine’s Day, too, heralded a misleading graphic:

Facebook Messenger Camera Button with Promotional Valentine’s Day Glyph

Facebook’s designers seem to take more interest in promoting the latest holiday or sporting event than in helping you use a function of their application. To my chagrin, much of the user interface design discipline has taken a tack in this direction of “unhelpfully abstract” over the past several years. But I will not elaborate on that shift here: some of my past articles have covered it, and some of my future ones will, too.

Whether or not these poor designs play a part in your everyday life, I hope you can digest the lessons they teach. I digest lessons like these constantly, and they temporarily sate my voracious appetite for knowledge and wisdom.

Newer Post Fluent Design Crit. Older Post “Flat Design” Fiction Go to Main Blog Page
Join My E-Mail List

Hear from me when I post a new article or have other “big news.”

E-Mail Nicholas
DMCA.com Protection Status