This is a condensed version of the full article which can be found on my Main Blog Here.

The Magic Of Buttons

One of the most underappreciated areas in a visual novel is the work which goes into its UI design. An ideal UI will never draw attention to itself and become a natural extension of the player’s engagement with the game. This is not an easy thing to achieve since a balance has to be struck between its presence on screen, its ease of use and its aesthetics. Over the years a standard set of expected practices have grown up for both ADV and NVL UI design and the majority of visual novels follow them to avoid the pitfalls of invasive UI. However, if the developer is willing to run the risk of potentially irritating the player with unfamiliar layouts, there is value in breaking these conventions for the sake of creating a memorable overall experience. How do these differing approaches influence the form and function of visual novels? Let’s press some buttons and find out.

Standardised Structure

In order to ensure the best player experience, visual novel developers have learned from the mistakes and successes of the past and formed a cohesive set of standards for UI which most modern titles adhere to. These rules of style manifest slightly differently depend on if the game uses ADV or NVL as its means of text presentation. For an ADV title we can look at how Sabbat of the Witch handles its UI elements and given Yuzusoft’s prominence within the industry they make for a good bar to gauge how standards have been cemented. The first thing which will strike the viewer is the layout of the text box comprising the bottom eighth of the screen. Here it is a translucent orange textbox and this use of colour and opacity is done in order to make the text clear to read while not entirely obscuring the background and sprites behind it. Being as nonintrusive as possible is the aim here as it means having as few barriers as possible to the player’s immersion in the narrative and this prevents them for being reminded of the fact they are playing a game. Along the bottom of the screen are a series of small buttons that provide access to the various load and save features, the ability to skip in differing ways and other important settings. These are made as small as possible while having the ability to let it disappear if the player decides it is in the way and this is done to remove as much clutter from the screen as possible while still providing access to all the needed features a player expects to have at their fingertips.

As for the text in the text box, the name of the speaking character is sits above the main body of the text aligned with its left side and the text itself does not fill the entire box, but instead leaves about a third of the text box as empty space. This formatting of the text placement on the UI keeps the text feeling like a consistent flow as everything occupies roughly the same amount of space regardless of how much is said and it prevents the text from feeling disorderly. All these common UI elements are in service of the general aim to make itself as easy to ignore as possible while still being clear and navigable. There is also a light overall feeling from the small size of the UI and the way it takes up so little of the screen allows for the character sprites and CG to have an immediate and striking impact. It is for these reasons that ADV is favoured by many visual novels which want to keep their tone bright or those which want to place an emphasis on their characters.

Hidden UI

The standardisation of NVL has a lot of similarities to that of ADV since both stem from the same design philosophies, but they manifest in different ways and for different purposes. A common trend in NVL titles is to have no UI buttons on the interface at all and instead require the player to open and entirely separate pause menu to access other functions like loading and saving. On the surface this inconvenience might seem to be a major issue but it is a trade off to compensate for the much larger amount of the screen which is covered by the NVL textbox. Since it covers much of the portraits and CGs and puts a greater emphasis on itself compared to its ADV counterpart, there is a need to avoid drawing the player out of the experience through the large UI and removing an unnecessary element helps keep the focus on the narrative.

Thinking Outside Of The Box

Breaking the rules and conventions of a medium has a strong impact on the viewer and UI can make good use of this shock factor to play on their emotional state. Rather than being clean and out of sight these visual novels make their UI take up large sections of the screen and be loud and obvious at all times. Such a direct presentational element is impossible for the player to ignore and helps the imagery and messaging this interface is aiming to convey. Parts of the UI might also change over time to keep itself interesting and reflect the narrative or mental state of the characters at any given moment. The uniqueness of these aspects helps the title to stick in the player’s memory through its contrast with the familiar UI from other games and encourages the player to return and experience the distinctiveness they cannot find anywhere else. However, standards exist for a reason and a visual novel using an odd or expansive interface may run afoul of frustrations stemming from the inconvenience and confusion caused when attempting to do something as simple as saving.

For an example of what this kind of UI looks like in practice we can turn to Girlfriend Simulator. It uses a style of frame UI which encloses the backgrounds and sprites while taking up a large section of screen space. Large and clear buttons occupy the left hand side for easy access to the core features of a visual novel and are presented as part of the edges of the main window alongside the text box to create a feeling of importance and continuity with the rest of the visuals. Behind all of this an ominous image of an eye hang in a sea of unsettlingly dim orange which communicates the tone and atmosphere of the game before a single word has appeared on screen and remains as a constant reminder of what underlies everything. In the top left sits an unease meter that slowly ticks up as the player makes their choices and acts as a constant communication of the protagonist’s decaying state. Together these powerful elements show how a large UI can impact a player's perception of a work and the way it can influence they emotional state.

Conclusion

As the part of a visual novel which is always present on screen, it is important for the design of the UI to meet the needs of both the developer and the player. Standardised rules have formed for what UI should look like and these have influenced many titles. Those using ADV aim for a clean interface where the player has easy access to all the key features they need while not distracting from the visuals. NVL takes this to a greater extreme with many games often having no visible buttons at all and those with them try to frame them within the aesthetics of the narrative. Rejecting rules and guidelines can provide a powerful impact for a visual novel UI and further the tonal and thematic ideas the game is presenting. When it comes to UI there is a temptation to consider it as the last element in the design process for a visual novel, but to do so is stripping yourself of understanding a valuable angle of how the player will experience your game.