In 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

Part 1: In which a snowy day and poor mobile website usability result in near truancy.
Following 6^th January ‘s closure of my five year old son’s school because of bad weather, the next morning, as instructed, I checked the website of WessexFM, our local radio station, to see if the school was open or closed.

Avoiding waking the household and balancing the possibility of extra sleep against the anticipation of a bored boy bouncing off the walls while I worked, I used my phone to check their site. On a page clearly titled “School closures” I found my son’s school listed. Not to mistake yesterday’s information as today’s I checked at 07.30, 07.45, 08.00, 08.30, even 08.45 and reckoned that was pretty good responsible parental checking.

Those familiar with ‘having a Daddy look’ will not be surprised that following a late morning call from the school I checked the main website on my computer where the ‘open/closed’ status was instantly visible on the right of the screen and my son was hurriedly dispatched to school.

As you can see from the image, there’s no clue there was a status off the mobile screen to the right, so I’d taken this to mean that the school was still closed. Damn, bugger and bumhandles.End of part 1.

Bestselling author and self-styled ‘usability guru’ Jakob Nielsen wrote that the mobile web of 2009 was like the desktop web of 1998. With web enabled mobile devices becoming more available to mainstream consumers, users expect the same service from websites on their phones as they do from their desktops. When they don’t get it they’re just as likely to lend credence to the adage that “your competitor is only a back button away”.

Generation Y’ers who’ve never known life without the internet don’t see why mobile sites can’t be as good as desktop sites – after all, it’s Mum and Dad who are in offices or staying in, worrying about their children all evening, who’ve got time to spend sitting at desktops. This is the generation whose fear-mongered parents have bought their little darlings phones. While they’ve done it to offer late night taxi services to preserve their own sanity as well as their offspring’s safety, the web generation are using these devices to access web on the move (or at least from street corners and secret park-based cider dens). The time has run out for organisations to ‘get round to sorting out their websites’ and now the race is on to make sure they’re mobile accessible as well.

Back to the story…

Part 2: Where feedback is acknowledged and everyone lives happily ever after.
In attempt to keep my son and heir’s school record unblemished I emailed his teacher with the details of my mistake and the promise to contact the wicked WessexFM and tell them of their hanus crime. Which I did, fully expecting the usual silence as my complaint fell spinning into a void of corporate complaisance. I was pleasantly alarmed when the Station Manager himself emailed me this:

“I have spoken to our web team and here is their reply…………

‘We’ve had a look at this and agree it could be interpreted incorrectly on a small device and have made a few changes…

• The “Closures” page now reads “School Status”
• We’ve added a line of text to the page highlighting that the page is offering both “Open” and “Closed” information
• On the main schools status we’ve added a filter so only open/closed schools can be viewed

These updates are in place now and will hopefully make it clear for anyone using a mobile to look at the pages.’

I sincerely hope that your son doesn’t incur a truancy mark as it is clear that this was an innocent mistake.”

How quick was that!??! Checking the emails I can tell you:  Four hours. Not only did they willingly accept user feedback, but made simple changes that improved the whole user experience. It’s these little tweaks that remind me of the article “How one button cost a website $300 million”. End of Part 2.

And the morals of this story?

• Explain it’s you that messed up and your son doesn’t get into trouble with his teacher
• Mobile website usability is still poor.
• Users: Don’t trust sites browsed on your mobiles unless you know you’re using the proper mobile version.
• Designers and developers: Make sure you use ‘liquid layouts’  so that they expand and contract to fill the size of the user’s browser; don’t depend on mobile device’s scroll bars to appear (they don’t always); detect if users are accessing the site through a mobile and present the information appropriately.
• User test and amend your work – Repeat until it works properly.
• And lastly … a round of applause for WessexFM, for listening to a concerned father / listener / user and being smart and agile enough to make changes to support your website’s users. Bravo!

The (mobile) Long Dog

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.

Why?

Apart from making a very short story where Evil triumphs over Good, it was because Sauron depended on assumptions: that people would always use the features of his product – a magic ring, conveying invisibility and all round magical artefact to be used by the wearer’s to bring about world-changing events. But Frodo didn’t want to use the ring (much).

The same can be said of websites and intranets:  features sound great and they cost money so they’re poured in, papering over the cracks of uncertain design; vanity content waffles about the extent of the fabulous products and welcome messages with grinning, gurning director’s portraits make grinning, gurning directors feel warm and fluffy.

Result is users can’t find the things they need, content and pages begin to spread to cover all possibilities and your competitor’s site is only a back button away.

