Not long ago a close friend of mine told me I was being to abstract on this blog, he wanted to see more practical implementations of Gamification principles. So I though I’d begin with one of the simplest, and therefore usually overlooked, elements.
Let’s gamify a Button.
No I’m not kidding.
Any interactive element can be altered to be more fun using game design principles. And while making buttons fun won’t significantly alter your product details such as buttons usually subtract fun enough to make products feel stale. So let’s make one that feels awesome and fun.
Where do we start?
First let’s check the feature out, what’s its purpose and the effect. Can we use that to gamify?
It’s a button. Without a function attached. It’s just supposed to be pressed when the user presses it.
So, no?
The purpose and effect can’t help us make this experience fun. The button has to be fun by itself.
What’s fun about a button?
Well, fun is about exceeding expectations without being completely predictable. Fun is novel. But novel isn’t always fun. If it’s to novel it’s strange or even scary.
Uh-huh. So the button?
The button is pressed. The user will expect the button to get pressed when they click it. And it’ll probably emit some sound.
Now we’re getting somewhere! Let’s add lots of rewarding feedback to that!
Not always a good idea. But let’s do it anyway and then deconstruct why it doesn’t work.
Let’s add graphics for the button being hovered (highlight), graphics for the button being pressed, graphics for the button to depress after the click.
Let’s also add a chunky Thump sound when the button is fully pressed. And an animated semi-transparent shockwave graphic that plays when the button is pressed.
Awesome button! Right?
No. The feedback has exceeded the expectations by light years, even if all these graphics and the sound are very discreet it will still feel pretty odd. Like seeing something familiar completely out of scale. A miniature horse, or a giant baby.
Expectations need to be exceeded to achieve fun but it can’t be out of whack. If it is the player doesn’t feel that expectations we’re met but rather that something completely unrelated happened. They might see all that and still be waiting for the feedback from the button because the actual feedback was so far beyond what they we’re expecting.
Another problem with this design is that it’s completely predictable. Every time you press the button it reacts exactly the same way. Nothing real ever does that. Try it, grab a pen and click it 10 times. Did it sound and feel exactly the same? Of course it didn’t. Fake is never fun.
The problem with predictability is that an artifical object looses it’s credibility to the user. It feels wrong. In this case very similar to the effect of the Uncanny Valley in animation (awesome concept, read about it if you don’t know it).
So how do we fix it?
Simple. We already have this over ambitious feedback. Let’s just scale it down to begin with.
Let’s give the button a graphic for hovering the button, a graphic for the button being pressed and the button being depressed.
Let’s also give it a sound effect when clicked, but this time it’s a sort of plastic click.
Is it awesome now?
Nope, still to predictable. This is where other design schools stop. Now is good enough for Interaction Designers, User Experience Designers and such like. This is where Game Design really takes the leap.
Let’s make it analogue (as in gradual, not physical).
There are two events happening here, the button is pressed and the button is depressed. The first event has to be instantaneous because the user input is. The button must press down at exactly the moment the user pressed their mouse. If it doesn’t the user will feel out of control and no feedback can save the interaction.
But the second event doesn’t need to be digital. Let’s make the button depress in a variable time. Ranging from 80-160ms (80ms being an average threshold of human perception). This makes clicking the button just a little bit different every time you click it. Not much. But enough to feel different. Experiment with the time span but keep it really fast since we want the user to feel it rather than see it.
If they ever wait for the button to depress you’ve lost the magic of fun.
Next let’s make the click analogue. Make the time it plays for and the pitch of the click ever so slightly different for each click.
Make both these things random using a randomiser algorithm based on prime numbers. This way the human perception can’t easily find a pattern. If the user tries really hard they probably can, but they won’t feel like there’s a pattern. Why do prime number help? I have no idea. But intervals of prime numbers don’t seem to make any sense to humans, which is perfect for making a non repeating pattern.
Awesome now?
This button will feel real. In a digital situation it exceeds users expectations. Very slightly. But enough that they’ll feel it. If you put this button next to a “normal” button more users will prefer to click this one. Try it. It works.
Is this a bit to much work for a button? Yeah probably. But ask yourself, what is it users do most frequently when using your product? I know a lot of products and services where all I do is click buttons. If my 120 clicks per visit are a bit more fun, how much will that affect my general perception of your product?
