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.

The user experience (UX) isn’t just about websites. Working out whether the buttons are labelled correctly or the journey through the content is smooth and direct is core to interaction design (IXD) but only part of the UX big picture.

Ok. If you’re booking flights on a budget airline’s website your tolerance for mistakes or a lumpy UX is going to be much higher than for booking a week’s sojourn on The Orient Express. Why? Because you’re human and your expectations of the website performance are based on your perception of the brand. The budget airline possibly spending five times more than the luxury travel option on their website means nothing – budget airlines are acceptably rubbish while the Orient Express is luxury, sophistication and service second to none. End of story.

An agency once commissioned me to review the customer experience of the top five UK multichannel retailers – organisations who sell across multiple channels – in this case online, in-store, catalogue and phone.

I’ve often heard someone isn’t ‘comparing apples with apples’, in other words unfairly comparing different things, but that’s exactly what I was asked to do here. I might as well have been trying to compare apples with bicycles. I had no idea how to do it so I invented a way. As a starting point I used Jakob ‘self styled usability guru’ Nielsen’s ten general principles for user interface design and bent them to my will – or rather converted them to blend across all channels, applying a simple five point measurement:

1. No problems
2. Cosmetic problem only
3. Minor problem – low priority fix
4. Major problem – high priority fix
5. Catastrophic problem – imperative fix

It’s pretty dull stuff, so you can check the list out as an excel table here, but definitely worth a look if you’re trying to work out how to compare dissimilar parts of the big picture experience. The thing to understand is that while you’re only thinking about a website, your user arrives with a lot of baggage:

• The brand. Not just logos and colours – what doest the target audience expect from the brand and how do they expect to interact with it?
• Have users had experience with physical products or services? This will influence their expectations of how the site will behave
• Communications: This is huge. Understand how the audience is communicated with. How will this affect users’ entry points to the site, what they expect to find when they get there, who the comms has been targeted at and … well … just make sure comms and your work are on the same page
• Make the brand and user experience seamless
• Objectively test with real users – they’ll give you honest and surprising feedback that is correct, beyond your best and most educated guesses

The eventual report I wrote for that agency was 150 pages long (130 longer than they first imagined – but I did tell them it would be tricky) so I ‘m not going into any more detail here. Happy, as always to answer questions and reply to comments, but this little lot of heuristics should get you thinking.

Think big picture. Think … holistic experience (dude).

The Long Dog

Make it easy on yourself, save time and show the client something inexpensive. Sound good? Then lo-fi prototyping is the way to go. To be honest, “lo-fi prototyping” is a very fancy way of saying start with rough sketches before putting effort and client’s expense into beautiful high quality prototypes or wireframes.

I’m not going to teach you to suck eggs, as by this point, you should be able to use pens and paper but there are a few tricks that’ll make things work for you:

• If you can’t draw, make your concepts simple and use them as presentation aids or aide-mémoire rather than standalone documents
• If you can draw, don’t get drawn into the trap of spending just as much time producing things of true beauty that a client will want to take a red pen to (teacher style)
• Unless you’re producing a creative concept that needs lots of colour, keep it to monochrome with a few highlights – it’s quicker and clearer
• Aim for simplicity and clarity: If your sketch is getting complicated, it might be time to rethink what you’re trying to communicate, or that you might actually need to do some digitally produced pieces
• Get the client involved. If you can run a workshop where the client helps draw or modify sketches they’ll articulate more – and love you more too
• Lo-fi is quick, easy and – from a client’s perspective – cheap. Never underestimate the power of inexpensive in these financially strained times.

As well as sketches for presenting ideas, like the image on the right showing initial lo-fi andeventual funtional wireframe, I’ve also found lo-fi techniques excellent for experimenting with different interaction designs. And in English, what I mean is that if I’m trying to work out how buttons, drop downs and other ‘things that do things’ work on a webpage (before handing it over to a terribly clever techie to actually make happen), bits of paper and rough sketches do very for trying out ideas.

But…

For my favourite lo-fi design and workshop tool is Magic Whiteboard. Not one of those electronic smart boards, but flipchart sized sheets of wipe-clean plastic film that stick to just about any surface, by static. Trying to work out how to fit a lot of information into a few screens, brought about a series of sketches that I photographed and plopped onto PowerPoint to make a presentation flick book. And I can tell you, demo-ing these, with a colleague doing the page down, while I ‘clicked’ on the radio buttons and drop downs on the screens makes for quick and fun prototyping. Open the 350kb PPT and page and downin slideshow mode to see what I mean.

Now got get some of your own fat pens and get scribbling.

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