This is a follow up to this post about the Playful Conference and how gaming techniques are used in web design. I posted the question to the London IA Ning community and got some interesting responses, which I am posting here. ( Special thanks to the contributors Cennydd, Adam and Mr Bootle your input was knowledgeable and helpful)

December 21, 2009

I attended Playful 2009 in October

If you don’t know about Playful, it was originally a gaming conference but in recent years they’ve brought in speakers from other disciplines. It’s essentially still a gaming conference but has interesting cross fertilization for interaction designers.

So I was wondering if anyone out there could think of any techniques that website design has borrowed from gaming. I can think of a few but would appreciate any of your thoughts on this subject.

Here’s my initial thoughts:

So the first and easiest would be the metaphor of using badges to represent skill, accomplishment and experience. Ebay have been using this for a very long time with their Power seller badge. I have also seen this technique used very cleverly in a demo app designed for the BBC by AKQA, where badges where thrown into gigs, these were then added to the digital profiles to prove that you had gone to the gig, the more badges you have the more kudos you have with your friends.

The Easter egg is something that has been around since games have been around. I guess you could argue it’s questionable whether the Easter Egg aids the user experience as it’s not something that streamlines a user task. Personally I think when done well they definitely add something exciting to the experience of exploring a site. My son found a couple on this page on the Lego site which is thoroughly entertaining

Location based social media apps such as Gowalla and FourSquare are utilising a number of gaming techniques like earning rewards and adding stamps to your passport. It also seems to be changing the way you interact with your environment in a more basic level by turning your life into a type of game.

Reply by Cennydd Bowles 

It’s a really interesting field, and quite astonishing how it and UX have grown independently of each other. I think we’re only now starting to realise the value in each other’s work.

Agree about the badges & reward system, probably one of the most important crossovers IMO. YUI summarised this excellently in the competitive spectrum: http://developer.yahoo.com/ypatterns/social/people/reputation/compe…

Couple more that pop into my head:

* Tutorials & progressive disclosure of complexity. Most first-person shooters have layered tutorials that introduce basic firing controls, then move onto clever stuff like crouching, grenades etc. Seen this in a few web app tutorials, eg Dropbox.
* Legibility. Slightly obscure one – I don’t mean typographic legibility. You need to be able to tell your teammates apart from the enemy, but different lighting conditions in games mean you can’t rely on certain features to recognise characters eg clothing. So the designers spend a lot of time designing the characters to be legible as silhouettes, surrounded by zombies etc. It’s almost turning characters into an icon, recognisable in various circumstances. See also: icons

I’d urge anyone who has the Half-Life 2 Orange Box (or Portal, Left 4 Dead or similar new Valve title) to listen to the in-game commentary. It’s amazing how closely it relates to IxD.

Reply by Marc Sibley 

Thanks Cennydd, 2 good additions that I hadn’t thought about.

So what about the visual step process in a long form, ecommerse or application process? Could this visual representation of where you are in a journey possibly be an appropriated gaming metaphor?

Reply by Adam Davis on January 4, 2010 at 9:54pm

I also attended Playful in October and found it very refreshing.

I agree that there is much to be learned across disciplines and it’s great to see the discussion being raised. For me the main takeaway from Playful not solely game tokens or game design mechanisms.

What Playful highlighted for me was that people like to enjoy themselves and play, even if the tasks and goals are menial or serious like the kinds we are often faced with as IA practitioners. What we can learn from game design is that people respond positively to something that lets them play, pretend and imagine. We can employ as many of the game techniques we like (badges, game economies and the like) but these are only part of designing a game or playful experience. If it’s not fun, it won’t matter.

Play is an elusive and difficult concept to capture by any definition or design, and we can learn from the game industry in many ways in terms of creative processes, playtesting, iteration and yes, game mechanisms like badges and tokens. But most importantly we need to incorporate Playfulness as a property of the User Experience into our designs much in the way we think about Usability.

I wrote a few of these thoughts about Playful 09 on my blog at the time. I’d love to see this line of thinking continue to develop in our industry.

Reply by Marc Sibley 

