From the Powerball to Candy Crush to Farmville, games have permeated our lives. And for good reason: They’re fun, exciting, and rewarding. Plus, leveling up or winning a game provides us with an instant sense of gratification and pride.
So to make your UX more engaging–even addictive–try incorporating gamification elements.
To inspire you (and prove that gamification can be interwoven into any type of site or app), I’ve found six awesome examples of gamified user experiences.
1. A Video Game Portfolio
Designer Robby Leonardi took a very literal approach to gamifying the interface of his personal website: He turned it into a video game.
Upon entering the site, you’re greeted with a welcome banner. A video game character (clearly meant to represent Leonardi) is standing underneath, and it doesn’t take more than a couple swipes of your mouse to discover that you’re animating him.
As you move through the levels of the video game–jumping, flying, and hopping into air balloons along the way–you see cartoon elements describing Leonardi’s impressive career history.
The “journey” ends on an email form. By this point, you’re so impressed and delighted that it would be hard not to hire him.
Although Leonardi’s portfolio is so fantastic partly because it’s one-of-a-kind, you can still derive inspiration from it. Consider adding visual game elements to your UI to make it more novel and awake your user’s inner child.
2. A Data Visualization Dashboard
Daytum is an elegant website that allows you to turn personal stats into charts, graphs, and tallies.
The gamification element is subtle, but the concept of racking up points and tracking progress is definitely a gamified one.
This is a great example of how you can use gamification without forcing your users to compete. Since there are no templates or limiting rules, everyone on Daytum creates their own dashboards and themes–and for that reason, you can’t compare your results or updates with anyone else.
3. Motivational Apps
Many apps meant to help you live a better life incorporate gamification elements, but Balanced is a particularly good example.
Every time you finish a task, you swipe right to mark it as “Done.” A “just done” tag will then pop up beneath the task, and “Nice One” will flash onto your screen. Independently, these responses may be underwhelming, but in conjunction, they’re a 1-2-3 hit of positive feedback. Also, the “Done” bar is green, which is significant because green is associated with feelings of balance, energy, and health.
Todoist, a task management app, also makes good use of gamification principles.
It uses a points-based system to encourage you to be productive. When you cross off items on your to-do list, use Todoist’s advanced features, and reach self-assigned productivity goals, you receive Karma points. When you let tasks become two-plus days overdue, you lose Karma.
You might be wondering, “What can you buy with your Karma?” The genius is: Nothing. Todoist’s creators understand that accumulating points is, in and of itself, rewarding. There’s no need to offer a higher incentive.
I’d also like to point out that receiving points relies on using the app more frequently and exploring its functionalities. The best gamification elements will subtly promote loyalty and dependence in your users.
4. A Navigation Tool
Gamification is a huge component of Waze’s success.
If you’ve never used it, Waze provides both traditional directions and road “tips” from other drivers. For example, if you’ve got Waze open while you drive down the freeway, it might notify you “Police in 1 mile” or “Accident in 3 miles.”
Waze motivates its users to both use its app and supply information through an intricate points, rank, and badges system.
Every time you report a road condition or gas prices, you get six to eight points. And this is truly genius–Waze gives you points for every mile you drive with app running, incentivizing people to use it even when they already know where they’re going.
You can even get video-game-esque “road goodies,” or randomly placed loot worth a varying number of points.
Rank is determined by the number of points you have compared to the people in your region.
Apart from the satisfaction of becoming a “Waze Warrior” or “Waze Knight,” the points don’t have any application. The fact that both Todoist and Waze use an ultimately arbitrary points system shows that you can incorporate scores and hierarchies into your product without needing a real-world reward.
5. A Career Networking Platform
Say what you will about LinkedIn’s clunky UX, but the integration of gamification elements is nicely done. The site encourages you to fill out as many fields of your profile as possible by quantifying your profile strength.
It’s actually impossible to reach “100%,” which is a diabolically clever way to get users to endlessly tinker with their profiles.
LinkedIn also shows you how many page views you’ve gotten in the last 90 days, how that compares to your historical views, how many “actions” you’ve taken, and how you rank compared to the other people at your company, in your network, and in your field.
By showing you these metrics, LinkedIn pits you against two entities: your professional “competition,” and yourself.
Not only do you want to rank more highly than your peers, but you also want to beat your former numbers. This aspect of the site can make LinkedIn just as addicting as, say, Facebook or Instagram.
Even if it doesn’t make sense to incorporate user competition within your product, you can almost always find a way to incorporate self-competition.
6. A Blogging Community
There are tons of blogging sites out there; Medium has always primarily differentiated itself by its clean, monochromatic aesthetic.
However, look closely, and you’ll realize Medium is also unique in the way that gamification principles have been woven into its fabric.
There’s the now-traditional ratio of followers to those you’re following, which is the Internet’s lingua franca of status. In addition, each user receives detailed analytics on his or her posts. Not only can you see how many total views, reads, and “recommends” you’ve gotten in the last month, you can also see views, reads, and recs for individual stories.
Medium even helpfully breaks down the percentage for you: X percent of the people who clicked on the story kept scrolling.
These metrics are an effective way to drum up enthusiasm for content production–but the site’s creators have also found a way to gamify content digestion.
Every comment on a story can receive “hearts” of approval; if your comment gets the most hearts, it’s shown first. Since only a limited number of comments are displayed, there’s a clear incentive to leave the most popular note. Responses to responses can also be hearted. Furthermore, readers can publicly highlight the snippets of the story they really like. If the same snippet is highlighted multiple times, it turns a special color and the honor of “Top Highlight.”
If you’re interested in reading more about gamification, I recommend the following articles:
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
HTML5 Games: Novice to Ninja