Fido.ca’s usability sin

There are few things that universally qualify as web design FAILs. The esteemed Jakob Nielsen has a list of Top-10 Web Design Mistakes from 1999 which, in web years, is a long time. Long enough that you think people would have learned.

Arguably, most of the ten mistakes he lists are not so hard and dry. For instance, it is not too hard to imagine situations in which opening a new browser window (mistake #2) is not a clear cut screw-up. And some of the mistakes are less serious than the others, e.g. #8, “jumping at the latest internet buzzword.”

But there is one holiest of holies that you just don’t mess with: breaking the “back” button. The back button is the second most used browser action, right after clicking a link to follow it. Breaking the back button is a clear signal that you haven’t thought, or don’t care, about your users.

So why does Fido.ca’s Phones & Accessories store think they’re above this? It’s aesthetically pleasing, but trying to compare phones on their website was easily the most frustrating web browsing experience I’ve had in a long time. While I usually think it’s not very helpful or informative to be so flippant, in this case I call: user experience FAIL.

Web design for different monitors

Having been a Mac user for slightly more than a year, and working on several different monitors with quite different specs has opened my eyes to the absolute necessity to test your design on a variety of monitors before rolling it out (leaving aside the challenges posed by designing for mobile web devices).

I’ve lost track of the number of times I’ve been on a website that I can tell instantly was not field-tested in this way, a problem that manifests itself most obviously (and annoyingly) in the prevalence of unreadable font/background-color combinations. I may be (barely) able to read that #f7f7f7 font on #ffffff background on my Mac laptop, but there’s no way I’m seeing anything on the 25-inch CRT + Windows XP + non-ideal lighting conditions I’m using at my day job.

Moreover, I find generally that anything that looks like just the right size on the Mac laptop will probably look just a bit too big on most PC monitors. And that light-green background for the sidebar? Chances are that if it’s going to look anything like green on my work monitor, it’s going to more closely resemble a gray-green on my Mac, unless I get the screen at just the right viewing angle

The way I generally try to overcome this is to use a similar approach as I do with web development: develop in the best-possible-world scenario, and test extensively in the real-world-scenario. For my web development, this means developing with Firefox and/or Opera and testing with IE6 and 7 (include Safari somewhere in there).

For design, this means developing with a 19-inch LCD screen intended for PC use plugged into my Mac (with obligatory DVI adapter). You get a rough and ready idea of how your design is going to look on two different and fairly common types of monitors. Then, of course, test again under less-ideal conditions (older CRT monitors with some bad office lighting).

I’m sure there are much more rigorous approaches to this sort of testing, but this is a good baseline that my years of web browsing suggest is not nearly as common as it should be. Strangely, the worst offenders are usually design-oriented websites by people who should know better. I’ve never understood why “looking cool” is more of a design priority than “being usable”.

Leveraging the shape of information

Came across a good presentation from 2004 by Victor Lombardi, called Incorporating Navigation Research into Design Method (PDF) that discusses (among other things) the “native shape” of information, and how to leverage it in design.

Three images, drawn from research by Elaine Toms (citation in PDF above, all images taken from PDF above) comparing the “recognizability” of three different version of the same document, which in this case is a Chinese restaurant menu. The first two versions were recognized most often by study participants

two presentations of Chinese restaurant menu items, one with original formatting
two presentations of Chinese restaurant menu items, one with original formatting

However, the third, while recognized less often, was recognized twice as fast by participants.

third presentation of menu content, using original formatting but with non-meaningful information
third presentation of menu content, using original formatting but with non-meaningful information

In another experiment by Toms that Lombardi touches on, content from one genre (e.g. content from a menu genre) was formatted in a fashion typical for a different genre (in Lombardi’s example, as glossary entries).

When participants were asked to identify the genre they selected the genre of the format, not the content. So in this case they would have said this is a page from a glossary. This again reinforces the impact that form has on our understanding of a document.

restaurant menu content formatted as glossary entries
restaurant menu content formatted as glossary entries

The take-away for web design is that when the information you’re presenting has a “native shape” — one that users will be familiar from the real world — don’t overlook it as a powerful and intuitive way of conveying meaning.