User Experience round the bend

Bastards.

You know what bugs me? Toilets.

Toilet flushes, specifically – and even more specifically, toilets where you have a choice of a big flush and a little flush. This choice is usually presented to you in the form of a big button and a little button; sometimes it’s an actual big/small button combo, sometimes it’s two semi-circular-ish buttons combined into one – anyway.

The thing is: I never know which one to press. One button does a small flush, for wee and spiders, and the other one does a big flush, for poo and larger animals (goldfish, say). BUT WHICH IS IT?

As a super-pro UX designer, I’ve designed many an interface where the user has a choice about what to do next. Often there’s a common action, or one we want people to take, and this button is made larger and more friendly than its less popular comrades.

Let’s be blunt: people wee a lot more than they poo. Therefore, in the interests of saving water, you’d expect that the common action in terms of flushing toilets would be the small flush, ergo that the small flush button should be the big (and therefore most pushable) one.

But the problem is is that toilet buttons are generally unlabelled – and without anything overtly declaring the function of each button it’s natural to assume that button size = flush size, in which case the button you probably want is the smaller one.

As a toilet-user I want to use the correct flush to save water, but without knowing what the buttons actually do I’ve only got a 50% chance of getting it right. What’s the system? Is it button size = priority or button size = flush size?

I think the lesson here is that just because you have a system for your UI – colour-coding, icons, anything else that your UX and Design team know like the back of their hands because it’s, you know, OBVIOUS – that doesn’t mean that other people understand it.

Unhelpful.

A nice friendly “big flush” and “little flush” on your toilet digital thing will go a long way towards helping people understand what’s what. It’s very easy to be too subtle when it comes to designing UI, especially with all this minimalism malarkey what is in fashion these days. Your audience are not going to spend any time thinking about what a mysterious button means; they’ll either press it without understanding it or just close the toilet site and go somewhere else.

Something something unblocking your sales pipeline, something something round the bend! Does anyone else think about toilets this much, or is it just me?

Context is king in mobile optimisation

There’s a war going on for the mobile web.

“War” is probably a bit dramatic though. To be honest, it’s probably more of a playground squabble. Always nice to start with a bit of exciting conflict though, eh? Anyway: to business!

How do you make a site suitable for mobile devices? Do you make your site responsive, so it changes layout as the browser window size changes, or make a separate mobile website that’s entirely optimised for mobile browsers?

Here’s an interesting article here that compares the two different approaches, using US presidential candidates as examples.

Image from Smashing Mag

So evangelising about different technologies and comparing implementations is all well and good – but decision about which solution to go with needs to be led by content and UX rather than design or technology. The article points at a super-long page on Obama’s site as an example of where things can fall down – but there’s nothing inherently wrong with long pages with mixed content on mobile; whether they’re appropriate depends on the content and the users.

Mobile technology is something the rest of the team may well have an opinion on too – as shown by the statement “the Web design world is entrenched in its own debate about how to address the mobile Web” – but they may or may not be aware of it. Without an objective overview you might end up with one or the other by default just because no-one thought about it properly.

I’ve seen a lot of stuff like this before, where someone has heard about the big new thing in web design and wants to build something with it – regardless of whether it’s actually the right tool for the job. That’s how you end up with mobile mega-menus that replicate a load of content that already exists on the page in a mobile-friendly format, and that’s likely why Obama’s site has that humongous page: no-one considered the impact of the technical decisions on the user experience.

These are some of the hardest decisions to get involved with as a UX person – partly because designers and developers like making their own decisions, but also because a lot of these kinds of decisions get made unconsciously. People often have an unconscious bias towards certain technologies or solutions and will make any number of strange decisions without really thinking about it if left to their own devices.

And how do you get involved at the right time? Well, that’s something I’m still trying to work out. I get asked about whether buttons should be red or green or blue or whatever all the time, when frankly I don’t really care. What I do care about is the hidden decisions that are being made, the small discussions within the team that affect whole pages – the ones that are decided before anyone realises and shut off discussion by virtue of being the “obvious” choice for people who prefer one technology over another.

So how do you keep tabs on what’s going on and stay involved without smothering the rest of the team? Where does the middle ground lie? I’ll let you know when I find out.

Why serious games and non-gamers don’t mix.

