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

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.
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
To wind the melodrama down to a more acceptable volume, my point here is that when you’re dealing with producing material for anyone who isn’t “you”, without research or investigation you’re operating on guesses and blind faith – and if faith defies proof, then I really hope you don’t have any KPIs for your work.
For those of you who don’t know what a listserv is, it’s an email distribution list, restricted to a group of subscribers who can read and reply to posts which are then visible to all the subscribers. The listserv in question is hosted and moderated by a respected, global communications organisation (not the
Doesn’t this boil down to “Sorry – he’s already in our gang. Anyway can’t you take a joke”?