Introduction to Gamification for UI/UX Designs

At the WebApp 2012, organized by SiliconIndia, I spoke on “Gamification in UI/UX Designs”.

It was not bad but I won’t call that a very good one either. My gauge of the audience was off the track. I was talking to a crowd who have never heard of “Gamification” and almost all of the audience haven’t heard of CodeAcademy, no clue of the recently popular and viral site Ben the Bodyguard and they were amusingly clueless about - Easter Egg. Next time, I’ll do more research on the audience I’ll be speaking to.

Flipping through the above slides won’t do much justice without reading the notes included with the slide or interacting with me during my session. I tend to have just about 10-13 major slides and I love interacting with the crowd. I’ve lots to learn and I’m learning a lot from the few interactions that I had recently, including this one at WebApp 2012.

This article is more of a re-phrase of my session but with links, examples, and more information, hoping that this will introduce you to the world of Gamification in User Interface and Experience Designs.

First, Gamification is not a new thing, and more importantly, it’s not new at all to User Interface and Experience Designs or Web Designs. The term, Gamification, came to prominence around 2010 when it was popularized by marketers and managers to engage their customers.

Talking about Gamification will be incomplete without mentioning Gabe Zichermann who is regarded as one of the most prominent figure when it comes to propagating Gamification in Products Designs and Development. I was fortunate to see him speak at one of the Founder Institute session and I must say, he is an amazing entertainer. He’s is on twitter and he can be found writing and speaking on behalf of Gamification.co.

What is Gamification?

Wikipedia defines Gamification as the use of game design techniques, game thinking, and game mechanics to enhance non-game contexts. It is the process of using game thinking & mechanics to engage the audience & solve problems.

Let me tackle some examples as a way to introduce the art of Gamification, which you can start applying to your Websites and Web Apps, right away.

Virtual Badges, Achievements and Accolades

Who would have thought that we will be happy with virtual achievements, digital badges, and accolades that have no material or meaningful values in our physical world! However, it’s one of the most sought after and people are very happy, satisfied when they do achieve such badges, titles, achievements, and accolades. We love to show off our increasing number, varied, different badges that we earn in our digital lives.

Foursquare does an amazing job when it comes to virtual achievements. We love to become “mayors” of a location, earn badges, etc. Another such example is that of CodeAcademy where you can unlock badges when you complete the courses offered there. The whole experience on CodeAcademy engages you to move forward and when you finally complete and unlock a hurdle, it’s a fun and satisfied experience.

Progress as a tool for Gamification

Progress status, progress bars, and progress indicators have been used by Web Designers for ages. It is one such gamification technique that’s been proven very successful. LinkedIn does a good job of enticing you to fill in more information by showing you how filled-up is your profile and how you can achieve that 100% complete profile. Twitter also does a nice job by asking you to follow interesting people, as soon as you sign-up. That helps you get rolling and fill your timeline with interesting tweets.

Virtual Easter Eggs

A virtual Easter egg is an intentional hidden message, in-joke, or feature in a work such as a computer program, web page, video game, movie, book, or crossword. One such very well known virtual easter egg is that of the Konami Code - a cheat-sheet embedded, particularly, in computer games. For other examples, try viewing the source of The Oat Meal, try searching for “Do a barrel roll” on Google or just “tilt” it, and you can scroll to the bottom of Kickstarter and click the scissor till it cuts it all through.

The dark side of Gamification

“With great power comes great responsibility.” Like any technique, Gamification has its own share of the dark side and you should not be tempted to wield that power. Do not try to force users to do something via Gamification, just for your gains at the cost of the user.

A typical example is that of some Domain Registrars, which forces you to buy their other offerings instead of allowing you to go ahead and complete your Domain Booking Process. The “checkout” button is smaller (sometimes, it’s just a small link), and the option to buy their other products is shown enlarged, right in the middle, trying to force you to buy them.

Get started with Gamification

Well, Gamification is an interesting technique to engage your customers, to make your websites a fun experience for users. It can increase the ROI for your bosses and clients, increase the trust and loyalty of your visitors.

Gamification is a means to your end goal. It can only accelerate and move forward with your content and services. You cannot fool the users with bad websites, bad services, and bad content. Use wisely. Enjoy Gamification.