Just when you thought it was safe to go back in the water – animated homepages
Posted in UCD, UXD, User-Centred Design, usability, web on May 14th, 2010 by The Long DogIn which the Long Dog praises the extinction of animated webpages, only to find there are still monsters in the deep.
In the beginning there was black courier on a grey screen. Then came JavaScript and Flash and the grey wastes of the internet burst into moving colourful landscapes. Unusable, inaccessible and frankly downright irritating landscapes, but nonetheless the animated interface was born.
Before people were thinking about why they creating websites, back in my early days they mostly thought about how cool their site could be. Somewhere back in the late 90s I had this conversation:
Long Dog: So, tell me about this new customer extranet your manager has asked me to design for you…?
Marketeer: Well, if we could have these three triangles, like in the new logo, sort of spinning out of infinity towards you, out of the screen, sort of vwoosh! and be there for people to click on, yeah?
Long Dog: I’m sure we can do that, but let’s talk about the guts of the site first: What’s this product and why are customers logging in to an extranet?
Marketeer: If they could, like, spin in – the triangles – and sort of hover, then people could click on them to get into the site.
Long Dog: Ok … yes … but let’s think about the content and the structure – what’s this site ‘for’?
Marketeer: [pause] Can we do the triangles…?
Sound FX: Bam! Bam! Bam! Bam! Bam! Bam! [sound of reloading] Bam! Bam! Bam! Bam! Bam! Bam!…
Fade to black. End scene.
To be fair, I sent him back to his manager with a list of questions and never saw him again. But ‘the triangles’ are burnt into my memory.
Anyway … with the .com bubble bursting and businesses asking awkward questions about ROI for websites, suddenly people got interested in usability and even user experience. Now, it’s nice to think that the internet’s design dark age is a comically naive part of the industry’s necessary evolution, but I’m both horrified and masochistically pleased to say that there are still plenty of animated interfaces and home pages out there – and their owners still haven’t got the joke.
Here’s three favourite baddies and then one actual goodie that breaks all the usability rules and gets away with it.
Just Like Sugar
My all time favourite. Oh yes. Now, this product may be a perfectly good artificial sweetener, but what has happened here? Apart from the seemingly unending and inescapable flashing, moving, zooming art-vomit that is repeatedly hurled at the screen, there’s fuzzy audio, hidden ‘skip intro’ links and well … just check it out for yourself. Really – it needs to be seen to be believed. And then try the ‘real’ homepage – really … you’ve got to see this (thanks to @AnalitycsGirl for sending this in).
WARNING: Contains loud audio and flashing imagery.
Tip(1): You may need to refresh the page up to four times to get it to load in its true majesty
Tip(2): ‘Skip intro’ is in the footer links, below the fold on most browsers, should you wish to move foolishly attempt to escape the onslaught.
Site: http://www.justlikesugarinc.com
Leo Burnett
Yes it’s beautiful. Yes it’s a clever piece of animation and interaction, but come on Leo Burnett, shouldn’t you know better? The fixed navigation at the bottom of the screen feels like an apology for the whizzy stuff, unable to show the site’s navigation choices all on the screen at the same time – something that should have hinted that if it needs propping up, it doesn’t work. Maybe that’s why this agency were recruiting digital consultants a couple of years back to train up their offices in user experience. While this is a masterpiece of design, making it difficult for people to click on links through to your content and laying an automatically playing voiceover is going to get your site back buttoned quicker than a poultry farmer accidentally landing on a site that isn’t about the same sort of large male chickens he expected.
Tip: Be quick with your clicks, as the navigation actively drifts away from your mouse pointer. Go figure.
Site: http://www.leoburnett.com
Hema
Seeing the Dutch homewares company’s home page first off I was really impressed. Fun, brilliantly executed and what a great way to get people to see your wide range of products. But then I tried to click through to a product to find out what happened next. Ah. You’d have thought that for the money they must have spent, they could forked out a few extra Euros to make the products clickable? Apparently not. So Hema – what are you selling, flash movies or homewares? A quick check shows me that the navigation and other links aren’t clickable either and the site takes away your control of what part of the screen you’re looking at. Um…? Beautiful, but for a site that describes itself as an “online winkelen” (“online shop / store”) it fails to deliver actual value to the user or, ultimately, the business (thanks to Simona Ecker-Zach for sending this in).
Tip: Let the site load and don’t touch anything – just wait a little and watch the pretty things happen.
Site: http://producten.hema.nl
Poisson Rouge
Now this is lovely. Remove all labelling, text navigation, add automatic audio, provide no clues as to what’s clickable and what’s not and you’d normally get a dog’s dinner of an impenetrable, unusable, inaccessible visual mugging. But follow these rules for a entertaining, educational site for early and pre-school kids and you get a masterpiece of exploration, rich interaction and fun, multilingual learning. There are no rules here. Just go, play and figure out what you’ve got to do. Who knows, you might improve your mental arithmetic, shape recognition, or even learn a few words in French, Greek or even Chinese. They reinforce Jared Spools usability mantra “it depends” and come up with something really good.
Tip: Just play.
Site: http://www.poissonrouge.com
Summary
Animations are great to show actual movement or to provide visual cues, or just for plain entertainment, but please, please … PLEASE … fit animation form to function, as eye candy doesn’t increase profit.
The Long Dog