Thanks Adam,
I agree with your points. Playfulness is something that you can apply to anything you do at any point of the design process and in the way you live your life, it’s a state of mind!

( I think Andy Budd posted about design games on this site a few months back , I also saw that London IA member Jason Mesut gave a talk about playfulness a few months back as well, I didn’t go but would like to know more about it.)

I think In my original post I wanted to pin down how gaming has influenced web design if at all, in purely practical ways, (as playfulness as you explain is a difficult concept to capture) as I have not really noted any information out there discussing it. I think the idea of playfulness probably warrants a new discussion altogether.

Adam, play the game.

Reply by Mr Bootle 

Great post Marc. I unfortunately didn’t know about Playful until it was too late to get a ticket. It sounded like a great conference and it has been something that was touched upon some years ago at dConstruct 2008 by Aleks Krotoski a href=”http://2008.dconstruct.org/schedule/AleksKrotoski.php” target=”_blank”>http://2008.dconstruct.org/schedule/AleksKrotoski.php > I think most of the audience failed to get (or put into practice – myself included) the techniques but it was obvious then as it is now that our disciplines cross over.

One element I feel we can learn from the games industry is the art of telling a great story. Quite a challenge I know but there are so many ways we could think about including some kind of narrative within our designs to include and involve the user.

Perhaps through the use of simple microcopy, or a cleverly evolving story over a series of pages? Maybe it’s just a good marketing angle? Not sure but certainly it’s one element of games that I feel we are missing.

On a side, Jason Mesut’s talk focused more so on introducing “play” into our techniques for research as UX practitioners. It was a foot-to-the-floor non-stop presentation that was fun and playful and opened up a host of ideas for interacting with clients.

And then after all this hard work I found a presentation, that gives a great overview of all game design techniques in web design and a post on mashable which elaborates mainly on game elements like badges and points that Foursquare and Gowalla are utilizing . Expect a summary post soon once I’ve consumed all this information.

I listened to this today. A brilliantly entertaining radio show in which Andy Weatherall takes us on a musical journey through his London. Lot’s of great anecdotes and a great knowledge of music and club heritage and history from the late 1950’s to the present day. Some of the music I had heard before, some of it was new to me, but even the stuff I’d heard before sounded different once Weatherall had regaled his story behind it.

It got me thinking about why I look to experts in their field for information as opposed to resulting to some types of social media (not blogs, they’re really good and turn the masses into experts). Especially when it comes to music – I don’t want to discover music by some emotionless algorithm making suggestions to me. Last.fm and Apple’s Genius make suggestions based on what I am listening to – where’s the individuality in that? What I want is to be informed and exhilarated by a expert if possible, who thinks originally and makes great suggestions based on their own unique experiences and knowledge, not an unimpassioned crowd.

To illustrate my point, Andrew Weatherall tells the story of how the selection of one record at a party at Skater Bobby’s mum’s restaurant in Chapel Market at 6 o’clock one Monday morning completely changed his life forever. This was a time before DJ’s had the kudos that’s attached to them today, and Weatherall who was not a known DJ was asked to bring some records (which he brought in a plastic Woolworths box). He was playing mostly dub and electronica, but at some point he played a record (that I have never heard of before) by ex Throbing Gristle members Chris and Cosey called October Love Song. After the track had finished Danny Rampling (who was one of the leading names in the Acid house movement) came up and said it had blown his mind. They talked for hours after the set had finished. Rampling was so blown away by it that he asked Weatherall to play at the next Shoom, the seminal Acid house club. The extensive knowledge that Weatherall had gained from being so into music meant that he could select this track, not an obvious track at all and a fellow expert could recognise his brilliant talent instantly. This knowledge is what I am talking about.

Please listen…

I attended Playful 2009 in October and have been too busy to write anything about it until now.

Of the many speakers Daniel Soltis from Tinker, James Bridle, Russell Davis, Rex Box, Chris O’shea and Robin Burkenshaw’s tales about Alice and Kev all entertained and gave me much food for thought. So as a web designer I thought I would try and think about and list great ideas and techniques from gaming that have been used in website and mobile design.

