UI Design Tips for visual novels

screenshot26.jpg

(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 Fallen Snow Studios.)

Wait… who made this atrocity?! Oh, right, me. (Assets belong to 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.

Same color scheme, whole different look! Derpy minimalism went to normal minimalism.

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.

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 .

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.

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.

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.

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!)

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

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

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 Dating  —  Do.  Cute icons enhance the paper aesthetic and give an adorable yet elegant vibe.

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

Fault  —  Situational.  Rather than use icons, the developers hide the menu when not hovered.

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

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

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 Sin  —  Do.  Icon buttons are easy to differentiate at a glance, but the tooltips below provide additional clarity just in case.

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.

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

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  —  Do.  Generous spacing makes the text clean and easy to read.

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  —  Do.  A plain, legible serif is used for body text, and personality is added via the headers.

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

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

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  —  Do.  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.

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!