7/23/2019 Examining JRPG UI http://slidepdf.com/reader/full/examining-jrpg-ui 1/13 This is a primer about the composition, organization and artistic aspects of JRPG menus based on a survey of many notable titles from 1992 through 1999, with a few comparisons to other RPGs and genres outside that time frame. Although this primer spends considerable time on artistic aspects of UI design, it is the organization of these things which is its foremost concern. The first part of this primer explains the parts of a menu system with descriptors of size, use and assorted details. The second part of this primer examines statistical trends among JRPG UIs, like the average size of a given element, or the typical amount of padding. All figures are in percent-of-screen, and are therefore resolution-agnos- tic. Part One: The Anatomy of a Menu Because of their similar functions, JRPG menus have similar features. Not every menu has all the same features, but most of them share the primary elements. I’m going to use Super Mario RPG: Legend of the Seven Stars as my example here, because it is one of the most elegant and straightfor- ward layouts of any JRPG ever. Notice how efficient the UI is. Informational windows cover only about 68% of the screen. The windows are transparent, meaning that one tiled background image is the only thing the designers had to add. Part of the way they do this is by having a brightly colored font—but also by giving that font a subtly stylized stroke. The stroke of an object is the outline of its shape, in this case the dark blue border around the light blue font. The subtle stylistic trick the designers employed is that every enclosed space (like the center of the loops in a B) in a character has been filled in with the stroke color. This stops the lines of the background image from overlap- ping the middle of characters in a confusing way. Notice also that every single object on the screen is contained Examining JRPG UI
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
This is a primer about the composition, organization and artistic aspects of JRPG menus basedon a survey of many notable titles from 1992 through 1999, with a few comparisons to other RPGs and
genres outside that time frame. Although this primer spends considerable time on artistic aspects of UI
design, it is the organization of these things which is its foremost concern. The first part of this primer
explains the parts of a menu system with descriptors of size, use and assorted details. The second part
of this primer examines statistical trends among JRPG UIs, like the average size of a given element, or
the typical amount of padding. All figures are in percent-of-screen, and are therefore resolution-agnos-
tic.
Part One: The Anatomy of a Menu Because of their similar functions, JRPG menus have similar features. Not every menu has all
the same features, but most of them share the primary elements. I’m going to use Super Mario RPG:
Legend of the Seven Stars as my example here, because it is one of the most elegant and straightfor-
ward layouts of any JRPG ever.
Notice how efficient the UI is. Informational windows cover only about 68% of the screen. The windows are
transparent, meaning that one tiled background image is the only thing the designers had to add. Part of the
way they do this is by having a brightly colored font—but also by giving that font a subtly stylized stroke. The
stroke of an object is the outline of its shape, in this case the dark blue border around the light blue font. The
subtle stylistic trick the designers employed is that every enclosed space (like the center of the loops in a B) in
a character has been filled in with the stroke color. This stops the lines of the background image from overlap-
ping the middle of characters in a confusing way. Notice also that every single object on the screen is contained
by the exact same vector object, an #F84038 box with rounded corners. The thickness and style of the container
are completely uniform. The only thing that scales is the size of the area contained. Even the font size is uni-
form, except for in one box we’ll examine below.
Let’s get to the parts of the UI to figure out the information is organized. Not every menu UI has every
part that I’m about to name, but most of them do.
The Face Module
Face – This displays the information most pertinent to the player’s next action, especially as it regards battles.
If a character is going to die or level up, the player might want to know, and the face tells them that information.
The face is usually not interactive, except when reconstituted in a submenu, as it is on the right. Even then,
however, it’s the hand where the player performs activities. Most of the time, the face is there to simply pro-vide information the player needs to make decisions about whether or not to go into menus to use items, change
formation, etc.
Note that a lot of the time, the face disappears when the player enters the item menu in order to display a
larger amount of items although this is not the case in SMWRPG. We’ll get to that later in the hand section.
SMRPG’s face takes up 30% of the entire screen.
Portrait - Not every game uses a portrait (Dragon Quest 5 and 6 don’t), but most of the ones I surveyed did.
Interestingly, the portrait in SMRPG is the same sprite that is displayed during battle when the player is entering
commands, which saves on space. In SMRPG, the portrait is sized at just under 1% of the total screen size, and
about 3.7% of the face.
Stat Card - The stats displayed on the face. In SMRPG there are only two lines of stats, for three reasons.
Firstly, debuffs are not carried over from battle to battle, so there is no need
for a display them. Secondly, the party uses a shared MP pool, and that pool
is located with the other shared resources in the counter. Finally, the design-
ers don’t include EXP totals in the main menu’s stat card, probably because
there are only 30 levels, and grinding is not as big a part of the game as a
result of this. In SMRPG, the stat card is 17% of the face and 5% of the
So unless your UI is going to be as stylish and compact as CT, or as clunky as DQ6, it will probably be hard to
get fewer menu options than what we have here.
Let’s also take a look at how many modules there are on a screen. By module I mean any vector-shape
container which serves as the background for a part of the UI like the face or hand or counter.
The label iModules means item/inventory screen modules, and eModules refers to modules on the equip screen.
This is a lot of data, but I think it actually shows us something pretty spectacular about menu design. The
number of modules varies from screen to screen by less than two. So, it’s probably a good idea not to have onescreen with too many interactive parts on it; break it up into smaller pieces.
Below is a chart detailing the sizes of various menu components. Because the games have different
resolutions, I have normalized the component measurements by measuring them in terms of % of total screen
area they occupy. First we’ll take a look at a graph of the average size of every component.
Note that I have included the average of elements from more than one screen. You can see the difference in size
between the hand module (main screen) and the iHand module (item screen). The item hand takes up about
thirty percentage points more space than the main menu. Most of that area is being borrowed from the face
screen, which usually disappears on the inventory screen. If you’re math-inclined, you’ll notice that the in-
creased size of the average iHand doesn’t fully explain where the all the area occupied by the face went. Some
of that space also goes to the palm, which is usually absent on main menu screens. Some of it also goes into the
title module, which is always a useful thing to include, because players new to your menus may not recognize
what screen they’re on at first.
The only other thing I really want to point out about the averages is how small the average portrait andstat card are. The portrait is one of the most central or most important visual aspects of a menu, and yet it aver-
ages 2.2% of the area of a menu screen. Likewise, the stat card averages 7.4% of the screen. Even with four
party members on screen, that doesn’t add up to the average size of the face, so this does show that the typical
face module in a JRPG UI is pretty spacious. We’ll actually go over some of the technical reasons for that in
Smallest iHand: Final Fantasy 8. Largest iHand: Final Fantasy 5.Items are not important in FF8 the way they are important in the other FF games, because of the junction sys-
tem, and because there are no armors or accessories. Also, the FF8 item screen has two palms, one that explains
the item and one that explains the condition of the target of the item.
FF5’s large iHand is only slightly larger than FF6’s, and it’s only because the top two modules are compact, giv-
ing the iHand more space.
Smallest palm: Final Fantasy 8. Largest palm: FF6.
I already explained that FF8 has denuded the item of some of its use, but there’s another explanation for the
small palm. In FF8’s GF, junction and status menus, there are 23 other “tabbed” menus which can convey in-
formation about various stats, spells and effects. This takes some of the burden off the palm, which was already
a light burden.
Then again, if I’m being completely honest, DQ5 and DQ6 don’t use palms at all. Items are, instead, explained
upon pick-up. Take that to mean what you will, but I think palms are good idea. Why does FF6 have the larges
palm? It’s not that much higher than several other FF titles, and I can’t think of a reason why it should have
such a large palm. My only thought is that because FF6 has so many characters, and a broad array of equipment
for them, that the palm is a little bigger to help fit in explanations. I am not convinced that this is true.
Largest Stat Card: Final Fantasy 5. Smallest Stat Card: SMRPG.
FF5’s stat card includes job classes as well as job levels, which expands the size of the card.
Super Mario RPG has little info in the card, partly because some of that info is in the counter since MP are
shared between party members The padding on the top is also non-existent, and the padding on every other sid
is unusually small. This brings us to our next section, on padding.
Padding
In case you are unfamiliar with terms that were born in the typsetting industry, padding refers to the
amount of space between the edge of a page or module and the text/images. In typesetting practice, the paddingon things tends to be symmetrical, but that isn’t the case in JRPGs. In several of the games I surveyed, the bot-
tom part of the UI had extra space or the like. I haven’t reported this, as I didn’t believe it is as important to the
visual presentation of the UI in the same way the top and side padding is. But let’s take a look at what I mean.