Layout Comfort vs Layout Flash

Menus are often a source of personality for RPG’s. They are easy to customize, to become visually recognizable, and you can just simply add whatever pizzazz you want on it to give what you deem to personify your game. For those reasons, you often see custom HUD’s, menus, and other various windows in RPG Maker games that show the game developer’s desire to create a personality for their games. However, a major problem that most developers face is that they often don’t realize these flashy menu layouts tend to confuse their players more than they help them. What may appear to be flashy may also be a source of discomfort for players and it’s often the layout of these menus that cause such discomfort.

Let’s take a look at two different menu screens. One will be a flashy menu while the other is none other than the default RPG Maker VX Ace menu. Let’s first take a look at the default RPG Maker VX Ace menu layout.

—

Here’s a screen we’re all familiar with. You see on the left a list of commands you can access from the main menu. And on the right is a list of the party members. The party members are displayed with their face, name, class, level, status effects, HP and MP. And finally at the bottom left is the amount of gold the player currently has. Typical RPG menu.

—

Here’s a flashy menu layout. It certainly gives the game a bit of personality. Of the first things noticeable, the command list for the menu is now listed across the top horizontally. The party members are shown flat out in the middle. Instead of the faces drawn, the sprites are drawn instead. The name, level, class, and nickname is listed at the top of each party member. Under it is a list of HP, MP, TP, and then all of the applied status effects. At the bottom, we have the gold listing, the number of steps taken, and the map’s name. This shows a lot more information than the default menu to boot.

Clearly, one is more customized than the other. One is definitely flashy compared to the other, too.

—

And so, I ask, which menu is more comfortable to look at? The default or the flashy one? Let’s compare them side by side zoomed out.

Most people would say the left at first glance. Now why is that? The second one certainly provides more information, a ton more status effects, it shows TP, shows the number of steps made, and it even lists the name of the map you’re currently on. But why is the left one more favorable? I’ll explain as the article continues.

—

Let’s take a look at a few things that make the flashier menu relatively awkward and uncomfortable to look at:

I’ve seen windows separated like this quite an awful lot. Usually, there’s little reasoning for them to be separated like such. Windows are separated for various reasons. Of them are as follows:

• They display different information from other windows.
• They indicate to the player that something is unique about the certain window from the other.
• They deliver a message that other items within the window are related to one another.

Sure, the gold window is indeed in a different category from the the number of steps the player has taken and different from the map name. However, what warrants the steps to be together with the map name? Almost nothing. It’s non sequitur.Players looking at this kind of window unconsciously wonder about how the number of steps taken by the party will affect the map name. Perhaps taking a certain number of steps will cause the map name to change or change the location to something else the next time you enter the town? None of that is the case with the game usually so this kind of window setup causes problems.

So how do we remedy this? Two ways.

First method would be to place them all into one window. Non sequitur can work next to other non sequitur items in a window as long as there’s nothing suggesting there’s anything to stand out about one of the items over the other. In fact, with this kind of set up, the player will automatically assume that this is a window setup for miscellaneous items, which works fine. The player will look at the window, realize that none of the items displayed in the row have anything to do with one another, and take for granted that they work independently of each other, in which, they do.

There’s usually more than one solution to solve a layout design issue. This is the other. Non sequitur items can also have their own windows, making the player realize that they display different types of information and do not relate to each other. Considering this is the case to begin with, there’s no problems here.

—

However, one major problem remains with the above menu layout and that’s the oddly coloured “Engine Break Town” text. Why is it coloured in such a way? Is there something significant about it? Not quite. Let’s take a look at this newly modified menu layout below:

The discomfort is a bit more apparent where there’s multitudes of differently coloured text on the screen. Sure, it’s neat to have multi-coloured instances of different items to categorize them in specific ways. However, a lot of this ends up becoming extremely confusing to the player and even overwhelming and causes quite the case of discomfort, especially with how much information is already displayed to the player. The screenshot prior to this one used the yellow colour to indicate that the map the player currently is in is a town. However, it sticks out like a sour thumb. In this extreme case of a screenshot, it doesn’t stick out at all. So, what do we do?

Let’s get rid of those colours.

Now the above screenshot is more comfortable than the previous to look at, huh? The issue with colour-coding items in a menu isn’t what they’re supposed to do. You can colour-code categories of classes, names, genders, nicknames, etc. and your player will never be able to figure it out at first glance. Instead, the mind-set of the player works like this:

Right away, the player can tell that something is different about Terence than the others. With a quick look around, we can tell that Terence is near death. Had it been the previous screenshot with all the zany colour-coded categories, the player would never have picked up that Terence would fall the next battle. Colour-coded menu text ought to be used as indicators that the player should be wary of, not categories. But why does this work so well as an indicator?