Now, I’ve got nothing against people who don’t play games. I mean, some of my best friends don’t play games. But people who don’t play games shouldn’t be put in charge of making games.

I’m talking specifically about “serious” games here, although I’d imagine the same goes for other kinds too; this post is inspired by a recent long, bad and annoying experience making games for a large learning website, and I wanted to try and sum up my feelings about the project and what I’d learned along the way.

Serious games have “a point”, which is to say they have some information they would like you to take away into the real world. They’re often produced for schools or educational sites, or to support things like charity or awareness-raising campaigns. And they’re generally shite.

Now, I don’t have a problem with serious games per se, but the vast majority have too much serious and not enough game. I firmly believe that games should be fun, first and foremost. When you’re making a game, fun should be prioritised over learning, educational content, quizzes, badges, social play gubbins or everything and anything else the client would like to bolt on.

Obviously the aim is to make something that’s genuinely useful and educational as well as being ridiculously good fun, but the sweet spot where fun and suitable subject matter meet is really pretty small – and unless your client “gets” games then you’re going to be pulling in different directions, which makes hitting that target virtually impossible. The upshot of this is that you often end up having to choose between fun and serious, either focusing on gameplay or pushing the serious content to the front.

If a game is fun but only gets across half your message, then that’s pretty good going. People will play the game and enjoy it, leaving positive impressions and happy memories – and at least some of your serious information.

But if a game isn’t fun then people won’t play it, regardless of how well it conveys your message or teaches your content. And players-not-playing is a best-case scenario; at worst, you’ll actually turn people off a subject they might have been interested in before they even really had a chance to get to grips with it.

Unfortunately, if your clients don’t get games, then they probably won’t see it that way. To a non-gaming client, a game is nothing more than a vehicle for delivering information – essentially a web page that moves around and makes noises – and that lack of understanding means serious content gets prioritised over fun or playability.

Modern gamers enjoy a multi-billion-pound industry dedicated to making stuff that is fun – they can afford to be picky. If you think they’ll play your game that’s kind-of-a-bit-fun when they could be playing the new super-fun Gears of Duty 17 you’re sadly mistaken.

The problem for me is that people who don’t play games often don’t get games. They don’t understand the flow of games; the joy of discovery and what makes them fun; the playfulness of a well-crafted game mechanic and the learning that can come from play rather than reading stuff in a book. They don’t get the ebb and flow of risk and reward or the satisfaction of a perfectly-timed recovery or counterstrike.

Not all non-gamers are like this, obviously. There are plenty who still have an appreciation of the art of game design, or are open-minded enough to accept that there might be things they don’t understand about games. These people are great to work with.

But these lovely people seem few and far between. The digital industry is dominated by the worst kind of non-gamers – people who simply don’t seem to care about gameplay, or understand when a mechanic doesn’t work, and who just want to shoehorn facts in wherever possible because otherwise the player can’t possibly be learning anything. And they’re often the ones in charge.

You can see the effect of this firsthand – just play virtually any e-learning game, because the vast majority are shite. They’re boring, and there’s often little to no actual gameplay; most should be classed as “activities” or “quizzes” rather than games. They take some educational content and digitise it, wrapping facts up in something that looks like a game but really, really isn’t.

When there is gameplay, it’s either perfunctory or completely split from the learning – often in a play a bit, learn a bit, play a bit kind of structure where you finish a level of play and then have to complete a quiz before you can progress.

These things are the bastard offspring of badly made Flash games and those deadly-dull teachers whose lessons seemed to stretch on forever. These “games” aren’t fun or educational for a lot of reasons (usually because no-one can be bothered to play past the first level) and the only realistic response to the stupid inter-level quizzes is listlessly clicking at random until you get the right answer.

Throwing more serious content into a broken game will not make players learn more – if anything, you’ll just turn them off even quicker.

These kind of non-fun time-wasters get made over and over again – but we wanted to do something different. We wanted to make games that are fun, where the player can learn by playing, rather than by alternating play and learning.

Gamers know that when you’re playing a game you are learning, while not necessarily “being educated” in the classical sense  – and that kind of learning can be powerful stuff. Why show someone a picture of a process in a book when you could use a game to bring that process to life, let people experiment, muck around, mess up and actually, literally, play with it?