Another example of assumptions (outside Middle Earth) comes from a supermarket chain who wanted to sell more baby products. The chain assumed the demographic was young women, full-time mums, shopping during the day time and thought of moving baby products near whatever was selling to women. After some research they actually found the main buyers of nappies (diapers) were men, aged 25 – 35, on their way home from work. Change of thinking? Hell yeah – the nappies / diapers were moved nearer to the alcohol, and beer sales sky rocketed. Clever business people … gullible Daddies.

Before you build your website based on weeks of sniping between marketing and IT, while the graphic designer doodles on paper and wonders about iPods, do these things…

• Remember Columbo gets the murderer by asking questions, not by telling his boss he’ll grab the first dodgy looking guy
• Find out about current and target users (these may be different groups)
• Find the middle point between business objectives and user needs: objectives definitely won’t be met if users’ needs aren’t
• Find a way to get out of doing things because they’re the director’s ideas (medicine that works is based on science – the rest is just pot pouri and placebo water)
• Don’t start with big design ideas or funky tech solutions, go back to the basics of what you’re trying to do and for who and work up from there
• Try out your ideas while they’re still on paper before developing beautiful and expensive failures
• Don’t always try to think outside the box … people need and like boxes
• World-conquering Lords of ultimate Evil should hire fewer magical henchmen and spend the gold pieces saved on hobbit-centred research
• Never … never assume you’re right

The Long Dog

In some industries usability can mean the difference between life and death. In ‘Everyday usability: Why people don’t use things’ I looked at why some products are a success (the printed book) and why some fail (Edison’s phonograph), but what has usability got to do with tanks, helicopters and fighter jets?

Preparing for the first gulf war, American troops ran war games in the deserts of their homeland. To add to the realism, as well as combatants role-playing enemy soldiers, US helicopters were ‘dressed up’ to resemble Iraqi vehicles. This simulation was later blamed for some of the ‘friendly fire’ among American forces: The troops had been trained to recognise their own helicopters, albeit ‘dressed up’, as enemy craft. While it was the exercise that was flawed, the soldiers did exactly what they were trained to do and destroyed helicopters that looked like the ones they recognised as enemy craft.

Usability is concerned with understanding human behaviour and psychology and ensuring that websites, processes, products – whatever a human has to interact with – is usable to its highest degree. We can tweak websites and improve on them as we go, but when someone’s life depends on usability, some serious research needs to be done.

If you can understand the how people work, fit what you’re creating to how people can best use it. Bodge it and there will always be mistakes – thankfully for most of us, these mistakes are usually only minor irritations.

Recently I went to Tankfest 2009 at the UK’s Tank Museum, next to Bovingdon Camp, where British soldiers are taught how to drive tracked vehicles. Apart from the sheer boyish enjoyment of seeing massive rumbly trundly things and indulge my four year old son in the pleasure sitting in the tank driver’s seat, there was one tiny almost overlooked feature that caught my professional eye.

In old style tanks, the Commander would kick the driver in the back of his chair in different positions depending on whether he wanted him to start, stop, turn left or right. A nice little bit of non-verbal communication, but hardly what you’d expect from Her Majesty’s Finest in the 21st century. 

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 @Haydens30), these interfaces are also familiar to the incoming recruits, so why make them learn something new and less usable?

@fulnic also tells me that this handset interface is also being use in unmanned spy planes.

Anyone remember the Robin Williams film ‘Toys’?

If this looks like playing to a degenerated generation, I disagree. It’s about understanding human strengths and weaknesses and working with and around them. The US Air Force found that under combat stress, fighter pilots ignored alarms alerting them to an incoming missile. They tried sounds and flashing lights, but again the pilots learned to ignore these in the same was we ignore gaudy advertising banners on webpages (banner blindness). The only thing that got the pilots attention every single time was a child’s voice in their earphones saying “Help me Daddy! Help me Daddy!” – a story that still gives me goose bumps.

Understand the machine, play to its strengths and not to its weaknesses.

The Long Dog

Traveller: Can you tell me the quickest way to town?
Local: Well … I wouldn’t start here if I were you…

Before you can design page layouts or do the fun bit of creative design, you need to know what it is you’re designing. A good way to do this is to create a ‘site map’: a plan of how all the information for a website is organised, in boringly useful groups, categories and taxonomies.

Even if your site’s a handful of pages, you still need to know what information to put on each page or, if you’re using a team of people with different roles, you need to be able to articulate your concept to the interaction designers, developers, graphic designers, web producers (et al) and not forgetting your client, peers or seniors.

Why bother?

