Character Menu Interface

[Roots]

I'm at it once again. I've never been satisfied with the interface of menu mode that has been in the past three releases and for years I've wanted to give it a major makeover. First, I present you with a screenshot of how the character menu (aka menu mode) looks today.



Its nice, but doesn't make the best use of available space or have a very nice aesthetic feel. Below is my first draft of the main/root interface that you would see immediately after opening the character menu.




Here's a list of points about this draft.

(01): I made the top menu a bit shorter in height. I'm trying to make the middle menu have as much vertical space as it possibly can. I also changed the "Formation" option to "Party" and changed "Exit" to "Return" (because exit might imply that its an option for exiting the game, not just the menu). I swapped the position of the Party and Save options as well.

(02): The middle window contains a summary of the active party characters and there status. I used the full body character portraits here, although they had to be shrunk down to fit in the available space.

(03): Instead of creating menu window borders between the characters, I tried using a simple separator line.

(04): The HP/SP numeric text I replaced with HP/SP colored bars, the same that are drawn in battle mode. I did so because its easier/faster for the player to get an idea of his character's status instead of having to think about what 456/789 HP really means.

(05): "Lv" I replaced with "Lvl" (for no good reason) and "XP to next" I replaced with simply "Next". I think its intuitive enough that the player will understand what Next means. I placed the Lvl and Next text and values on the same line because again I'm trying to conserve vertical space. I think it looks decent. I do worry a little bit about not having enough horizontal space though.

(06): The bottom window I shrunk a little bit so its the same height as shop mode's bottom menu. I did this for two reasons. First, the location graphic (a hefty 500x125 pixel image) was taking up a lot of horizontal space and it could be a problem when we're trying to display long text of the current location. I shrunk the graphic to 400x100 and I think it actually looks better at this size because it doesn't stand out too strong in the interface. The second reason I changed this is that there's a lot of display code in shop mode that could be re-used for menu mode if the bottom window is of this size. Specifically the item/weapon/armor previews in shop mode could work in menu mode and present a consistent interface. Not to mention its less work if we don't have to write code to draw the same set of information for two different window sizes.

(07): "Time" and "Drunes" were placed on level height and their values drawn immediately beneth them. This looks much better than having them left aligned with the side of the window and leaving an odd blank space between them and the location graphic.


Here are some thoughts and answered questions that I have regarding this first draft.

(A): The separator lines between characters should be made less thick (its 3 pixels wide in this drat) and perhaps make it semi-transparent at 50% alpha. The lines stand out too strongly and prominently as they are now.

(B): My biggest quandary is the vertical order of character data/visuals. I don't know which way is best. The visuals we have to present are: name, HP/SP, portrait, and lvl/next. Is the current order the best? Would it look better if it was name, portrait, HP/SP, and then lvl/next? Or how about name, lvl/next, HP/SP, portrait? Maybe I should just make another draft with numerous different styles side by side and we can choose the one that looks the best?

(C): The top menu is running a little tight on space. I'm worried that translations of these names may not be able to fit in that space. I could try reducing the font size a notch to make more room.


I look forward to seeing what you guys think.

[rujasu]

(01): I made the top menu a bit shorter in height. I'm trying to make the middle menu have as much vertical space as it possibly can. I also changed the "Formation" option to "Party" and changed "Exit" to "Return" (because exit might imply that its an option for exiting the game, not just the menu). I swapped the position of the Party and Save options as well.

Exit->Return makes sense. I generally just hit the cancel button myself, is that even necessary to have?

Swapping positions of Party and Save doesn't make much sense to me, but if it matters to you then go ahead.

(02): The middle window contains a summary of the active party characters and there status. I used the full body character portraits here, although they had to be shrunk down to fit in the available space.

Looks nice enough, but where is the cursor going to be when the user sees this? If the cursor is on "Inventory," the user should see the inventory.

(04): The HP/SP numeric text I replaced with HP/SP colored bars, the same that are drawn in battle mode. I did so because its easier/faster for the player to get an idea of his character's status instead of having to think about what 456/789 HP really means.

Hmm. I'm not sure about this, because RPG gamers often want to know the exact number so they know when to heal and by how much. Also, a bar doesn't give any indication whether a character has 5 HP or 5000.

(05): "Lv" I replaced with "Lvl" (for no good reason) and "XP to next" I replaced with simply "Next". I think its intuitive enough that the player will understand what Next means. I placed the Lvl and Next text and values on the same line because again I'm trying to conserve vertical space. I think it looks decent. I do worry a little bit about not having enough horizontal space though.

