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

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.

It works like this: In our lifetime we must see millions of people’s faces but never consciously remember them. Their physiognomy registered on some deep and inaccessible part of our brains, but unless there was a good reason to remember them, they were stored in the cerebral equivalent of the draw we all have, filled with chalk, Ping-Pong balls and unidentifiable keys. Wouldn’t it be interesting if somehow it were possible to get everyone who we had ‘perceived’ to wear an orange boater when in our field of vision and, on that hat, have a label saying where and when it was we’d seen them? Just think how many orange hats we’d start to see springing up around the place – just for us.

I’d worked out that this could be done through magic – not parlour tricks or acts of illusion, but actual, proper physics ignoring real magic. Sadly, I’ve still yet to work out how to bend the rules of reality, so instead this has become my fantasy augmented reality app.

For those that don’t know, augmented reality is a way of viewing the real world with contextual information added and viewed through a screen or heads up display systems (HUD). These were characterised in films like Terminator where Arnie’s baddy cyborg could view the world around him with additional information added to his field of vision (gun types, potential threat levels from random bikers – that sort of thing), but these days it’s more mundanely applied to adding things like competitor price details and nearest other vendors, when viewing bar codes or recognisable objects on the screen of a smartphone.

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.

So … have you seen anyone in an orange hat? Sadly, there is still a certain amount of magic necessary for this application to work – either that or some very sophisticated face recognition software and keeping an iPhone strapped to my forehead to record all that I might perceive.

Still, any very clever and very bored software geniuses out there are welcome to have a crack at it – just remember your old Long Dog would love to see the results and know just how many people DO wear orange hats, around the world.

The Augmented and Orange Hatted Long Dog

Internet banking – when good experience goes bad.

“Improvement means deterioration” – Hutber’s law

This is supposed to be a case study, but as I’ve been a customer of this bank for some years, a certain amount of disappointment is bound to creep in. So, before I begin the rant, the main messages here are:

• An inconsistent user experience confuses users and may cause them to abandon their activity and seek alternatives
• Customers don’t care how your business is organised and want the different areas to behave similarly within the mental model your brand has created
• Adding greater levels of complexity may help security, but will also stop people from using your service
• Your competitor is only too happy to poach your disgruntled customers

I joined the UK’s Co-operative Bank because it has an ethical investment philosophy. Yup, I can be an armchair eco warrior and tut at all the awful things going on in the world, safe in the knowledge that my money doesn’t finance any of them.  But maintaining customers’ brand loyalty is a fickle thing when the user experience of online banking goes down the biodegradable compost toilet.

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.

What do other customers think about the card reader?

@smorgasbord Preposterous. Fails to consider context eg making a quick payment during lunch hour will require a card reader left at home.

@Profb I’ve seen said handheld from Barclays and would leave the bank if they made me use one.

@gzj I think its s**t & negates the whole point of online banking in the first place. Tell them to stop over-complicating everything!

@misslaula They suck! That is all.

Apart from breaking the user’s journey on the site to include offline devices and offline interaction, the level of total security needed before I can make a payment becomes overbearing, especially when compared with that needed to make a payment from the Co-Op’s internet business banking.

Personal: Sort code; account number; first randomly selected digit from security code; second randomly selected digit from security code; random piece of personal security information; PIN into card reader; input code into card reader;  output code from card reader. Total = 8

Business: User name; password. Total = 2.

As @smorgasbord also points out above, whereas I used to quickly do my banking wherever I was, I now need to carry the card reader around – and I’m definitely not going to use it in a client’s office. The personal result of this means I’ve missed another company’s credit card payment, been charged, ramped up more debt and probably received a black mark on my credit record.

Continuing in my online/offline theme, as the user experience becomes the brand experience, after my third phone complaint about the compulsory use of the card reader my promised 24 hour call back to hear my concerns came 48 hours later and, like the card reader,  while I was at work, so couldn’t answer and never got to speak to anyone.

If this is about creating a secure online banking environment rather than belt, braces, pegs, staples and helium balloons attached by strings to trousers in an effort to keep them up, surely the bankers are clever enough to work out a more elegant solution? Hmmm … maybe history tells us not and maybe they should employ some good user experience consultancy (I know I’ve got a few choice words for the industry).

So … Nationwide … I understand you don’t use these card readers … tell me about your online services…

The Long Dog

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

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 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?

