The subject of gamification in the app world has been well documented over recent years – the process of rewarding users for their actions and incentivising repeated use of a product or service. Our Creative Director Toby takes a closer look at how design elements can be used to reward, entertain and retain.

I recently took my kids to the dentist. They’re aged ten, eight and five, and as such are still very happy to receive a sticker saying what brave little people they are, and what shiny teeth they have. Their faces were beaming as we walked outside, and they wore their stickers with pride for days afterwards. I think they’re still stuck on their bedroom doors actually…

This simple reward had such a big impact, and it got me thinking about how we can do simple things to reward those who use our apps, and build engagement into the products and services we produce for our clients. It also got me thinking about the psychology behind rewards; about why we react like we do when we receive a reward, and how rewards can change our behaviour.

The aim of just about every product and service is repeat business. As a retailer, you want to sell to customers more than once. This is just a basic principle of a successful business. So if I told you that by making a few small changes to your product, you could change the behaviour of your customers resulting in increased sales – would you be interested in hearing more?

Thought so.

So this is what I want to look at in a bit more detail. I’ll start by looking at some of the different ways apps, web tools and services reward and incentivise users, then draw a few conclusions on applying this to the world of digital experience design.

Percentage completion

Do you have a LinkedIn account? If so, how complete is your profile? Are you a Beginner, an Intermediate or perhaps even an “All-Star” with a 100% profile completion! As of the latest visual refresh, LinkedIn are no longer displaying the pretty circles that help illustrate how complete your profile is, although you can still find information that states those with complete profiles are “40 times more likely to receive opportunities”. I’m not sure if I entirely believe that statistic, but my guess is they’ll have some obscure data somewhere to back it up!

The concept behind percentage completion is to drive users towards doing something you want them to do, and it plays on a common human weakness – closure. Some people are affected by this very strongly (my wife will sit through a terrible movie just to get to the end, whereas I’ll happily switch it off), others not so much, but when presented with a percentage completion graph – who doesn’t want to see it get to 100%?!

This also plays into our desire to both set and achieve goals. I’ve seen a huge increase in the number of “to-do” list and goal monitoring apps recently, and it gives a great sense of satisfaction when even the smallest task can be ticked off. This is known as the Zeigarnik Effect, which “states that people remember uncompleted or interrupted tasks better than completed tasks”. In the 1920’s, Psychologist Bluma Zeigarnik observed that good waiters had a great memory for remembering orders, only until the order had been delivered and paid for.

I recently saw a terrible implementation of the progress bar. I was using a cash machine, and while waiting for the system to process my request, a progress bar appeared on screen, only once it got to 100%, the animation looped and repeatedly went from 0 to 100%, thus destroying the entire point of a progress bar! I think this has lead to the prevalence of the spinner – the dreaded loading icon that rotates forever and never actually tells you anything meaningful. Of course, there is one thing worse than a spinner – the slightly off-centre spinner. Once you see it, you’ll never un-see it!

Much has been written on the psychology of waiting, and of particular interest is this piece tackling Facebook’s analysis into different kinds of loading animation. While the app was loading using a custom animation, the user blamed the app for being slow, but if the system spinner was used, the phone itself was perceived as being the culprit.

Research has shown that progress indicators are an important user-interface tool that “enhance the attractiveness and effectiveness of programs that incorporate them”. Local English language college Anglo-Continental have several complex, dynamic enrolment forms on their site. These would require a great deal of scrolling to complete if all the fields were added to a single page. When redesigning these forms for their new website, we made sure they were split into coherent sections, and a progress indicator was used to show how far through the process the user is. We also added a “save and return” feature, allowing completion at a later stage.

Turning users into winners

Who remembers the check-in app Foursquare? I do. I loved that app. It was one of the first apps that properly got me wanting to use it more. Reward was built into the very experience and process of using the app. You went to a place (like a cinema, park, beach, zoo etc.), opened the app and checked in. As a result of your check-ins, you received different badges. Multiple check-ins acquired additional badges. It was simple, fun and rewarding. The badges themselves were beautifully designed, they were fun to collect and there were so many of them that you always felt like there was more to discover.

Foursquare is sadly no longer what it was, and I’m not here to discuss why it changed so fundamentally, but it certainly paved the way for countless badge-based digital reward schemes.

