Gamified Websites: The Framework

Exclusive offer: get 50% off this eBook here
Build Gamified Websites with PHP and jQuery

Build Gamified Websites with PHP and jQuery — Save 50%

Engage, empower, and educate with Gamified websites with this book and ebook

$22.99    $11.50
by Detrick DeBurr | October 2013 | Open Source Web Development

In this article by Detrick DeBurr, the author of Build Gamified Websites with PHP and jQuery, we will follow a Gamification Design Framework, which is made up of six components. They are:

  • Business objectives
  • Target behaviors
  • Players
  • Activity loops
  • Fun
  • Tools

Over the next few pages, we will take a closer look at each and begin to put "meat" on the "bones" of our gamified e-learning website.

We will wrap up this article with a mock-up of what our final product will look like at a high level. This will make getting in the details and building our application considerably easier.

(For more resources related to this topic, see here.)

Business objectives

Before we can go too far down the road on any journey, we first have to be clear about where we are trying to go. This is where business objectives come into the picture. Although games are about fun, and gamification is about generating positive emotion without losing sight of the business objectives, gamification is a serious business.

Organizations spend millions of dollars every year on information technology. Consistent and steady investment in information technology is expected to bring a return on that investment in the way of improved business process flow. It's meant to help the organization run smoother and easier.

Gamification is all about "improving" business processes. Organizations try to improve the process itself, wherever possible, whereas technology only facilitates the process. Therefore, gamification efforts will be scrutinized under similar microscope and success metrics that information technology efforts will. The fact that customers, employees, or stakeholders are having more fun with the organization's offering is not enough. It will have to meet a business objective.

The place to start with defining business objectives is with the business process that the organization is looking to improve.

In our case, the process we are planning to improve is e-learning. We are looking at the process of K-12 aged persons learning "thinking". How does that process look right now?

Image source: http://www.moddb.com/groups/critical-thinkers-of-moddb/images/critical-thinking-skills-explained

In a full-blown e-learning situation, we would be looking to gamify as much of this process as possible. For our purpose, we will focus on the areas of negotiation and cooperation. According to the Negotiate and Cooperate phase of the Critical Thinking Process, learners consider different perspectives and engage in discussions with others.

This gives us a clear picture of what some of our objectives might be. They might be, among others:

  • Increasing engagement in discussion with others
  • Increasing the level of consideration of different perspectives

Note that these objectives are measurable. We will be able to test whether the increases/improvements we are looking for are actually happening over time.

With a set of measurable objectives, we can turn our attention to the next step, that is target behaviors, in our Gamification Design Framework.

Target behaviors

Now that we are clear about what we are trying to accomplish with our system, we will focus on the actions we are hoping to incentivize: our target behaviors.

One of the big questions around gamification efforts is can it really cause behavioral change. Will employees, customers, and stakeholders simply go back to doing things the way they are used to once the game is over? Will they figure out a way to "cheat" the system?

The only way to meet long-term organizational objectives in a systematic way is the application to not only cause change for the moment, but lasting change over time. Many gamification applications fail in long-term behavior change, and here's why.

Psychologists have studied the behavior change life cycle at length. . The study revealed that people go through five distinct phases when changing a behavior. Each phase presents a different set of challenges.

The five phases of the behavioral life cycle are as follows:

  • Awareness: Before a person will take any action to change a behavior, he/she must first be aware of their current behavior and how it might need to change.
  • Buy in: After a person becomes aware that they need to change, they must agree that they actually need to change and make the necessary commitment to do so.
  • Learn: But what actually does a person need to do to change? It cannot be assumed that he/she knows how to change. They must learn the new behavior.
  • Adopt: Now that he/she has learned the necessary skills, they have to actually implement them. They need to take the new action.
  • Maintain: Finally, after adopting a new behavior, it can only become a lasting change with constant practice.

    Image source: http://www.accenture.com/us-en/blogs/technology-labs-blog/archive/2012/03/28/gamification-and-the-behavior-change-lifecycle.aspx)