A colleague was recently concerned that her organisation wanted to use PDFs instead of html pages for their website as “they are easier to maintain”. If this doesn’t shock you to the core please, please, PLEASE keep reading. If it does shock you, then read on in the smug knowledge that you’re already enlightened. Simply having a website doesn’t mean you’ve arrived / communicated / sold / answered or whatever it is your website’s supposed to be doing.

Facebook and MySpace aren’t the be all and end all, but they demonstrate how non-professionals create web pages, upload videos and images, create links and indulge in a bit of viral marketing. So why doesn’t every web site? Static text copy and a nice piccie in the top right really isn’t cutting it any more.  Regardless of organisations’ budgets, when users visit a site they expect the best. Any less is seen as failure and competitors are only a back button away.

SEO consultancy Fresh Egg’s Lee Colbran used the example of someone putting together flat-packed furniture. When the paper instructions aren’t any good, people could check the website. What they’d really benefit from is a ‘how to’ video. Wouldn’t we all? But wouldn’t it also offer some really high value, sticky content for customers?

Apart from nearly exploding about my PDF beleaguered colleague, Neontribe’s Harry Harrold told me that “we build video howtos into all our website bids now – written documentation is just too dull to be useful.”  Jay Ball, Creative Director of advertising agency Banner has also found that video in online ads gets way more responses than any other online media.

People like to be engaged – don’t disappoint them with shoddy budget content.

As well video, there are Flash animations, interactive Ajax pages, polls, user generated content, live chat and everything else that creates a rich user experience that’ll beat the pants of ‘text and piccie in the top right’.

Talking of pants, one of the best examples of rich content is Knicker Picler’s dressing room who use recorded videos of models who ‘cat walk’ lingerie outfits you pick. No, it’s not ‘adult’, but it might not be suitable for everyone to view at work. But it is really smart and shows how far rich interactions can go.

@haydens30 however has a point, “SEO needs one page/one subject to be effective, dynamic content and personalisation may not get the Google Juice they need”. There’s also your audience to consider.

User Experience practitioner Karen Stanton suggests”…older people don’t need rich ux. They need information as easily, as accessible as possible. [It also] depends where they’re being accessed, broadband speeds, internet cafes, libraries etc…”.

So again, here we are back at the inescapable conclusion that we must design for our users. Relying on ‘easy’ only answers short term budget issues. Use rich content to answer your users’ needs not the IT or Finance department’s needs.

Now … about those new pants…

The 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

Question: I’ve heard a lot about User Experience Design (UXD) recently, so in 3 words define the role of a User Experience Designer

Jason: Sure … just after some initial waffle first.

I still suffer under other people’s misapprehension that I’m the IT guy who’s come to sort out their technical solution. Of course, if you happen to be one of the IT guys or gals who really HAVE come to sort out the technical solution, I’m the woolly-brained consultant who doesn’t know how to deliver and implement a technical solution.

So, apart from sitting on my sofa and churning out ranty blog posts, what actually do I do as a UXD – a User Experience Designer?

I’m going to answer this in two ways – firstly as a analogy, and then in the true spirit of online social sharing, I’m going to send you to someone else’s blog – rather than just rip it off and try and claim the glory, before being inevitably found out, and my reputation, what little there is left, dragged through the digital streets and be pelted with virtual fruit for my plagiarism.

Building a digital presence (that’s websites, mobile sites and intranets, to thee and me) is like building a house and the UXD is the architect. Graphic designers may be the interior designers and the IT crowd can be thought of as the skilled builders, plumbers, electricians.

I, the UXD/architect am responsible for understanding the needs of the business and its users / future home owners, creating concepts and designs based on these and translating those designs into plans that the IT crowd/builders can comment on and ultimately make happen, with the graphic designers / interior designers creating beautiful visual metaphors … and other lovely stuff.

The real skill of the UXD comes in finding creative and valuable answers to questions and being able to communicate these concepts and plans to the other ‘construction’ parties, and being able to articulate the benefits of their ideas to influence their stakeholders.

So … it’s analyst, inventor and promoter (hmmm … must use this again), but what are the actual outputs?

For this, I hand you over to author and UXD extraordinaire, Peter Morville, and his excellent article User Experience Deliverables.

Ba-dee-ba-dee-ba-dee-ba-dee-ba-dee-ba-dee-ba-dee-ba … That’s all folks.

The Long Dog (with thanks to Mel Blanc)

Clare Munday has been a User-Centred Design (UCD) specialist since 1994, and her credits include Agency.com, Ask Jeeves, British Airways, Cambridge University and running the Interaction Design Team for the BBC.

