You’ve probably seen it as a kid. The image of a cartoon character riding a mule holding a stick with a carrot on the end to entice the mule to move. Warner Brothers showed us what gamification was all those years ago.
We can gain some insight from that simple cartoon image in our heads. The first is that we should contemplate adding smart kitsch to the iconography; the best experiences are the ones that pleasantly surprise and delight – you know the ones where we are all in on the joke. The second is that we should be showing people what badges are available and what badges they have earned – you know holding the carrot in front of them.
Badges
Badges use visual symbols to communicate skills and achievements. To really go all meta on you, the badge uses those symbols to itself become a visual symbol of an achievement. Mind blown emoji goes here.
Foursquare popularized the use of badges when they released their eponymous application at SXSW all those years ago. They smartly used gamification to drive real-world check-in data at locations across the globe. Gamification was a psychological tool to hook users, specifically users who had a shred of an internal psychological achievement complex (or in some cases over-achievers), into trying new things. You know, game changing things like checking into a bar before noon. I jest.
Realistically, that psychological component to the application led to something more important than that Brunch Buzz Badge. By using Foursquare, and getting those badges, users were creating new locations, recommendations, and mountains of data that could be used for other purposes.
For Foursquare, they can use that data to train an artificial intelligence algorithm. Think about it, you’ve generated a history of check-ins at places that you frequented. So when you when travel for work from Boston to LA, they know that you have a propensity for hipster bars and taco shops; they can provide recommendations to you on a known good.
But, I digress. You want to know more about badges.
As a designer, you have a job to make the experience as smooth, enjoyable, and as fun as possible. Some corporate environments might put the F in FUN, whereas others might say “f that” to FUN. Use fun and whimsy at your discretion – but know that in the right environment users eat that stuff up.
Design for your audience. Because the younger crowd is going to like stuff like this:
And the older crowd who may be on a financial site may want something a bit more buttoned up, like this:
It’s important to find some type of middle ground. But most of all, iterate the idea. Build, test, repeat.
Layout
You can’t enter a contest for a lifetime supply of Fritos if you don’t know about the contest.
Practice show and tell. Show the badges, and tell your users how to win them. In the Foursquare example, they gave a rough idea of what it took to earn their badges. Some were easily guessed (Brunch Buzz Badge, anyone?). Others were not as apparent.
The UX pattern is pretty simple.
- Show all of the badges in a neat grid
- Grey out the badges that haven’t been earned yet
- Colorize badges that have been earned
- Touching or clicking on an unearned badge shows the criteria for achievement
In addition to the general grid layout and badge communication, you should also consider building notifications into your experience.
Facebook has us all looking for and seeing red when we log in. When we have notifications, we get a rush of dopamine and feel good. That in-app notification drives an emotional feedback loop and increases time on the app. Which in turn increases their supply of potential advertising targets.
