Play & engage: practical ways to gamify your content

Thursday, June 13th, 2013 at 7:09 pm
This is a preview of a talk I’m giving at UX Scotland on June 20, 2013. If you’re heading up to Edinburgh, please come and listen to me speak!

While I’ve worked under various job titles over the years, much of my work has consisted of creating and maintaining the best possible experiences related to content-rich websites across a broad-range of areas — including arts, news, sport and even transport.

A lot of this experience design has to do with navigation and information architecture. But beyond this, what happens to a user once they’ve found their content? A good experience shouldn’t end there. But even if your content is superbly written, edited and laid-out, sometimes there’s a limit to the impact you can have just with the written word. Sometimes we can do more with far less – and this is where we can look to the world of gaming for assistance.

Yes, I’m suggesting we can gamify content for the better. But perhaps not in the way you’re thinking (and possibly dreading).

Contentville!

One of the reasons I’m writing this is in response to the many talks, articles and blog posts I’ve seen written about gamification as a “silver bullet” for pretty much everything.

Gamification has been described as many things, but this description from Gabe Zichermann and Christopher Cunningham in their book Gamification by Design is good place to start:

“[Gamification] …the process of game-thinking and game mechanics to engage users and solve problems”

The problems you’re solving? Whatever you’re aiming to achieve with your content, that’s the problem we want to solve: education, persuasion or conversion.

But the usual methods of gamification bandied around – badges, levels, experience points and achievements – for me never really felt particularly relevant to content.

I’ve always been very open to the concept of gamification because I myself have always been an avid gamer. So I started to think surely there were elements of gaming and gamification that could indeed enhance content. After looking through many game mechanics I realised that actually there was an awful lot that content-related experiences could take from the world of gaming.

“Content-related experiences? Wha…?” Yes, that’s potentially an awful new buzzword I’ve just created. But keep that in mind while I give you an example of what I’m talking about and how it actually makes perfect sense.

In September 2013, many Australians like myself will vote in a national election. One of the key points in the campaign between the Labor party and Liberal/National coalition is the “Australian National Broadband Network”. Both parties have very different proposals.

Let’s take a simple user story: “As an Australian voter, I want to be informed and to understand the key points and differences between both proposals for the NBN (because how fast I can get the latest Breaking Bad episode is on the top of my political agenda)”

The Conversation has a very good article on the differences between both proposals. While very comprehensive, it involves lots of numbers and three letter abbreviations. Photos of wires. No cute animals with wires, just wires.

But let’s compare that with this website an Australian developer put together on the topic: simply howfastisthenbn.com.au.

I’m pretty sure after about 10 seconds on the howfastisthenbn.com.au you’ve got a far stronger idea about which political party’s network you’d rather have.

That’s what I mean about content experience: with a mouse click and simulated Facebook upload howfastisthenbn.com.au has left the verbose yet incredibly factual piece from The Conversation in the dust.

One of the brilliant things about a site like howfastisthenbn.com.au is that it delivers an “epic win”. From Jane McGonical’s TED talk on gaming to change the world, defining an “epic win”:

“An outcome that is so extraordinarily positive you had no idea it was even possible until you achieved it.”

The outcome here was achieving the understanding of a complex and confusing issue like the Australian NBN. And you had no idea it could be that easy: all you had to do was click “upload”.

In the 1980s Japanese professor Noriaki Kano developed the Kano model to chart customer satisfaction:

kano1

We can easily compare the article on the Australian NBN versus the “gamified” version on this graph:

kano2

Not only have we educated and given the user what they’ve wanted quickly and easily (satisfaction), we’ve also delighted them (and on a side note: it’s at this point of “delight” that users rush to share links. This is where things start to go viral organically).

We can also compare these two experiences on the UX Heirarchy of need from Stephen Anderson’s excellent book “Seductive Interaction Design”.

uxheirarchy

Basically, much like the the Kano model, we’re going from what’s sufficient to what’s (hopefully) awesome.