Clare has run four of the largest UCD digital design teams in the UK and worked with clients all over the world in physical and space design, web, WAP, interactive TV and mobile. Despite her charisma and energetic personality, she’s focussed on getting her designs right and not ‘being precious’ about her work’.

Long Dog: How did you start out in this biz?
CM: Trained in HCI [Human-Computer Interaction] human factors and system ergonomics. Started on factory floor doing ice without knowing what it was

Long Dog: How would you describe User Experience Design (UXD) and User-Centre Design (UCD), for those who’ve never heard of it?
CM: I make online experiences lovely, and the benefits are customer [user] loyalty, pleasure, risk mitigation/ROI. Think apple products, they work exquisitely.

Long Dog: What do your friends and family think you do for a job?
CM: Pole dancer

Long Dog: What’s the difference between these roles: web designer, UXD, information architects (IA) and interaction designers (IXD)?
CM: Web designer: generalist including visual design; UXD: bit if everything but less visual design; IA: übergeeks – classifications, domain modelling, taxonomies and architectural design; IXD: detailing online interactions and articulating concepts.

Long Dog: Jakob Nielsen or Jacob’s Cream Crackers?
CM: Useful for starters but no imagination and a megalomaniacal loon [presume she means Nielsen, not the biscuits - Long Dog]

Long Dog: What’s your favourite exercise for gathering information for or about users?
CM: Being with them, watching, listening, talking.

Long Dog: Are you a geek?
CM: Unreservedly yes

Long Dog: Give us 3 techniques that anyone creating a website should use
CM: Participatory design – getting the users and stakeholders involved in ever aspect of design, drawing and prototyping/ testing.

Long Dog: Best or worst UXD story?
CM: Factory floor – Men who have run their machines for twenty years, redesigning the shop floor with Engineers. Glorious.

Long Dog: Any tips for people starting out in the biz?
CM: This is not pixie dust. Check your ego at the door. It’s not about you. You are just a translator for clients and users.

Long Dog: Can we see any sites you’ve designed?
CM: Four week standard ecommerce rapid redesign- 83% sales uptake. Nothing showy, just simple effective and fast www.Homebase.co.uk

Long Dog: Thanks Clare.
CM: Can I get back to drawing things, with fat felt-tip pens now please?

Long Dog: Yes.

More about Clare on her profile: www.linkedin.com/in/claremunday

The Long Dog

“A picture is worth a thousand words – and thousands in avoided costs for messy rebuilds” – the Long Dog

Getting safely from concept to the design of your web site or intranet is as easy as scribbling on bits of paper. No, really … it is. This is meant as a beginner’s guide, so old pros, look away now – newbies … come on in, the water’s lovely…

What is a wireframe?
It’s an illustrative plan of a web page, showing elements such as placing for text, images, search boxes and is often annotated to give an understanding of functionality. E.g. What happens when a button is clicked. In the initial stages, they don’ have any design elements, colours and are filled with dummy content. Sound complicated? It’s not – check out the  wireframe image.

What are they used for:

- Testing: Before you waste time and money have confusing conversation between design and technical teams, or just with your own stakeholders you can use simple print offs for sense checking before creating more elaborate wireframes. In the biz we give this fancy terms like ‘paper prototyping’ or ‘low fidelity testing’.

When the wireframe becomes more developed, you can add functionality so that things do stuff when you click on them. Again, this helps in user testing, before committing to, or being distracted by colours and design elements. Again, while from different clients, the wireframe image shows the how a wireframe starts simply and becomes more complex.

- Design plans: Once you’ve tested and you’re sure what you’re doing is right, you’re left with fine architectural plans that show creative designers or development teams exactly what you expect to be built. Save them time, you money and you’ve both got something to work from.

When should use them:

AFTER your preliminary work is done:

- Understand your brief and do your research
- Define your audience
- Work out what you’re going to have on your site and how it’s arranged
- Build your sitemap

Oh … and as a freelancer you might be employed just to produce wireframes for agencies: potentially interesting, but can eat away at your sanity after a while, unless you see something actually launch.

I always start by drawing them on big bits of paper, whiteboards (or my windows) and only later use somethig like MS Visio, but you can use whatever floats your boat, inncluding PowerPoint, so long as you can do boxes and arrows and turn concepts and requirements intoa clear illustration.

Go on then … what’s stopping you?

The Long Dog.