UX of UP in the U.P.

Urinals and Usability in the Upper Peninsula

I’m not making this up. I was really in the Upper Peninsula of Michigan recently. Specifically, in the restroom at the otherwise pristine Pentoga Park, when I encountered the subject of this installment of The UX of UP. I was repulsed at the sight for a number of (presumably obvious) reasons. But I instantly realized the silver lining: this bathroom break would provide an opportunity for more lessons in UI/UX.

1. Avoid placing disparate objects too close together

Obviously, the thought of some random dude pissing a foot away from you as you’re trying to wash your hands is just gross. The functionality of these two objects is too radically disparate for them to be this closely associated with each other. One is a receptacle for waste, the other (theoretically) provides clean water. As Kipling once wrote, “Oh, East is East, and West is West, and never the twain shall meet.”

Similarly, to minimize user confusion, when it comes to your digital interface, always group similar nav items and interactions (buttons, content, etc) together (e.g. Contact & Help) while providing plenty of breathing room between unrelated interactions (e.g. Print & Login). Perhaps even provide a title or header that categorizes each group of items. Consider using such headers with animating panels that expand on click or rollover to reveal additional interactions and content.

2. For God’s sake, install a divider.

All it would have taken to turn this excretory travesty into a merely hum-drum bio break is a single wooden panel between the sink and the urinal. They wouldn’t have even had to paint it! Because, why would they? Paint would only have made it stand-out against the unfinished walls (though maybe some sanding to prevent splinters would be nice). Similarly, in your designs, use dividing lines and boxes — along with distinguishing characteristics like font color and background color — to further indicate related content and interactions.

Unfortunately, they couldn’t install a divider here since somebody already put a soap dispenser in the spot where the divider should go! Which brings us to our next point:

3. Don’t put a soap dispenser where a divider should go.

I’m cheating now. This is really the same point as #1: group related items together. But seriously. There’s no reason for the soap to have been placed equidistant between the sink and the urinal. Hang the soap dispenser over the sink where it belongs. The problem here is two-fold. First, it suggests the person using the urinal has just as much right to the soap as the guy washing his hands. Which is just crazy. The dude peeing is never going to need to reach over to soap his hands…or anything else. The proximity is unnecessary and inappropriate. Second, it forces the person washing his hands to reach out towards the person standing at the urinal in order to get some soap. Which is just creepy.

4. Hide the pipes.

This one’s obvious. Pipes are disgusting, especially when they’re PVC pipes stained with indeterminate bodily residues. Similarly, our digital tools should be frictionless and effortless to use (Is there a soap analogy here? I don’t think so.). Keep the back-end in the back where it belongs! They don’t call it the back-end for nothing. Users don’t want to have to think about the code it took to make an application, they just want it to work and to feel totally natural.

This especially applies in the case of poorly constructed error messages, when occasionally some coding language or technical information will appear, as in the Capital One example shown at left. Clearly, the average user would have no idea what it means, so why display it in the front-end UI?
What’s in my wallet? Not “Server instance: wascell\pphapp..US”! In other words, don’t flatter yourself. Nobody wants to see your pipes.

5. If you must show the pipes (and if you must use PVC), at least spray paint them to look like metal and hide the stains.

If your digital back-end stinks (e.g. it’s really slow), at least you can pretty-up the front end so the user doesn’t notice. For instance, one technique to distract the user from delays in data transmission is by animating icons, images and/or interface items or by displaying amusing or clever content (much like this article does) to give the user something fun to do until they’ve hopefully forgotten how long they’ve been waiting for the answer to appear. One website (I forget which one) actually offered users an 8-bit mini-game to play while they waited for the content to load.

Don’t forget to check out the whole UX of UP series!
The UX of UP: Urinals and Usability
UX of UP REDUX: More Lessons from the Bathroom
The UX of UP (and down): Elevating the Elevator

That’s it! Please feel free to send along any additional U.P. puns for me to elaborate upon, as it seems unlikely I’ll be able to come up with any more on my own.