Sunday, August 18, 2024


The Magic Of Buttons

 
One of the most underappreciated areas of 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 a colour and opacity are done in order to make the text clear to read while not entirely obscuring the background and sprites behind them. 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 prevent 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 option 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 and still providing access to all the needed features a player expects to have at their fingertips. 
ADV titles have a surprisingly large amount of UI to consider

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 an eighth 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 easy to navigate. 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 in order 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 elements helps keep the focus on the narrative. 
I dream of a world without buttons

The clean interface of Witch On The Holy Night is a strong case for how effective it is for NVL to present a minimalist front and not obscure the action and drama going on underneath. Despite lacking bright colours and the bells and whistles of ADV, its lack of clutter results in it feeling elegant and serious which works well for the kind of story this game is aiming to tell. Not all games using NVL are completely lacking in UI buttons with some choosing a few key items to display for the player’s convenience. Blending the UI into the tone of the game is how it avoids drawing too much attention to itself and this is achieved by making the buttons visually consistent with the aesthetics of the narrative. This often means having buttons without text which merely consist of symbols alluding to their purpose as can be seen in Stella of the End. In this case they are minimalist icons in line with a vaguely sci-fi theming to them and they slot nicely into the future tech dominating the story to the point that they do not seem out of place.
 

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 all the time. Such a direct presentational element is impossible for the player to ignore as wel as the imagery and messaging this interface is aiming to convey to them. 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 a contrast with the familiar UI from other games and encourages them to return and play it again to 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. 
It is hard to forget a UI so striking
 
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 merged edges of the main window and 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 how a player perceives 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 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 which do still have some 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.
 

Leave a Reply

Subscribe to Posts | Subscribe to Comments

- Copyright © Towards The End Sky - Hatsune Miku - Powered by Blogger - Designed by Johanes Djogan -