About half the world’s population uses them, yet have you ever stopped to wonder what urinal design can tell us about good Enterprise Mobile usability practices? No, of course you haven’t. That’s my job. But when it comes right down to it, Enterprise mobile UX and bathroom urinal design have a lot in common. The number one goal in both cases is to provide an interface that’s comfortable, familiar, and intuitive so the user can complete his #1 task as quickly and easily as possible. Without further ado, then, I give you the UX of UP: the top mobile usability lessons gleaned from a close (some might say too close) examination of men’s room urinals.
1. Never place interactive elements too close together.
Every man needs a little wiggle room for his…finger. So be wary of placing interactive elements too close together. Fortunately, on mobile devices this isn’t much. So long as you stick to the recommended padding around each interactive element. Google (Android) recommends providing “8dp or more space” between them (this works out to about 1.5mm) while Microsoft similarly recommends no less than 2mm between elements.
Remember, when it comes to screens, size matters. Objects that appear widely separated on an iPhone 6S Plus might be cramped to the point of being untappable on an iPhone 5’s smaller screen. I’m looking at you, eBay and Facebook!
Note: As my wife points out, this rule also applies to toilet stalls. Stop making her stand on the toilet in order to shut the door!
2. Be sure each tappable control is given an ample hit area.
Apple recommends giving tappable controls a minimum hit target of 44 x 44 points (approximately 9.6 mm). Google suggests touch targets be at least 48 x 48 dp (Density-independent Pixels – see image at left): “Size elements at least 48 dp high and wide to ensure a physical size of about 9 mm regardless of screen size. The recommended target size for touchscreen objects is 7-10 mm.” Microsoft’s “Extensive user testing suggests that 9 mm square is the ideal touch target size across all Microsoft touch platforms” but allows a slightly smaller minimum hit height of 7 mm for wide-form elements. Remember, oftentimes it’s best to make the hit area larger than the button graphic itself.
Similarly, the ideal urinal should provide a maximum hit area.
Disgusting though they may seem, the trough-style represents great urinal design (at least in terms of hit area—though I suspect they are highly splash-prone).
3. Design with everyone in mind.
As a diminutive man, this one hits close to home. I can’t tell you how many times I’ve encountered a urinal mounted too high for me to use comfortably. Why does this happen? We should all be designing for the lowest common denominator (in this case literally). Yet often you’ll see urinals installed at two heights. One for adults, the other, presumably, for kids (and shorties like myself). My question though is this: why do we need the higher-placed urinal at all? Who CAN’T use the lower urinal? How tall would a dude have to be? Because thanks to a little something called gravity, everybody pees down. Nobody pees up.
Commenting on Anton Nguyen’s Why I Hate Urinals blog, JGood4U astutely reasons thus, “You can blame the urinal manufacturers for their ‘recommended mounting height’ in their datasheets…There is no value to mounting a urinal where the top of the opening is over 41″, and with the stream flowing in a downward direction, even well below 41″ would accommodate even this extremely tall male’s urinary needs. This would result in the lip (the lowest protrusion) being 12 – 13″ off the floor, instead of the 24″ the manufactures typically recommend.” Better still, urinals should simply extend the full distance to the floor, a design that provides the largest possible hit area, least chance of error, and accommodates the broadest user-base.
That said, it’s important to always create a single UI that’s capable of supporting every edge-case user. This means ensuring your colors are distinguishable by those with the most common forms of color-blindness, and supporting Dynamic Type so vision-impaired (or older) users can increase the size of the text in your app without destroying the layout. In the case of video, provide the option to view captions. For messaging and alerts, consider including alternate feedback methods such as flashing light and/or vibration along with sounds or graphics.
4. Keep it simple, familiar, and consistent
If you’ll pardon the digression, I’d like to take a moment to discuss toilet flushers and what they can also teach us about mobile UX. First, everybody knows how to use one. The one rule of flushers is this: push it down, it flushes. That’s it. Until somebody had the brilliant idea to save water by providing two flush modes activated by a single flusher. Which sounds great on its face. But then—wouldn’t you know it—this happened.
I realize we’re looking at two different manufacturers here, but seriously. How can you expect people to know how to use a two-mode flusher if you can’t even settle on a standard? For my money, up for #1, down for #2 makes the most sense, considering the relative trajectories of the projectiles involved.
Some manufacturers have begun producing two-button flushers to achieve the same end, the trend being to use a smaller button to indicate less water usage and a larger button for a full load. But sometimes these buttons can get pretty awkward, being either too similarly sized to be easily distinguished or else strangely positioned, as in the case of this Yin-Yang flusher and the double-flusher buttons featured here. Others utilize raised dots or other pattern to provide a visual and tactile indicator of each button’s purpose.
But how intuitive is any of this? Ideally a mobile app shouldn’t require any instruction at all but should instead rely on established mobile interaction paradigms. Though device/platform specific, native interaction guidelines are rules we should all adhere to, particularly in the enterprise space. This is the common language of mobile. But if any interaction or functionality seems potentially confusing or ambiguous, better to err on the side of over-informing the user as to its correct usage or intent—via button labels, brief explanatory copy, help overlays, etc.
As with a bad app layout, occasionally just the positioning of a flusher is enough to render its intent inscrutable—despite how simple the action is.
Meanwhile—as with non-native interaction methods—some flushers function in a way that deviates too far from the norm to be intuitive.
That’s way more physical contact than I’m comfortable with.
You may be shocked to learn that as far as we’ve come with urinal design, the giant wall-style john remains the apex of urinal design. Remember, when it comes to UX and urinals, simplicity is key. Also, what man doesn’t enjoy peeing on a wall? The ancient urinal shown below belongs to The Eagle and Child, a historic pub in Oxford, U.K., where allegedly CS Lewis and JRR Tolkien relieved themselves (though it’s not known if they ever crossed streams). Here we’ve got what amounts to an infinitely large, error-free hit area, and a single device that can accommodate several users simultaneously and requires no additional interaction (except, unfortunately, with other patrons). This design needs no water at all as the urine simply follows the force of gravity. Again, the only drawback is lack of privacy, (i.e.: user discomfort remains an issue).
And there you have it! The UX of UP: Urinals and Usability. Don’t let your business go down the drain due to a poorly designed mobile app. Check out our Mobile UI/UX Design Kickstart, then give Propelics a call. Whether your company is redesigning an existing app (or suite of apps) or is looking to add new devices to its portfolio, our Mobile UI/UX Design Kickstart will have your apps sparkling in no time.
Tune in next time when we’ll discuss the UX of electric eye hand towel dispenser mechanisms!
Content Strategy Lead at Anexinet