Clear Goals

a new web app built by Velora Studios

Turn your Goals Into Reality. Launching Soon!

Using Game Mechanics in UX Design

- Monday, March 14, 2011 |

Have you noticed that more and more websites are using game mechanics to create more enjoyable experiences? Principles of game design can serve UX designers today more than ever, because - 1 - brands realize the importance of interacting with users and keep them engaged and - 2- current web technologies allow developers build interfaces that support rich interaction scenarios in real time. Game mechanics will rock the web. In this article we share the best examples of how currently popular websites use game mechanics to attract new users and add them to their fan base.

Day 62 - A,B,X,Y
Photo by: Brian J. Matis

The Place of Game Mechanics in UX Design

In economy, utility is used to describe and measure consumer satisfaction. In web design, utility is transferred to usability testing, reflecting a similar approach, where user satisfaction is broken down to directly measurable indicators. For this reason, web analytics is perceived as a reliable tool to improve user experience. Web and social analytics is the backbone of UX research and supports the majority of design and development decisions related to website optimization.

Although many people can identify usability issues and rank websites accordingly, it can be more difficult to measure what exactly makes a website appealing, fun and captivating. The same description "I love using it" can be interpreted in terms of navigation options, attractiveness, quality of content or interaction scenarios. The puzzle can be solved though by following a rather intuitive path and learning about what people actually do and use to entertain themselves, for example video games. Let's go through a couple of examples showing how UX designers use game mechanics to create websites that we enjoy using.

Principles of Discovery

Games and web interfaces have one thing in common: they are virtual environments where real-world elements, mental maps and scenarios are used help the users find their ways around - everything else is creatively re-imagined and displayed. Games like Dune, inspired by the Dune chronicles, challenge users to deal with the laws and elements of a totally different world. Discovery is a fundamental element of game experiences that only a few websites would make use of effectively.

Most content-heavy websites encourage users to provide feedback, submit comments or share information with friends, thus increasing the chances of converting first-time visitors into participants. In some cases though, the content is made available through play and discovery, on websites that "respond" to the user's choices and preferences. TED uses descriptive terms (jaw-dropping, inspiring, courageous), duration-related data (15 mins, 20 mins), as well as categories (technology, science, art) to help the user discover a lecture she will most likely enjoy, based on her choices.

Discovering lectures on TED

A recently popular music-discovery website - Hitlantis - uses a visually compelling interface and a simple menu to create the perfect environment for music discovery. There are a couple of other websites and apps that use principles of discovery to keep users happy and immersed in a carefully crafted music experience. Stereomood uses moods to bring up new songs, Discovr uses a complex algorithm to categorize and suggest bands based on a variety of factors, and Songza uses other people's suggestions and channels to help them discover songs similar to the one they search for.

Music discovery with Hitlantis

Principles of Motivation

In 2005, Steven Levitt made an interesting point about motivation and incentives in Freakonomics and that is - people respond to incentives, but also learn how to use gratification mechanisms to get what they want. Games are purposely designed so that users can increase or decrease the level of difficulty for a certain game and experience the joy of winning differently. Also, there are multiple rewards and incentives throughout the game, to keep them focused, motivated and excited about the final outcome. In UX design incentives take the form of badges (Foursquare), scores (Klout), numbers reflecting popularity (Facebook, Twitter) and usage (Digg), memberships and experience related symbols or tags (pro, new user).

Cool badges for power users on Foursquare

To some extent users want to become more involved with using a website because all these incentives make sense to them and make them feel good. As a designer, you can create a more compelling experience by using simple incentives or game-like scenarios.

Self actualization needs are also intricately connected to game mechanics and user experience. There is a broad spectrum of feelings one can experience by collecting all these badges, reaching a certain position or rank, seeing their profile stats go up and sharing their scores with everybody.

The standard of social influence on Klout

At a very basic level, the feeling of progress and achievement is extremely relevant in the way user scenarios contribute to improving the overall user experience. In most strategy games, players need to manage their resources by avoiding loss, fighting for territory and replenishing their resources. Resource management involves multiple game mechanics, but creates a powerful game-mind connection and an immersing experience. At the intersection of strategy games and UX design there are web apps designed for project management or, more recently - online banking. Bank Simple did a really good job at stimulating people's desire to achieve their goals by designing a simple and rewarding mobile/web app which will be launched this year.

Motivation through design: BankSimple

Game Modes in a Social Web

Many games have both single player and multiplayer modes integrated and interaction scenarios altered accordingly. While it is obvious how browsing many websites could be compared to a single player experience, there are many cases where you can transfer the multiplayer experience into the web environment as well. Platforms that allow multiple accounts and user management are increasingly popular. Whether you're designing and developing a project management app, a sketching tool or a fun platform to manage multiple social media accounts online, you're using game modes and facilitate more complex interaction scenarios across the web.

Multi-user management is tightly connected to team work and collaborative activities, but there can always be a playful and fun side to it. For example, CoTweet allows you to have multiple people use the same account to schedule and respond to tweets. It's a multiplayer game mode adapted to social broadcasting when a teams, rather than single individuals, can effectively accomplish more with team work.

Multi-user platform on CoTweet

Multi-user game modes radically changed the online TV experience we were used to when and Ustream came on the scene and introduced live broadcasting with live chatrooms. Now, you can broadcast through webcam or play on your computer and share your screen live with friends who enjoy the same game as you do. You can be the team leader of your group in a multiplayer game or just show everybody how awesome your skills are.

Live streaming and multi-player games on Ustream

Endnote: Game mechanics in UX design are effective because they're fueling interaction. The experiences you create using game mechanics and game elements on your website can be rewarding, fun, challenging, creative and remarkable. This article highlighted only a few examples of how websites use them to improve user experience. If you find more examples, share them with us, we would love to hear your thoughts and ideas on this topic.

Did you know that we have a monthly design and business newsletter with interviews of interesting creatives and designers each issue? Subscribe now on the right sidebar.


Billy commented on 13-Apr-2011 10:10 PM
More of this, please! Got a taste from Google's, Senior Designer Nadya Direkova. Would like to learn more about game mechanics and ux.
Bryan commented on 14-Apr-2011 02:46 AM
Glad you liked it Billy! There will be more coming soon.

Post a Comment

Captcha Image