I’m about to show some practical examples of game mechanics, but before I do this I think it’s worth thinking about users here more as actual players. Players explore a game: users explore your site and ultimately your content. Both environments are quite similar. But perhaps more importantly, while you’re considering users as players, you need to consider your content itself as an environment: and the user should be an active participant in a conversation with the content, just like a player is in an active conversation (or often conflict) with an environment in a game.

Practical examples. (Yes, finally, the thing I’ve been promising all along.)

Many of these examples are taken from the SCVNGR “play deck” that contains a long list of game mechanics. SCVNGR is an app that makes a game out of real life with games and challenges in your local area – or wherever you’re visiting.

#1: The Feedback Loop

Before we get into more complex mechanics I think it’s worth considering one of the most fundamental mechanics in life itself: the feedback loop. From psychology to biology, this is probably the simplest game mechanic there is.

Feedback loop

Cause and effect; every action has an opposite and equal reaction.

This is one reason I believe parallax sites are so big right now. The subtle genius behind why parallax sites are so fun to use (regardless of how overtly eye-candy they can be) is because they react to even the most minute action from the user: a single pixel scroll or swipe from the user (player) causes the entire site (environment) to react.

One parallax site in particular has some really engaging message: The Dangers of Fracking.

It’s beautiful and fun and I think after visiting that website you’d have a far better understanding of what fracking is than reading a 3,000 word article on Wikipedia or a news site in a fraction of the time. So perhaps there is hope yet for the ubiquitous parallax site — if done the right way.

#2: The Shell Game

“A game in which the player is presented with the illusion of choice but is actually in a situation that guides them to the desired outcome of the operator.”

Everyone is hopefully familiar with this game: you try and guess where the “shell” is under three cups. It can be a simple, fun game as demonstrated by this hyper-intelligent cat:

However, usually (and by definition of this mechanic) it’s a entirely rigged game where the player has zero chance of winning. You’re sure you know where the shell is, but the operator has the entire game rigged and in fact each cup has no shell because of sleight of hand (or other devious methods).

This is a bit of an “anti-pattern” in a way – the opposite of good user experience. However, we can use this to evoke a very powerful and certain type of reaction.

Consider the Twitter password security page. We’ve all seen these; no doubt our banks have sent us far duller examples about keeping our passwords secure online.

But compare that with the site ismytwitterpasswordsecure.com. An interactive way to check how good your password is. What a great idea, right? Try it out and see if you need to rethink your password.

The shellgame here is of course that it doesn’t matter what the user does, the site will respond with the same response regardless. There is the illusion that a user will receive a personalised analysis of their unique data. But by doing the exact opposite it highlights brilliantly how easy it is to be hoodwinked and phished.

Which site has left you with a better sense of keeping your accounts secure online?

#3: Cascading information theory

The theory that information should be released in the minimum possible snippets to gain the appropriate level of understanding at each point during a game narrative.

Much like feedback loops are a key part of interaction designer, Cascading Information Theory is a key concept in good information architecture (and user experience in general) — it’s very similar to the theory of “progressive disclosure“.

But it’s also quite a valuable game mechanic, as exemplified nicely by this website, the Global Rich List.

Created by London agency Poke, it is an alternative view of The Sunday Times’ Rich List. It shows how personally you fit into the world in terms of wealth. (This actually ties into many other game mechanics such as meta games and leader boards, but for the moment, let’s just stick with cascading information theory).

After you’ve given the site your income and nation, it slowly communicates insight into how you fit into the globe in terms of wealth (or rather, poverty). Instead of just bombarding you with numbers, data, graphs and what not it slowly cascades information through to you — so you can fully appreciate each segment. It builds up a nice narrative which is critical in telling any story – game-based or otherwise.

However, the really interesting part of this particular example is how it promotes donating to the Care charity. This kind of gamified comparison system works really well for advocacy, and it could be applied across a wide range of industries: healthcare, charity and even Government. And yet again, it is far more powerful than just a massive collection of tables or graphs discussing world poverty.