So the first and easiest would be the metaphor of using badges to represent skill, accomplishment and experience. Ebay have been using this for a very long time with their Power seller badge. I have also seen this technique used very cleverly in a demo app designed for the BBC by AKQA, where badges where thrown into gigs, these were then added to the digital profiles to prove that you had gone to the gig, the more badges you have the more kudos you have with your friends.

The Easter egg is something that has been around since games have been around. I guess you could argue it’s questionable whether the Easter Egg aids the user experience as it’s not something that streamlines a user task. Personally I think when done well they definitely add something exciting to the experience of exploring a site. My son found a couple on this page on the Lego site which were thoroughly entertaining

Location based social media apps such as Gowalla and FourSquare are utilising a number of gaming techniques like earning rewards and adding stamps to your passport. It also seems to be changing the way you interact with your environment in a more basic level by turning your life into a type of game.

More to come later…

(This is an unedited piece written for the Customer Engagement 2010 survey report, produced by e-consultancy and cScape the report is available here)

This September I listened to Adam Greenfield (Nokia’s Head of Design Direction for user Interface and services) prophesise a future of Ubiquitous Computing. A world where computers are totally integrated into everyday life, and where the physical world is a searchable place like the internet is now – an ‘internet of things’. A post-desktop world where every random object is addressable, queryable and scriptable.

Listening to him speak I realised that most of the innovative and interesting things that happened in 2009 in the interactive arena were the start of an exploration away from the desktop – a move toward a more physical type of engagement. In the same way new APIs and widgets find innovative ways to use and engage with the data already flowing through the web, a new generation of physical tools and interfaces are bringing the virtual back into the material world. Could this exploration be the first tentative steps towards Ubiquitous Computing – the dawning of the age of ubiquity perhaps?

The catalyst for this transformation has been the iphone 3GS – and how it has completely altered people’s perception of what a phone can do.

The growing number of augmented reality apps for iphone (and Android) have started to become ubiquitous, utilising the compass, camera and GPS system within the phone to lay virtual data on top of the physical world. Wikitude AR Travel Guide enables you to hold up your phone and see Wikipedia information on the site you’re looking at, simlarly ‘Nearest tube’ from acrossair allows you to be directed to the nearest tube station.

Debenhams’ experiment of giving staff smart phones to answer customer enquiries in stores through Twitter had the ring of something approaching ubiquity. Digital agency Poke went one step further creating a physical device that tweets – “Baker Tweet” sits in the baker’s kitchen and informs the bakery’s cuctomers when something is fresh out of the oven.

Artist and designer Chris Oshea is pushing the boundaries of how digital can interact with humans in a physical space using a sense of playfulness and humour. Check out his ‘Hand from above’ project for BBC Big Screen Liverpool, where unsuspecting pedestrians are tickled, stretched, flicked or removed entirely in real-time by a giant deity. www.chrisoshea.org/projects/hand-from-above

2009 also saw a movement away from the slickness of the touch screen to a more tactile and crafted place. Inspired by (former Nike Global Consumer Planning Director) Russell Davies’ great call to action “We’ve broken your business, now we want your machines”, The Newspaper Club is using under-utilized printing presses to create bespoke and beautiful newspapers from customers’ digital content. Then there is the GPS puzzle box, a wedding present crafted out of wood by Mikal Hart, which is set to open in one particular geographical location, the puzzle of it is to find out where that might be.

Most of these excursions away from the desktop are largely niche and experimental at present  - apart from mobile. Although our survey suggests that corporate brands are still tentative in their use of mobile, the mobile phone now has the combined utility of the fixed telephone, internet, computer, credit card and TV. Brace yourself. It’s going to completely  revolutionise the way customers engage with brands over the next few years.

I was looking at a letter Charlie Hoult had written to the Financial Times in June this morning, I’m not sure how I got to reading this letter it’s just one of those random things that happens when browsing the internet, but it made me think, and that is a good thing in my book. Anyway in this letter Charlie mentions this statistic,

“70 per cent of all purchasing decisions are made in the last 4ft of point-of-purchase, but 90 per cent of marketing budget is spent elsewhere…”