(06): The bottom window I shrunk a little bit so its the same height as shop mode's bottom menu. I did this for two reasons. First, the location graphic (a hefty 500x125 pixel image) was taking up a lot of horizontal space and it could be a problem when we're trying to display long text of the current location. I shrunk the graphic to 400x100 and I think it actually looks better at this size because it doesn't stand out too strong in the interface. The second reason I changed this is that there's a lot of display code in shop mode that could be re-used for menu mode if the bottom window is of this size. Specifically the item/weapon/armor previews in shop mode could work in menu mode and present a consistent interface. Not to mention its less work if we don't have to write code to draw the same set of information for two different window sizes.

Makes sense, I guess.

(07): "Time" and "Drunes" were placed on level height and their values drawn immediately beneth them. This looks much better than having them left aligned with the side of the window and leaving an odd blank space between them and the location graphic.

I don't know, I think it's more natural to have the values to the right, rather than underneath. Otherwise, no problem.

Here are some thoughts and answered questions that I have regarding this first draft.

(A): The separator lines between characters should be made less thick (its 3 pixels wide in this drat) and perhaps make it semi-transparent at 50% alpha. The lines stand out too strongly and prominently as they are now.

(C): The top menu is running a little tight on space. I'm worried that translations of these names may not be able to fit in that space. I could try reducing the font size a notch to make more room.

Well, if we took out exit/return, we'd have room.

[gorzuate]

Something needs to be done about the vertical separators between characters. Maybe making it transparent will work, or maybe an actual window border would look good too.

I think it should be displayed:
Character Name
Portrait
HP/SP
Lvl/Next

Onto other things now... we have awesome artwork. Seriously freaking cool Yet they're being displayed in reduced size everywhere! Make the menu bigger and everything can be displayed at their original size, and you'll have the space for translations and such as well. Maybe shop mode should be bigger too.

Hmm. I'm not sure about this, because RPG gamers often want to know the exact number so they know when to heal and by how much. Also, a bar doesn't give any indication whether a character has 5 HP or 5000.

I think the bar shows it well enough...
But this brings up something I've never understood with the RPGs this game is based off of. Perhaps you geniuses can enlighten me...

Why is it necessary to have hundreds if not thousands of levels to level up to, thousands of XP to gain before the next level up, yet be gaining hundreds if not thousands of XP in every battle?
Why is it necessary to have thousands of HP for both characters and enemies, yet take out hundreds if not thousands of HP with every attack?

It seems like everything could be done on a much smaller scale. The enemies don't need so much HP if the damage dealt by attacks is scaled down. 5 level-ups per chapter is more than enough, and how many chapters could there possibly be? 30? Of course, this would nix the problem of running out of horizontal space for everything in the butt.

[gorzuate]

Also wanted to add that shop mode has a fancy top bar with drunes images on the sides that spiff it up. I was hoping something similar could be done for menu mode.

[Roots]

Exit->Return makes sense. I generally just hit the cancel button myself, is that even necessary to have?

I didn't even realize you could do this. Actually I think you shouldn't be able to do it because it makes it too easy to accidentally quit menu mode. You may retort "So what? You could just open menu mode back up again if you quit". And my rebuttal is the following scenario. Imagine you've just fought a tough battle and are in need of healing, but another enemy is close by and you try to run away but your stamina meter is empty. In a split-second decision you go to menu mode to use a potion, but you're also trying to run with the little spurt of regenerating stamina. "S" and then "D" by accident and you're trapped in the battle.

I think it is necessary to have. It would be weird without it.

Swapping positions of Party and Save doesn't make much sense to me, but if it matters to you then go ahead.

Most games I've seen use this order.

(02): The middle window contains a summary of the active party characters and there status. I used the full body character portraits here, although they had to be shrunk down to fit in the available space.

Looks nice enough, but where is the cursor going to be when the user sees this? If the cursor is on "Inventory," the user should see the inventory.

I disagree. When opening menu mode, the player first wants to be presented with an overview of the current state of their characters, not the current contents of their inventory (which may not have changed at all). The cursor will be on the menu pointing at the inventory option (or the last selected option if we decide to implement cursor memory for menu mode). So they just need to hit confirm to open up the inventory view. The same way you hit confirm on "Buy" or "Sell" in shop mode to view those respective views instead of just hovering the cursor over it.