It is very difficult to say the phrase “Have you seen anyone in an orange hat” without sounding like you’re either drunk or undergoing elocution lessons. The orange hats idea was something I came up with in university, where between the two options above it was unlikely I was undertaking elocution lessons at the time.
Although it’s still relatively new, the value of augmented reality is to add contextual information quickly sucked from remote data sources and present it in easy to understand ways alongside the object itself rather than searching the web and doing a manual comparison or depending on our own knowledge to phrase an enquiry, where augmented reality can supply new information we couldn’t have known to ask about. My (then) four year old son was also kept amused by my friend’s iPhone as he used its camera to scan a room where only through the magic (there it is again) of the device he could see fairies floating around as if this really were a true-seeing device (you have to keep up with the fairies when they float out of view) and zapped them.
As a user experience professional, there are always irritations with websites and I just have to bite my tongue because (a) sometimes they’re not THAT bad and (b) they’re not my client. The Co-Op’s personal internet banking service has been fine – even ‘good’. But like a number of banks they’ve adopted the use of a card reader device for making online payments. If you’ve never used one it’s the size of a pocket calculator, you insert your debit card, enter your PIN, enter the code the website’s given you, and then enter the code it gives you, back into the original website. So that’s three codes, a card and a card reader. Some banks use this when a customer sets up a payment to a new recipient, but the Co-Op requires it for any payment beyond shuffling money between your own savings accounts.
I firmly believe the true user’s / customer’s / audience’s / whatever’s experience is that of ‘the big picture’ – or at least that the big picture has a direct impact on a user’s experience. Just because it’s a Norwegian Blue with beautiful plumage doesn’t make up for the fact the parrot is dead. Clear as mud? Thought so.
In the old days, just having a website was enough. Anyone other than your local pottery or cleaners of Oriental rugs who didn’t have a website was missing out. But these days, don’t sites have to try a little harder to get our attention?
In the Lord of the Rings, Sauron (baddie) tries to hunt down the hobbit Frodo Baggins (goody). Despite dispatching nine undead warrior-kings, armed with magic swords and mounted on dragons, they fail to find the diminutive bumpkin, travelling on foot on first trip outside his village, with only his gardener for protection.
In some industries usability can mean the difference between life and death. In ‘
These days the Commander of a Challenger 2 tank now communicates with his crew (driver, gunner and loader) by computer. Instead of a clunky keyboard and mouse combo, the Commander instead uses a handset almost identical to the Xbox 360 game console handset. Why? Games companies have spent a lot of time and money finding the most ergonomically designed controllers and the military have borrowed this learning to make their systems as usable as possible. As ‘the Nintendo generation goes to war’ (thanks
C-3PO: Sir, the possibility of successfully navigating an asteroid field is approximately 3,720 to 1!