Well if this is true I’m amazed that information that helps customers to make buying decisions online are not brought into real shops. Now with the proliferation of location based mobile devices and also the ability of some devices to scan barcodes, big department stores should be mapping information like expert reviews, user reviews and techniques that are used online to aid customers in their purchase in store. Customers should be able to access this information through their mobile or at digital touch points throughout the store. Then I remembered this and thought that maybe big department stores are missing a trick here. Could this kind of user reviewing help increase sells in a real shop? Maybe some kind of mobile widget or application that can scan a barcode and give you reviews in the shop, you could also leave feedback or ask questions. Or I guess you could just look up the Amazon review, although it’s nice to have some kind of streamlined task specific branded application that can get you the information really quickly and enhance the overall brand experience of shopping in a big store. This kind of review information attached to products in shops could be a really useful added layer of value to the big shopping brands.

But it’s not just about using information online and bringing it in to the store.

I’m a great fan of John Lewis, and always respect the views of most of the assistants, they’ve helped me make decisions when purchasing carpets, ovens, electrical equipment, coffee makers the list goes on. I trust their opinion and view and they give me the lowdown on a product and it’s something that should be made more of. This knowledge should be captured and used as another reference to aid the decision making process at least on the John Lewis’ website.

I guess what I’m getting at here is that just as information on the internet can be useful and brought into the real world to aid the customer, there should also be information and knowledge which is valuable and unique to the brand going the other way from the employees in the stores to the internet.

Or is this just some kind of crazy fantasy of someone who’d like the time to walk round big department stores looking at cool stuff but hasn’t got the time?

More inspiration from dConstruct 2009, this is a video that August de los Reyes showed in his talk. Should probably find out some more on Alan Watts who is the philosopher talking in this animation.

I tried to find a good version of “I saw the light” by Todd Rundgren to illustrate the last post but couldn’t find a decent clip, but I found this old clip of “Hello it’s me”. I think that’s feathers or birds wings stuck on his eyebrows? Good tune none the less.

I keep thinking back to the moment when listening to Brian Fling’s talk “How mobile is changing design”at dConstruct 2009 that I realised the impact that mobile is going to have on the way we do things. I feel a bit stupid for not getting it sooner. It was a really significant moment for me the moment when I finally “got” mobile.

The desktop computer that I’m pretty fond of—I mean I work most of the day on a desktop computer, I have done for the last 12 years, but it’s not going to be as important to us all as mobile is going to be.

Why is the desktop not going to be as important as mobile?

I can see the mobile evolving into something that you can take with you anywhere; it’s always on; ubiquitous; it’s a credit card and it will help you understand your current environment, communicate, gather information, socially interact, it will help you engage with the world on another level. (obviously Tomi Ahonen is more knowledgeable about these unique elements than me)

What am I describing here?

It does sound remarkably like a robot from a popular science fiction film of the 1970’s that makes lots of strange beeping noises—maybe. I can’t really think of a device imagined that’s better than R2D2, on this assumption mobile can definitely compete with the printing press. All I know for sure is that your desktop isn’t going to want to follow you around all day, it’s going to evolve into a docking port for you mobile device.

So back to the moment of clarity during Brian’s talk. Brian mentioned Generation Y and Generation Z; Generation Y having been born and growing up with the internet; Generation Z on the other hand are being born now and will grow up with the mobile device as their main way into information. If these 2 generations are going to be the largest demographic group in the next 5 to 10 years and they’re all been reared up up the mobile device.

This point was illustrated with a photograph of Brian’s young daughter watching something on his iphone. I recognised this as I have seen for myself the way my kids have easily adapted to using my iphone and it’s touchscreen (I think that’s one of it’s most interesting features; that you have to touch and engage with the screen) and it’s second nature to my kids now.

The landscape is about to change completely

The industry of designing  websites is going to change completely over the next few years. The last 2 slides highlighting operating system and Mobile browser usage stats really brought home to me how much Microsoft are behind in mobile (is this complacency?), and how far ahead Apple are in this market especially in terms of user experience.

So here are the series of slides that made me see the light…

But don’t take it from me here’s the podcast of Brian’s talk and here are the slides go see for yourself.