(Disclaimer: This post is more on conceptual design tips rather than the straight-up practical, “here’s how you make a UI from step A to Z using such-and-such application.”)

This post began due to a request I got from a PM, but I thought that others might find it useful.

Due to sheer trial and error over four years, I’ve learned a couple things about user interface and experience—particularly for visual novels. (You would probably shudder to see the first GUIs I’ve tried to make. They’re awful.)

Wait… who made this atrocity?! Oh, right, me. (Assets belong to Lucid9 by Fallen Snow Studios.)

So! I thought I would share a few of the (hard-learned) lessons that I’ve gathered over the past 4 years of learning graphic design, so you don’t have to make the same terrible mistakes I did.

And look at where I am now! Marginally less incompetent. See, there’s hope for everyone:

Same color scheme, whole different look! Derpy minimalism went to normal minimalism. From my pre-coded Ren’Py UI kit, Fade.

If you’re interested in reading some practical, easy-to-follow tips and guidelines on UI design, read on!

Wait, why does game user interface matter?

Buckle up, because I’m about to go on a… short spiel. Not long. Who has time for that? Not my attention span, that’s what.

Most players or non-designers consider user interface to just be a series of images or functional displayables that perform certain actions. And that’s all, folks. That’s all there is.

For example: Buttons are buttons. You click on a Save button to save. You click on a Load button to load. You change tabs to change views. You create folders to organize.

What most people think of when they hear “user interface.” Buttons. Functions. Switches. Click things, do stuff.

This may be true for software… but as I’ve learned, this is a different story for games.

Games and entertainment media have a different purpose. Unlike software or hardware, their sole purpose is not efficiency and function. They are an art. They are meant to draw the players into an experience—another world, another story, another set of characters that is apart from reality.

This means that in addition to function, your user interface is directly contributing to your players’ experience of the world.

User experience is an art form. Every motion, every image, every color that is implemented—all of it contributes directly to your atmosphere, your storyline, and the player’s immersion. It’s part and portion of your game, and just as important as your art assets or your music or your writing.

A good user interface crafts a story, just like your game.

I don’t have time to go over this in detail, but I’ll point at a few games that really showcase and shine in this principle.

Persona 5 — Bet ya didn’t see it comiiiiiing 🎶 Anyway, this is one of the most prominent examples. Persona 5 uses quick and smooth animations paired with an “organized chaos” graffiti/grunge-inspired scheme that works perfectly with its narrative theme of rebellion, action, and Phantom Thievery.

Psycho Pass — One of the most amazing usages of in-game HUD that blends the sci-fi atmosphere with a readable minimalism that doesn’t distract the user. It pulls the user directly into the world by assimilating them as an in-universe character.

Ori and the Blind Forest — Ori’s beautiful, ethereal environment is further enhanced by this fluid layout of its ability tree, smooth dissolve transitions, and buttons fixed with particle effects to look like maaaagic.

Nier Automata — Nier’s menu system enforces the systematic style of computers, programming, and robots that is prominent throughout its story and worldlore.

While this is more of a complicated concept, I wanted to cover it early because it’s something important to keep in mind as a developer. If you’re the leader of your project, it’s up to you to make sure that every aspect of your game is cohesive and contributes to a larger narrative. (Woo! Pressure!)

It’s up to you to make sure that every aspect of your game is cohesive and contributes to a larger narrative.

So… with the complicated idea out of the way, now we can get to the basics of textbox design! Wait. That was probably backwards.


Use Icons: because people don’t like to read

Ironic for a visual novel audience, ain’t it?

But text creates visual clutter for the atmosphere of your game. You want people to focus on your game content, not your buttons. You want all functions to stay out of mind.

You don’t want uniform, text-heavy buttons. (See below.)

Akane_screenshot

RewriteDon’t. Uniform, text-heavy buttons are difficult to navigate. They blend into each other and often feel repetitive and ugly.

Ideally, all of your interface contributes directly to the user experience. It should integrate seamlessly and, if done correctly, enhances the player experience rather than distracts from it.

Icons greatly enhance this ability. People are used to seeing icons, not reading text—whether it’s street signs, logos, or application interfaces. Icons and pictures can communicate much more quickly than words. Using icons, your interface will get out of the way.

