Graphical User Interface

A visual novel's Graphical User Interface, also known as its GUI (pronounced either “gee-you-eye” or “gooey”), is any screen that uses clickable images to let a player interact with the game. This includes things such as: the text box and option buttons (skip, save; etc), choice selections, and all menus (ex: main/title/start, settings, save, gallery, extras; etc).

Ideally, GUI is designed custom for the game to reflect its tone and theme. When in doubt, it is recommended you go simple and no-frills rather than detract from the game by being intrusive. Your GUI artist might not be the same artist you use for your sprites or CGs, as the skill set is different.

Splash Screen

A splash screen is an image or movie that appears when the game is starting up and before it goes to the menu. Usually these are logos or opening videos. Sometimes they are content warning screens/disclaimers.

Main Menu

The main menu is the first menu the player sees upon starting up. Main menus will often contain buttons for starting the game, accessing the load menu, accessing the options menu, and quitting the game.

Some main menus will also have buttons like:

• Continue: Allows the player to immediately load from the last saved game upon activation.
• Extras: Takes the player to a menu dedicated to extra unlockable content. Sometimes this button is locked until the player completes at least one run of the game.
  • This button can take many forms depending on developer needs. For instance, an "Extras" button may only be called a "Gallery" button if the only extra content available is a CG gallery, or each type of extra content menu gets its own button right on the main menu itself. Sometimes the Extras button, when clicked, expands to show these unique buttons.
• About: Takes the player to a menu that displays information about the game, the engine, its version, and any staff credits or license information. A staple of the default Ren'Py GUI.
• Side Content: If applicable to the visual novel, this button will start up unique side content of some sort that's separate from the main game.

Certain menus behave differently when the user accesses it from the main menu. The most common example of this is a save/load menu not allowing the player to save, as they are not actually in-game.

As the main menu is the first menu the player interacts with, creating a good first impression that matches the game's overall tone is important. Developers will often design a main menu around the game's key visual, and will also include the game's logo as well as copyright information. Main menus will also often play some sort of background music or looping ambience, depending on what works best.

Some games change the main menu in some way after certain milestones (like getting certain endings), whether that be changing the background music, the key visual, or a combination of the two. In rare cases, some will even completely change the entire design and layout.

Textbox

See More: Textbox

An example of a text box which uses a quick menu and a CTC indicator. Instead of a character portrait, there is a notebook, which players can use to keep track of important details, which are filled in as the game progresses.

A textbox may contain the following elements:

• Name Plate/Name Tag: An area where the speaking character’s name is displayed. Often located at the top left of the textbox.
• Side Image: A character picture that is displayed on the textbox. Usually head-only or shoulders-up. Many games only use side images for characters who are not shown on-screen or for internal thoughts. May be in a different style from the main sprites.
• Click to Continue (CTC): An indicator that conveys to the reader that there is no more text to read, and the reader should click to continue to the next line of dialogue.
• Action Buttons: Quickly access actions like skip or auto mode.
• Menu Buttons: These allow the reader to access menus like load, save, and options.

Save Menu

This menu allows users to save, load, and possibly delete their save data. Saves act as bookmarks that they player can jump to to quickly access some part of the story.

An example of a save-load screen in a game developed with Ren'Py.

To help the player remember where the save leads to, a game may use the following elements:

• Chapter or scene name
• Time when the save was created
• Screenshot of the game when the save was created
• Notes that the players write themselves

Settings

The settings menu (also known as the options or preferences menu) allows users to change various settings within the game. Visual novels can be surprisingly robust when it comes to customization.

Example of a settings menu, including options for display, transitions, text speed, audio volume including music and voice, and options to sustain voice and wait for voice during auto-play.

Common settings include:

• Settings that change how the game behaves during certain events, such as allowing users to continue skipping after choices or skip all text
• Settings concerning accessibility (high contrast mode, photosensitive mode, screen reader/self-voicing settings, etc.)
• Display settings that change the window size, switch between nearest neighbor and bilinear rendering modes, etc.
• Settings that change text and auto mode speeds
• Settings that change the volume of/toggle mute for various types of audio, like music, sound, voice, system sounds, etc.

Some other observed settings include:

• Settings that allow you to change the system voice to any one of the voices of a major character
• Settings that allow you to change the individual volumes of character voices, or even mute a character's voice altogether
• Settings that change various other elements of the in-game text, like changing the opacity/color of the textbox background and toggling dialogue color-coding and other text effects. Some more extensive visual novels will even allow you to change these elements using RGBa sliders.
• Settings that toggle the visibility of various pieces of the textbox, such as the side image or the click-to-continue indicator
• Other interface customization particulars such as in-game cursor selection and whether or not previously read text and chosen choices are visually different from unread and unchosen choices
• Keybind modification
• Settings pertinent to gameplay in visual novels that contain it
• Settings pertinent to erotic scenes (i.e. how a "panic button" behaves on activation, toggling of certain fetishes not all players may be interested in, etc.)

Extras Menus

Sometimes, a visual novel can contain various bonus menus that allow players to view content they have unlocked. Many engines such as Ren'Py have built-in functions for the most common types of extras menus. Some visual novels will only let you access these menus if you've cleared the game at least once.

Image Gallery

An image gallery (often simply known as a "gallery") is a menu that lets players view all of the images they have unlocked. Very basic image galleries will only contain unlocked event CGs, but they can also contain backgrounds, cut-ins, sprite viewers, and even movie cutscenes and opening/ending movies.

Music Room

A music room is a menu that lets players listen to previously heard tracks freely. Many music rooms, upon entry, will either disable the title screen music or have the title screen music playing by default.

Scene Replay

A scene replay menu allows for the player to reread scenes in the game. Often times, these scenes are either ending scenes, are important in some way, or contain sex and other erotic content. Many eroge will often have scene replay rooms purely made up of sex scenes.

Encyclopedia

An encyclopedia menu (also known as a glossary menu or a TIPS menu) is a menu dedicated to defining various terminology throughout the game. Often times, this menu is directly accessible in-game to allow the player to quickly access definitions. Visual novels with encyclopedia menus will often highlight the term on first appearance and bring up a notification that an encyclopedia entry has been unlocked.

It is best to use an encyclopedia menu as a refresher or a trivia section. Not all players view definitions as they're unlocked, or even bother to view them at all. Failing to explain more complicated concepts within the story itself may result in these players becoming lost, confused, or frustrated.

Miscellaneous

A tooltip is a message or icon that appears when the cursor is positioned over an icon, image, hyperlink, or other element in a GUI.

External Links

• Visual Novel Interfaces (Tumblr)