UI Design Tips for visual novels
(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.)
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:
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.
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.
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.)
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.
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:
Development: Function as intended.
Design: Immerse the player into the universe, whether by getting out of the way or by enhancing the player experience.
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:
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.
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.
Here are some general rules for spacing:
Set your line spacing to around 1.3x for most scenarios.
Go crazy with your horizontal margins.
But not so much with vertical margins—your characters still need space to talk, after all.
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.
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.)
Add tooltips on hover to those icons.
Spacing spacing spacing.
Plain fonts for body. Save fancy fonts for headers.
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!