How can we use this understanding to establish our target behaviors? Keep in mind that our objectives are to increase interaction through discussion and increase consideration for other perspectives. According to our understanding of changing behavior around our objectives, we need our users to:

  • Become aware of their discussion frequency with other users
  • Become aware that other perspectives exist
  • Commit to more discussions with other users
  • Commit to considering other users' perspectives
  • Learn how to have more discussions with other users
  • Learn about other users' perspectives
  • Have more discussions with other users
  • Actually consider other users' perspectives
  • Continue to have more discussions with other users on a consistent basis
  • Continue to consider other users' perspectives over time

This outlines the list of activities that needs to be performed for our systems to meet our objectives. Of course, some of our target behaviors will be clear. In other cases, it will require some creativity on our part to get users to take these actions.

So what are some possible actions that we can have our users take to move them along the behavior change life cycle?

  • Check their discussion thread count
  • Review the Differing Point of View section
  • Set a target discussion amount for a particular time period
  • Set a target number of Differing Points of View to review
  • Watch a video (or some instructional material) on how to use the discussion area
  • Watch a video (or some instructional material) on the value of viewing other perspectives
  • Participate in the discussion groups
  • Read through other users' discussions posts
  • Participate in the discussion groups over time
  • Read through other users' perspectives over time

Some of these target behaviors are relatively straightforward to implement. Others will require more thought. More importantly, we have now identified the target behaviors we want our users to take. This will guide the rest of our development efforts.

Players

Although the last few sections have been about the serious side of things, such as objectives and target behaviors, we still have gamification as the focal point. Hence, from this point on we will refer to our users as players. We must keep in mind that although we have defined the actions that we want our players to take, the strategies to motivate them to take that action vary from player to player. Gamification is definitely not a one-size-fits-all process. We will have to look at each of our target behaviors from the perspective of our players. We must take their motivations into consideration, unless our mechanics are pretty much trial and error. We will need an approach that's a little more structured.

According to the Bartle's Player Motivations theory, players of any game system fall into one of the following four categories:

  • Killers: These are people motivated to participate in a gaming scenario with the primary purpose of winning the game by "acting on" other players. This might include killing them, beating, and directly competing with other players in the game.
  • Achievers: These, on the other hand, are motivated by taking clear actions against the system itself to win. They are less motivated by beating an opponent than by achieving things to win.
  • Socializers: These have very different motivations for participating in a game. They are motivated more by interacting and engaging with other players.
  • Explorers: Like socializers, explorers enjoy interaction and engagement, but less with other players than with the system itself.

The following diagram outlines each player motivation type and what game mechanic might best keep them engaged.

Image source: http://frankcaron.com/Flogger/?p=1732

As we define our activity loops, we need to make sure that we include each of the four types of players and their motivations.

Activity loops

Gamified systems, like other systems, are simply a series of actions. The player acts on the system and the system responds. We refer to how the user interacts with the system as activity loops. We will talk about two types of activity loops, engagement loops and progression loops, to describe our player interactions.

Engagement loops describe how a player engages the system. They outline what a player does and how the system responds. Activity will be different for players depending on their motivations, so we must also take into consideration why the player is taking the action he is taking.

A progression loop describes how the player engages the system as a whole. It outlines how he/she might progress through the game itself. Whereas engagement loops discuss what the player does on a detailed level, progression loops outline the movement of the player through the system.

For example, when a person drives a car, he/she is interacting with the car almost constantly. This interaction is a set of engagement loops. All the while, the car is going somewhere. Where the car is going describes its progression loops.

Activity loops tend to follow the Motivation, Action, Feedback pattern.

The players are sufficiently motivated to take an action. When the players take the action and they get a feedback from the system, the feedback hopefully motivates the players enough to take another action. They take that action and get more feedback. In a perfect world, this cycle would continue indefinitely and the players would never stop playing our gamified system. Our goal is to get as close to this continuous activity loop as we possibly can.

