...upstream Color Zen

If you think there's only one correct way to spell 'colour' then you'd better step away from the screen about now.

With grammar pedants now stepped away from the screen, I'd like to tell the remaining forward thinkers about a game called Color Zen. Anyone already familiar with this game should step away from the screen about now.

All who remain in front of the screen hear ye: Color Zen is, in equal measures, a beautifully addictive and addictively beautiful optical-art crown bowls pocket chess-for-one acid drop. But before I paint a lacklustre picture with a hundred dulled words - like a transcribed version of that retouched JC on the walls of the Sanctuary of Mercy Church - here are some screen grabs from within the game which (even without any sort of game mechanic attached) would have me entranced any given day of the week, including the hard-to-please Monday.

Looks lovely doesn't it?

The back-of-a-cig-packet aim of play is this: knocking shapes of the same colour into one another causes a wave of colour to flood the screen, absorbing any  other matching coloured shapes as it goes. Each level screen is framed by a coloured border. You complete the level by flooding the screen on your final move with the same colour which matches the border. Got that?

It's like being in control of a zombie apocalypse except instead of decimating a small town by biting, tearing and eviscerating, you spread your rainbow virus using colour, geometry and head skill. To explain all this is like telling you how beautiful the sunrise was this morning over my town, so if you can, download it now on iOS or Android.

On top of it being a thing of aesthetic beauty, its makers, Large Animal Games, have made a superb fist of level design, getting the balance in most parts spot on. And on the occasions where some levels appear easier than others, you're so ensconced in its ambient tone that you're not sure whether you fluked it or were in-the-zone from all the braincolourwashing (you can use that special compound if you like). The UI is simple and tidy, if a little confusing navigating through the Help menu, but you'll never need to visit that as the learn-as-you-play user flow has you up and tapping straight off the (coloured) blocks.

Reading an interview by UIPalette with the developers and designers reveals some insight which I found not only true to making apps and games in general but to 'the creative process' as a whole. Color Zen was the product of one of their Project Days: a creative labs boiler room approach where over 24 hours an idea (which quite brilliantly is decided upon from an initial internal free-pitch) is rapidly developed. No time to over-think things. Solidified focus. Stuff getting done. It came from the desire to do something simple and cool, almost for the sake of doing it. I'm sure there's workaday pot-boiler stuff everyone should be getting on with over at Big Animal Games, but that as a sole focus stifles creativity and it's this, after all, which is the solid fuel of innovation and progress. I bookended the weekly team meeting recently with a classic Charles Eames quote found published within the pages of The Designer Says which I keep on spouting off and have been known to stick to walls as a reminder to everyone with eyes (I should consider a Braille version - and I'm not being facetious). It's this, and it's true:

"My dream is to have people working on useless projects. These have the germ of new concepts."

From play comes work. The whole experience surrounding Color Zen - from the process in which the game was made to the playing of - is a heady source of inspiration. If you've made it this far down the page, regardless whether or not you think I've been creative, the fact that what you're reading right now exists only because I play Color Zen, goes some way to prove a point.

...skewing skeuomorphs

Everyone's got their knickers in a right old twist over skeuomorphic design recently. If the discussion had an iPhone app, the UI would be a pair of screwed up cotton briefs with stitching so perfectly detailed by an angle-poised downward light source that Steve Jobs could - so we're led to believe - have been found hunched over his desk frantically licking it like some thirsty bespectacled Weimaraner. Alternatively, should the same app appear on a Windows phone, then the said twisted knickers would be a monochrome illustration of some pants bound by a solid red box. Whether or not Bill Gates would be seen dead running his tongue across this particular interface is unknown, but it could be safe to say he might. Or even safer to say he might not.

What's interesting, though, is that the Moores Law tail isn't wagging Microsoft's dog as far as their current design ethos stands. Despite the onward trend of ramping up the tiniest detail of every pixel of every onscreen graphic to match ever-higher resolution displays running on seemingly endless processing power, Microsoft has, with Windows 8, eschewed this trending whistles and bells eye candy methodology and stripped everything back likes it's 1999 - a time which can *just* remember saving your 1.44MB of data on to a removable floppy disk. Just because we can make everything look like it's water on glass, doesn't mean we should.

With debates raging on whether in 2012 we should be using anachronistic skueomorphs such as the floppy disk icon to signify saving your work when we have a generation of computer users with no actual reference point to the icon's original source, I decided that the problem could be solved simply with a tangible artefact which makes sense of saving. Sort of. And then made one. It's called the Floppyflash: a removable USB flash drive embedded into a 3 1/2 inch floppy disk with its own lick-able desktop icon.

Now when you've finished Photoshopping cats heads onto people with rainbow lasers shooting from their recalcitrant eyes and click save, you technically are saving to the floppy disk from which your icon came.

Then everyone will be happy and we'll hear no more about it, yes?

Props to the legendary Susan Kare who created the original 32x32 pixel Steve Jobs icon from which I took inspiration for my sketchy sketch.

Steve Jobs' alleged quote "I want to be able to lick it; I want it to be like glass on water" can be read in full in this revealing Co.DESIGN article.

...sign language

Awaiting my number 12 bus to arrive on a cold January morning my attention was caught by a poster advertising cereal. Not because cereal is a delicious meal any time of the day and a good source of vitamins and minerals, no, but because I saw an ubiquitous pictogram of the iPhone we've all become rather familiar with; the logo which depicts 'Available on the App Store'. I was admiring its simplicity, how such an uncomplicated shape - a rectangle within another bevelled rectangle with just one line and one circle either end - can signify such complexities beneath the graphic. I also wondered what I'd have for breakfast when I got to work.

