The Art of Game Feel (a.k.a Juice) in Product Design
Part I : Serious Play
Part II : The Future of Design Tools
Part III : The World's Most Satisfying Checkbox
Let's be honest, apps have become boring. A few months ago we set out to build an app to help you build better habits. Secretly, however, we wanted to see if we could transform the most un-fun kind of app (self-improvement) into something deeper and more meaningful. Cut to a few months later, our little app (Not Boring) Habits is on stage accepting the Apple Design Award for Delight & Fun.
How’d we do it? Rather than hide the screws, I’d like to pull our app apart and show you how the pieces come together.
Let me strip off the sugarcoating and share a little secret about habit tracker apps: they’re little more than a glorified checkbox. The interaction is simple: every day you open the app and hit the checkbox to record a completed habit.
While every other habit tracker app makes this basic checking action a common tap or swipe, we knew from experience just how important this moment was.
Rewards are important when building or breaking a habit. They help to train our minds to do something we don’t want to do by giving us something we enjoy, even if small. And the best rewards are often not the grandest but the most symbolic. You’ve probably experienced this yourself if you’ve written out a todo list and then felt the immense satisfaction of crossing a particularly stubborn item off the list. The grand swiping gesture, the zipping sound, and the sensation of dragging the pencil against the notepad. It’s a sensorial experience that punctuates the weight of the moment. And for many, it’s reward enough to keep going.
In trying to get a particularly tricky habit to stick, I tried dozens of apps and nothing worked for me. Recording an action felt like yet another chore. None could approach the most basic satisfaction of simply crossing out an item on a list.
Could you design a simple action that felt as satisfying and infuse it with as much symbolism? Were we about to redesign the checkbox?
I think you know where this is headed.
Challenge:
Make the world’s most satisfying checkbox
Designing for Feel
Feel is not something we talk much about as digital product designers. It’s difficult to quantify in metrics or even describe in words, so it tends to fall to the bottom of a priority list. But we know it’s important. As legend goes, what sold internal teams at Apple on the bold choice of building a phone around a touchscreen interface was the simple act of scrolling a list with momentum & rubberbanding. Feel matters.
My introduction to “feel” in Design came from my first job at an industrial design agency working on interfaces for consumer products like car key fobs and digital music players. The industrial designers talked about contours that felt gratifying in the hand and actions that provided a fidget-like comfort such as flipping the lid of a Zippo lighter or the satisfying click of a pen.
What is this?
And how do you apply it to the services and apps we design? The Browser Company has written that software can optimize for emotional needs rather than just functional needs. Jason Yuan has promoted the idea of “fidgetability” where, similar to a key fob or lighter, digital actions can be designed to feel satisfying. Rahul Vohra has talked about making interfaces that are first fun as a toy—enjoyable to use without any greater aim.
While these thoughts do a great job of framing the issue, I want to dive right in. Unsurprisingly, this is a solved problem in a field we Product Designers often ignore—video games—where “feel” is often addressed with a little industry secret called “game feel.”
Game Feel
If you design digital products, you may know nothing about game feel. Don’t feel bad. I didn’t either and neither did the dozens of smart product designers I’ve asked over the last year.
In video games, the button you press to make a character jump is often a simple binary input (pressed or not), and yet the output combines a very finely-tuned choreography of interactions, animations, sounds, particles, and camera shake to create a rich composition of sensations. The same jump button can feel like a dainty hop or a powerful leap. “Game feel” (a.k.a. “juice”) is the “aesthetic sensation of control” (Steve Swink, Game Feel) you have when playing a game.
The difference comes down to choice—which is to say, Design (with a capital “D”). Game feel is what makes some games feel gratifying to play (a character gliding down a sand dune) and others feel frustrating (sticky jumping, sliding). These decisions become a signature part of a game’s aesthetic feel and gameplay.
These moments of feel aren’t reserved for big moments. In fact, they’re most important for routine actions you perform over and over again.
From Steve Swink’s Game Feel: The Secret Ingredient:
After all, what do you spend most of your time doing while playing Mario 64?
• Every 20+ hours: completing the game, defeating Bowser, getting all 120 stars
• Every hour or two: completing a ‘boss’ battle
• Every half an hour: getting access to a new area or painting
• Every 5 minutes or so: completing an objective, getting a star
• Moment to Moment: steering around, running, jumping, performing acrobatic maneuvers
Breaking the game down by “granules” this way, it seems that Mario 64 is a game about feel. The thing you spend most of your time doing is moving Mario around, interacting through the controller at a tactile, kinesthetic level. It’s the fundamental activity of Super Mario 64 and it feels great. It has its quirks and input ambiguities, but this sensation is the foundation the rest of the game sits on.
In Product Design, we sprinkle a touch of “delight” on key moments—colorful illustrations in our onboarding, confetti for major milestone reached. In reality, it’s the mundane, everyday interactions that need our attention most.
Like, say, a checkbox.
Applying Game Feel to Product Design
The checkbox
The basic checkbox serves its purpose dutifully. In truth, it was never designed to be the hero.
Now, is its time to shine.
Interaction
A common checkbox requires just a simple tap or click. We could’ve used a simple tap, but it was too easy. To avoid accidental presses and to make the moment more deliberate and meaningful, we went with a long press. The challenge with a long press is always discoverability—How does one know they’re supposed to hold? The answer is to provide instant feedback with an animation that builds anticipation.
Another choice we make to improve discoverability and simplify the action is to make the entire screen the button. You don’t have to hit the visible button. You can tap and hold anywhere on the screen. This improves discoverability and corrects for errors since there’s no other action to take on this screen.
3D Model
For the visuals, we model the checkbox in 3D—we extrude a checkmark inside a giant sphere. However, if you look at a 3D extrusion straight on, it still looks 2D. So we rotate the checkmark to a slight angle to reveal more of its dimensional form. We invert the normals on the containing sphere to only render the back face to effectively see into it so that we can see the checkmark inside.
Animations
Animations help us communicate the interaction states and their relationship to one another. We can connect them together into something more coherent.
In / Out Animation
We need a way to show and hide our checkbox. Fading in and out doesn’t feel quite right for 3D, so we go with a simple rotate & scale animation to bring the objects into the scene when we need them and hide them when we don’t. We make this a general animation that we use throughout the app to bring in the different level scenes as well.
Build Animation
When you hold on the checkbox we need a way to both immediately communicate the tap and yet guide you to keep holding. This is our build animation and it uses a combination of 2D and 3D animations.
The 2D portion is a particle simulation that “feeds” the growing sphere made with Lottie. It’s inspired by the charging animation common in games before your character delivers a big blow. Every action needs a windup. A big action—in order to feel big—needs a big wind up.
The 3D portion is a simple solid sphere filling the empty sphere of the checkbox to suggest where this gesture leads. A critical detail, if you release the hold early, the animation plays in reverse to reset.
Burst Animation
This is the big moment—it has to feel gratifying. We again combine 2D and 3D elements. The sphere and checkmark pop in and a massive starburst fills the screen like an enemy hit in Hollow Knight. Another small detail you probably don’t notice is that the starburst rays colors match the selected skin in the app. If you name your layer colors, you can re-colorize them dynamically at runtime to fit your needs.
For more on the specifics of game animations, I recommend picking up the book Game Anim by Jonathan Cooper.
Sound
Sound can communicate the quality of an action just as powerfully as any visuals. Many pass over it because they don’t know how to do it right (a topic for another article). The (Not Boring) soundscape was designed by the talented Thomas Williams and combines both synthetic and real sounds.
For the main check action, we created a unique sound that swells slowly and then releases in a satisfying “ka-thunk!” Try it with sound off vs on and it’s night and day different.
Haptics
The most overlooked sensation in product design may be haptics—the physical vibrations you feel. While sounds are easily thwarted by the mute switch, haptics can play in any environment. It’s like sound for touch. And just like sound, haptics can be designed.
Haptics are similar to sound in that they offer two dimensions of control—frequency and amplitude. The iOS SDK provides a few basic haptic patterns that you can pull off the shelf and for simple clicks and detents. But for a unique experience like our checkbox, you want to do something custom.
For that, we use a helpful little tool called Lofelt. You can import a sound file and it’ll generate a custom haptic pattern to match it. With a little cleanup and an AHAP file for Xcode, we were ready to go.
All together now
All of these attributes didn’t come together at once. We finished each in steps—each adding a new dimension to the feel. In sum, they work together to transform the basic into something epic. That old checkbox now feels pretty lifeless.
Crank it Up
In Design, we often strive for minimalism—using as little as needed to get a job done or a message across. A key tactic in that aim is to avoid redundancy. If you’re setting type, you strive to use only one variable to define your hierarchy—type size, weight, color or font—but you’d never change them all at once. It’d look garish and unnecessary, right?
But adding game feel requires just the opposite. Our digital products are trapped behind a hard pane of glass. We use the term “touch”, but we never really touch them. To truly Feel a digital experience and have an app reach through that glass, requires the Designer to employ many redundant techniques. Video games figured this out decades ago. What the screen takes away, you have to add back in: animation, sound, and haptics.
And if this sounds like overkill, let me assure you that we barely scratched the surface. The techniques we used here to create the most satisfying checkbox (animation, sound, haptics) only covers some of the very basic tactics of game feel. There are dozens more techniques that games utilize to bring small actions like this to life that we didn’t employ—screen shake, recoil, particles, freeze frames, and many many more. There are a handful of excellent videos you can watch that go into more detail. Steal the best ideas and take it further.
Design is so Rich
If we can add Feel to the humble checkbox, imagine what it could do for apps that aid in personal connections or creativity. Many of us make the mistake in thinking of the apps we design as public spaces—drawing inspiration from the rationality of airport signage or the deference of an art gallery. We completely forget that these experiences are also incredibly personal. And while a clean, white gallery space may be beautiful in its minimalism, it’s not the comforting place most would want to live.
Design can be reductive and rational. But it can also add richness to our lives.
Maximize that.
And use every tool you can get your hands on.
———
Video games are taking over the world and it's time for Design to take them seriously. This article is part of a series called "Serious Play" on the lessons that Designers can apply from video games.
Part I : Serious Play
Part II : The Future of Design Tools
Part III : The World's Most Satisfying Checkbox
———
Resources
Try the (Not Boring) Habits app
Game Feel by Steve Swink [book]
The Art of Screenshake by Jan Willem Nijman (Vlambeer) [video]
Metamuse podcast with Jason Yuan [podcast]
Game Design Not Gamification by Rahul Vohra [article]
Game Anim by Jonathan Cooper [book]