Progression loops

We have spent the last few pages looking at the detailed interactions that a player will have with the system in our engagement loops. Now it's time to turn our attention to the other type of activity loop, the progression loop. Progression loops look at the system at a macro level. They describe the player's journey through the system. We usually think about levels, badges, and/or modes when we are thinking about progression loops We answer questions such as: where have you been, where are you now, and where are you going. This can all be summed up into codifying the player's mastery level.

In our application, we will look at the journey from the vantage point of a novice, an expert, and a master.

Upon joining the game, players will begin at novice level.

At novice level we will focus on:

  • Welcome
  • On-boarding and getting the user acclimated to using the system
  • Achievable goals

In the Welcome stage, we will simply introduce the user to the game and encourage him/her to try it out. Upon on-boarding, we need to make the process as easy as possible and give back positive feedback as soon as possible. Once the user is on board, we will outline the easiest way to get involved and begin the journey.

At the expert level, the player is engaging regularly in the game. However, other players would not consider this player a leader in the game. Our goal at this level is to present more difficult challenges. When the player reaches a challenge that is appearing too difficult, we can include surprise alternatives along the way to keep him/her motivated until they can break through the expert barrier to master level.

The game and other players recognize masters. They should be prominently displayed within the game and might tend to want to help others at novice and expert levels. These options should become available at later stages in the game.

Fun

After we have done the work of identifying our objectives, defining target behaviors, scoping our players, and laying out the activities of our system, we can finally think about the area of the system where many novice game designers start: the fun. Other gamification practitioners will avoid, or at least disguise, the fun aspect of the gamification design process. It is important that we don't over or under emphasize the fun in the process. For example, chefs prepare an entire meal with spices, but they don't add all spices together. They use the spices in a balanced amount in their cooking to bring flavor to their dishes. Think of fun as an array of spices that we can apply to our activity loops.

Marc Leblanc has categorized fun into eight distinct categories. We will attempt to sprinkle just enough of each, where appropriate, to accomplish the desired amount of fun. Keep in mind that what one player will experience as fun will not be the same for another. One size definitely does not fit all in this case.

  • Sensation: A pleasurable experience
  • Narrative: An unfolding story
  • Challenge: An obstacle course
  • Fantasy: Make believe
  • Fellowship: A social framework
  • Discovery: Exploring uncharted territory
  • Expression: Player is given a platform
  • Submission: Mindless activity

So how can we sparingly introduce the above dimensions of fun in our system?

Action to take

Dimension of fun

Check their discussion thread count

Challenge

Review a differing point of the View section

Discovery

Set a target discussion  amount for a particular time period

Challenge

Set a target number of "Differing Points of View" to review

Challenge

Watch a video (or some instructional material) on the how to use the discussion area

Challenge

Watch a video (or some instructional material) on the value of viewing other perspectives

Challenge

Participate in the discussion groups

Fellowship

Expression

Read through other users' discussions posts

Discovery

Participate in the discussion groups over time

Fellowship

Expression

Read through other users' perspectives over time

Discovery

Tools

We are finally at the stage from where we can begin implementation. At this point, we can look at the various game elements (tools) to implement our gamified system. If we have followed the framework upto this point, the mechanics and elements should become apparent. We are not simply adding leader boards or a point system for the sake of it. We can tie all the tools we use back to our previous work. This will result in a Gamification Design Matrix for our application. But before we go there, let's stop and take a look at some tools we have at our disposal.

