- Back to Home »
- Analysis , The Anatomy Of Visual Novels »
- UI Design – An Anatomy Of Visual Novels
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.
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.
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.
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.