Planted:
Status: seed
Juice is the non-essential visual, audio & haptic effects that enhance the player’s experience.
For example, the delightful chimes sound that plays when Mario collects a mushroom.
The 1UP text that appears is essential.
Communicating the player gained an extra life.
The sound is the Juice.
Non essential but serves a purpose:
- ▪ reinforcing Mario did indeed collect the mushroom,
- ▪ that this was a good thing, by using a delightful sound &
- ▪ giving the player a small reward. Encouraging them to collect more & teaching them how to play.
”
‘Juice’ was our wet little term for constant & bountiful user feedback. A juicy game element will bounce & wiggle & squirt & make a little noise when you touch it. A juicy game feels alive & responds to everything you do – tons of cascading action & response for minimal user input. It makes the player feel powerful & in control of the world, & it coaches them through the rules of the game by constantly letting them know on a per-interaction basis how they are doing.”
Below is a delete button. When clicked, it displays a delete-in-progress message. Use the range input to increase the button’s level of Juice.
- ▪ None: The button fulfils functional requirements.
Juice can:
- ▪ teach,
- ▪ make something feel more lively,
- ▪ improve the sense of responsiveness between the player & what their controlling,
- ▪ give the player a greater sense of impact,
- ▪ make an action satisfying,
- ▪ increase enjoyment, immersion, engagement & excitement,
- ▪ create a sense of reward,
- ▪ enhance the player’s emotional connection to the game &
- ▪ make an experience more memorable (emotions are the foundation of memory).
Juice is about the tiny details.
It’s about squeezing more out of everything.
It’s about serving the user’s emotional needs, not just the functional.
It originated in games but can be used in other types of software.
Game Feel is described as the tactile sensation of manipulating a digital agent.
In Super Mario 64, the player gets joy from just moving Mario around, without the need to complete objectives.
This is achieved by juicing Mario.
The nuance of how he gradually moves from a walk to a run.
The spring coil & explosion when jumping.
A celebratory “ya-hoo” while in the air.
Game Feel taps into the human nature of performing actions that have no purpose.
They just feel good.
Take this like button from Josh Comeau’s website.
Clicking it triggers satisfying animation & sounds that makes you want to keep doing it.
The Obstacle
An obstacle when attempting to make the user feel is the pane of glass separating them from the content.
Preventing the user from touching it.
In addition, the way we talk to software is heavily muted by the input device (controller, mouse, keyboard, …).
Only allowing a vocabulary of button presses, mouse positions & joystick angles.
Game developers compensate for this using redundant techniques.
For example, to acknowledge 1 action, like a button press, the developer could use multiple animations, sounds & vibrations.
For non-game software, using a lot of Juice could be a bad thing.
Games often flood the user with Juice because the intented UX (User Experience) is immersion.
For a non-game app, the intent may be to allow a task to be done quickly.
A small amount of Juice may enhance the UX.
A lot may make the task take longer, degrading it.
Before juicing, understand the intended UX.
Juice should make it better, not worse.
Priority
There is a trend to juice rare events in non-game software.
For example, an explosion of confetti to celebrate completing onboarding or a funny animated 404 page.
Game developers do the opposite.
They focus on the mundane, routine tasks.
Because these are the foundation the rest of the software sits on.
Steve Swink broke down what the player does most in Mario 64:
- ▪ 20-something 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 acrobatics.
Completing onboarding is like completing the game. It happens once. Juicing it has little effect on the overall experience. Compared to juicing the moment to moment events.
How to Create Game Feel
Rahul Vohra talks about a design process where interfaces begin as toys. A toy being:
- ▪ fun,
- ▪ without a goal,
- ▪ indulges moments of playful exploration &
- ▪ create moments of pleasant surprise.
We play with toys, but we play games.
A ball is a toy, but baseball is a game.
The best games are made with toys.
Thinking back to Mario 64.
The way Mario feels is the foundation of the game.
So before creating levels, Mr. Miyamoto (principal director) had a test garden made.
An environment where a user could move Mario around. Pick up objects & interact with the surroundings.
A toy playground where they could test & refine how Mario felt.
In web development, this would be like Storybook.
Rendering components in isolated environments.
Components lose their purpose when they are not wired together in an app.
They turn into toys you can play with.
Where you can test & refine how they feel.
The Habits app helps the user build habits.
Based on the theory, if you do something everyday for 66 days, it becomes a habit.
The user enters something they want to make a habit.
For example, reading.
Everyday, they are presented with a checkbox.
If they have read, they click it. Indicating they have completed their task for the day.
The video to the right shows two checkboxes.
A standard checkbox & a juiced checkbox.
While the standard prioritises functional requirements, the juiced prioritises emotional requirements.
When a user taps the standard, it acknowledges the action.
When a user holds down the juiced, it triggers a choreography of 2D & 3D animations, sound effects & haptic feedback.
This not only acknowledges the action but what the action represents.
The symbolic meaning behind it.
Today, they completed their task & are 1 step closer to forming a habit.
It’s a reward.
A celebration of this achievement & encourages them to do it again tomorrow.
Something that abundantly fulfils emotional requirements can be described as having soul.
”
Picture your favorite neighborhood restaurant. Ours is a corner spot in Fort Greene, Brooklyn. It has overflowing natural light, handmade textile seat cushions, a caramel wood grain throughout, & colorful ornaments dangling from the ceilings. Can you picture yours? Do you feel the warmth & spirit of the place?”
The opposite of this would be a hospital.
Optimised for functional requirements.
Cold.
Sterile.
Minimal.
Simple.
Neutral colors.
Fluorescent lights that hum.
1-size-fits-all.
Furniture organised to fill every inch of space.
Lack of character & individuality.
Soulless.
Soulless Software
Juice can add soul to software but is mostly absent.
Because we underestimate how much feelings influence our lives.
Even the definition of Juice states it’s non-essential.
It is non-essential to functional requirements, but not to emotional.
Emotion is essential to being human.
It’s why music exists in every culture in the World.
It’s why some of the great works of humanity are artworks.
Not because of their function, but because how they make us feel.
How to Create Soul
To create software with soul, ask yourself how do you want the user to feel?
Look outside the software industry for inspiration.
Find what makes you feel, ask why & use that to shape your work.
The greatest crafters in our world across art, design & media do this.
They base their work on feelings, opinions, experience, taste, subjectivity & ideas.
Nothing averaged out or neutral.
Their works built by people for people.
They contain hand-crafted touches.
They feel like the world around them.
In the past, interfaces drew on real-life metaphors to help the user understand them.
Steve Jobs took influence from Zen Buddhism & calligraphy.
Disney exaggerated physics, developing the 12 basic principles of animation to breathe life into cartoons.
Designers of the Superhuman email client use this model of human emotions.
The centre represents core emotions.
The outer, a more nuanced state of those emotions.
At different screens or triggered events, the user should feel different emotions.
The model helps the designers be specific about what to aim for.
The foundation for crafting nuanced experiences.
For example, when the user achieves the goal Inbox Zero. The app displays “stunning & gorgeous imagery”.
Triggering surprise. The model is also used to identify emotions to remove from the user.
They know new users’ feeling about email are helpless, anxious, annoyed, guilty & powerless.
Based on this, they can craft experiences that invoke the opposite.
Examples of juice include a button hover that reveals its keyboard shortcut.
Triggered after hovering longer than usual.
Providing a non-intrusive way of teaching.
Using sound when a range input value changes.
The pitch increases as the value moves further away from 0.
This is using the redundant techniques approach, providing sound in addition to visual feedback.
Juicing a page scroll with a parallax effect (image layers moving at different speeds).
Used on the Firewatch website.
A game about working as a fire lookout in the Wyoming wilderness & unraveling its mystery.
The effect communicates delving into the wilderness to uncover what lyes beneath.
It makes the user feel awestruck.
At my day job, I work on multi-team task management software.
We have 2 problems; an overwhelming setup screen & complex main screen.
To solve this, I experimented with juicing the setup screen using non-intrusive ways of teaching & redundant techniques.
As the user enters data, an image is created.
A visual representation of the data in a diagram of the app’s main screen.
This provides:
- ▪ step-by-step feedback of what each input does &
- ▪ better prepares the user for the transition from setup to main screen. Making it less overwhelming.
Tweening (or easing)
The word tween comes from in-between.
An animation technique where you set a start & end point, a duration & an equation.
Depending on the equation, the animation might:
- ▪ start slow & end fast,
ease-in, - ▪ start fast & end slow,
ease-outor - ▪ start slow, speed up & end slow,
ease-in-out.
CSS transitions & keyframe animations use tweening.
Example: transition: opacity 180ms ease-in.
You can use built-in (mentioned above) or custom equations.
As a general rule, imitate realism:
- ▪
ease-outfor objects moving into view, - ▪
ease-infor object moving out of view & - ▪
ease-in-outfor object moving within the view.
The above are good defaults but custom values takes things to the next level. FLIP is a juicing technique that uses tweening.
The FLIP principle can juice page transitions.
Imagine you have a common element on 2 different pages, in different positions.
When the user transitions from page A to B, instead of a hard cut, it tweens from position A to B.
Offscreen Canvas is a blog that uses FLIP.
When the user transitions from the index page to a post, the post’s main image is FLIP’d.
FLIP reduces cognitive load when the UI changes.
Making it more intuitive & understandable than a hard cut.
Giving the user time to process what is happening when a big change occurs.
It’s more like the world around us where nothing vanishes & appears from nowhere.
Things move.
Call of Duty
Call of Duty is a first-person shooter video game.
Involving complex mechanics that can be hard to learn.
Introducing them upfront in an onboarding process could overwhelm the user.
Instead, the developers use non-intrusive ways to teach.
For example, every time you join a multiplayer game, the user see a loading screen for 10 – 20 seconds.
The developers juice the screen by displaying a tip about how to play the game.
Teaching the user gradually, at a manageable pace.
The user can better absorb the information because it’s at a time when cognitive load is low.
Half-Life
Half-Life is another first-person shooter video game.
Levels are juiced by triggering a scripted sequence when the player enters different areas.
This has 4 purposes:
- ▪ To add tension & entertainment.
- ▪ Reinforce the illusion of an active environment.
- ▪ Player acknowledgment. “The game world must acknowledge the player every time they perform an action. If the world ignores the player, the player won’t care about the world.” – Ken Birdwell.
- ▪ To teach the player about the area. By showing NPCs (non-player characters) interacting with the environment & making mistakes. This is important because if the player failed, it should be the player’s fault, not the game’s.
”
A final theory was that the players should always blame themselves for failure. If the game kills them off with no warning, then players blame the game & start to dislike it. But if the game hints that danger is imminent, show players a way out & they die anyway, then they’ll consider it a failure on their part; they’ve let the game down & they need to try a little harder. When they succeed, & the game rewards them with a little treat — scripted sequence, special effect, & so on — they’ll feel good about themselves & about the game.”
Game of Thrones
A TV show title sequence (or intro) presents credits, establishes the setting & sets the tone of the show.
Game of Thrones was a show with a large number of characters & locations.
Making it difficult for the viewer to keep track of & engage with the story.
To help with this, the producers juiced the title sequence.
Showing a map with labelled locations.
The camera moves to the locations where the current episode will take place.
As the story progressed, more locations would be added.
Gradually building the viewer’s knowledge.
Old locations were also modified based on what took place in previous episodes.
This helps the viewer understand the geography & reminds them of previous events.
Improving engagement with the story.
Other Techniques
- ▪ Juicing empty states with instructions on what to do,
- ▪ Particles,
- ▪ Screen shake,
- ▪ Lush animation sequence,
- ▪ Visual flourish,
- ▪ Recoil,
- ▪ Freeze frames,
- ▪ Objects that obey physics. They feel like the world around them,
- ▪ Screen fade out,
- ▪ …
YOU ARE HERE
Leave A Comment