Along came the bus. I got on.

My bus journeys are currently being expedited by Deyan Sudjic's The Language of Things, a remarkably digestible read on the objects around us, the design behind them and together, what it all means. Unless Deyan suddenly turns it into an erotic crime thriller, I'd recommend it to anyone, including nanas - with a revealing eye and easy turn of phrase it reflects upon not just design but social issues which I imagine very few avoid brushing against in this flipping complicated world which we live. Discussed are some everyday objects around us and how their carefully considered shapes, forms and functions have made them the archetypes we're familiar with - even when in their most modern form they bear little visual relation to their predecessor. Take for example the first Bakelite telephone, designed by Jean Heiberg, with its silver dial and distinct ergonomic handset. Although pretty much out of popular use today, the pictogram to which it's associated is still an internationally recognisable symbol for telephone (for how long is arguable, given a generation of kids will never likely use or let alone see the Bakelite telephone for a reference point). However, although stuff gets superseded, when the item in question creates a culturally significant mark it does so in a collective conscience. This 'old fashioned' phone is hard to forget even after being upgraded and turned to scrap. Sure, there were other telephones before this particular model, but Heiberg's design hit the mark which elevated it to live on as a popular visual metaphor for telephonic communication.

Another example is the Deiter Rams calculator. Designed to be the most perfect form of this particular mathematical instrument it was purposely shorn of ornament and crafted to ascend such transient things as fashion. Rams' goal to ultimately remove any need for another calculator. As a result, this timeless object inadvertently formed an archetypal idea of what a calculator should be. So much so that Apple's own iPhone calculator bears an uncanny resemblance by using Rams' original calculator as inspiration for their skeuomorphic user interface. It's a neat little nod by Apple towards Rams' original mould-breaking one-calculator-to-rule-them-all rationale, picking up the baton to set a new category of device in the form of the iPhone; one-device-to-rule-them-all. But what becomes of archetypes such as the telephone and calculator now that many familiar, singular objects are being rolled into one clever little smartphone? This brings me back to the iPhone icon on the bus stop poster.

In the past, objects and artefacts pretty much did the same thing no matter who owned them. A telephone sat in the corner and rang until it was answered. An alarm clock told you the time and woke you up, a Walkman played cassettes placed into them as you went about your business. However, with the merging of these devices into one clever ergonomic handset you can lose in the bottom of your tote bag, our understanding of them should, in theory, be terribly muddied as we try to unravel precisely what it is that we hold in our hand. Between brands, smartphones differ wildly. Even off-the-shelf identical devices can each be tailored to the whims of their owner with countless apps changing their function at the drop of 79p for whatever the user desires; gaming, email, organising, social media to name just four. But despite the complexities of the technology within and the myriad functions performed, we DO understand exactly what this complicated little artefact is and at a snap know what it means to view the symbol for iPhone, whether on a website, in a magazine or on a bus stop poster. It means all these things and just one all at the same time. It's a mental extrapolation we don't even have to think about as our gradual understanding of smartphones has evolved whilst we've grown with them in a technological blink of an eye.

So archetypes remain. As part of a visual vocabulary, they are the building blocks of how we understand symbols, which in turn exist to represent something in the simplest form, to communicate meaning. On their own terms, symbols can be understood because of the leg work put in by archetypes, but they can also be subverted, and it's a powerful tool the designer has at his or her disposal. Indulge me in a ridiculous macho simile if you will, but if symbols are bullets, context is a gun. Take a pictogram of a burger. As a sign it may literally just be saying 'burger'. But with it is carried cultural baggage that forms part of a semiotic DNA whereupon many signifiers can alter what's implied; fast food, beef, cow, hunger, greed, capitalism, economics, globalisation, USA, McDonalds, good, bad, obesity, abundance, value, cost. There's all this beneath a simple graphic and when used smartly the context in which the burger is viewed can truly skew the meaning. Stick it on a picture of a depleted rainforest and you make a political statement. Hackneyed maybe but a political statement nonetheless.

Even symbols created solely with one specific purpose rely on context. Jock Kinneir and Margaret Calvert's 1964 Men at Work warning sign has a primary function of alerting road users and pedestrians to oncoming roadworks by using a symbol of a man digging, set inside a red triangle. Learnt as part of the Highway Code, anyone driving in the UK will have this sign drilled into them for their driving test; we unequivocally know what it means. But what if we're handed a club flyer in the street and we see this particular sign used as part of the design - does it mean the road ahead's being dug up? Unless that's a hipster euphemism for a 'banging' DJ set, almost entirely unlikely. No matter where a symbol is seen, context is always a proviso of interpretation for a true understanding of what's before our eyes.

What on earth am I trying to say? I'm not sure. I've been writing this on and off for God only knows how long, tangled myself in many iterations of many strands of thought on the subject of signs, their symbols, the archetypes from which they are born, and the power they behold in both the right and wrong hands, but still I'm having trouble wrapping this all up. So let's try.

The generic smartphone has become part of the fabric of modern life, but it's Apple's aesthetically pleasing user-friendly iPhone which has forged a new archetype and symbolic benchmark into which all other same-category devices fall, further informing our semiotic understanding of them. All through design magic. And marketing. And vertically integrated lock-in business models. But that's another conversation altogether.

Semiotics. It's complicated. Yet simple. Yet complicated. And I've done nothing here to help matters. I'm sorry.