#4: Appointment Dynamic

“A dynamic in which to succeed, one must return at a predefined time to take some action. Appointment dynamics are often deeply related to interval based reward schedules or avoidance dynamics.”

Warning: sporty stuff ahead. But keep with it.

A few years ago, those with any interest in football will remember Fernando Torres being transferred from Liverpool to Chelsea for a mammoth £50 million. A huge goal scorer for Liverpool, he flopped at Chelsea. Not long after his first game, a website appeared:

hasfernandotorresscoredforchelseayet.com

And when you went to that site (now defunct), all you was this:

This is quite funny in itself, making a joke out of Torres’ struggle in front of goal at his new club. But what makes this really interesting is the underlying appointment dynamic: you’ve seen half the joke. You’re in on it before the punch line. Come back after he (inevitably) scores his first goal and complete the joke / game. This site racked up about 70,000 Facebook likes which is no mean feat.

At the end of the season, Chelsea sacked their manager Carlo Ancelotti and appointed André Villas-Boas as their new coach. (Side note: Chelsea are notorious for sacking managers. They’ve had eleven managers since 2000). Just after it was announced, I thought to myself: “has anyone registered hasandrevillasboasbeensackedyet.com?”

They hadn’t. So I got out my credit card…

I loved this “game” concept of half a joke that has an eventual resolution. But I also thought, let’s not just rip off the Torres site. What if I went all out crazy and made it a Monty Python-esque look at Chelsea Football club? So I did…

For over eight months, the site sat on “NO” with AVB fist pumping and trophy-hungry Chelsea owner Roman Abramovich applauding from above. Then in March, he was sacked. Luckily I was at home on a Sunday morning when the news broke, so I updated the site within minutes. (In October I went back to Australia for four weeks and had concocted all sorts of bizarre contingency plans in case he got sacked while I was asleep).

So on the morning of March 4th, this is what the site looked like:

Digressing, you might be wondering what this has to do content. Well The Guardian recently used a very similar approach in its coverage of the papal election with istherewhitesmoke.com.

Before the new pope was elected, black smoke billowed out and it said “no”. But after? White smoke of course. But the really interesting thing here is that The Guardian hooked it in with their live reporting of the entire story. By using this appointment dynamic they added a layer of gaming to their coverage of electing a new pope: a pretty dry yet very big story.

#5: Endless Games

“Games that do not have an explicit end. Most applicable to casual games that can refresh their content or games where a static (but positive) state is a reward of its own.”

How can this mechanic make content more interesting? By creating a view of content that is always interesting and engaging, regardless of how many times you’ve seen it before. Perhaps this is one reason why we’re obsessed with the weather (and news and sport): it’s an endless game that’s always changing.

One powerful example of an “endless game” is The Daily Mail’s “by the numbers”. This page is forever fascinating: it gives a real time view of what’s happening on The Daily Mail site and perhaps more interesting (and terrifying) is the “who”: who’s making the most interesting comments? The most controversial? Who’s making the most headlines?

This is essentially your “Most read” stories on steroids. And it’s relevant to anyone, anywhere as it shows a global heat map. By having a world heat map, anyone visiting this page is instantly part of this game. And again, this dovetails nicely into many other game mechanics: leaderboards, rank, awards.

Booking.com also taps into this mechanic by communicating to users when the hotel currently being viewed was last booked and where they were from.

Booking.com

Combined with showing limited availability of rooms where applicable, this creates a powerful combination of endless games combined with another mechanic – scarcity or limited resources — to really push users to book a room quickly before they “miss out”. The “game” at Booking.com may pause briefly when you confirm your room, but by perpetually feeding back realtime information the entire site is an “endless game”.

We’ve looked at five specific game mechanics so far and have mentioned several more. But now I want to look more at general gaming themes that we can also use when designing more interactive and engaging content.

