“Kishōtenketsu & Hakoniwa: How Nintendo Inspires My Designs

Chris Norman
15 min readJan 26, 2021


Mario leaping on a scooter (screenshot from Super Mario Odyssey for Nintendo Switch)

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.

Two children playing a Famicom. The right child says “You’re supposed to smash your controller. It’s the law!”

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.

Screenshots (clockwise from top) of Donkey Kong, Mario Bros., and a graph paper rendering of SMB world 1–1.

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.

A promotional image from the Super Mario Bros. 35th anniversary, with 3d renderings of the cast of characters.
What better time than this — having recently celebrated the 35th anniversary of the Super Mario Bros. franchise launch — to share all the ways that playing games has made me a better designer?

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.

Overhead view of a Japanese miniature garden with the title “Hakoniwa: Miniature Gardens”

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”.

Slow pan of a diorama

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.

Retro Japanese neighborhood recreated in Animal Crossing for Nintendo Switch

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.

Scene of Rosalina from Super Mario Galaxy reading with the title “Kishōtenketsu: Narrative Structure”

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.

A diagram of the eight stages of Joseph Campbell’s Monomyth, split between the known and unknown worlds.
The monomyth can be broken down into 17 individual mythemes, organized into three acts — Departure, Initiation and Return.

However, authorial intent triumphing over user experience will often lead to games with overly-long cutscenes that steal control from the player:

Almost 12 hours! That’s an entire Netflix miniseries!

Or apps with overly-long guided intro flows:

An illustration of the onboarding flow for Google Inbox

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?

Sample 4-panel manga strips with a quote from Nintendo Director Koichi Hayashida (summarized in the next text paragraph)

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.

Kishōtenketsu four-part story structure diagram. Content is explained in the next paragraph.

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.

Mario fails to jump over the split pyramid staircase, falling into a safe gap between the obstacles.

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.

Mario fails to make the jump again, this time falling into a pit and losing a life.

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.

An image of Mario jumping on enemies from the instruction manual, with the section title “Interaction”

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.

Note the difference in speed between the enemy score float and the coin block score reveal. There’s a ton of overlapping motion in just a 3-second capture!

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.

An interview with the game’s creator, Shigeru Miyamoto, reveals the intention behind the design and placement of every one of these introductory elements; a self-contained tutorial for an entirely new type of gaming experience.

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?

A demo of the Super Mario Run mobile game, with a thumb tapping the screen to make Mario jump.
Tapping is the only control.

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.

A demo of a ghost house level in Super Mario Run, with a thumb tapping the bottom of the screen to make Mario jump.

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.

A map of World 1–1 through 1–4 from the instruction manual, with the section title “Gestalt”
Take note of the 4-act structure in the Mushroom Kingdom world designs, thrown for a loop when you encounter a random underwater stage.

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.


Spatial or temporal proximity of elements helps the mind perceive them as a group.

An underground level in Super Mario Bros. with a pyramidal stacking of coins.
We might see this in a collection of coins hidden beneath World 1–1…
An address book mobile application with weak to strong hierarchy. The entries are enemies from the Super Mario Bros. series.
…or when we create a repetition of closely-grouped elements in an application list.


The mind groups similar elements based on commonality in form, color, size or brightness.

A scene from World 1–4, with fire bars, Bowser’s fire and Fire Mario throwing a fireball. All use distinctly warm palette.
Notice how every fire element — harmful to Mario or his enemies — shares a common and uniquely warm color palette.
In UI design, we can create hierarchies and prime user expectations by employing similar techniques, like ensuring that controls always have a consistent style and appropriate level of emphasis.


Any form of visual enclosure causes the mind to perceive the enclosed elements as a group.

An underworld bonus stage from World 3–1. The coins are wrapped in bricks that large Mario can break from underneath.
In this underworld screen, the coin pattern hints at the action Mario must take to free them.
The unordered list from Gestalt is wrapped in red and green rounded rectangles to indicate relative threat level of enemies.
In the same way, UI groupings can quickly convey important or relevant information to your users.


Elements that are symmetrical tend to be perceived as a unified group.

Mario faces off against a pair of hammer bros., who toss hammers in arcs determined by their position on the screen.
Working within the memory limitations inherent in an NES cartridge, Super Mario Bros. used character design and palette swaps to communicate common enemy behaviors. It was also an effective way to design a lush world within those constraints!
The top menu is updated to bring the app icon to the center of the list. This helps it feel more like a related collection.
In UI design we can consider how a balanced menu feels more like a collection of common elements than one that doesn’t take symmetry into perspective.


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.

An underwater stage with a well that contains coins to lure the player. It is a unique pit structure, open at the top.
In Super Mario Bros. there is a well full of coins designed to draw the player’s interest, teaching them about areas with unique gravity.
Empty UI screen with just the word “Loading…”, paired with a UI containing a 3/4 full circle surrounding the loading percent.
In UI design, leveraging the power of shapes to convey information can make content loading a lot more bearable, visualizing the size and duration of a value.
The FedEx logo. The white space between the terminating Ex creates an arrow, indicating forward motion.
Consider also the classic negative-space arrow between the E and X in the FedEx logo.


The mind continues visual, auditory and kinetic patterns. Even if a line stops, the viewer is able to follow it.

Mario climbs a vine top the top of one screen, exiting from the bottom of the subsequent screen, implying vertical motion.
By having the vine crawl off the top of the screen, the player is guided in a new direction.
The list view from “Enclosure” is turned into a series of stacked horizontal scroll galleries, with cards for each entry.
Leveraging continuity we can imply interaction patterns, like a horizontal scrolling gallery, and use our available screen space in smarter ways.


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.

Sprites are flatly-colored, background elements have a common color palette, and floating bricks have shadow and highlight.
Even with a limited palette, strategic use of highlights and shadows and flat colors create a fore, middle and background.
Previous app screens updated with a floating action button elevated 3dp, a menu elevated 2dp, and a modal dialog with blur.
Smart use of elevation and levels of depth can communicate the importance of design elements like menus, calls to action and modal dialogs.
Illustrations of power-up items from the instruction manual, with the section title “Affordances”

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 start of World 1–1. The camera slowly drifts rightward before locking the player to the center of the screen.
Super Mario Bros. is full of subtle visual cues to guide your action without the use of a heavy-handed tutorial.

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.

The player punches a question block, revealing a power-up mushroom, which makes Mario turn into Super Mario.
You’re rewarded with the satisfaction of seeing Mario grow to twice his size.

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.

Link from behind at sunset, looking over the world map from atop a hill.

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.

Illustrations from the CEDEC talk, showing the various ways triangles were conceptually employed in gameplay.
Do I go over, around, or through this mountain?

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.

Link looking over the landscape, this time with blue triangles overlaid to illustrate their usage in the level design.

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.

A thumb pressing the old green crosswalk button at a NYC intersection.
Like the arrow in the FedEx logo, once you become aware of affordances you have a tendency to see them everywhere.

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.

A gold leaf from New Super Mario Bros with the section title “Inclusivity”

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.

A color blindness test, captions icon and wheelchair-accessible icon.
Color blindness, visual impairment, mobility…

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.

Japanese priority seating signage

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.

An illustration of Mario running away from a ricocheting turtle shell with the section title “Emotional Experience”.

David Sheff, in his book Game Over Press Start To Continue, shares this anecdote about Miyamoto’s early childhood:

A chain chomp — a large metal ball with fangs, attached to the ground with a chunky silver chain.

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?

Sleeping Mario from the end of Super Mario USA, with caption “The End”.



Chris Norman

User experience design at Google with 15+ years in the industry. Passionate about innovation, mentorship and motion design.