In a nutshell. DO read The Language of Things - even the most seasoned designer will enjoy the crystallisation of ideas when Sudjic eloquently shares his. DO also read Roland Barthes Mythologies as a companion piece. DO NOT ever use a pictogram of a burger as a political statement. DO NOT tell anyone I used the bullet and gun metaphor. DO remember to come back and visit, it can get so lonely out here on the internet.

Rainforest pic © Roberto Saccon 

...being instructed without being instructed

Instructions are a drag. Nobody reads them. Realistically, they're a last resort. Whether it's a new microwave, smartphone or videogame, the best way to get people to use the damn thing straight out of the box without any hair being pulled out is to make the process:

1: Simple
2: Intuitive
3: Discoverable

And for bonus points:

4: Delightful

If i've just bought a new microwave and I can't heat my sponge pudding within five minutes of plugging it in, I'll be sad and hungry. Give me some simple dials that denote 'time' and 'power'  and I will happily know exactly what these mean, given that they directly correspond to the heating instructions on the back of the packet. If you don't give me these, give me some clear iconography - semiotically understandable so I can jolly well start heating. If I find myself in front of a dial sporting a graphic with which I've no prior experience, allow me to discover its function painlessly - discovery is a rewarding experience, which in turn creates satisfaction. Throw in a 'delighter' - say a good old-fashioned analogue 'ting' rather than the digital beep of the surly robot meal generator - and you're on to a winner, and I'm on to my pudding.

Recently I saw something excellent. My favourite teeny weeny bit of design I've seen for ages. An instructions killer which, if it already exists, I've never personally experienced it before.

Everyone's hooted and tweeted about the Being Henry campaign for Range Rover Evoque, and rightly so. It's a quite beguiling and seamless piece of brand engagement with the sort of rabbit warrens it's a pleasure to spend time down. The campaign is quite straightforward stuff, guiding a guy called Henry throughout his day by making this-or-that choices for him at pivotal moments in the story. You get to act like a God. A God that manages to have time to spend messing about on the internet when He/She has better things to do. But a God nonetheless.

The crux of the interaction within the Henry experience lies not in the user clicking choices presented to them, but rather dragging Henry either left or right in the direction of his next adventure. This action of dragging isn't remarkable or unique (I've worked on an interactive piece myself which used a similar device) but the way the user is introduced to it is clever. Really clever.

Before the user reaches the main bit of Being Henry they face the usual language select gateway. With any other campaign, this is just another fait accompli before the main experience. But in this case, an otherwise dull screen becomes a neat little tutorial without the user even realising they've been tutorialised. Rather than click your language, you drag a slider left or right until your language slots into place. Before you've even started, you're familiar with the navigational mechanism ahead.



For such a little nudge it reaps big rewards. It's simple, it's intuitive, it's discovery. The endeavour of choosing a language may not be the most delightful experience itself, but the invisible goings-on this one action provides at the outset will get users engaged quicker and, with more satisfaction than a page of old waffle about putting tab A into slot B.

Whether or not this delight will register with users is unimportant. An intelligent piece of holistic design has oriented the user and laid the foundations for a piece of excellent user experience.

...shining a light on Dark Patterns

Dark Patterns, if you're unfamiliar with the term, are anti-usability practices which harness UI design in a purposefully unfriendly way to trick and coerce web users into doing things they don't want to. For example, hiding marketing opt-out checkboxes behind double-speak, or subscription services which are simple to sign up for, but difficult to cancel. These manipulative practices are tarred and feathered in enlightening detail at DarkPatterns.org, thanks to User Experience Designer Harry Brignull. He's behind the movement and is helping consumers, designers and the like get empowered with case study evidence. Big companies who should - and DO - know better, are petting, smoking and bombing in the deep end of the pool and Harry's got the whistle.

At this point, I'd like to thank Harry for his skillz and insight which help write this piece. I'd also like to warn you, dear reader, that this is a less pithy post than usual, so you may want to take this opportunity to make yourself a nice cup of tea or perhaps some squash, before settling down. And, taking the advice of my old English teacher, I'll try not to be flippant.

When Dark Patterns occur in an online interface, they're relatively easy to map due to their outward facing nature; anyone with a web browser has the opportunity to experience the same issue. Dark Pattern practices can also rear their ugly head in emails. But due to the individually tailored nature of delivery to users, there are variables which cannot be assumed to be universal: someone who receives a newsletter may have opted out of certain alert services; servers may delay the receipt of an email; pertinent images may not be displayed or blocked, and so on. Emails are, in essence, a two way conversation. However, when cynical themes reveal themselves within the contents of an email, and if one can suppose are part of a blanket mailshot, it's worth flagging up these dubious activities, documenting them, and placing them on the naughty step.

Hands up who uses gas or electricity? That's nearly the whole room. Hands up who has EDF Energy as their utility supplier? Okay, so a few of you may feel my pain. Let me explain...

I'm an EDF Energy customer who chooses to receive paper bills through the post. I can keep track of them easier this way, making sure I'm being billed the correct amount whilst having a tangible reminder in my hand - they are 'pushed' to me. I like the simplicity. It's convenient. But EDF have different ideas. They want to 'pull' my bills, that is, for me to access them online - you know, 'paperless billing'.