As a psychological reward tool, badges in many ways work in the same way as the progress completion indicator – they help define and track goals and achievements. But they also add to this with other subtle elements, those of collection and public recognition. Much like the stickers on my kids’ doors that tell the brave tale of their epic trip to the dentist – so the badges and personal bests I’ve gained on my Strava account tell a story. “I was there”, “I did this”, “I ran this far”, “I scaled this mountain”. In a very basic way they allow us to show off our achievements, and hark back to the praise that would be lavished on us by proud parents when crude paintings were stuck on the fridge door, or trophies on a shelf.

Maybe you didn’t have proud parents. Maybe you didn’t go in for sporting achievements and maybe you sucked in art class. But the same need is in all of us. Perhaps you’ve collected scars and broken bones to mark your achievements. Maybe tattoos are your thing. You might have got 100% completion on every Lego video game. Whatever it is, you’ve done something you’re proud of and it makes you feel good when someone else recognises that. That’s what badges do.

While not the first or best to implement it, Nike have tapped into this with the trophies available through the Nike Plus running app, which effectively turn a simple run into a crazy scramble to go further, faster, in different weather and of course, a different pair of trainers.

Many apps can benefit from turning users into winners in this way, although you have to think carefully about the experience. My reason for using Foursquare was just to get the badges – they were the reason and the reward. As a hypothetical example, let’s say your company needs an app to help warehouse staff keep check on stock levels and locations. In this case, rewarding them with a colourful badge every time they move a box would actually be an obstacle to them carrying out their job. But if your app is to help people lose weight, rewarding them with a badge for reaching a success marker would be perfectly suitable.

From the macro to the micro

So far I’ve looked at fairly substantial changes that can be made to impact the user experience, but what about small, simple changes that can be made that reward users simply by being there? A great example of this is the recent (and not a little controversial) change that Twitter made to the way users interact with tweets. Prior to the change, if you agreed with, liked, loved or otherwise wanted to acknowledge approval of a tweet, you clicked on the little star icon and that was that.

But late in 2015 Twitter made a change, a pretty bold change to this familiar mechanic. The star was gone, and in its place was a small heart icon. Now I’m not going to go into details about why this was so controversial, as I just want to look at what Twitter added to the icon.

They animated it.

Just that. When you click on it, it ‘pops’ out with a cute confetti spray effect. It’s a nice little touch that rewards the user in two ways. Firstly, it’s a surprise – the icon’s neutral state is the same as the old favourite star, just plain grey. But clicking brings it to life. Secondly, it’s just nice! Many people argue about adding aesthetic “fluff” just for the sake of it, but in this case I think Twitter was absolutely right to do what they did. The change from a well-known, understood and used piece of functionality to something different is risky, but Twitter took the edge off it by not only clarifying its use (a heart conveys ‘liking’ or ‘loving’ something more clearly than a star – is it a like?  A bookmark?), but by adding a little flair.

Be honest – you enjoy clicking that little heart, don’t you?

Building on the popularity of the Twitter heart, and with the increased use of tools like Adobe AfterEffects to create animations, many more apps have been adding what are called microinteractions. These are partly aimed at enhancing the user experience and use visual rewards to help build loyalty, encourage play and form part of a “habit loop” – a term in psychology that describes a three-step process of forming habits. Microinteractions are also used to inform the user when an interaction has taken place, when data has been inputted/accepted, or as a guide to progression and location.

Here are some good examples:

Source: Dribbble
Source: Dribbble
Source: Dribbble
Source: Dribbble

I’ve not (yet) read Dan Saffer’s book on microinteractions, but he would seem to be the leading authority on the subject. This is certainly something I want to start learning more about, and implementing into some of our own apps (where relevant and helpful to the user!). One thing holding me back is the fear that I might have to become some kind of AfterEffects wizard, but we’ll have to see.

In conclusion

So, to wrap up, what have we learned?

  • Humans are creatures of habit. We like rewards, recognition and acknowledgement.
  • Our behaviour can be changed by establishing and reinforcing habit loops.
  • Rewards come in different shapes and sizes – collectable badges, accomplishment trophies, visual effects/animations/feedback.
  • Not all rewards are suitable for all app types.

And that’s all we have time for folks. Thanks for sticking around and getting this far. I look forward to exploring this subject further, and would love to see other examples of rewards through design that you’ve come across.

21 Mar, 2017
Toby Pestridge

Toby PestridgeTwitter

Toby is the Creative Director at Createful. Hailing from a background in design for both print and digital, Toby has worked for local design agencies in addition to "doing time" as a freelancer. He is notable for introducing proper coffee to the Createful office, and for managing to get static electric shocks from almost anything he touches.