Explore mode; story mode

If you’ve ever played games like Grand Theft Auto, Skyrim, Red Dead Redemption or Fall Out, you’ll already be familiar with this concept. Basically, the world is your oyster: in these “sand box games” you can freely roam the environment and explore or you can engage in the game’s main story line. Often free roaming is rewarded by extra stories, so both styles of play are equally important to the entire game world.

Check out this eight year old playing Grand Theft Auto. He has no interest in the story, just exploring the world: and amazingly, very little interest in committing the violence Grand Theft Auto has become notorious for)

How can this apply to content? Specifically I believe this is a really useful theory to apply to any content reliant on data – and specifically, data visualisation.

Prior to the 2012 London Olympics, I was working at the BBC on some interactive content related to the Olympics. One idea that came up while brainstorming with journalists was a data visualisation that compared something everyone has in common with Olympic champions: height and weight. By putting in your height and weight it would show you what Olympians had the same height and weight as yourself. I was lucky in that my height and weight matched with Sir Chris Hoy, but for many others, an Eastern European female weightlifter was the unfortunate yet definitely amusing “match”. (Try it yourself: “Your Olympic athlete body match”)

The hardest part of this project was making something often taboo as height and weight as acessible as possible. So that’s when the “explore” and “story” mode idea came to me: from the home screen people can jump straight in and explore (by entering their height and weight) or take the “story” approach by looking at two extremes: Chinese basketballer Zhaoxu Zhang (the tallest) or Japanese gynmast Asuka Teramoto (the lightest).

The key to good data visualisation is presenting a story. Great data visualisation makes it personal somehow to the user. With the Olympian body match, I believe it did both really well by giving users these two ways to approach the data which is the content in this situation.

So far most of the examples I’ve discussed have been quite high-fidelity: requiring a lot of design and/or development time. But using elements of gamification and game themes in your content doesn’t have to be super swishy and interactive.

Explore & discover

There’s a really obvious example of gamification that is often used in content that I haven’t mentioned yet: the humble quiz. Quizzes have their time and place, but often I wonder how “fun” they actually are. They feel like more of a “test” than a game; sometimes a chore rather than play.

Recently some of the content producers on a website I was doing UX work for wanted to create a quiz related to finding out what musical instrument would be best to learn. As we discussed it, the complexity of such a quiz really started to become apparent. It would require a lot of development time, and digressing back to my earlier point: where would the fun part be in this?

I wondered if there were alternatives that wouldn’t require much development time (a particular restraint in this situation) and also were far more fun and engaging for users.

I remembered a flow chart that’s been doing the rounds for a while called “So You Need A Type Face”.

(For the record, my favourite part of this is the comic sans route).

Flowcharts like this have become quite popular – they’re simple to share and graphically very appealing (just search Pinterest for flowcharts – there are dozens of fantastic ones).

I started to wonder why a flowchart might be more fun than an interactive quiz. Surely interactive would always trump something static? I realised that part of the fun of the flow chart is the discovery and exploration element. The problem with a quiz (and especially one with multiple paths) is that its inner structure is invisible. There are routes you can only discover if you re-do the quiz again and again and change your answer (and really, who’s going to do that?)

But a flow chart is like a fun map: you can jump in at any point and start moving around, not unlike a game of Snakes and Ladders. The entire architecture of whatever “questions” you’re asking is wide open for discovery – and that’s why a static flow chart can often trump an interactive quiz.

The musical instrument flow chart went up on a Friday afternoon – prime time for ensnaring users at work wanting to kill some time before the weekend. It was a massive hit: it racked up several thousand shares on Facebook and actually became the site’s most viewed content page of all time.

Delight & surprise

One of the more interesting things about social media is the way that some organisations – traditionally seen as ultraconservative – can shatter these preconceptions and really engage an audience. Take for instance some of the tweets Surrey Police put out last winter during a particularly frosty spell:

