Five killer ways to use gamification

This article first appeared in issue 225 of .net magazine – the world's best-selling magazine for web designers and developers.

Gamification is the concept of bringing game mechanics or design to something that isn’t usually considered game-like, whether it’s a website, web app or native app. The goal is to make that traditional platform more engaging by adding a gaming edge to it. There are many different aspects of gaming that can be brought to a website or app. Some examples are: achievements, hidden bonuses, countdowns, progression, questing and status type information such as leader-boards.

Actions and rewards are the basic building blocks of gamifying anything on the web. Giving users some kind of reward (points, stars, virtual cupcakes) for doing a task they might not otherwise do (or enjoy doing) is a way of keeping them engaged and ensuring that they return. Deciding on what your users get for which tasks and taking into consideration the numerous different combinations and results will determine the success of your design.

Fun and games

Gamification by itself isn’t the silver bullet to making your website or application awesome. It will likely largely complicate the overall design and bring in many new details and functional problems to solve. However, when designed and implemented correctly it can have a huge impact on user loyalty and engagement.

All this will end, however, if you don’t focus on making it all fun: there needs to be a relevant reason for people to engage with what you’ve created. Constantly ask yourself “does this benefit the user and is it fun?” throughout your project and you’ll stay on target.

Five examples to check out

1. Epic Win For Epic Win, the task list management app for the iPhone, the creators applied the mythos of a fantasy RPG and simple actions and rewards, in the form of badges, to breathe some life into the to-do app.

2. Tumblr The blogging platform Tumblr uses a leaderboard type view to show you new content across its thousands of categories.

3. LinkedIn The personal professional network website, LinkedIn, uses a progress bar to show you how far along you are in completing your profile. Getting to 100 per cent takes time and becomes a compelling achievement.

4. Treehouse The website design and development learning service, Treehouse, uses the basics of actions and rewards to help students along their coursework, using beautifully designed badges as rewards.

5. Oink The check-in and rate things app Oink used a status system where you could gain status in different categories to become an expert reviewer. Sadly it shut down after five months; you can't win 'em all.

Find 50 amazing examples of HTML5 over at Creative Bloq.