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.

18 comments on “Layout Comfort vs Layout Flash

  1. Another good article that makes a lot of sense. Hopefully developers will see this and think a little harder about their menu layouts. Nice work.

  2. An excellent and interesting article.
    I have chosen to categorise my items and skill-types horizontally and I think it looks pleasing. However, I wouldn’t do that to the main menu.

    I enjoy this. I do look forward to more like these ^_^

  3. The layouts ara almost the same for all the desing. I think that the only way to create a really flashy menu, is by using images insthead of windows.
    The only “problem” I see for the pulished layout is that the Map Name is not comfortable to see with ‘those long map names’ and the information gets harder to get.
    It’s not a problem really because the map name is not a REALLY important information to the player to know, like other things suck as playtime or step count..

    On the other hand, this articles makes me to tink that the idea of using a “front/isometric” view, is better to a “traditional” sideview battle system.(that is possible)

  4. Pingback: Update Again! | Division Heaven

  5. To be fair to the original layout, a lot of the problems you had with it are situational. Sure, actor title is unimportant–until, that is, the title is used to convey important information (in my game’s case, the actor’s race, which is not really immediately apparent except in two cases).

    Secondly, “Buy Items Sell Items Exit Shop” isn’t comfortable to look at, no, but if you give them extra space and simply make it “Buy Sell Exit”, it looks a lot better, and gives players an indication of all of their options without them needing to flick their eyes down a line, therefor making it MORE comfortable than the vertical menu.

    Also, not all layout solutions are equal, and not all layout solutions are equal in all cases. Largely this has to do with window skin. The more flashy the window borders are, the less pleasant it is to see a lot of them at once. That’s elementary stuff. But, even non-flashy window borders get in the way in some setups. The three different windows for steps, gold, and location look fine in the flashy menu, due to less border pieces touching, but in the normal menu, you would want to consolidate those into one window with three lines, because the windows connecting at the longer sides so close to each other makes a bit of a chaotic mess.

    Finally, the last version of the flashy menu has downright huge gauges which dominate over half the screen. The ideal setup would be making them go out from the right side to the left about two-thirds their current side, then perhaps offering a visual indicator of progress to the next level, rather than a single decimal number. Not sure exactly how that would be ideally done, because another gauge would be a little messy there (then again, I would just stick it under TP because I don’t have that carry over, but for a game that does it’s more of an issue).

    I enjoyed this article, though. It obviously got me thinking a lot, which any writer can tell you is the ultimate goal of any written piece. Keep it up, and churn out more scripts =)

    *Just thought of something. An icon next to the town name, rather than recoloured text, would do wonders for the interface, provided that the icon is explained at some point in-game. If it’s not mentioned, however, it would just be a nuisance at best.

  6. I think you should rewrite this article using Hanzo Kimura’s Valkyrie Stories menu or Moghunter’s VX menu as the “bad flashy menu” example

  7. One of the reasons I love your menu scripts is because they find that sweet spot between flashy and simplistic. I hate it when I play those games that have so much GUI clutter it feels like being on someone’s outdated Myspace page with too many embedded stuff. lol

  8. How do I put things into their own window? I was able to add Time and Steps taken into my menu, but I had to place them into the same window as the gold. So when you go to a shop, it shows Time and Steps as well, when buying things.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s