There are a myriad of tools, mechanics, and strategies at our disposal. New ones are being designed everyday. Here are a few of the most common mechanics that we will encounter when designing our gamified system:

  • Achievements: These are specific objectives that a player meets.
  • Avatars: These are visual representations of a player's role, persona, or character in a game.
  • Badges: These are visual elements used to recognize a particular accomplishment. They give players a sense of pride that they can show off to others.
  • Boss fight: This is an exceptionally difficult challenge in a game scenario, usually at the end of a level to demonstrate enough skill level to move up to the next level.
  • Leaderboards: These show rankings of players publicly. They recognize an accomplishment like a badge, but they are visible for all to see. We see this almost every day, in every way from sports team rankings to sales rep monthly results.
  • Points: These are rather straightforward. Players accumulate points and take various actions in the system.
  • Quests/Mission: These are specialized challenges in a game scenario having narrative and objective as characteristics.
  • Reward: This is anything used to extrinsically motivate the user to take a particular action.
  • Team: This is a group of players playing as a single unit.
  • Virtual assets: These are elements in the game that have some value and can be acquired or used to acquire other assets, whether tangible or virtual.

Now it's time to turn and take off our gamification design hat and put on our developer hat. Let's start by developing some initial mockups of what our final site might look like using the design we have outlined previously. Many people develop mockups using graphics tools such as Photoshop or Gimp. At this stage, we will be less detailed in our mockups and simply use pencil sketches or a mockup tool such as Balsamiq.

Login screen

This is a mock-up of the basic login screen in our application. Players are accustomed to a basic login and password scenario we provide here.

Account creation screen

First time players will have to create an account initially.

This is the mock-up of our signup page.

Main Player Screen

This captures the main elements of our system when a player is fully engaged with the system.

Main Player Post Response Screen

We have outlined the key functionality of our gamified system via mock-ups. Mock-ups are a means of visually communicating to our team what we are building and why we are building it. Visual mock-ups also give us an opportunity to uncover issues in our design early in the process.

Summary

Most gamified applications will fail due to a poorly designed system. Hence, we have introduced a Gamification Design Framework to guide our development process. We know that our chances of developing a successful system increase tremendously if we:

  • Define clear business objectives
  • Establish target behaviors
  • Understand our players
  • Work through the activity loops
  • Remember the fun
  • Optimize the tools

Resources for Article:


Further resources on this subject:


Build Gamified Websites with PHP and jQuery Engage, empower, and educate with Gamified websites with this book and ebook
Published: September 2013
eBook Price: $22.99
Book Price: $37.99
See more
Select your format and quantity:

About the Author :


Detrick DeBurr

Detrick DeBurr currently serves as a co-founder of CUPID On The Go! Prior to this, he was Founder/CEO of Digital Rhythm Inc., an information technology services provider based in Dallas, Texas, USA. Detrick has served in various software development roles through his career. In 2005, Black Engineer Magazine named him a Modern Day Technology Leader.

He is a graduate of Darden University's Minority Equity Boot camp, a program that educates minority business owners to access the private equity capital markets. In 2001, Mr DeBurr received Stanford University's Digital Visions Fellowship for his efforts with the Digital Literacy Alliance in Ghana, West Africa.

Mr. DeBurr is the author of Deal Us In! How Black America Can Play and Win in the Digital Economy, Anji Publishing, 2001.

He has served his community as Chairman of the Planning and Zoning Commission in Cedar Hill, Texas. He has also served on the Board of St. Philips School and Community Center and chaired the Dallas Blueprint for Leadership Program, a program that prepares minorities to serve non-profit boards and committees. He is an active member of Omega Psi Phi Fraternity Inc..

Books From Packt


Agile Project Management with GreenHopper 6 Blueprints
Agile Project Management with GreenHopper 6 Blueprints

Learning jQuery, Third Edition
Learning jQuery, Third Edition

 jQuery Mobile Web Development Essentials
jQuery Mobile Web Development Essentials

RESTful PHP Web Services
RESTful PHP Web Services

 PHP Team Development
PHP Team Development

Learning jQuery - Fourth Edition
Learning jQuery - Fourth Edition

PHP jQuery Cookbook
PHP jQuery Cookbook

The Professional ScrumMaster's Handbook
The Professional ScrumMaster's Handbook


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software