C14 DatingDo. Cute icons enhance the paper aesthetic and give an adorable yet elegant vibe.

While there are always exceptions to this rule such as Fault: Milestone One and Dysfunctional Systems, it’s good to consider icons as a solid guideline.

1-1920x1080

FaultSituational. Rather than use icons, the developers hide the menu when not hovered.

Dysfunctional SystemsSituational. DS uses a text-only approach to contribute to the elegant, minimalist environment and match with its game logo.


Don’t Only Use Icons: make your interface legible

“But what?” I hear you say. “You just told me that nobody likes reading and that icons are the way to go!”

Well, yes, but you generally want your interface to serve three purposes:

  1. Development: Function as intended.
  2. Design: Immerse the player into the universe, whether by getting out of the way or by enhancing the player experience.
  3. Deliver: Be clear and easy to understand.

Many times, because icons are so general and simplistic, they can confuse the player. To this problem, I present a solution:

Tooltips!

All hail.

Seven Districts of SinDo. Icon buttons are easy to differentiate at a glance, but the tooltips below provide additional clarity just in case.

For visual novels, one of the easiest ways to implement clarity is to show tooltips for your buttons on hover. That way, the text doesn’t clutter up the space, but your users can hover for clarification.

If you are planning on exporting to mobile or another platform where hovering is not an option, simply have your tooltips shown in a small size or non-distracting fashion.


Typography: spacing is the #1 priority!

What’s the most important thing about typography in a visual novel’s UI? I would like to postulate:

It’s not the style.

It’s not the colors.

It’s not even the font.

It’s spacing.

ss_9fab9a8a8200576ee381becd4bae7f478cd7b871.1920x1080

Orchard of the Stray SheepDon’t. The tiny line spacing and lack of margins crunches all the text together and makes it difficult to read.

When letters and words are all crunched together, the reader can feel claustrophobic, or worse—like they’re back in the dry history class with their least favorite teacher.

Have huge amounts of margin and padding. Use your line spacing and (for NVL) paragraph spacing. Fine-tune your kerning. Imagine that your text needs “breathing space.” If it has space, then your readers will subconsciously feel less claustrophobic.

analogue_a_hate_story_image10

Analogue: A Hate StoryDo. Generous spacing makes the text clean and easy to read.

Here are some general rules for spacing:

  1. Set your line spacing to around 1.3x for most scenarios.
  2. Go crazy with your horizontal margins.
  3. But not so much with vertical margins—your characters still need space to talk, after all.
  4. Letter kerning should be no greater than 1.5x the character width. Don’t make your characters distanced forever apart.

Don’t go crazy with the fonts

Some developers want to add character and spice to the user experience by adding fancy fonts in their textboxes.

Don’t do it.

You almost always want to pick a plain sans-serif font for the body of your text. People will be reading this text, likely for hours and hours. Make it easy on their eyes.

If you really want to add personality into your user interface, do so in the headers or character nameplates.

Danganronpa-Feelings-1030x579

DanganronpaDo. A plain, legible serif is used for body text, and personality is added via the headers.

Atelier TotoriDo. Atelier uses background elements and decoration to add the fancy atmosphere, but its actual text is simple and clean.


Textbox Transparency

There is one thing in common that every single textbox has in this: transparency.

Seeing parts of the character completely disappear behind shapes can be subconsciously unnerving. It makes them look decapitated or dismembered.

Even if you want bold colors or a bright white or a dark black, have the main body of your textbox at 90% opacity. (You can keep decorative elements around the textbox or on the frame at 100%, but the larger part of it should be at least a teensy bit transparent.)

Persona-5-English-Footage

Persona 5Do. Even Persona 5, which aims for a palette of stark black, red, and white has around a 90% opacity on its dialogue textbox. You can see Sojiro’s pink shirt through the black.


Summary

  1. Use icons.
  2. Add tooltips on hover to those icons.
  3. Spacing      spacing       spacing.
  4. Plain fonts for body. Save fancy fonts for headers.
  5. Textbox transparency.

There are exceptions to all of these rules. All of them.

But they’re still good rules of thumb.

These are just some basics of textbox design. There’s a lot to the world of UI design that I don’t have time to delve into, but if you’re looking to make something simple and clean, these guidelines should help.

Feel free to drop me any questions in the comments, too!