Back to Blog

Why Gamification Isn’t About Fairies & Cupcakes


 Gamification, implementing goals & rewards to encourage user engagement, has grown quickly and now seems to be at it’s peak of popularity. While gamification on the web was once just confined to social media apps, like foursquare checkins or badges, in some cases it’s now being implemented as a central framework that’s meant to drive entire user engagement.  For example, there’s Stack overflow, a user generated Q&A content database, which uses social metrics like # of twitter followers and “comment karma” to give you a number/rank; you can work to improve that number through increased engagement to achieve an award.  Stack Overflow is one of many gamified web apps that’s been wildly successful, if you measure success in the # of users.  When it’s done right, gamification can continually motivate and engage users over an extended period of time. In most cases, though, attempts to gamify are ultimately a flop–  have you noticed that no one uses foursquare anymore?

Clearly, some apps are way more capable of pulling off the whole gamification thing, but why? At the core of every successfully gamified web app lies a smart and capable user experience.  Gamification is all about acknowledging user psychology, and reigning over it by using UI design as the #1 tool to sculpt the user’s experience.  Sebastian Deterding points out that gamification is driven by 3 main user experiences: meaning, mastery, and autonomy. Gamification for web app engagement is all about designing a user interface that supports these 3 user experiences: Mastery, Meaning, and Autonomy.

Gamification requires that you offer an experience to your user that is meaningful, because meaning = motivation to do a given activity.  One way to create meaning for your user is to create a sense of progress. Sebastian says that successful gamification requires that you “wrap in a visually supported story.”  Design is what creates that visual story, and the story it’s telling is often about the progress the user’s made: think of progress bars, charts, badges, pyramids…etc.  It’s not just about having a well designed progress bar, it’s about successfully designing the entire flow of the application; the way one page transitions into the next and if that experience makes the user feel like they’re moving forward.  All of this is constructed through user interface design.

Mastery: the right balance of challenge & reward
Goals need to be visually expressive in a gamification interface, to convey at a glance what each one represents.  For a game to be challenging, fun, and interesting, you need structured, well ordered goals.  Having a small, achievable goal right in front of you will help pull the user through the experience. Each goal needs to be progressively harder; there’s psychological evidence & theory which proves that humans achieve the most progress not when they’re over-challenged, which frustrates them, or under-challenged, which bores them, but when they’re incrementally challenged at sequenced intervals which creates an optimal “flow.”

After you’ve got down a formula for the right amount of challenge to offer your users, you need to create a look, feel, and functionality that translates this effectively.  An effective user interface design strategy for gamification is to display the user’s “goals” in a central location, maybe on the homepage, or maybe even on every page of the interface.  How each new level or goal looks and how it’s presented to the user has a heavy impact on the success of your gamification blueprint– that’s accomplished through design.

One way to keep the user challenged is to make them combine existing functions–if level 1 unlocks video publishing, level 2 unlocks share with a friend, and level 3 unlocks comment feature, successfully using all three of those things at once could be the way the user unlocks level 4.  For this kind of gamified formula to keep the user engaged, you need the: (1) a design that clearly illustrates to the user what he/she needs to do to succeed, (2) a user interface design that anticipates how these three actions will be performed together and what that state will look like. Eg, If your application doesn’t make it very clear how you can receive comments on a video upload, then your user will never be able to reach level 4.

Mastery: Rewards
Successful gamification relies heavily on the concept of reward. The way a reward “state” looks at various stages of user-progress & how often it appears is an important consideration when creating the user interface design of your gamified application. The reward state has to be exciting (new,) frequent, and emotionally impact the user to make them feel accomplished.  Design and experience can’t be too repetitive, or else the user will get bored and loose motivation to “play”.

Consistency in user interface design is a must. Using the same handful of elements to accomplish certain interactions makes it easier for the user to learn how an application works & tackle all of its available features.  Consistency in the design is what creates a seamless looking and feeling experience when the user navigates from one page to the next, and to makes the application as a whole feel cohesive and complete.

That same type of consistency is still important for the framework of a gamified application design, but some delicate distinctions must be made when it comes to reliability vs repetition. You want the page navigation and basic functionality to stay the same, but with each new level, you want to introduce an element of newness and surprise to keep things interesting. The catch is, you don’t want this newness to overwhelm the user and flip their user experience on its head.

Mastery & Autonomy
If you logged onto Facebook and everything looked and worked differently, and there were also some new features available, how would that make you feel as a user? You’d be frustrated and probably stop using it. At the same time, if there’s a new feature added to Facebook that looks and works the same way the existing features do, then you’d be excited about it– e.g., Facebook chat.  Conversely, the #1 reason that new features/functions do not gain user popularity is because the way they look and work is too foreign to the user & doesn’t resemble the rest of the interface.

It’s about planned, incremental change that’s strategically implemented, planned out ahead of time so that a newly function integrates smoothly into the existing application. Pulling that off doesn’t happen by accident, it’s done with a conscious & artful user interface design.  Being able to successfully integrate new features with existing architecture ensures that the user will consistently feel “able” to accomplish the next challenge.

Having the option to turn on/off certain features of an app is a great example of how user interface design allows the user to feel autonomous.  It being on Facebook meant that any videos of you could be directly linked to your account, and viewed by anyone on the Facebook network, there’s a good chance you’d stop using it.  The user interface “settings” page allows for control over these kinds of things that give the use a sense of autonomy.  To give a more game-y example, if a user’s trying to reach the next level, giving them many different ways to reach that next level provides them with autonomy. They don’t have to get a perfect score in virtual bowling to move forward, they have the option to instead share their score with 5 friends on twitter.  The ability to easily turn on/off certain features, or pursue a separate path to accomplish a goal, are all possible through user interface design. Toggling off one feature could redesigning that every page of an app looks different.  Making these changes and options possible without disrupting the user experience= one of the many beautiful things that UI can accomplish.

Author Alex Stetson

More posts from this author

Sign up to receive updates from our blog

What we do Expertise

From concept to design, we'll partner with your team to deliver amazing product and website experiences.

Recent Projects Work

See the results of our most recent digital product and website engagements.