Planted: Mar 2023

Tended: Mar 2024

Intended Audience: Software designers, Product managers, Creative coders

Juice is the non-essential visual, audio and 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 and
▪ giving the player a small reward. Encouraging them to collect more and teaching them how to play.

Portrait of HAL 9000 — Game DeveloperHow to Prototype a Game in Under 7 Days

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.

Level of Juice:

▪ None: The button fulfils functional requirements.

“It's about maximum output for minimum input.”

Martin Jonasson & Petri PurhoJuice it or lose it

Juice can:

▪ teach,
▪ make something feel more alive,
▪ improve the sense of responsiveness, impact or reward,
▪ make an action satisfying and
▪ enhance the player's emotional connection to the game. Making the 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

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 and 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 and sounds that makes you want to keep doing it.

The Obstacle

A Nintendo Entertainment System controller

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 and 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 and 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 and
▪ 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 a test garden made. An environment where a user could move Mario around. Pick up objects and interact with the surroundings. A toy playground where they could test and 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 and refine how they feel.

Emotional Requirements

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 and 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 and 3D animations, sound effects and haptic feedback. This not only acknowledges the action but what the action represents. The symbolic meaning behind it. Today, they completed their task and are 1 step closer to forming a habit. It's a reward. A celebration of this achievement and encourages them to do it again tomorrow.

Soul

Something that abundantly fulfils emotional requirements can be described as having soul.

The opposite of this would be a hospital. Optimised for functional requirements. Cold. Sterile. Bleeched. Minimal. Simple. Neutral colors. Fluorescent lights that hum. 1-size-fits-all. Furniture organised to fill every inch of space. Lack of character and individuality. Soulless. This contrast can be seen comparing the 2007 Clif Bar website with the 2023 version.

The Clif Bar website in 2007. Colourful and full of textures, photos and illustrations.

The Clif Bar website in 2023. White and minimal.

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 and use that to shape your work. The greatest crafters in our world across art, design and media do this. They base their work on feelings, opinions, experience, taste, subjectivity and 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 and 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.

A screenshot of the Superhuman app showing a stunning and gorgeous image of a mountain

For example, when the user achieves the goal Inbox Zero. The app displays "stunning and 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 and powerless. Based on this, they can craft experiences that invoke the opposite.

Examples

Cameron Foxly details how the above easter egg for the GitHub.com chat experience was created. Based on the old Sonic the Hedgehog games where if you left him idle long enough, he would start tapping his foot. The button below comes from a game Service Workies. When hovered slightly longer than usual, it reveals its keyboard shortcut. Providing a non-intrusive way of teaching.

Rauno created a range input with sound. The pitch increases as the value moves further away from 0. Using the redundant techniques approach, providing sound in addition to visual feedback.

Defonic is an ambient noise generator. Providing a number of different buttons for different sounds. When the forest sounds button is clicked, flying birds appear above a background image. Adding surprise and delight.

The Firewatch website juices its page scroll with a parallax effect (image layers moving at different speeds). The effect communicates delving into the wilderness to uncover what lyes beneath. Making the user feel awestruck. Which perfectly fits the content of the site. Being about a game where you work as a fire lookout in the Wyoming wilderness and unraveling its mystery.

In my former job, , I work on multi-team task management software. We have 2 problems; an overwhelming setup screen and complex main screen. To solve this, I experimented with juicing the setup screen using non-intrusive ways of teaching and 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 and
▪ 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 and end point, a duration and an equation. Depending on the equation, the animation might:

▪ start slow and end fast, ease-in,
▪ start fast and end slow, ease-out or
▪ start slow, speed up and end slow, ease-in-out.

CSS transitions and 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-out for objects moving into view,
▪ ease-in for object moving out of view and
▪ ease-in-out for 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 and 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 and 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 and 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 and making mistakes. This is important because if the player failed, it should be the player's fault, not the game's.

Game of Thrones

House Baratheon's sigil. A crowned stag.

A TV show title sequence (or intro) presents credits, establishes the setting and sets the tone of the show. Game of Thrones was a show with a large number of characters and locations. Making it difficult for the viewer to keep track of and 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 and reminds them of previous events. Improving engagement with the story.

Amazon Prime Video

Amazon Prime Video squeeze more out of the pause screen. Listing the actors in the current scene with links to information about them. This approach provides other opportunities. Consider a long running series like Game of Thrones. It can be a long wait between seasons. The user may forgot previous events in the story. Making it hard to understand what is happening in a scene, causing frustration or reducing engagement. The pause menu could provide a recap of events related to the paused scene.

For a series with a large amount of lore, like the upcoming Warhammer 40k series. Pausing could make parts of the current scene clickable. Linking to information about the location, characters, equipment, symbols or factions. Allowing the user to go deep on the story. Strengthening their connection to it.