You’ll find it very difficult to create wireframes or page designs and it’s easy to duplicate or forget information without a site map. They also make it possible to think ahead for future expansion (or reduction) and user journeys through your site can be planned to ensure your audience and customers can get to what they need easily and quickly.

How to…

By this point, you’ll have needed to have defined the purpose and business requirements and done your research to understand what information you need to include and how it’s going to be organised. A classic technique that dovetails neatly into the drawing out your site map is card sorting. Ok … so you know why and what you’re building, now it’s about laying it out for you and others to read. Use whatever layout or design package is easiest, just so long as you and others can share the output. I mostly use MS Visio, but use what you like – check out the sitemap I made for the product launch of a mobile phone  (company details removed, I’ afraid).

With layout, like the tool you use, so long as you and those you need to communicate with can understand the organisation and flow of information feel free to use whatever style you like. The most common site maps are organised in a tree structure, like a family tree, often starting with a site’s home page and branching off into the top level pages that in turn lead off. Use boxes for categories and lines to show relationships, but one tip is to use boxes to denote pages and list content separately. This way, when you’re not able to personally brief developers, they can literally interpret the number of pages instead of having to use their judgement as how content is broken down into pages.

In the same way a libraries categories books by number and then number the subcategories (Dewey Decimal Classification), make sure you number the categories and sub-categories on your site map. Again, this is useful for others to see which pages site under which – known as a parent / child relationship.

Example
- “Home” is a major category and numbered 0.0
- Beneath it is “About us”, another major so given its own number: 1.0
- Beneath this could be “Biographies of the board” a child, and subcategory of its parent “About us”, so numbered 1.1
- Also beneath “About us” is the child page “History of the company”, numbered 1.2
- “Products” is a new major category, so is numbered 2.0
- And so on….

Doing the site map is another place where you can check progress, to ensure you’re on the right track with your site.

Any questions?

The Long Dog

Usability has been around long before the web. How usable something is can mean the difference between life and death for a product or service.

When things are unusable – or at least difficult to use – people become frustrated and look for alternatives. If we don’t design for how people use things, more people will abandon our efforts and turn to other sources; in the case of internet sites, our competitors.

“If something’s not usable, I just don’t use it as much”, Steve Krug,‘Don’t Make Me Think’

There are some great ‘real world’ examples of why products have worked because they were more usable than their competitor’s offering. In ‘The Invisible Computer’, by Don Norman (of Nielsen Norman Group fame) he talks about the success and failure of the first home music systems: Edison’s phonograph and Berliner’s gramophone.

Before the advent of tape cassettes instead of loading the wax drum recording of our favourite artists we used vinyl discs – records. Why? One reason is that despite the superior sound quality of the phonograph’s wax drums, they were costly and unwieldy. Imagine the space needed for 40 drums, as against 40 albums. The discs were convenient, storable and … ‘usable’.

Unlike Edison, who decided to save money on marketing, Berliner also paid for the best stars of the day to be recorded which, while not improving gramophone per se, improved its ‘perceived’ value. People aren’t logical – we are wilful and fickle – and the audience for home music soon abandoned the phonograph for the more usable and more popular gramophone.

Q: Why aren’t we all driving around in zero-emission, electric and personal-propulsion powered vehicles first invented in the 80’s and retailing at less than £400?

A: The Sinclair C-5

Despite its undeniable environmental and cost advantages, it looked unsafe and people felt they would look ludicrous driving one (I think we all agree on this one – if not, pleeeeease check out the picture).

The only exceptions to this are covered by a usability ‘law’ which roughly says that the effort someone is willing to put into using a system or product depends on the perceived value. In other words, if I think I’m going to get a lot out of something, I’ll persevere: suffering the adverts to get free music downloads; the modern car (c’mon … pedals, levers AND a steering wheel all together?); getting married and cancelling your account with a utility supplier by automated or offshore phone service. As I write this on the train, the woman opposite meis knitting with five, yes FIVE needles – I rest my case.

Lastly, there are some things that are difficult to improve on: The Book. They’re portable, often attractively designed, they project something about us to others and for reference purposes you know that all in the information you have to search through is in your hands and not spread across the questionable quality and infinite wilds of cyberspace. How have we improved it with eBooks and the readers that accompany them? Ok, you can now carry many books in one device, but in terms of how we want it to work – we’ve upgraded the concepts of contents and index pages by adding ‘search’. Not bad for a couple of thousand years of product evolution.

OK … so … and the moral of this story is? Remember that regardless of whether it’s a website, a printed document, a face-to-face event, a new mobile device handset … whatever … make sure people can use it in the way they want or need to. If it’s too difficult … say goodbye to your phonographs.

The Long Dog