Hmm. I'm not sure about this, because RPG gamers often want to know the exact number so they know when to heal and by how much. Also, a bar doesn't give any indication whether a character has 5 HP or 5000.

I had this concern long ago as well. In my concept draft the HP/SP text is not shown only for the overview/root interface. If you go to use an item or healing skill or view a character's status page, that would show you the full SP numeric text. And remember that in Allacrost we don't have items that always heal a constant amount like 100HP. All potions, etc. we decided should heal either a static value -or- a percentage of the character's max HP, whichever is higher. So maybe a standard healing potion heals either 50HP or 10% of a player's HP. The player generally knows their max HP and will know how much of the HP/SP bar will be regenerated if they use the item.

We could also think about drawing the HP text (either current or max, but probably not both) on top of the bar similar to how we do it in battle mode. I'd prefer not to though.

I don't know, I think it's more natural to have the values to the right, rather than underneath. Otherwise, no problem.

You mean aligned to the right of the left side of the location graphic? That might look better, I'm not sure myself.


-----

Something needs to be done about the vertical separators between characters. Maybe making it transparent will work, or maybe an actual window border would look good too.

I actually don't like using the window borders there. We do it right now and its a bit...awkward because you can't actually get that type of window configuration to connect properly. i'll try it out though.

I think it should be displayed:
Character Name
Portrait
HP/SP
Lvl/Next

I thought about doing it this way too. I'll give it a shot and see how it looks.

Onto other things now... we have awesome artwork. Seriously freaking cool Yet they're being displayed in reduced size everywhere! Make the menu bigger and everything can be displayed at their original size, and you'll have the space for translations and such as well. Maybe shop mode should be bigger too.

Character portraits will be shown in full size in the status menu. Although I've also been seriously wondering if we're being dumb by forcing ourselves into a small 800x600 space for these big GUI menu hierarchies when we could have up to 1024x768 of space to use. I'd like to get more votes of approval though if we're going to make the overall menu size any bigger (remember the saved background image serves as part of the menu interface as well).

Why is it necessary to have hundreds if not thousands of levels to level up to, thousands of XP to gain before the next level up, yet be gaining hundreds if not thousands of XP in every battle?
Why is it necessary to have thousands of HP for both characters and enemies, yet take out hundreds if not thousands of HP with every attack?

It seems like everything could be done on a much smaller scale. The enemies don't need so much HP if the damage dealt by attacks is scaled down. 5 level-ups per chapter is more than enough, and how many chapters could there possibly be? 30? Of course, this would nix the problem of running out of horizontal space for everything in the butt.

I think "99,999" is a good upper limit for things like HP/SP and I think all stats could be up to a max of 999. We probably won't need to go that high at all. I can't answer your deeper philosphical questions except to say that's just how the best RPGs of the past did it. Honestly if we did damage in terms of 10s throughout most of the game, I'm sure we'd have a lot of players complain that they do such puny damage. They want to feel powerful with their 6,482 damage strikes.

Also wanted to add that shop mode has a fancy top bar with drunes images on the sides that spiff it up. I was hoping something similar could be done for menu mode.

Almost certain that's not going to happen. I have no idea what image could be appropriate there and there's little room in that top menu already anyway.


-----

I'll post a new draft soon with your suggested changes and we can see how things look.

[Roots]

Menu - Root Interface Draft v02



Changes
(01): Removed the "Return" option from the top action menu. rujasu convinced me on IRC that its unnecessary to have.

(02): Re-ordered character data to present in the order of: name, portrait, HP/SP, Lvl/Next

(03): Used menu border images instead of white line separators

(04): Right-aligned time and drunes text

(05): Replaced "Time:" and "Drunes:" header text with small icon images to represent each type.


Thoughts

(A) I don't like how the right-aligned time/drunes text looks. I like it how it was in the first draft, although I would like to keep using the clock/drunes icon images instead of writing "Time" and "Drunes" out like in the first draft.

(B) Other than (A), I like all other changes and I'm pretty satisfied with this draft.

[rujasu]

This is what I'd do:

[Roots]

I love it I think we're done with this interface now. The only real eyesore left on this draft is the bland coloring of the HP/SP bars, but that's something that's easy to improve later. I'll work on an interface draft for the inventory screen next.

[Roots]

Okay, here's my first shot at an inventory interface.