Games can’t replace lessons and teachers – but they can complement each other. Games can spark interest in subjects and help bring subjects to life. For example, an intelligent game where the player uses gravity and momentum to battle foes could well inspire a child to ask “But why do things fall down? Why do things move in a particular way?”

A well-crafted complementary lesson could take that spark of interest and help it grow, perhaps even teaching the theory in such a way that players can take their new knowledge back into the game to improve their scores.

Sadly, making games like this is a difficult process, and prone to being derailed by non-gaming people who don’t see how anyone could learn from a game that doesn’t have a quiz in it. Games get treated as lesson-replacement activities, crammed full of “educational” material and thrown out into the cruel world to fend for themselves.

The lesson I’ve learned is that it’s best not to try to make a game that teaches through gameplay unless you’re sure everyone’s on the same page. Without buy-in and understanding from the client you’ll end up with an awkward halfway house of a game that pleases no-one; not fun enough for kids and not enough educational content to stand up in class alongside videos and textbooks.

There’s a reason most e-learning games are crap. The games industry is mature enough to move forward and start making games like this – but I don’t think the public has got the message yet, and until everyone client (and agency) side is on board then making decent serious games will be very, very difficult.

Abstraction and Wireframing

Before my current incarnation as a UX Architect I was a Flash developer. I spent five years coding all kind of games, sites, and apps, and gradually progressed from simple bits of script to full-on applications and fully abstracted object-oriented code.

My day job now is focused on less technical work like research and wireframes, but I think during those years of coding I learnt some interesting concepts that I’ve carried through to this new role.

I recently wireframed a few simple online art activities for children which involve adding shapes to a canvas, animating a simple figure, making a postcard and so on. None of the activities are very complicated, but as we discussed time estimates and functionality my old developer habits started kicking in.

I found I’ve been thinking about how I’d go about building these apps, which led on to thinking about how that affects the how I wireframe things. As I did so, I found some interesting parallels and insights – so I thought I’d share them here.

Continue reading

Writing for free: a view from both sides

I’ve been posting articles and blog posts I write on a number of sites recently, and all for free. These sites – Bitmob, for example – allow anyone to post their written work for public consumption, as long as it’s vaguely on the right subject. You get valuable exposure and more eyeballs on your work and the site gets free content – sounds like a good deal, right?

There’s an interesting exchange of value going on when you post something to a “free” site. You’re handing over your work for free, and in exchange you’re getting exposure. As an aspiring writer, exposure feels like the lifeblood of a fledgling career; the more people see your work, the more chance someone will hire you, right?

So I wrote an article about writing for free (very meta) and posted it on Bitmob, where it was promoted to the front page and sparked off a good debate. During the conversation that followed, someone mentioned a site called 99designs – a site based on the principle of getting designers to submit speculative work that a prospective client can pick through, critique and then (potentially) buy, paying whatever they like in the process.

I’m just going to say it: 99designs is a terrible thing. It exploits designers – especially young designers looking for work for their portfolios – by “allowing” them the opportunity to give their work away for free.

It gives the client way too much power, both in terms of picking and meddling with designs and in terms of payment; clients often have little-to-no idea of how much time, effort and emotion goes into design work, and tend to dismiss it as “colouring-in”.

It encourages quick, dirty, one-night-stand relationships between clients and designers. Longer-term relationships that are open and honest produce much better work because of the trust and exchange of knowledge, on both sides.

And it devalues creative work and creative talent. “Paying what you want” or working for free devalues the industry and the work of other freelancers who are trying to work in a more sensible, sustainable way.

Frankly, I was a bit shocked; 99designs seems like such a professional-unfriendly idea that I wondered why anyone would want to be involved with it. But then, I’m looking at it from the point of view of someone with an established job in the creative industry. I’ve already got a portfolio. I’ve got regular work, and regular pay.

What would 99designs look like to someone starting out in the industry? A lot like a pretty good deal, I imagine: work on tap, very little scary dealing with clients and lots of getting down and designing things, regular briefs to help you build up your portfolio, and exposure for your work.

