Note: This rant dates from 2003, when Habitat's website was very different to how it is now (it's now a great deal better).
The inaugural member of our rogue's gallery of appallingly designed websites is British furniture and houseware retailer Habitat. Once independant, Habitat is now largely owned by the same folks as own scandinavian furniture giant Ikea. Habitat's product is positioned as an upmarket, design-conscious alternative to its bigger brother, but Habitat's website betrays its "design is good" ethic utterly. It's the worst kind of masturbatory flash hijinks that makes ignorant executives happy, and
frustrates users in ways most don't understand but still viscerally despise.
It's ironic that Habitat's parent, Ikea, has a pretty good website. It's not as pretty as Habitat's. It lacks little animations which run during the interminable delays while it loads stuff - not least because it doesn't have those internminable delays. Ikea's website seems to have been designed
with some sensible user tasks at hand (duh, like buying furniture). It's coded in HTML, and has all the advantages that does over flash.
Fundamentally, Habitat's page has two underlying problems:
Ego-centred design
It's a universal tenet of modern user-interface and website design - that designers should produce a "user-centred" design. Roughly, that means the designers are supposed to figure out what tasks users are going to try to perform on the website (ideally by asking those users) and then
making sure the website supports these activities easily. Lastly, the designers are supposed to test their completed site with users (lots of users, ideally) to make sure the site does indeed easily enable the tasks (and to make sure there's no obvious things that a user might want to do that the
site doesn't let them do).
For a site like Habitat's, these tasks might include
- Find the nearest store, its address, phone number, fax number, email information.
- Browse the catalog (or search it) and view details of individual products.
- See what's actually in stock.
- Buy stuff online.
In fairness, Habitat's site lets you do most of these. But it does all of them badly. Considering just the above examples:
- There is a store directory, and it does indeed contain maps. But the maps are small and favour style over information. Habitat don't put in a link to one of the popular mapping websites, information about parking, about motorway exits, about one-way streets, information about home delivery, or
locations of nearest public transit.
- The catalog! When I first tried this (late in September 2003) the catalog did indeed work, although search didn't. Each item seemed to get a single photo, and a few lines of lifestyley blurb. Now (late in October 2003) it's rather amusingly empty.
- There seem to be no products, so I suppose nothing is in stock. A nicely animated stickman tells us we can check, but seemingly only the stickman part of the site is important to its designers.
- We can (woo hoo) buy art on line (ON DEMAND, apparently). But not tables, or candles, or throw-rugs. Oh well.
Rather than get this stuff right, our friends over at Habitat have instead put in endless "lifestyle" stuff (which would be fine if the basics worked) and information about their "philosophy". Super.
Flash vs Function
Back in 2000, usability guru Jacob Nielsen posted a damning review of the state of user interfaces designed using flash. Saying Flash: 99% Bad, Dr Nielsen pointed out some of the elementary user interface design mistakes that seemed to
plague almost every website that used the technology. Regrettably, Habitat's designers seem to have taken this as a "to do" list:
- Flash this ain't - perhaps it should be called "Sludge"
Encrusted with showy graphics and leaden animations, Habitat's website runs like molasses. Even on my sprightly broadband connection, each page transition takes five to twenty seconds ("please wait...."). This painful sluggishness isn't justified by the actual content we get. There are some
valid uses for flash animation, but Habitat don't do any of those things. We can't look at furniture from different angles, or put our shopping cart's contents together in a "virtual scene" to see how they'd go together. No, but we can watch little animated figures fighting each other, or walking
aimlessly around (preying for death, one imagines). - Browser portability
The "art on demand" site checks for IE4 or NS6, and complains (with a popup, no less) if you don't have such a thing. Mozilla seems okay, but Opera and Konqueror (and one assumes Safari) users are invited to "upgrade". Users with text browsers - hah! - Broken browser navigation
Well, there IS no browser navigation in the flash part of the site, only Habitat's retarded flash navigation, which (like absolutely every other flash based navigation system I've ever seen) doesn't work. So you can't use the "go back" button, the browsers history list, you can't bookmark a
page, and greatest of all sins - you can't copy a URL from the location bar and paste it into another document, or use the browser's "send page" feature. - Cut and paste is for girls, apparently
You can't cut and paste from flash (unless the designed explicitly coded that, something that plainly didn't occur to Habitat's mincing boho designoids). So if part of the site contains something interesting about some product or design, let's hope you brought a pencil and paper. - Blurring is not antialiasing
I don't know how they do it, but the designers manage to get the supposedly antialiased text to look blurry instead. Nice work, boys. - Fixed width
Perhaps the most common silliness among graphics-obsessed web designers today, making the site work only at a single width. If your screen is too small, too bad. If it's too large, let them eat whitespace. Had Habitat spent less effort on the site, and coded it as sensible HTML, the site
could easily adapt to pretty much any width and still look good. Aber nein. - Access for disabled users - no thanks!
The site's main navigation elements are represented in oh-so-stylish shades of grey, tastefully juxtaposed with ... other shades of grey. The difference is okay for users without visual handicap, but not for those with poor contrast perception. Worse, because the site is in flash (duhhh) such a
user can't apply a "high contrast" stylesheet. Or a stylesheet that increases font sizes. Or run a screen reader that pulls out the text and navigation information. And if a user can't use a mouse, but has to rely on keys for navigation (visitors with cerebral palsy, for example) then habitat
plainly doesn't want their business. Perhaps all those untidy disabled people will upset Habitat's cold speerian aesthetic? - Popups are bad
Users hate popups. Do a survey of what 100 internet users want, and see how many of them ask for "more popups". Popups hide your other content (isn't it important anymore?), annoy users by forcing them to attend to something else, and break the browser navigation. Habitat is, of course, quite fond
of popups. Popup menus (which slide around just when you're trying to hit them), and naturally popup windows.
Conclusion
Now, how can a (plainly very expensive) website end up in such a state? How can a team of plainly very skilled designers and engineers produce something so deliberately bad? The answer is simple - they don't care. The design is plainly designed along the thesis that 95% or so of users
are able-bodied windows 98+ PC users running IE5 or IE6 (it's a correct thesis, but a morally vacant one). They plainly think that supporting everyone else (by actually doing their job properly) isn't worth the effort. Moreover, they've missed the point entirely about what a company website is
for. They seem to think the web is paper, so they've designed a cute animated brochure, but it's oh so pretty vacant.
p.s. Don't let this rant make you believe that I think flash to be instrinsically bad - it's not, but seemingly 99% of its practitioners are. Of the places where it is used, particularly for vectorised animation (e.g. HappyTreeFriends, HowStuffWorks), it's great, and does the client-side things that Java applets were supposed to be able to do, but never quite delivered on. HowStuffWork's excellent animations of the workings of hearts and engines just couldn't be done as well any other way - and
the HowStuffWorks folks know that not everyone can access the flash, so they have static images and lots of well written text too.