Ever watch a dog go into an unfamiliar room? (We have a pack of dogs that roam the office here at Foraker Labs, so I get to observe this behavior a lot.)
A dog will immediately sniff around the perimeter of a room, sticking close to the floor, and pay particular attention to objects sitting on the ground and stains on the carpet. The dog is on the lookout for the two essential communication devices of the canine world: food and excrement.
Why? Because dogs learned long ago that these things offer benefits in the form of:
1) Sustenance
2) Extra information about one’s surroundings
The other day during some informal user testing, it struck me that web users act in much the same way (I’m really not referring to our customers’ customers as dogs. Really.)
Instead of sniffing for pieces of dropped sandwich or puddles of urine (which would be absurd) website users sniff for places they can take action.
They sniff around the perimeter, sticking close to the top and left side of the web page, and pay particular attention to colored/underlined text and white text boxes with nearby buttons. The user is on the lookout for the two essential communication devices of the Web: hyperlinks and form elements.
Many websites, unfortunately, throw users off the scent by either obfuscating what’s actionable through poor interaction design, or filling the page with so much stinky cheese and excrement that it’s overwhelming.
Holy overload, Batman!
In Jakob Nielsen’s article of April 26th, 2010 on iPad Usability, he notes:
For more than a decade, when we ask users for their first impression of (desktop) websites, the most frequently-used word has been “busy.“
While in this case Nielsen is providing counterpoint to the “beautiful” user experience of the iPad app he’s testing, the point for website design is clear: cut the crap.
Unfortunately, just keeping it simple isn’t enough to ensure wagging tails.
Condition Your Users
The single biggest usability stumbling block I see in user testing is inconsistency in hyperlinks and form controls. This inconsistency can manifest within a single website or application, or can stem from a failure to follow more global conventions. Pavlov didn’t get his dogs to salivate by pairing food with a bell, then a whistle, then a Bee Gees song, and then a Xylophone. He used the same bell, rung the same way, by the same person—over and over.
Nielsen, in decrying navigational inconsistency in iPad apps, revisits some oft-disregarded essentials for website and web app design. My favorite is:
Abandon the hope of value-add through weirdness. Better to use consistent interaction techniques that empower users to focus on your content instead of wondering how to get it.
When faced with the choice of a dead fish vs. a gorgonzola encrusted filet of sea bass with cranberries and tarragon, a dog will go for the dead fish every time. Dogs are creatures of habit. Weirdness is just… well, weird.
Web users are creatures of habit, too. Some of the first things new web users learn are:
- white boxes shaded to look like “holes” in a web page mean, “you can enter information here.”
- gray buttons mean, “you can submit the information you’ve entered by clicking here.”
- colored and/or underlined text means, “you can click here and go to a new web page.”
When these rules are applied inconsistently or ignored altogether, users can’t sniff out what they’re after.
The other day I watched a client stumble over this screen:
Confusing Google Analytics login
She was trying to log in (i.e. to “Access Analytics”), but because the big blue button doesn’t look like a place where you can take action, she instead plugged her username into the search box (a browser default form element). Catastrophic? No. Annoying? Absolutely. Little annoyances chip away at brand trust. Google has a huge brand, and therefore lots of leeway. Assuming Topeka, Kansas, hasn’t named itself after your company, you don’t have this leeway.
Information Scent
The concept of information scent has been around for years, and suggests that plain-language, unambiguous navigation labels help users “sniff out” what lies behind those labels. The information scent should get stronger the closer the user gets to the final goal. But this assumes that the user knows that the label is navigation in the first place. The best navigation labels in the world won’t help the user if he or she has no idea what’s clickable.
If you cover your dog’s food with gorgonzola, cranberries, and tarragon, the dog doesn’t recognize it as food. When nothing smells like food… the dog must fall back on visual or more direct gastronomical methods. This slows everything down, consumes more cognitive load, and raises the hackles.
If gorgonzola sea bass is the only food in the room… given enough time, the dog will of course eventually get around to eating it. If, on the other hand, every other room in the hallway is filled with whole sea bass lying on the carpet rotting, the dog will quickly move on to less-bizarre pickings (the “hallway” is a search engine results page, in case you were wondering).
Understand your audience and support them in their goals
What’s so unfortunate about bad interaction design is that users typically want to accomplish the very same conversion goals that the website owner wants them to accomplish, such as buying a product, registering, posting a comment, etc. Poor interaction design gets in the way.
Before you deviate from browser defaults for form controls, consider your business goals. Adding some design flair isn’t always a terrible idea, but this decision should have compelling business reasons to back it up—not just a designer’s whim.
Similarly, textual hyperlinks and navigation buttons must look clickable—every time, to every user, on every page, no matter how the user got there.
If your online business depends on getting users to buy products, every GUI element should support this goal—even those that are unrelated or only tangentially related. Contacting customer support should never be confusable with purchasing. Reading the company blog shouldn’t interfere with buying the company’s products.
Put another way, if you really want the dog pack to eat up the leftover sea bass, throw it on the floor and leave it alone. Save the money you would have spent on gorgonzola, cranberries, and tarragon for something else (like carpet cleaner).