The thing is that exposure, as I’ve come to realise, is a wooden carrot. “Getting exposure” is not enough to start a career in design or journalism, but it’s sold as the magical kickstarter that will make your dreams come true. The odd person, who gets the right article in the right place, can have a career made by an article, but for most people “exposure” is the equivalent of walking round a supermarket hoping to be scouted for a career on modelling.

If I was a designer starting out I wouldn’t use 99designs; I’d be approaching clients and employers directly. There’s a lot of work out there that you can get without much of a portfolio – just don’t expect to be bashing out campaigns for Nike within a week unless you’re both very talented and very lucky.

Likewise, I’ve realised that as an aspiring writer I probably shouldn’t be writing for free or giving my work away. The lure of a having profile page that says a thousand people have read my article is strong, but ultimately it means very little beyond a couple of quid of advertising revenue in someone else’s pocket.

The choice isn’t between labouring in obscurity on a personal blog or getting the magical exposure fairy dust of writing for someone else, unpaid: it’s between sitting back and waiting for something to happen or getting out there and getting paid.

If I want to be a writer, I need to get the fuck out there and do something about it.

If you want to be a designer, you should do the same.

I’ve been shortlisted!

Huzzah. The interactive data visualisation I submitted to the Information is Beautiful Awards Hollywood Budgets challenge, FilmStrips, has been shortlisted. Having said that, the shortlist is actually pretty long as a result of having so much good stuff submitted, and I’m really pleased to have been chosen.

There’s some great stuff in there; Hollywood by Mathew Lucas is particularly cool – a crazy, swirling whirlwind of a visualisation. And mad props to Lucas and Octavio, two kids aged nine and ten who entered the napkin challenge. Good work!

Edit: And now FilmStrips is featured on the Guardian Datablog. Ace!

Information is Beautiful challenge #3 – FilmStrips

The third Information is Beautiful challenge is out (and now has an extended deadline, until 6th Feb), and this time it’s all about Hollywood. There’s a huge set of data about films, budgets, types of story and profitability to explore and visualise too – and visualise it I have (you’ll need Flash, and I wouldn’t advise viewing on a mobile!)

After the slightly random punt I entered for the last challenge didn’t get anywhere I went back to look at the entries that had been successful. The winners and shortlisted visualisations all seemed to go for quite traditional interpretations of the data, so this time I’ve gone for a more traditional approach too. There’s a hell of a lot of data here – around 700 films – so going for simple bars a few pixels wide seemed the only way to make something that’s actually intelligible as well as being pretty from a distance. I decided to try an interactive option this time, as that would let me make something that’s fun to play with and explore rather than being flat and static.

Overall I’m pretty pleased with how it’s come out. As always, there’s more stuff I’d add if I had time; a search function to find specific films would be nice, and ideally I’d have spent more time making it more efficient, as all those movieclips in Flash can make it a little sluggish on lower spec machines. I like how it’s actually fun going from an ordered display of data that makes sense to a complete riot of lines and colours with a couple of clicks, and I’m mostly happy with the momentum scrolling and zooming as well, which feels nice and tactile.

So anyway, here’s my finished piece: FilmStrips – movies, money and metadata, visualised. Enjoy!

Games and gamification: tiresome fun, gaming the system and playing to learn.

Gamification gets a lot of bad press. And it’s true: there’s a lot of bad, mad and just plain stupid gamification out there. Whether it takes the form of pointless points, badges, stupid progress bars, high-score tables or missions and achievements that no-one even nearly cares about, gamification has become the kind of creative bogeyman that people swap stories about in the pub and roll their eyes when a client mentions it.

Gamification can spoil things – and usually not in an obviously broken way, but with a more subtle kind of damage, where a system of points, badges and awards has slipped in like a cuckoo and replaced functionality, content or actual gameplay. It’s often thrown over other ideas like a suffocating blanket in an attempt to make things more “sticky” or addictive, usually accompanied by talk of engagement and eyeballs.

It’s easy to confuse something that’s commonly misused with something that isn’t actually any good in the first place. Where does gamification commonly go wrong, and what does that say about how to do it right?

Long post after the break…

Continue reading

Vices vs The Crisis – Information is Beautiful’s second challenge

