Sakurai on Creating Games: UI (15 Topics)

Masahiro Sakurai, the creator of the Kirby and Super Smash Bros. series, shares a wealth of game-development know-how on his YouTube channel “Masahiro Sakurai on Creating Games”. This article summarizes and restructures the content of that channel by topic.

That said, a summary is only an entry point. So much of the value — Sakurai’s own words, his real-world examples, his pacing, and the footage itself — can only be gotten from the videos. So please don’t stop at reading the article; I strongly encourage you to also watch the original videos embedded under each topic.

This category ranges from reconciling clarity and style to help that’s always skippable and understandable by anyone. Here we bring together the key points of both videos in the “UI” category (15 individual topics), structured in 2 parts following the 2 source videos. Each part opens with its explanatory video, so please watch along.

Part 1: Clarity vs. style, text size, color-coding, make important things big (#01–#08)

UI means user interface. In games it mainly refers to display systems like menus and numbers shown on screen. The knack of design is discussed: how to reconcile clarity and a sense of style.

https://www.youtube.com/watch?v=33njSckMINk

1. Clarity and style

A clear UI and a highly stylish UI may be at odds. The first example Sakurai gives of a highly stylish UI is the Persona series. A very stylish UI structure, but honestly it’s hard to call tidy, and you may be taken aback at a glance.

That said, you’d hate it if Persona 5, for convenience, were built with a flavorless menu. A UI is, so to speak, a drawer; tidier is better, but the size of what’s stuffed in differs greatly by game. You can’t conclude that a clear UI is good and an unclear one is bad.

Sakurai’s own works over-serve, with too many drawers and contents, so he’s always carrying homework. Build games make him agonize over inventory sorting too (Minecraft’s storage-making is close to making your own folders). Even so, there are things to refine: directing the gaze, the size of display, association via windowing, brightness and value, choosing an appropriate font. There’s no right answer for usability and style, so design to suit the game’s world, and if you can be kinder on top of that, nothing more is needed.

2. Text size

Have you ever felt the text was small playing an overseas game in Japanese? Appropriate text size changes by language. Kanji in Japanese and Chinese especially use larger space. Japanese packs info into one character, so each is large and lines are short; English’s alphabet is legible even small and lines run long. French tends to run even longer.

If you lay out assuming English only, with no flexibility for text changes, you’ll be in trouble with text too small. It’s decreased from before, with rising resolutions and careful options to choose font size. On the Switch, with a handheld mode, things are often laid out comparatively large (check on a handheld and you notice immediately). But big text may reduce coolness. The Famicom drew emotion in 8×8 dots, and it’s interesting that the brain fills in the rest.

3. Today’s kind design

For a big title, you should make settings properly kind. Sakurai looks at The Last of Us Part I (PS5)‘s settings in a let’s-play style. This series is remarkably careful with accessibility (ease of use; design that lets people with disabilities also play), and is very instructive.

First, the sheer number of accessibility items is huge. You can change the size of the HUD (UI info written directly to the screen) and see the result in a preview. Color adjustment and high-contrast display double as color-blind support, making allies, enemies, and items stand out. Camera and sickness measures reduce screen motion to ease sickness. Navigation includes direction arrows, rumble at cliffs, and an enhanced listen mode to know enemy positions — also affecting difficulty.

Further, text-to-speech voices everything beyond dialogue, with audio guides for cutscenes, audio cues for movement and combat, even audio rumble. Combat accessibility, like grabbed enemies not escaping, deliberately locks difficulty-lowering items at first to require one step — an idea in itself. Removing the limit on “visual load” (becoming undiscoverable) effectively becomes an invincible mode too. Being able to set many items at once via presets is kind as well.

Controller settings are abundant too — you can name control schemes (adopted in Smash), with sideways or upside-down holding, swapping left/right sticks, D-pad hold config, even DualSense adaptive triggers (the bow’s resistance). Subtitles are adjustable in size, background, name display, color, even voice direction. Old Nintendo works had value in having no key config, but since diverse people play, being able to change settings to taste is necessary. Even just probing the parts you need is effective, so it’s good to reference.

4. The loading screen

Data loading always occurs, and load wait time isn’t very welcome. Load time is sometimes covered by staging; the first Resident Evil’s door-opening staging is during internal loading (its length even let you predict a room with zombies). A fine example where required load time and inevitable staging matched — putting a load mark here might have killed the mood.

But this is a tale from decades ago. Today a sense of speed is demanded, and even as loading gets faster, plain wait time is barely tolerated. At least showing “loading” makes it easier to accept. Since load time often changes between development and completion due to optimization, it’s better not to over-depend on staging. Having a simple mark displayable anywhere is the safe bet.

5. Text emphasis

In works you advance via text, you can sometimes control the characters — change size, color, animation, font, or trigger screen shake and flashing. Conveying a character’s emotion via text staging and adding color to inorganic developments seems necessary. It may not suit serious works, though.

The point is to make these settable, and when translated into each language, let the translator directly adjust the script (staging-setting data). Because the appropriate emphasis differs by language. Japan has a thriving comic culture and has done varied expression with limited information — drawn sound effects (onomatopoeia in the background), manpu (sweat or anger-vein marks on faces), and varied use of fonts and speech bubbles. Just sending same-size text monotonously is a waste. The scale at which that staging works also differs by country and language, so it’s better to let natives think through the staging itself.

6. The menu tells the world

With the same gameplay and same content, a single use of UI or font can change the target audience. The same function can become adult by going cool, or cute, horror-ish, bright and flashy, cyber, Japanese / Western / Chinese / Asian — the impression transforms.

Compared to designing characters and backgrounds, if you can compose a worldview just by changing the font, it’s easy (in reality you sometimes build a whole font from scratch, so it’s hard to call easy). Background wallpaper, frames, and icons are considered as a set too, but even so the effect of shaping the world’s atmosphere is immense. Fonts and UI are close to “packaging” that world. While keeping legibility, you should design them actively.

7. Categorization by color

In projects Sakurai directs, he often does menu color-coding. In Smash Ultimate the top screen splits into several colors — the “Smash” menus are red-based, “Spirits” green-based, and so on. A practice from quite a while back.

But color-coding isn’t always good. Slathering on color can feel aimed at the young. In Sakurai’s projects there’s a merit so he does it, but each game has its own tone and manner, so set it freely to match the mood. What he’d recommend for any game is not mixing colors together on the same screen, since it tends to get cluttered.

In Smash 4 there’s a large character illustration within the menu, which you could say mixes colors, but it doesn’t bother you that much. Rather, when characters come to the front, the art gets imprinted as you continue. Finding a picture is overwhelmingly faster and more intuitive than finding text. Understanding via pictures and color, imagistically, beats reading and understanding text. Even so, the menu should prioritize the game’s tone and manner, he adds.

8. Make important things bigger

The most unusual thing in Sakurai’s menu UI is varying icon size by importance. Normal menus often line up top to bottom, but since Meteos, Sakurai turns menus into icons and varies their size. Bigger means used more often; small means rarely used. It encourages access.

You can imagine why. This is close to the GameCube controller’s thinking — the A button is large, the X and Y buttons small. Beyond looks, by touch you can tell the minimum button you should press. But it doesn’t suit every game; changing the value of choices also means giving up versatility. When moving a menu up/down/left/right with four buttons, completely equal value is easier to operate. Icon-ization also has the trouble of text overflowing when localizing to other languages. It was an introduction that there’s a way to change the presentation against a list-style menu.

Part 2: Fast selection, always skippable, button config, help, language-free, HUD (#09–#15)

Where the first half was about presentation and design, the second half is themed on comfort and kindness of controls — fast selection, always skippable, help anyone can understand, and other considerations for the player.

https://www.youtube.com/watch?v=T8AlCmksaGA

9. I want to select fast

When Nintendo developed new hardware, Sakurai was sometimes asked to propose features. One request he made repeatedly since the GameCube and Smash Melee days was “I want a wheel on the controller.” In old terms, a jog dial. As anyone who knows the convenience of a mouse wheel will get, it makes menu selection tremendously convenient.

Since games frequently have scenes of designating one from many choices, he thought a wheel would be all-purpose and convenient. With a click feel, the crisp response adds tangibility. A wheel is big and hard to fit into hardware, so it’s natural it got shelved, but he isn’t satisfied with the feel of just knocking an analog stick over (a D-pad with a click feel might be better). The hard part is that the more conveniently you can shortcut, the more it becomes a low-accessibility UI only the practiced can touch. He’s always thinking about whether new devices can be applied to UI.

10. Always make it skippable, always pausable

Company logos, openings, cutscenes, events — moments when you aren’t playing the game should always be skippable. The wish to have your spirited demo watched is understandable, but it’s not necessarily that person’s first time seeing it. Not being able to fast-forward or skip in a video work is inconvenience itself. A logo may be unskippable due to guidelines, but that’s out of fashion now. Those who set guidelines should set them assuming skippability too.

Further, cutscenes should always be pausable. There are still cases where only skipping is possible, but with mountains of reasons to stop — phone, visitors, meals — let players pause freely even mid-demo or cutscene (online progress alone may be unavoidable). “If I push for it here, maybe in the future there’ll be a few fewer unskippable games,” Sakurai says. Skipping line by line on actual hardware is mainstream, but it’d be good to apply it to cutscenes too.

11. Button config

Even simple works should always allow button config (key config). But the button-config screen is heavy in spec, and each creator building it individually takes too much effort. If you could customize via the console’s feature, that’d help, but it rarely works out that way. Sakurai’s works since the Wii have several supported controllers, and since various people gather, guests’ settings must be easy too.

As ingenuity, the controller is shown graphically. Listing items vertically is easier, but he lets you set it while checking the real thing. The setting method is select the target button with the cursor, then press that button. With a “button to change → button to swap in” method, the button to exit the menu becomes a setting target — a problem. Duplicate controls are allowed too (Smash has two jump buttons). Settings are recorded to a name and applied by just choosing, so guests are covered.

Note that in Japan, the cross button became confirm from the PS5 on (the world standard). Only the Switch stays reversed, and you can change the layout by default, but it swaps in every app, so without an in-game button-layout setting, you can’t accommodate it. Building a button-config screen is truly fiddly, but there are customers who need it. He wants to push support as much as possible.

12. Advancing through text

People usually read captions (subtitles) faster. Sakurai too finds it pleasant when game text can be read briskly. But a demo with proper acting can’t be advanced speedily. It’s the difference between flipping through a book and watching a movie. As a player, this is exactly when you’d be glad for fast-forward.

Works that let you skip line by line (an image of jumping to the head of each line) are welcome. As many use the speed-up feature of various subscriptions and YouTube, enjoying more in limited time is now practically a culture. You’d want crafted acting watched slowly, but if the system supports it, you can choose either slow or brisk. Supporting line-skip as much as possible would make more people happy. Overseas works often default to no captions and may feel different, but borrowing this moment, he raises the question, “Isn’t the staging too slow, out of step with the times?“

13. Give the menu help

Menu items are mostly expressed as single words, but a word alone can leave the function totally unclear. What helps there is help (function-explanation text at the bottom of the screen, etc.). You should include it actively; it’s a function Sakurai’s works almost always have and value highly.

When setting up help, there’s one thing to be especially careful of. That is, don’t explain with the same word as the menu. Important, so I’ll repeat: don’t explain with the same word as the menu. It sounds like a joke, but a common case is “Options” explained as “Go to Options.” It’s meaningless, since the help is for people who don’t understand the meaning. In this case, explain it in different words like “make various in-game settings.”

The ideal is that it slides right into the head. Once you’ve thought of help, break it down further — view the meaning objectively and keep revising to convey it more simply. The point is to make it a loose translation rather than a literal one. A mode name, too — “Play solo” is clearer than “Single Mode.” Avoid jargon like “Config” or “Key Repeat,” and in Japanese, consider spelling words out in hiragana (e.g. “hitori-yo,” “for one person,” slides in more smoothly).

14. Understandable even without language

In Sakurai’s games, he considers making the game playable even if you don’t understand the language. For example, put pictures or characters in icons where possible. There’s also a fun-to-look-at effect, but it’s enough if you can tell what you can do by looking at the picture. Try switching to Korean, and even without understanding Hangul, with pictures you feel you can roughly get it.

One more: mashing a button takes you into the basic main game. In Smash Ultimate, mashing from the top reaches the Smash fighter-select; Kirby Air Ride starts at the first stage; Super Star starts a tutorial-equipped scenario. There’s an impression it’d turn out that way even with normal settings, but it’s made that way deliberately. The ideal is that, worst case, you can play even if you can’t read. It’s rarely conscious, so he added it as a topic.

15. HUD

Information displayed on screen is called the HUD (head-up display). Found on fighter jets and recent cars, it lets you get info without taking your eyes off ahead. In games it refers to displays stuck to the screen in general, but things that follow the character may be more HUD-like.

As a trend, Japanese works tend to have more info, overseas works tend to suppress info to prioritize immersion (many let you hide info at will). Sakurai leans toward showing it fully for function, but useful as it is, it clutters. He gropes for effective expression in each game. Examples of Smash’s ingenuity:

• Since Brawl, display the fighter’s face (raises identity of characters that get small; also good for spectating)
• A pattern in the background scrolls UV upward (giving a fired-up, fighting-spirit mood)
• Fighters go semi-transparent when overlapping
• The player cursor overhead, noisy if always on, fades in and out by distance and situation
• In Air Ride, the meter display changes with Copy Abilities, and the meter breaks when the machine breaks
• The opponent you attacked or KO’d is shown by icon (clarifying who took damage in 3D space)
• In Meteos, the alien’s head spins, and Time Accel raises the spin rate to speed up enjoyably

Looking at other games yields all sorts of discoveries too, but it must be set on the premise that the game becomes easier to play, or more fun, he concludes.

Summary

We’ve now gone through both videos and 15 topics of the “UI” category. Finally, let’s recap the key points of each part (= each source summary video) by individual topic.

Part 1: Clarity vs. style, text size, color-coding, make important things big (#01–#08)

Part 2: Fast selection, always skippable, button config, help, language-free, HUD (#09–#15)

There’s a lot here, but I hope you’ll revisit it starting from whichever part caught your interest. Please also check out the related categories.