It’s because this colour change causes discomfort. The discomfort immediately alerts the player into figuring out that something is up with Terence compared to the other members. However, in this case, we use the player’s discomfort to their advantage by presenting to them that Terence is in a critical state. So, the conclusion here for menu text colours? Simple is better. Players will figure out what a class does even without the category colourizing you may do. Instead, use the menu text colours as indicators to help out the player, rather than telling the player what is what.

—

With those steps taken, what else can we do to improve our menu? Let’s take a quick gander at an individual actor bar:

The layout feels really out of place. Though it certainly gives personality to your menu, it doesn’t give comfort.

Seeing the class “Monk” next to Natalie’s name indicates that she’s a monk. For those who’ve played multiple RPG’s before in the past, they’ll know what a monk is, no problem. But what’s “Crimson Lightning” next to her supposed to mean? It’s her title, but how does this information help the player from the main menu? Does it provide some kind of significance? No, it’s just decor. This kind of thing is best left out of the main menu as it stirs up confusion.

Next would be the location of the status effect display. To the left of that, we see the HP bar gauge and the MP bar gauge. We assume that those are placed where they are for better better measure of how much the HP and MP amounts are filled. However, we see above the status effect gauge the TP bar. Sure, the TP bar is nice, but is that supposed to be something comparable with the status effects list as the HP and MP bars suggest? Not quite. In fact, there’s nothing to compare at all.

So, what would I personally do to change this appearance?

I got rid of the nickname title as it provides practically zero usable information about the actor. The level was moved down beneath the class and the class was moved over. The status effects are then drawn below the level. This keeps the status effects close to the actor’s image, letting the player know that this is some critical data you need to know about the actor. Though there’s only half as many status effects displayed, the player becomes more aware of the critical status Natalie is in (as well as the rest of the party). The gauges are then lined up with one another in a more organized fashion.

Already, this looks a whole lot more comfortable. Now, it’s time to work on other things.

—

We now go back to this comparison image of the default RPG Maker VX Ace menu with the first custom menu we saw:

Here’s the image for those who are quick to forget. Don’t worry, I tend to forget all the time, too. That’s why having good visuals are a must. But…

In one of my other articles, I’ve used this image:

The left menu is clearly more vertical than the right. The right is almost all horizontal. Yet, why is the left menu more comfortable to look at and easier to figure out for most people? It’s actually due to the reason that the vertical menu display makes it more difficult to acquire individual information. How does that work? Let’s take a look at the two windows below:

Here is a vertical command list with the selection cursor removed to prove a point I will later explain. The command names are multiple words. No biggie.

And here is the horizontal command list with the selection cursor removed as well. The command names use the same text as the window above it.

With these two windows seen, which was easier to distinguish as menu items? The vertical list or the horizontal list? Most people would say the vertical list. But why is that considering the fact our eyes acquire visual information easier horizontally than vertically? The vertical list is actually easier to distinguish because of this fact. We acquire visual information horizontally in a more efficient fashion where it actually backfires on us like in the case of the horizontal window. Most people at first glance would read the second window all in one sentence. Without the selection cursor, it becomes visually difficult to distinguish which are separate commands. While this can be remedied using only one word commands, better spacing, etc. these windows were made in such a fashion to prove a point.

Now, we go back to the comparison of the two menus:

A lot of the flashy menu on the right is horizontal driven, in fact, almost all of it. However, the easy to acquire horizontal visual data that we get tends to mix and mesh with each other. On the other hand, the left menu uses the difficulty to acquire vertical visual data in its favour to separate the menu commands, to separate the actor data, thus making it easier to read. Let’s tackle this by changing that horizontal menu to a vertical one and pushing the actor window to the side.

Well well well. What’s this? Doesn’t this layout look highly familiar? You bet it does. In fact, it looks almost exactly like the default main menu for RPG Maker VX Ace. But is it more comfortable to look at than before? Definitely. Let’s compare this and the first menu side by side:

These two menus are practically the same in the information they provide the player. The only exception is that the nickname is taken out of the one on the left. However, the layout comfort difference from one the other is drastically different. The menu on the left provides to the player a comfortable and clean layout, more sensible information with the lining up of the gauges, easier to distinguish commands with the vertical command list, and separated windows for the non sequitur items in the lower left. Such minor changes can make major improvements over a menu layout.

—

Really, I’m no expert on how to build menu layouts. Not many of us are. However, I do and daresay that I’ve played quite the number of video games in the past to know and understand what kinds of menus would prove more comfortable to me than others. The general rule that I came down to is that simplicity and order is where it’s best. Awesome and flashy looking menus can tone themselves down to become more layout efficient and comfortable. In the screenshot above, we see a comparison between the newly rearranged menu layout to the default. They really aren’t all that much different as they certainly look similar in layout.

By improving your menu layout, you not only show that you understand what kind of information is needed by your game, but you also show to the player your desire for them to have a comfortable time playing your game. And comfortable players are happy players.