I finally got my arse in gear to have a go at one of the Information is Beautiful challenges. The recent challenge was called Money Panics and is about visualising the economic crisis. There was a whole slew of data provided about GDP and deficits, and I had a valiant go at thinking about how to make sense of the crisis and the plethora of super-clever financial tomfoolery that went so badly wrong. But, surprisingly, researching, understanding and distilling a global economic crisis is actually really hard.

Suitably humbled, I decided to take a slightly sideways look at the crisis, and look at how it affects people’s habits and behaviours – specifically, how it affected vices. Conventional wisdom says that people drink, smoke and gamble their way through hard times – but what happens when the hard times in question mean that it’s tougher to afford those little luxuries?

So to partially answer that question (in terms of correlation, if not causation, and actually raise a load more interesting questions in the process, and while only looking at a fairly small section of much larger trends in society, and probably some other disclaimers too) I give you Vice vs The Crisis:

(click for a larger image; some of the text is pretty small…)

It’s my first attempt at an infographic, so go easy on me. I was kind of expecting the data to tell a different story – one of rising trends – but actually it shows falling levels of drinking and smoking. So while I was a bit disappointed that it wasn’t quite what I expected, it does tell a story of its own.

What do you think? Interesting? Pointless? Pretty? Let me know!

Infographics: info, graphics and that elusive third half

2010, apparently, was the year of the infographic. Huzzah. We’re most of the way through 2011, and it seems like that too has been a year in which it’s hard to move online for visualised data of one kind of another. Whether it’s homespun junk clogging up the internet on one of the ever-spawning 10 Infographics You Must See! type pages or the professionally produced quality work at Information is Beautiful, there are a lot of infographics going round. So what separates the good from the bad? What makes a good infographic?

At the risk of stating the flipping obvious, there are two parts to an infographic: information and graphics. Information is the data or concepts that are the meat of the visualisation. A good infographic represents information that is hard to understand in other formats – say, a whole bunch of really big numbers, or a tangled web of interactions and events.

The other half is the visual design. The design has to be informative, and clear. Successful infographics often make strong use of colour, white-space, easily understood icons – classic design elements all, and I like a lot of infographics purely for the visuals as much as the actual data they represent.

The third element is a synthesis of the two. Good infographics often make clear the relationship between difficult concepts or large data sets by representing them in terms of colour, or size, or space, or layout. They look attractive, but also tell you something.

This elusive third half is what a lot of infographics lack. It’s relatively easy to think of an idea then make it look nice, or to arrange a whole pile of data on a page so it looks nice. But the strength (some would say: the point) of infographics is to bring something else to the party, not just good looks or a mountain-o-stats. The best infographics help you contextualise something you could never conceive of in the abstract.

(A snippet of the Billion Pound O Gram from Information is Beautiful)

The Billion Pound O Gram from Information is Beautiful is a great example. Trying to listen to someone talk about so many billions of pounds is futile – there are only so many zeroes your brain can take in before you want to die, or at least before such huge numbers stop making sense (if they ever did).

But this infographic takes those numbers and contextualises them, lets you see them relative to each other, all in an attractive, easy-to-understand format. You can explore the data, poring over the image to discover little titbits you’d never have thought about before, or would even have considered doing if someone had presented you with the same data in a list, or spreadsheet.

A lot of other “infographics” are either all info or all graphic. There’s a whole series I’ve seen that purports to represent various different schools of thought. They’re all about “explaining philosophy through basic shapes”.

(Image from Society 6, where you can buy a copy if you feel the need)

They don’t. This graphic is in no way informative – at most it’s a pretty weak visual pun: Positivism. Plus sign. Right?

I feel that this kind of infographic is pretty pointless – it’s the kind that are swamping the web, the same way that you can’t turn round without someone trying to flog you a Keep Calm rip-off with some poorly written crap on it.

A few years ago GraphJam (or something like it, I forget the name) used to be funny. It took the trend of pointless visualisations and twisted it back on itself, using pie charts and graphs churned out by Powerpoint to represent completely inappropriate things like lyrics from rap songs. Now the trend of “funny” chartjunk has come full circle and those sites are full of pointless shit graphs representing nothing except a lack of wit. It’s a shame, but these memes do tend to end up eating themselves.

Of course, that’s not to say that infographics aren’t useful – well thought-out, well designed and useful infographics are great. But when it comes to helping people understand information and data, they’re only one tool in a much bigger box of tricks.