“Kishōtenketsu & Hakoniwa: How Nintendo Inspires My Designs
Video games have been in my life for as long as I can remember. My dad was a technology enthusiast, and I fondly remember my brother and I unwrapping a new NES console for Christmas in 1986.
The pack-in game was Super Mario Bros.
Mario, née Jumpman, had starred in games before becoming the titular super Mario brother: scrambling up girders, kicking crabs in a sewer, heading up a wrecking crew. While I could cite any of these Nintendo classics for design inspiration, it was my first visit to the Mushroom Kingdom that compelled me to unpack what is special about these games.
Back then I would poke and prod every corner for secrets, designing new levels on graph paper for friends to play in our mind’s eye.
These days when I play, muscle memory kicks in. There’s something timeless and exciting about Mario’s world several decades later.
Let me open with two novel concepts that have deeply influenced the feeling of modern Mario games, and are wholly applicable to user experience design challenges.
Hakoniwa (pronounced Hah-koh Nee-Wah) is a Japanese term that literally means “box garden”, becoming popular in the late Edo and early Meiji periods of Japanese history.
Similar to bonsai, hakoniwa employ purposeful arrangements of rocks and sand to give the impression of a complete landscape, with lush forest floors, dry riverbeds, and hidden crevices to explore. They are a snapshot of an ordinary scene in an extraordinary world.
These intricately-crafted landscapes are full of houses, bridges, and pathways designed to evoke a feeling of being in nature, packed full of surprises for attentive viewers.
These gardens served as inspiration for the levels in Super Mario 64 and, more recently, Super Mario Odyssey, offering texture and depth in well-defined spaces with multiple objectives hidden both along the main path (and many off the beaten path). Western developers often refer to this style of gameplay “sandbox design”.
When the lockdown happened early in 2020, I found myself seeking out comforting videos. Soothing content to ease my jangled nerves. One genre I found myself returning to was the handcrafted diorama; simulacra of real spaces with imaginative flourishes. Incredibly detailed but reflecting the character of the creator, employing visual tricks meant to evoke a feeling more than replicate a photograph, like a painting in three dimensions.
This kind of creative design requires an understanding of all of the elements that make a space special. As designers, we have component libraries, patterns and standards to pull from — but the best designs draw you into a feeling.
Micro-interactions, motion design, transitions and elevation; the crafted elements that breathe life into your designs and delight your users also play a role in building and preserving trust. As a designer you become a storyteller when you approach a blank canvas and attempt to create a world that will live beyond your designs.
Consider the bigger picture, but tell a story through your details.
If you’ve ever taken a writing class or watched a Marvel movie, you’re familiar with the monomyth, also known as the hero’s journey; it’s the common template for many of our modern stories and a fantastic storytelling tool that speaks to the human condition.
Joseph Campbell employed the monomyth to deconstruct and compare religions, which he described as:
a hero ventur[ing] forth from the world of common day into a region of supernatural wonder: fabulous forces are there encountered and a decisive victory is won: the hero comes back from this mysterious adventure with the power to bestow boons on his fellow man.
However, authorial intent triumphing over user experience will often lead to games with overly-long cutscenes that steal control from the player:
Or apps with overly-long guided intro flows:
What if there was a different storytelling structure, where shorter (but still relatable) cycles could tell a story while still giving users control over their experience? That wasn’t so dependent on conflict?
Kishōtenketsu, common in four line Chinese poems and four panel Japanese comics, is a storytelling technique that introduces a concept, develops the idea a little bit more in the second state, changes things up in the third, concluding in the fourth.
Introduction (ki): introducing characters, era, and other important information for understanding the setting of the story.
Development (shō): follows leads towards the twist in the story. Major changes do not occur.
Twist (ten): the story turns toward an unexpected development. This is the crux of the story, the yama (ヤマ) or climax. In case of several turns in the narrative, this is the biggest one.
Conclusion (ketsu), also called ochi (落ち) or ending, wraps up the story.
These stories teach by making the viewer a participant in the story, rather than focusing on the emotional states of an in-story avatar.
When applied to games we see Nintendo embracing a simple design philosophy: start with a unique idea, concentrate on the primary action, develop the emotional experience, teach as you play, and repeat what works.
Using an example from the Cakewalk Flip level of Super Mario 3D World, analyzed by the School of Game Design, we first see the introduction (ki) of panels that toggle from red to blue when Mario jumps. Being positioned over a flat surface allows the player to safely experiment with this core mechanic, with no risk of losing a life if they should fall.
Soon after, the concept develops (shō), introducing a pseudo-staircase that enables Mario to scale a cliff face. There’s still a safety net below, but a new element of verticality is introduced.
Then, a twist (ten).
Shockwaves from skull bells force Mario to jump to avoid danger. The safety net has been removed, and the player needs to manage both flipping panels and a regular cadence of dangerous ripples. Here, the player’s mastery of a new mechanic is tested.
Finally, the conclusion (ketsu). Verticality comes back, drawing a path to the level reward. The player’s achievement is celebrated!
These “mechanic vignettes” allow for the introduction and exploration of lots of different game mechanics in a way that feels comfortable and supportive without being overly prescriptive.
There’s no explicit tutorial or need to steal control away from the user — they learn by doing, having fun in the process.
We can witness a similar teaching moment in the very first level of Super Mario Bros.
Throughout the game, the player will encounter environmental hazards that can only be cleared with a running jump. Rather than floating button hints or stolen control, the first instance of this obstacle is introduced with a filled-in pit, giving the player a safe way to try the jump and fail.
Soon after the player will encounter a similar obstacle with an active pit, allowing Mario to test out their newly-acquired skill (or lack thereof).
Facilitating safe risk taking helps to build a user’s trust.
This is psychological safety: supportive, not punitive.
Work with your user to create a collaborative story. Teach through experience, and give choices that they can easily recover from.
Video games are interesting to explore through a UX lens because they are closed systems; interaction exists without specific goals outside of the system. Productivity software is designed around efficiently finishing a greater task — managing a budget, filing taxes. Games evoke an emotional response in the player as a reward.
However, both experiences have a common goal: ensuring users feel comfortable, confident, and in control.
Super Mario Bros. is a game designed around jumping.
In the first few moments of the game you will encounter an enemy shuffling toward you. If you don’t move, the goomba will run into you and you will lose a life.
If the player presses the jump button (as pictured), they’ve learned a new skill and might find themselves knocking into the box overhead. The resulting coin and jingle make it extremely rewarding to do so. This positive reinforcement compels the player to leap up to the subsequent bricks overhead, or to bash into the next shiny question box, revealing a new power-up.
As the series developed, introducing new levels and power ups, Miyamoto became concerned that the games were getting too difficult for casual players.
Super Mario Run — a mobile game — introduced a new and unique constraint on Nintendo’s designers: could the Super Mario Bros. experience be condensed to single input?
To solve this challenge the game’s developers went back to Super Mario Bros.’ core mechanic — jumping — designing a game entirely around timed tapping. It worked, becoming the most downloaded iOS mobile game with 50 million downloads in its launch week.
Nintendo’s perpetual riffing on an idea that works, distilling its core elements and reshaping them into new experiences closely mirrors an ideal software development cycle.
When we think about input, our focus as designers should always be on the minimum amount of intervention that allows a user to feel entirely in control.
Gestalt seeks to encompass the qualities of form, meaning and value, emphasizing that the whole of anything is greater than the sum of its parts. The human mind, to cope with the visual complexity of the modern world, creates groupings of items that share common characteristics.
Nintendo is extremely effective at creating timeless metaphors, and repurposing them throughout their titles, and Super Mario Bros. is a shining example of leveraging gestalt theory to create unity while still embracing diversity. Here are some examples from Super Mario Bros., and how we might apply them to a mobile application design.
Proximity
Spatial or temporal proximity of elements helps the mind perceive them as a group.
Similarity
The mind groups similar elements based on commonality in form, color, size or brightness.
Enclosure
Any form of visual enclosure causes the mind to perceive the enclosed elements as a group.
Symmetry
Elements that are symmetrical tend to be perceived as a unified group.
Closure
Leveraging the generative aspect of perception, closures allow the viewer to perceive more spatial information than an object explicitly contains, mentally completing a shape or image.
Continuity
The mind continues visual, auditory and kinetic patterns. Even if a line stops, the viewer is able to follow it.
Figure-Ground
The figure-ground principle refers to the human’s ability to visually separate objects on different layers of focus.
We know which elements are placed in the foreground and with ones are in the background intuitively — elevation is a foundational principle in Material Design.
When you first start a game of Super Mario Bros., Mario stands ready on the left edge of the screen. You can’t run further left — there is an impassable barrier. Once you start moving right, the camera locks the player to the center of the screen.
The very next question mark block will reveal a mushroom that is almost impossible to avoid. If Mario jumps, he bounces off the block overhead. Eventually the power-up ricochets off a pipe that blocks his path forward.
This simple intro encompasses multiple teachable moments — small Mario can not break bricks, but large Mario can. Some mushrooms are good, and hidden in blocks.
It does all of this through visual cues, nudges, and environmental design.
Despite the elegance of the tutorial, it’s still possible to bump the mushroom in a different direction, jump past it, or choose never to punch the block in the first place.
Every element is intentional.
In 2017, Breath of the Wild director Fujibayashi Hideyuro and senior lead artist Makoto Yonezu gave a presentation at the Computer Entertainment Supplier’s Association’s Developer conference, where they shared insights about their level design philosophy.
The pair introduced a Triangle Rule, whereby devs would rely on triangle-shaped objects in the world during development to create opportunities for surprise, and facilitate player choice. By having a common environmental affordance, the game designers could embrace or subvert user expectations — building anticipation by making a key landmark slightly obscured by a mountain, or changing the shape of the obstacle to hint at more interesting places to explore. They could change the scale of the triangle to create a diverse play area with near and long-term player objectives.
Revisiting the landscape, we can see how an entire world was built from this simple design pattern, allowing the developers to obscure information when irrelevant and reveal information gradually, facilitating player delight.
Design patterns can help build a language of affordances.
Ubiquitous in cities, the crosswalk button serves a critical user function, though not the one you might think of. Thanks to traffic automation these buttons have become empty shells, no longer producing meaningful signals except to the user. Instead of regulating the flow of traffic by manipulating lights, they now act as a speed bump, giving pedestrians a reason to pause at the crosswalk and discouraging them from darting into the street to get shave a few moments off their commute.
In psychology, this is called the placebo effect.
In software design, where optimization can take on an aura of dogma, introducing a bit of intentional friction can serve the same purpose for your users. Confirmation screens, modal alerts and undo options for destructive actions are some immediate examples; enabling save controls on a piece of software that auto-saves is a pseudo-control that eases the user’s mental model shift, like an elevator close door button that serves only to validate personal desires; not slam the door shut on everyone outside.
It must be intentional, not deceptive.
The key to a great affordance is making your user feel completely in control, even when they’re not.
Too often when we discuss inclusion in software design, it’s seen as a checklist of WCAG edge cases that laws demands be accommodated. What if we instead made great experiences for every user, and build that into our designs from the outset? There’s still a place to consider individual needs, but with an understanding that inclusive design is better for everyone.
Koichi Hayashida, Director of Super Mario 3D Land, shared this anecdote from the game’s development when asked about testing during development:
Very often we will do our playtesting with family members of our staff, but it really is a case-by-case basis. For example, in the building next to ours in Tokyo, there was an older woman who was an office worker, and we had her do some playtesting for us.
But what we realized was that she had a lot of trouble jumping across even a small gap. We thought, “Maybe if we give her the Tanooki Mario suit, she’ll be able to do it if she’s just right at the very edge.” But there was something she struggled with so much.
When we eventually had her use the P-wing to get to the end of the level, we thought, “Well, okay, she got through to the end of the level, but what we really wanted to see was her being able to jump this gap.” And so that’s the sort of thing that made us realize we need to put in some access to the Tanooki suit a little bit earlier, if people are having a particular amount of trouble with a certain stage.
And that led us to the White Tanooki Mario suit, which gives players invincibility, as well as the ability to slow their fall after a jump, so they can make their landing easier.
Lack of inclusion can be surfaced during testing, but only if the pool of testers is representative and inclusive.
Design for the audience that you wish to have, not the one that you think you have.
Shigeru Miyamoto, the “father” of Mario, perhaps said it best. When asked what he would change in this world if he could design anything, he replied:
I wish I could make it so that people were more thoughtful and kind toward each other. It’s something that I think about a lot as I move through life. In Japan, for example, we have priority seating on train carriages, for people who are elderly or people with a disability. If the train is relatively empty, sometimes you’ll see young people sit in these seats. If I were to say something, they’d probably tell me: “But the train is empty, what’s the issue?” But if I were a person with a disability and I saw people sitting there, I might not want to ask them to move. I wouldn’t want to be annoying.
I wish we were all a little more compassionate in these small ways. If there was a way to design the world that discouraged selfishness, that would be a change I would make.
David Sheff, in his book Game Over Press Start To Continue, shares this anecdote about Miyamoto’s early childhood:
After school he often lit out into the countryside… He had to pass a neighbor’s house where a bulldog lay in wait for him. The dog charged every time, barking and snapping, and Miyamoto froze. At the last second, the dog’s chain reached its limit and jerked it back. Miyamoto stood just out of the reach of its salivating jaws.
Taking elements that are natural and familiar and repurposing them to craft a narrative — to tell a story — is essential to great game development. These are stories that are designed to be experienced and explored; to feel lived in and curated.
It’s easy to understand in the context of a game world, but how do you bring this into UX design? Simply put, we want experiences that feel lived in, personable, comfortable and crafted.
You are your first user.
When you’re solving a problem through design, you should never be just checking off features. Instead, give your users spaces they want to inhabit, explore, and return to.
Whether you are a UX designer, game designer, content strategist or just a curious reader, I hope this article has inspired you to ask yourself:
What stories am I going to tell?
References
Kishōtenketsu: Exploring The Four Act Story Structure — The Art of Narrative
Hakoniwa Worlds | Super Mario Odyssey — Heterotopias
The 4 Steps of Level Design in Super Mario’s 3D World — School of Game Design
What Nintendo Can Teach Us About Game Design —NY Film Academy
Zelda Breath of the Wild CEDEC 2017 English Summary — PDF
How the Inventor of Mario Designs a Game — Vox
The Structure of Fun: Learning from Super Mario 3D Land’s Director — Gamasutra
Shigeru Miyamoto Wants to Create a Kinder World — The New Yorker
