Building Engaging Web Apps with Game Mechanics

When we speak of “games”, we imagine physical, sporting activities, or video and board games. Rest assured, I’m not talking about developing the next blockbuster FPS, 3rd-person slasher, MMORPG, or 2D-platformer. It’s about going beyond the simple visual appeal of JavaScript animations and CSS transforms, into game design and mechanics to create engaging websites and web applications.

What is Gamification?

“Gamification” is the use and application of game design techniques and game mechanics, in non-game contexts, to engage a target audience to change behaviours, learn new skills, or enable innovation. Game design can be applied to practically all facets of business from customer engagement, employee performance, training and education, innovation management, personal development, sustainability and health. Gartner predicts that by 2015, more than 50% of organizations that manage innovation processes will gamify those processes.

Behavioral Change

The most common use of gamification is to engage a specific audience and encourage them to change a target set of behaviours. For example, Nike’s Nike+ mobile app and FuelBand wearable technology turns fitness (the desired behaviourial change) into a game, to engage and encourage people to adopt and maintain new habits (i.e. running).

Enter.ru, a Russian retail startup founded in 2011, uses an interesting and innovative gamified approach to help shape their organizational culture. OlimpiaDA! (literally Olympic Yes!), is an in-house motivational game developed using Jive’s gamification platform, which is delivered via their intranet. The key distinction of OlimpiaDA! is that it recognises both online and offline achievements and behaviors. The motivation to perform well in OlimpiaDA! is predominantly intrinsic, which can potentially be a more powerful instrument of cultural change than extrinsic financial rewards. Points are awarded for some fairly off-the-wall game activities, and at the end of the year, the top 30 point leaders are rewarded with a surprise overseas holiday.

Skills Development

Gamification is increasingly being used in both formal education and in corporate training programs to engage students in a more immersive learning experience. By incorporating simulation and animation, and turning the lesson into a game, students are immersed in an environment which provides immediate feedback. This allows them to acquire and practice new skills in a safe, virtual environment.

Education sites such as Khan Academy and Codecademy compel students to continue their learning by acknowledging every aspect of a student’s progress through a course. Badges are awarded for key achievements and students are encouraged to share their accomplishments on social networks. This approach not only drives students to remain engaged but also promotes the site itself.

Enabling Innovation

Innovation games are structured differently to behavioral change and skill development games. These typically utilize emergent game structures to define the goals, rules, tools and play space in which players are required to explore, experiment, collaborate and solve problems. Innovation games generally use game mechanics to create a more engaging experience, but the key is to engage a large number of players (crowdsourcing) to solve very specific problems. One example is Fold.it, and how it helped create a breakthrough in AIDS research.

PBLs – Points + Badges + Leaderboards

Points, badges, leaderboards (PBLs) are the mainstay of the video gaming industry. Practically, all video games today have some type of PBL reward system, in the form of XP, Level Ups, and Achievement Unlocks.

Such games typically use competition and/or collaboration (co-op gameplay) between players and involve points for actions, badges for achievements and leader boards to drive competition. LevelEleven is one example of how PBL mechanics can help drive sales performance and CRM adoption through competition, workforce motivation and platform engagement.

Companies such as Badgeville, Bunchball, JiveSoftware and Gigya offer a variety of products and services aimed at integrating audience engagement and achievement systems into websites for both internal and customer-facing gamification.

If you can forgive the rudimentary admin interface, Arturs Sosin’s Gamify class provides a simple architecture for implementing a functional PBL mechanic in existing PHP/MySQL driven websites:

<?php
require_once './gamify.php';
// 
$g = new gamify($dbhost, $dbuser, $dbpass, $dbname);

// give John Doe 1000XP for doing something 
$g->add_experience('john_doe', 1000); 

// add 50 points towards achievement #1 for doing something specific
$g->action('john_doe', 1, 50);  

// add 25 points towards achievement #2 for something else
$g->action('john_doe', 2, 25);

Be aware that the Gamify class isn’t exactly plug-and-play – some hacking is definitely required – but it provides a somewhat basic admin interface to manage users, XP levels and achievement unlocks. There is also a very rudimentary leaderboard (top.php), and an example script (actions.php) to demonstrate XP levelling and time-based interactions with achievement unlocks.

Beyond PBLs

While PBL mechanics are the traditional hallmarks of gamification, remember that they are simply the tools with which an underlying engagement model is implemented. Focusing on obvious PBL-driven game mechanics can often detract from the underlying engagement model that gamification had originally intended. At best, this can result in “players” simply racking up points (i.e. “grinding”), or accumulating meaningless activity badges, for the sake of levelling up, or in the worst case, disengaging your audience.

According to Gartner, 80% of current gamified applications will fail to meet business objectives primarily due to poor design. Brian Burke, Research VP at Gartner Group, suggests that companies should instead focus on the more important and subtle elements of game design – such as balancing competition and collaboration, or defining a meaningful game economy.

As web developers, it is important for us to view target audiences (i.e. customers, employees, or the general public) as “players” – people with real needs and desires, who will respond to stimuli. The real challenge then, is to design player-centric applications that focus on the underlying motivations and rewards that more fully engage players.

Yukai Chou, a leading Gamification Pioneer, describes this “Human-Focused Design” rather than “Function-Focused Design”, and has developed a framework around “8 Core Drives” of Gamification:
1. Epic Meaning & Calling
2. Development & Accomplishment
3. Empowerment of Creativity & Feedback
4. Ownership & Possession
5. Social Influence & Relatedness
6. Scarcity & Impatience
7. Curiosity & Unpredictability
8. Loss & Avoidance

You can read what each of these core drives are, their relationship to left-brain/right-brain activity, and how they are used in white-hat/black-hat gamification at Yukai’s website. Ideally, you’d want to focus on a specific mix of these 8 core game drive, which will depend on your target audience, what specific behaviours you wish to encourage, in return for what kinds of motivational rewards that are on offer for engaging with the platform.

Conclusion

We’ve had a brief look at what Gamification is, and how it can be applied in various non-game contexts to engage audiences, influence behaviors, develop or learn new skills, or to facilitate collaboration and innovation. We’ve seen how various companies have implemented gamification in their products and organizations, and tools that you can immediately use to gamify your own web projects.

Hopefully, this has inspired you to bring the fun back into fun-ctional web development. Leave a comment below and tell us how you’re using, or plan to use, gamification in your own web projects.

Frequently Asked Questions about Building Engaging Web Apps with Game Mechanics