It’s pretty much a Dad joke, but it’s coming from the official Surrey Police channel. You’d never expect such brevity from a police communications channel. But it worked brilliantly: the message to be careful on the road spread through Twitter on the back of a terrible Vanilla Ice pun.

“Delight” and “surprise” might not be specific game mechanics, but a game is not a game without these elements. (In fact, the same goes for pretty much any story or narrative).

Such things are quite easy on social media, but what on more traditional digital web channels?

Well the Centers for Disease Control and Prevention (CDC) took this approach to a whole new level a few years ago. Trying to promote their message of preparing for various national disasters, they published a blog post entitled “Preparedness 101: Zombie Apocalypse”.

Basically the content was whatever the CDC advised during most disasters: having water supplies, rations, batteries, torches etc. But the genius was tying it in with the fictional Zombie Apocalypse: staple of dozens of horror games and films alike. Everyone’s terrified of earthquakes and hurricanes, but zombies – now that’s everyone’s nightmare. And someone like the CDC publishing advice on surviving the Zombie Apocalypse? Why wouldn’t you want to read that? And everyone did: in fact their server crashed not long after the story was published. Having almost 90,000 shares on Facebook is impressive enough, but the post also attracted 1,235 public comments. Not bad for a public service announcement.

When gamification goes bad… for the user

I’ve talked about many great examples of how gamification can indeed create a great “content experience”. But of course, with the good there’s always the bad.

There’s been a lot of praise for the new UK Government portal GOV.UK – it even beat The Shard and the 2012 Olympic Cauldron for the 2012 “Design of the Year” – an impressive feat for what is a purely digital product. It’s amazing feat of work that combines and simplifies all of the UK Government’s content into one place.

Earlier this year I was browsing the Webby award winners and was surprised GOV.UK wasn’t even a nominee. Then I saw the winner in the Government category. It actually makes use of a lot of what I’ve discussed so far, but unfortunately in such a self-serving way that any user experience feels like a mere afterthought (if at all).

If you take a nice juicy bit of feedback loop/parallax design, combine it with some more surprise and discovery together in what feels like a backdrop of a actual video game (think Call of Duty), then you’ve got Milwaukee Police News.

If this was a site for Milwaukee Police News: The Game then it’d be a great site. But who is this site for? If you Google “Milwaukee police” this is the first result. There’s not even a single mention of 911 or any way to contact the police. Isn’t that kind of REALLY important? Try and find information of something practical, say paying a parking ticket. Without using the find function on your browser. It says it’s a news site, but even the news feels like an afterthought after extras from COPS posing with their paramilitary gear. After seeing this site Milwaukee feels like some terrifying slum akin to Gotham City in Christopher Nolan’s Batman films.

Contrast this to GOV.UK: there is no gamification here. Because it’s not suitable. Not on the homepage, at any rate. So gamification can succeed wonderfully in some situations, but to succeed it needs to be done with due respect for user’s needs.

I started blogging about the craziness of Milwaukee Police News winning a Webby over GOV.UK when I thought to myself: wouldn’t satire be a fun way to looking at this? So in closing, let’s look at ‘gamifiying’ a blog post. Here’s what I believe GOV.UK would need to be like if it where to win a Webby Award.

I hope this has given you some ideas about how we can use gamification and elements of gaming to create effective and engaging interactive content. But again, as a final caveat: always consider your user’s needs first and never leave them hanging. But if you can use gamification correctly, it’s an immensely powerful tool to really engage (and delight) users.

2 Responses to “Play & engage: practical ways to gamify your content”

  1. [...] presentation of Play & Engage: Practical Ways to Gamify Your Content. (There’s also a fairly comprehensive blog post of my key points available too). Unfortunately on at the same time was Graham Odds talking about data visualisation, [...]

  2. [...] the start of this year I’ve spent a lot of time looking at how gamification and game mechanics can create more engaging user [...]

Leave a Reply

Current month ye@r day *