So, as part of their drive to make the billing of their services more 'flexible', EDF offered online account management, sending an email to me as a customer already taking part in their online self meter-reading scheme. (With this scheme, the customer receives an email alerting them it's time to login using their unique energy account number to submit a meter reading). The email outlines the perceived benefits of paperless billing opposed to traditional paper bills and encourages the customer - or 'user' - to take up the offer.

Viewing the email in closer detail, it's found that the user has been automatically signed-up for paperless billing without being asked, with a prominent CTA (call to action) inviting the user to click through and register, thus completing the process. It's pledged that your account will be reverted back to its original state - paper billing - if you don't register by the given cutoff point 12 days later (15th March).

Of course you don't have to click and register, but whether you do something or do nothing, the onus is placed on the user; even by doing nothing, you still do something. As long as the user understands these rules of engagement, it's possible to refrain from any online account activity with EDF until that 'safe' cutoff date. But the forced positive is a sneaky way of hiding account conversion behind a smokescreen of convenience, using a similar technique to the Forced Continuity principal. Not wanting to be at the end of a possible Faraway Bill, something which can arise with pull notifications, I choose not to respond to the email.

I received a follow up email from EDF eight days later, 11th March - three days before the cutoff point when my account resumes normal service, and this is when things get interesting. (Remember, I am a paper billing customer who has chosen to not click through, login, or sign up, purposefully to avoid automatically having my account switched to a service I never requested). I'm being alerted that my bill is ready to view online, with a CTA link to take me there. The language used is suggestively very different than before; I'm now invited to 'login' to access my bill online, rather than the invitation to 'sign up' previously received.

Employing the Bait and Switch Dark Pattern and elements of Misdirection, there is nothing in this email acknowledging the aforementioned consequence of logging in - automatically accepting online account management and forfeiting your paper bills. The email's tone is friendly and inviting, again using convenience to coerce the user into clicking through. But the email also preys on the user's fear of consequence for not paying a bill. At this point in the communication, EDF will likely experience a spike in their paper-to-online billing conversion rate, a result of customers, such as myself, following the instruction of the email and unwittingly accepting the automatic sign up to paperless billing.

It's in EDF's interest to move customers to online billing. Paper bills are expensive to produce, and they'll have heavily invested budget and resources into their online account management tool. So it's hardly surprising they engage in such activities, taking advantage of habitual responses to interface conventions internet users have grown to trust.

I must admit, there's also an environmental issue in play here, and online billing goes a little way to help save resources. I can't ignore this. But one gets the feeling that the initiative is small potatoes baking in a multi-national energy supplier's furnace, adding brand value in a wider, more cynical agenda.

So where does this leave me? I didn't respond to the email. Over six weeks passed and I hadn't realised I'd not received my bill in the post. Cue phone call to EDF. A nice chap on the line told me I had been signed up for paperless billing. I explained that I hadn't requested this at all and was worried about the consequence of a payment which was well overdue. Please can I just have a bill posted to me like normal?

"Yes, no problem. I'll set you back up with paper billing now, you'll get your bill next week."

I feel completely manipulated.

I start writing this blog entry.

...change given

Imagine a world where all vending and ticketing machines were born equal, whatever their shape or size. A world in which the opportunity to perform their task was on a level playing field where any denomination of banknote or coinage was either spent or re-pocketed not by mistake but by rational choice of the user. A world in which every owner of these machines can confidently claim - and know to be one hundred percent true - the catchphrase 'Money goes in, Service comes out'. You may think I'm crazy. A maverick. A silly heart. A utopian fantasist. But this, comrades, is a dream. My dream. Dream no. 47, on a dream list which exists only as a dream itself, to act as the rather wordy and pompous catalyst to tell you how putting money in a slot has become a more usable experience. For a handful of Brightonians. Who drive cars.

So here's the original You May Also Like entry. For those who like nutshells and their contents, the abridged version goes like this:

Brighton City College had a ticket entry machine with some confusing instructions which looked like this:

And I suggested it may help if it looked like this:





















Well, I've been back recently and was pleased to discover it's been updated and now looks like this:

Very very close to the labelling and information hierarchy I suggested, which I firmly believe will help people park more successfully.

So, a small victory for usability, and something - should I obtain access to a time machine - I can take with me as I travel back to 1984 and say to me as a kid "Keep drawing volcanoes son (make sure you don't colour over the lines). You don't know it yet, but all this colouring in will one day mean some people will be able to leave their car for a couple of hours without getting a parking ticket".

And with that, my work here is done ... puff of smoke. *cough*

...designer labels

Behind the scenes at the The Art Café, local establishment of the The Artist and the Tartist,  I stumbled upon a nice little bit of human interface design which, out of function and familiarity, is just another piece of the furniture, but deserves some recognition. It's a bank of switches which control the whole shop's lighting. The location of the switches means the person operating them is unable to see every light turning on in the shop, so without the obvious visual feedback, you wouldn't know which switch operates which light. With 18 buttons all told, it's quite a few to navigate in the dark. However, somebody has already sorted this out, and the switches are helpfully labelled, so anyone can grasp the controls - from a first day starter to a seasoned five-years-in-service employee.

Whether the person labelling the switches was conscious of it or not, they created the labels with information architecture as a guiding principal, using two different mediums to assist clarity of hierarchy; pen-on-paper stickers and Dymo tape.

The label created with the Dymo (nowadays called a Dymo Omega, but for the sake of this piece, I'll use the colloquial 'Dymo') acts as the category marker. Any light that lives either as an Inside Shop Light or as a Main Window Light is marked as such by living beneath the label. The pen-on-paper sticker labels the subcategory, pinpointing individual lights and also handles some instruction - there's three lights to be left on front of shop, and the user is aware.

I could see that these labels had been there a while, and personally knowing some of the premises history (from clothes shop, to book shop, to present day Art Cafe) my educated guess puts the labelling at one or two decades old, or quite possibly more. So the system - time proves - works, and Design is the catalyst. I propose this is in large part down to the Dymo.

There's something special about this traditional label maker, the way it permanently embosses information onto the self adhesive plastic. It empowers the user to create whatever naming label, cataloguing tag or pithy message they desire. But maybe more interestingly, it's a device which asks the user to think in order to operate it. You think about using the intuitive controls. You think about what words to create. But the crux of the process is you think about getting it right. There's no backspace or correction fluid to amend a mistake. You could use scissors to cut and paste erroneous letters, but that defeats the object of its purpose - to make labelling a breeze. Instead, you have to sit there and consider the purpose of the label you're about to create. Let's head to a domestic setting.

Christopher Walken is at his kitchen table, in his shorts, with a glass of lemonade and a Dymo:

"Okay, I need to label this Jar of flower - NO, i mean Flour. Must get that right. Let's see, what flour is it ... It's white flour, not wholemeal. But I NEVER use wholemeal and I'm the only person who bakes in this goddamn house. But I do often use Self-raising Flour. You know what, I'll be helping myself out if this jar's labelled Plain Flower - no wait - Flour ... Gosh! Must get that right. One shot, Christopher. ONE shot".

Christopher Walken is presented a task to perform with the very real possibility of making a mistake. If it's within his control and in his own interest to not make that mistake, he will take caution in his actions. He will work out the most appropriate solution to the task at hand. In this case, by knowing the advantages and pitfalls of using a Dymo and by figuring out the best semantics for his label, he'll create a useful item which will improve his environment. In short, Christopher Walken will design.

Whether used by a kid to name their text books, a DIY enthusiast to label her tins, a dad marking his flask (people STILL do this), or even the world's third favourite character actor making baking easier, the Dymo is a tool of design for everybody. An advocate of clarity and a positive, problem solving machine which makes people engage in creative thought. And for that, I salute it. And so does Chris (I get to call him that).

...parking ballet

Christmas, if nothing else, is two things; busy and over. It's the former which leads me on to my latest trip to user interface town, via the A27 and into Brighton City College car park. Or rather, nearly not.







I've parked in their Pay & Display car park many times before, and had interesting run-ins with the taciturn little pay box who was often too worthy to accept my pounds (its method for sizing misshapen coins was more accurate than a NASA micrometer, blithely rejecting at whim). So when I got to the barrier this Christmas, ready to park-and-shop, I was rather excited to be sidled up to a shiny, proud new entry machine ready to let me in.

There was a whole pile of cheaply printed ticker-tape plastered all over it, but like any user, I thought, 'I know how this works, DURH, thanks #sarcasm', and promptly started pumping in my coinage - only to be promptly rejected. One by one. Just like old times.

Of course, first impression was that it's broken. Second impression was it can't be. It's new. The stickers on it, however, held the clues. And by the state of their positioning, they really were more like clues than the intended instructions. It took a little de-constructing, but I got there in the end, made my entrance and parked up. I was surprised at how empty it was for Christmas - in contrast, the car park opposite had two queues for entry. But soon I understood why. I witnessed the next happy customer run the gauntlet with the new pay machine, their coins being rejected, and saw them give up, assuming it was broken. I went to tell them it was working, but they'd already driven off.

Dear reader, do you want to see why they drove away? Of course you do. Pretend you're in your Datsun Cherry, window wound down, Lady GaGa (ironic remix) playing on the stereo, coins in hand, and drive up to this...

If you didn't know where to look first or what to do next (apart from use instinct and start throwing coins in the slot) I'm hardly surprised. It's information overload. Many messages all jostling for your attention, with differing type treatments set at disparate point sizes. The machine is simply asking to be ignored. It's like the audience shouting at a contestant on The Generation Game, a cacophony of guidance drowned out by the collective hubub. It needs the game show host, one constant element of authority, to step in with a clear unequivocal message and help guide you on to the prize.

Messages need order for them to successfully convey the point they're making, and the more complex the message, the more room there is to fall over. Enter our friend information hierarchy.

You will have already met her. She puts large headings in newspapers, captions pictures, numbers pages, and helps you know what to read next. She also puts navigation at the top of a Amazon.com, and guides your eyes through a page of merchandise, the info about a product, and nudges you to an easily spotted 'Add to Cart' button. In fact, she's everywhere. When clear, she's helping us on our way up motorways, through airports, down shopping aisles, and on to parties. For example, the information hierarchy on a flyer for a party can be as simple as:

Gary's Awesome Party
8pm-3am
6th June
Room7, Town Hall, Colchester

However, things can get trickier when Ms hierarchy isn't being totally clear. Lets go to a different party:

Fancy dress!

Marek's SURPRISE Pixel Party
MARIO BROS  s p e c i a l   g u e s t
7 til late, BRING BOOZE
8-10 Food served
RSVP to mark@email.com
T h e    K i n g ' s   A r m s ,   L o n d o n

Now we face some variables which need explaining and instantly uncertainty creeps in:

Does Marek know it's a surprise?
What's the fancy dress code?
7AM or PM?
What is late?
Will there be veggie food available?
Which King's Arms in London - is that actually the party location?
Is the 'mark' email address a spellcheck of Marek?

With homespun creativity thrown in - different point sizes, colours, fonts - it starts to read rather tricky, the recipient not knowing which details are most important or indeed relevant. A good hierarchy of information is our friend.

Back to the car park entry machine, and you can see how the instructions came to be so confused. I imagine the owner realising the machine wasn't signed properly out-of-the-box, so placed some of their own directions on it. Then came some on-the-fly results of user testing (car parkers), with follow-up stickers being placed to re-enforce what users (car parkers) were missing. One example of a skewed instruction is a duplicate sticker placed larger to try and compensate for the previously placed smaller version, creating an unnecessary layer of visual noise.

To be fair, there ARE some complex messages to explain in a very tricky space - the customer's eligibility for parking outside of college hours being the most confusing. But even so, whenever an instruction is being created, the designer must be able to remove themselves from the task, and look at it dry, see it from the user's perspective, and ask themselves 'Can I understand this?'.

I've created a version that I, as a driver, would like to use myself, putting all the information in a logical hierarchy which I think any driver can decipher quickly and easily. I've taken into account the tools the designer had to work with, using the same sized stickers, typeface, font point sizes and colours, and retouched the original photo with my version of how the entry machine instructions should, in my opinion, be marked up. Here's the result...

If this version was employed by the owners, I'd be willing to bet a year's free entry that they would have more happy parkers.

UPDATE
I used the car park again on Saturday and the machine's stickering was unchanged. Sad to say the confusion remains; I helped on person enter as I was leaving the car park on foot, and another as I was returning to my car.

...forming an orderly queue

If nothing else, we are told, us Britons are the best queuers in the world. It's part of our DNA. The technology in our head is that of a homing pigeon. When our nature spots a queue, our nurture has to work double hard to not let us join it. Regardless of the fact we all seem to really appreciate standing in line, the Post Office - the bastion which practically invented queueing, has gone and laughed in our faces – its OWN face even – by reinventing the queue. I say reinvent, but if you enjoy waiting 10 minutes in an un-orderly fashion for something you've just purchased, then Argos got there a couple of decades earlier.

Not all Post Offices have this new system, but my local branch in Eastbourne does. If you haven't seen it yet, here's how it works:

• Upon entering, you're confronted with a touchscreen machine. Sometimes a friendly member of staff accompanies the machine.
• You choose between two options: counter services or bureau de change.
• You take a ticket with a number on it; your position in the queue.
• You take a seat and await your number being called out by a female computer voice.

So, you see, the system is very similar to Argos. However, the difference being at Argos it's really, really annoying, but at the Post Office, it's great. Why is this? Simple. At the post Office, the customer is awaiting a service which one can bail out on at any time. We're the master of the situation, and people just LOVE control. However, at Argos, you've already queued once and paid for the item you're waiting for; queueing is the part of the leg work which garners reward, so to make you wait any longer feels like a liberty. Control is taken from us and we wait, prone, for our little boxed item to get spat out of the chute for collection.

The beauty of the Post Office is they have recognised the shift in today's society, how our behaviour and habits have changed and, in turn, adapted the model of how the customer-facing side of a town centre Post Office functions. Where a traditional queue once worked when people were more accustomed to interacting with one another, bumping into a neighbour and passing the time chatting, the queue today is eerily silent. Time stands still as we stand there waiting with nothing to do. The queue is emphasised, its length a reminder of how long the guy is taking sending four eBay parcels at window number twelve. Silence. Frustration. Negative focus. What's more, you're locked in. It's dead time. Wasted time. If i were a horse and you a betting type of person, then the odds on me trotting on elsewhere and being left long in the face are, I don't know, 3-1 favourite. However the new system changes all this.

The Post Office now appears to be a little hive of activity. Once you take your ticket, there are comfy red seats, smartly positioned at 45 degree angles to break any notion of queueing. Whilst you're waiting, you can kill time and take advantage of the many other services the Post Office provides, look at gifts, packaging, greetings cards, buy a scratch card at a separate counter. You're not tied down and this has been recognised. Impulse purchases are a real possibility rather than an awkward situation waiting to happen. Where DVDs were once harboured within the queueing barrier at crotch level, they're free to be perused as you wait your turn to be served.

Another smart move is the 'Banking' section. An area dedicated to the Post Office's many finance related products – mortgages, loans, savings etc. – is now redesigned like a privacy room in a bank. It actually feels like they're taking your money seriously. Whether the average postage stamp-buyer consciously acknowledges this, the semiotics won't fall under their radar. We'll quickly forget how it used to be (with old Mr Trunky in line peering over your shoulder when you're trying to talk discreetly about your bottom line) and rightly so. It's a clever, welcome service in a time when everybody is looking after their money.

So, with queueing 2.0 in live beta mode,  I think the feedback will be good. My only reservation whilst in store was what would happen if you missed your place in the numerical line? I asked the nice lady at the counter about this and she said "We have to call the number three times, but we usually only need two. If nobody comes up, it's probably because they've left."

Maybe they went to Argos?

"If you missed your turn, you take another ticket".

Makes sense to me. Just like a good old fashioned queue.

...washing your hands

Within the walls of Park Guell in Barcelona - if you cross their palms with silver - you can wander around the house where Gaudi took residence whilst the park was created. No flash photography please. Whilst taking in the self-guided tour, you can bear witness to Gaudi's Toilet, and quietly wonder to yourself how much of his work could have been conceived right there atop the less than majestic white porcelain. Toilets and inspiration. They're unconventional yet formidable bedfellows. Like recycling bins and public car parks. Or Paul Daniels and Debbie McGee. Both function perfectly on their own merits, but when put together, magic happens. Now where's my shoehorn

It was within the four walls of a car park public toilet that I found my inspiration for a little User Interface discussion on hand washing facilities. Not exactly on par with conceiving the Segrada Familia, I know, but the subject does cover cleanliness. And you know what cleanliness is bedfellows with? Godliness! Enter the magic...

Public toilet hand washing is a funny old experience. It's a moment when there's nothing else one would rather do in the world than eradicate the grim invisible funk of a thousand stranger's germs, but often can't. There's usually no soap, hot running water is a luxury, and good luck if you don't actually want to dry those hands on yourself. But what if the people who owned the convenience really did have your best interests at heart? They wanted to lay on all the hand washing paraphernalia you need to make it quick and pleasant, and what's more, IDIOT PROOF! Who WOULDN'T wash their hands? It sounds amazing!

Welcome to the 'WasH2o-3000' "It WANTS to clean your hands" (I made that name and slogan up, but if you're looking to go into this line of business, be my guest). It's a hole in the wall that does everything you can actually do yourself, except does it for you. Automatically. My first impressions were that i'd rather do it myself, but mustn't grumble, there's someone at the adjacent machine getting involved, so why not?

I step up to the ergonomic moulded plastic hole in the wall and like anyone, I take just a precursory glance at the pictograms whilst simultaneously attempting the task (literally) at hand. Both hands enter the hole in what feels like the natural, assumed correct position, in the centre. I look at the instructions again and a centrally placed arrow pointing down confirms this.

Squirt. The handwash is delivered but misses my hands. Bother.

Now here's some water coming out to mix with the soap which I don't have.

Ah, okay. I think I get it. There appears to be a motion sensor involved. I remove my hands and put them back in the hole again to trigger more soap.

Oh, no no no NO. Wrong move! It's the hot air's turn to impress; do have some hot air sir, to dry those delicate hands.

On my left, there's another happy user up to his wrists in bathroom technology. Except he's really bamboozled. We'll call him Gary. I realise he's the same guy i saw standing there as when I walked in earlier. He's peck peck pecking away at the graphic of the soap with his index finger like there's no tomorrow. My user testing persona watches with interest for a while, and when I think 'you're not getting paid for this experiment' I interject suggesting that it responds by hand movement. Gary's still not 100 percent convinced as he attempts my suggested procedure.

You can totally understand why he was mashing the graphic, though. Touchscreen is so prevalent nowadays that it comes as no stretch of the imagination that the toilet, if not using the most up-to-the-minute technology, would employ a hidden button system under the plastic of this 'futuristic' washing device. And the particular sequencing of the pictograms, 1 2 3, also preys on our instinctive 'I push this here to make that go there to make this thing come out here' understandings. Also, many other objects and interfaces we react with today rely on neat little icons to denote their application or function - think ticket machines or iPhone - and it's something we're all getting quite accustomed to. A couple of times recently I've witnessed someone at a vending machine, pressing inert pictograms to make it function. Are they daft? No. Its just a symptom of our emerging expectations of how the world around us works in 2010. So now when it comes to designing something like an automatic hand washing machine, we need to take a wider view of the schematics rather than focusing on the instructions.

In this case, the design is lead by the assumption the machine will function perfectly for a passive user; we'll follow the instructions, liquid soap will land in our hands, water will flow to wash away the soap, air will dry us, and we will stand there letting it happen. But as user testing has revealed, when something doesn't work in the way we expect - when we're faced with an immediate problem - we'll want to try to immediately solve it. When there's no direction, we experiment, we improvise. We're doers! As soon as we break out of the machines presupposed 'user flow', the whole system can collapse. In this case, a simple yet crucial factor lead to the function to fall down and, in turn, caught Robert out. Sorry, caught Gary out (I'm terrible with names). It ran out of soap.

As with all systems, whether mechanical or social, it only takes one simple blip to create a failure: it's only a tiny piece of rubber which causes the brakes to fail; forgetting to carry the 1 spoils the whole spreadsheet; a simple pocket call starts the family feud. You get what I'm saying.

Wanting to catch the failure, I used my machine again to examine its cycle. Yes, Hand movement triggers soap. A timer then lets you rub it in before the water flows. The water is also timed to switch off before the drier begins. Now in drying mode, the timed element is no longer a factor and it becomes a drier which stays on for as long as you're flapping your hands around underneath. More can go wrong than I thought, and I became aware of the scenario Gavin ... Gary? was battling.

With the machine out of soap and no way of alerting you to the fact, when the water flows, there's a strong chance you'll change your mind about how it works. You'll assume you missed something. So when you think on your feet and start pressing buttons that don't exist, it can really discombobulate you when the drier starts up and cuts out very quickly. It would feel as if you have no control over the task at hand, which in turn, bothers us. Frustrates us. And of course, when the cycle begins again, that short pause when the soap should arrive then leads you to believe it has a sketchy sensor, furthermore shaking you're beliefs of how the object in front of you works. Misbehavior breeds mistrust, and this is damaging for the product, the brand, and furthermore, the manufacturer.

A couple of suggestions which I think would aid user flow.

Make the soap visible (like many regular washstands). If you can see there's no soap, you'll better understand why the machine is behaving the way it is. If the soap can't be made visible, have an indicator telling us when its run out - like any other vending machine would. If the machine indicates putting your hands in the middle, make sure the soap is delivered in the middle - this broke the exercise for me. Usually the simplest solution in the design phase solves the complex problem.

I left Gary to it in the end and was left wondering how much resource gets wasted by the learning curve of using the machine. And also left drying my hands on my clothes as usual. My drier had a sketchy sensor.

...not thinking

I recently had one of those moments when you go nutty for books. I wanted to seek out some good academic reading on design, but having a fair amount of traditional graphic design knowledge in my locker, and coming from a print background, I figured I'd cast the net a little wider.

I'm what you'd call a 'digital designer' within an agency which deals in a lot of game design. We're called Kerb. You may have heard of us. Or maybe even played one of our virals one lunchtime at your desk. If you've fallen over and hurt yourself whilst stumbling upon us, then that's a different kerb altogether, and I'd advise getting a tetanus jab and call the council about that, and have a good day, thank you.

I'm dealing with a lot of user interface design. You know - the graphical cues and pictorial signposts which help you click the right buttons and navigate the game you're playing or website you're visiting, one screen to the next. You could say I visually jolly things along.

On to my book quest. Three titles stood out as the most relevant to my skills, but different enough from one another to keep things interesting.

I bought:
Don't Make Me Think by Steve Krug
Emotional Design by Donald A. Norman
Thoughful Interaction Design by Jonas Löwgren and Erik Stolterman

Before you get too excited / fall off your perch with boredom, I've only read one title so far - 'Don't Make Me Think'. But already, my beliefs and findings have been solidified that digital is as similar to print as we humans are genetically around 95% chimpanzee, and are therefore indebted to its heritage.

The hierarchy of information we scan on-screen every day - and instinctively decipher at a snap - has been learned by you and I over generations by reading all sorts of literature; bibles, books, newspapers, magazines, comics, posters et al.

Taking the cover of a magazine - a modern common denominator for capturing and guiding attention - it's not dissimilar to a web page. We have the masthead occupying the top like a site logo; there's 'what's inside' feature panels prominently displayed like CTA buckets; and our eyes (so we're told from scientific study by patient eggheads, God bless them) follow the path of a golden spiral - hence the callouts on the cover of magazines are traditionally positioned such.

And what do we do next? We hit the next button on the right, or rather, turn the page, following further visual prompts until maybe we lose our way and use the global navigation, aka the contents page. And for those paying attention at the front, I know. A good interface should not have allowed you to lose your way in the first place.

My point is, we're hard-wired a certain way as far as absorbing information is concerned, and our old habits are like John McClane, transferred from the page to behind the click-wheel of a mouse. Therefore, it's important to be facilitated with a nice, intuitive interface. Friendly. That's the word. And that's what 'Don't Make Me Think' is all about.

Its author, Steve Krug, is a usability consultant, and he's taken all his hard-earned experience to create a book as simple to understand as the websites he helps make friendly. It doesn't cover the casual games I specialise in, per se, or their second cousin removed, social media (the book was originally published in 2000, but has more recently been updated), but what it does reveal, with mostly simple, bulleted examples and pictorial evidence, are the essential rudiments of mouse-to-eye-to-brain usability, which is a pretty universal theme in digital today.

Now, some folks in my position may feel that to read such an uncomplicated tome on our 'specialist' chosen subject is to look like some uninformed noddy who should go back to making their Powerpoint-designed, export-for-web creations. And we can't be seen to look like that, can we? But to embrace it is to cast aside any silly vanities and help bolster your own back catalogue of knowledge and semiotic instinct garnered from years of graphical learning. You'll also unearth some neat new chestnuts you'll be surprised you never passed in the corridoors of this establishment. For example: user testing - it's not the same as focus group testing, silly.

Sorry, never knew it.

And whilst you're user testing, in your first session, it's usually more valuable to use lower numbers of volunteers (say, three) than a higher number of your target audience. Why? Because regular 'Joe Bloggs' users will uncannily weed out the most obvious - yet missed - usability clangers.

There are also some very nice analogies for looking at user interface design (which I'm about to mashup and paraphrase wildly) to make you think both logically and laterally.

Example. Imagine I've tied you up (hello?) with a bag over your head (erm?) and stuck you in the boot of my car (okay, I get it. Are there air holes?). Yes, I've thought of everything. There's even a little hamster bottle to your left in case you get thirsty. (Very kind). No problem. Anyway. You're in the trunk, getting driven around for an hour, being disorientated. Then I stop, bundle you out and drop you in the middle of a department store. Your task: find me a vase.

How you respond to this task is dependent on a number of variables, including how well the store is laid out, how clear the signposting is and, even, what sort of mood you're in (angry from the car ride I expect). These circumstances can directly relate to how we navigate a website.

Imagine you've landed in the middle of a page from a Google link. Just like me dropping you inside that department store in the real world, Google has dumped you in the middle of a website, and how you find your way around to complete a task is, again, down to a pretty similar set of variables including layout, signposting and how the user is feeling.

If you're ticked off from the outset, it's unlikely you'll persevere with the task in hand if you're given misdirection from bad layout or signage, but if the overall experience leaves you feeling good about it, then you'll forgive a couple of bum steers. And the warm feelings may not just be down to how easily you find what you're looking for, but also your interaction with the aesthetics. Your feelings. They're something I've always had in the back of my mind as a designer - if what i produce is pleasing to me, at the least aesthetically-speaking, I expect the end user will likely feel good, too.

State of mind and its direct correlation with design is another one of many interesting points raised by our pal Steve Krug, and a factor we should pay as much attention to as the positioning of a label on a submit search button.

So, that's me recommending the book.

With the end-user's mental state in mind, I'm now about to tuck in to the second book on the list, 'Emotional Design'. You can guess what that's about. When i'm done reading, I can let you know if it's any good. But only if you feel like it.

...clear, concise instruction

...convoluted language instead of pictograms