Ignore the fact that items are repeated in this draft. I just needed to illustrate there were multiple columns here. I was never completely satisfied with this interface because things seemed to be "off-balance" to me. I also realized that there was no easy way for the player to see which items they could use on the menu. So I played around a bit and came up with a second draft, which you may or may not like better than the first.



In this draft I made the inventory list cover the entire width of the window and shortened it from 10 rows to 8 rows. I moved the category info text to be in the window title text. The category icon is displayed at the top of the middle window with all category icons present. The selected category is drawn centered and in full size/color, while all other categories are drawn at 75% size in grayscale on both sides. So when the category is changed, the window title text changes and the category icons cycle through in a ring-like format (imagine a merry-go round). I placed a checkmark to the right of items that can be used from the menu in this draft as well.

Yes, I realize that this interface does not account for how to actually use the item (selecting a target and all that). I'll cover that in another draft. This draft only displays the list and nothing more. Also notice in both drafts the lower window displays the exact same info + format of information as is seen in shop mode. This is done intentionally, because it reduces the amount of work we have to do, re-uses code effectively, and conveys all the information that we need.


Thoughts

(A): Personally speaking I like draft #2 better than draft #1. What do you guys think?

(B): After thinking about it some more, I actually think its not necessary to display any indication of what items can be used directly in the inventory list. When an item is highlighted, the lower window will display its properties which includes whether or not the item can be used from the menu. So I think the green check marks in draft #2 can be removed. Those stray checkmarks are kind of ugly anyway.

(C): I'm wondering if in the title text we should also include the number of objects in the current selected category? For instance: "Inventory - Items 13 count, 7 unique". Just a thought.

[rujasu]

Honestly, I think this is a regression from the previous design. You should be able to see the character data when you're going through inventory items, it's helpful when you're picking out a healing item. I'd rather not change the current design of having the character menus on the left at all, actually.

[Roots]

I disagree. When I select "inventory" I expect to be presented with a complete set of information about what's in my inventory. I just saw my character's HP/SP data on the main menu. Why do I need to see it at all times? It just takes up space and doesn't present any new information. If I forgot what my character stats were, I can just hit cancel to go back and see, then hit confirm to return to the inventory where I left off. Plus when the player is late in the game with an inventory of 100+ objects, its going to be pretty annoying if those are displayed in a single column list. I'd actually like to fit in three columns on the screen, but I don't think it would fit comfortably.

How about this solution then. While the player is holding down the "swap" key, the character stats slide out and appear. That way its easy to see that information when you want to see it, but it's not there statically taking up useful screen space.

[marcavis]

... So when the category is changed, the window title text changes and the category icons cycle through in a ring-like format (imagine a merry-go round).

Wouldn't that get a bit jarring when scrolling through the inventory, especially when it's unsorted (not sure if it can get actually unsorted) or not very full? I think just highlighting the category icon (increasing size + graying out the rest) in its current position, whether it's in the center or not, would be enough.

I placed a checkmark to the right of items that can be used from the menu in this draft as well.

I'd propose graying out the names of items that can't be used from the inventory instead. I think I've seen that in... a whole lot of games I guess.

(A): Personally speaking I like draft #2 better than draft #1. What do you guys think?

Seconded.

(C): I'm wondering if in the title text we should also include the number of objects in the current selected category? For instance: "Inventory - Items 13 count, 7 unique". Just a thought.

I'm afraid I can't see that info being very useful... having more inventory space available would be better.

Honestly, I think this is a regression from the previous design. You should be able to see the character data when you're going through inventory items, it's helpful when you're picking out a healing item...

I disagree... I just saw my character's HP/SP data on the main menu. Why do I need to see it at all times? ...

I'll agree with Roots here, but maybe I'm too used to the FF series to know what I'm missing out.

[Roots]

I think just highlighting the category icon (increasing size + graying out the rest) in its current position, whether it's in the center or not, would be enough.

You're probably right. That would be easier to code as well. I think we should go with that for now and we'll see how it looks in practice.

I'd propose graying out the names of items that can't be used from the inventory instead. I think I've seen that in... a whole lot of games I guess.

I thought about doing that, but personally I don't like it. It leaves 80-90% of what's in your inventory in a grayed out name. I think if usable items were highlighted in yellow and everything else was in white that would be better. Also, we don't have support for doing something like that in our GUI system yet although I'd like to add a feature that would enable that ability sometime in the future.