Shopping Interface

[Roots]

I'm working on a complete overhaul of the way shopping is done in Allacrost and I need help. I (and the team) already know how we want shopping to work in Allacrost, but I don't know how I want it to look. Obviously I want the visual interface to be simple, intuitive, and informative while avoiding clutter, ambiguity, and overly abundant information. A couple years ago I made several mockup images for our battle interface and we had a lengthy discussion on these forums that eventually left us with a pretty darn good design. I'm hoping the same can be done here with our shop interface.

Overview of Shops in Allacrost
Before I get to the layout, let me bring everyone up to speed on the basic design principles of our shop interface, as it is quite a bit different from other games. I'm going to refer to buyable/sellable items/weapons/armor/etc as "wares" from here on.

* The player may take three primary actions while in shop mode:

• Buy - player can select to buy any quantity of any ware
• Sell - player can select to sell any quantity of any ware in their inventory
• Trade - allows player to buy a new weapon/armor and equip it over their old weapon/armor, which will be automatically sold

* An important aspect of shop mode is that we have a transaction model similar to an online shopping cart. Instead of having to buy/sell/trade each ware individually, one at a time, the player indicates their buy/sell/trade choices and then finalizes the transaction all at once. This is useful when the player has a limited amount of funds and wants to figure out how to get the most out of their money.

* We want financial information available and up-to-date at all times. This includes the current funds that the player has, the total cost of all selected "buys/trades", the total revenue of all selected "sells/trades", and what the new total will be in the player's funds with the current selection.

* Shops have some special properties in Allacrost. For example, they have a few different levels for their buy and sell prices. They may charge a lot more than the "standard rate" in their buys, or be a lot more generous in their sells than the average price. Shops also have a limited number of items in stock. You can't go to a shop and expect to be able to buy 100 potions if it sells potions. It may only have 12 in stock (stock regenerates over time).


Root Interface
There are several screens we'll need to discuss in shop mode. We'll do them one by one to keep the discussion from getting too confusing. The first screen interface we're going to discuss is the root interface. As you may have guessed, this is the highest level interface in shop mode. This is what the user sees when they first arrive at a shop screen. It is also visible whenever the player does not have the buy/sell/trade or other sub-interface menus opened.



First notice the white border region surrounding the menu. In the game, this area will be filled with a screen shot just prior to entering the shop (usually it will be a map area in a town). The total size of the menu is 800x600, the same size as the character/inventory menu interface in the game. I'm trying to keep the shop mode interface consistent with other interfaces in the game. The yellow number text is -not- a part of the draft (ie won't be in the game), but is merely there to help us discuss the different aspects of this layout without confusing them.

01: This is the action selection menu. Normally there will be a cursor here, but I neglected to add the cursor image into this draft. As you can see, there are five actions the player can choose to take from the root interface.

02: This area contains the all-important and omni-present financial information. "D" stands for Drunes, the player's current amount of funds. "P" is purchases, "S" is sales, and "T" is total.

03: This text contains the title/name of the shop that the player is in.

04: This is a short greeting from the shop keeper. In the future we may even find a reason to update it dynamically while we're in the shop (ie to say "thank you" after a purchase has been made)

05: Title text indicating that everything below details the properties about the shop

06: A list of all the categories that a shop deals in. In this draft all 7 categories are shown, but most shops will only have perhaps half that number. Categories which are not available in a shop will be either grayed out or missing entirely.

07: This indicates the buy/sell prices of the shop. The better the buy price, the less wares cost at this shop. The better the sell price, the greater the sell value of each ware is.

08: This entire window I actually plan not to include on this screen (its here because other shop interface screens will use this window, and I was too lazy to remove it). In here for the heck of it, I put example text of our Libertine (title/menu) and Junicode (standard text) fonts. We discussed that these two fonts will be the ones used in Allacrost before. Libertine is actually planned to be done in all caps, but I can't find the proper way to do that in GIMP at the moment.

----------

I'll say right now that I'm not too fond of this first draft, but I was having difficulty figuring out the best way to arrange this information. Here are some questions to throw around:

A) Does any information on this screen need to be added? Removed?
(I've thought about duplicating the financial text in the bottom right area of the big window to make it more clear what D/S/P/T mean by writing it out)

B) Is the action menu (01) acceptable? Should it cover the entire width of the menu instead of 2/3drs of it?
(In the current code, the financial text and icon is located below the action menu and the action menu covers the entire width of the shop menu.)

C) Is the shop name and shop keeper text necessary? Does it add or detract from the shop interface?

D) Is there a better way to convey buy/sell price text in 07? For example, colored text, images, or maybe something like a "star" rating?
(I just thought of the star rating idea this very moment, and I really like it)

E) Perhaps the window containing 08 can stay, and instead moved to the space below the windows 01 and 02, and can contain the text 03 and 04 and let the larger window contain the text and images for 05, 06, and 07? This would make a cleaner seperation of 03 & 04 (shop text) from 05/06/07 (shop stats).


Keep in mind that the top window sections, containing 01 and 02, is going to be omnipresent for all shop interfaces. Its always going to be there, always visible. So its imperative that we get this right.

---------

That's all I have for now. I look forward to hearing everyone's opinions and thoughts on this.

[rujasu]

Off the top of my head, I'd say keep the window at the bottom constant, and put the greeting text down there. Keep it at the bottom though, it's better that way in terms of balance. It's more symetrical, and the big window is where most of the info/action is, so it should always be in the middle.

The D/P/S/T notation seems very unintuitive to me. I think this will confuse people even if they've read the manual. How can we make this easier to follow? Also, we should probably have a confirmation window when the user opts to confirm, saying "you will buy X, sell Y, at a net (profit/loss) of N drunes."

As for the fonts, I'll make a note about that in the relevant thread.

[Roots]

I slept on it and tried some new tweaks this morning. Sorry rujasu, I didn't get your feedback before I finished this second draft.



List of changes:

1) Put the top two menus back into a single menu. I put a seperator line between the menu options and the finance text, and I think it looks good. The top menu is also a bit taller than it was in the last iteration.

2) Typed out the finance text instead of using one letter acronyms. I think it looks much better and less ambiguous.

3) Moved the bottom window up above the larger window and filled it with the shop name and greeting text.

4) Buy price and sell price information is now rated with a coin system. In this draft the buy price is two coins and the sell price is four coins. The more coins, the better deal a shop is for buying/selling.

5) Renamed the "Shop Details" title text to "Shop Summary". Still not sure if this text is needed at all.

6) Category icons are now in three columns instead of two. I showed what grayed-out (unavailable) categories would look like.


Other draft improvements, not really related to the interface design:

1m) Got the right font for the menu/title text. Looks pretty good I think.

2m) Added the selection cursor in

3m) Shrunk the drunes (coins) icon to 50% in size and placed it at both ends of the top menu.

----------

I think this draft is already a huge improvement over the last and I'm pretty satisfied with it overall. Here are some questions about it that I think need to be addressed.

A) Is the top menu aesthetically pleasing? Should the coins images be centered? Increased to their original size? Removed entirely?

B) Should the middle menu window containing the shop name/greeting text be moved back down to the bottom?

C) Are the relative window sizes appropriate? Should the entire menu area be increased beyond the 800x600 area limit?

-----------

I don't think I agree with you rujasu that the interface looks more balanced with the big window in the middle. I think this draft looks plenty balanced as the top window is small, the middle window a little bigger, and the bottom window dominating the majority of the screen area. Of course we have to keep in mind that this layout we're trying to share between all the different interfaces (buy/sell/trade). I failed to mention that originally. In these other interfaces the large window will typically contain a list, such as the list of wares for sale or the player's inventory. The medium size window will contain details about the current selection (properties, who can equip, etc). I think the medium window looks better above the large window for the root interface because it contains greeting text, which you would expect to be listed above other information, not below it. But I think this medium window's location will be fine for the other interfaces. Having the list of all wares/inventory on the bottom actually makes it easier to read than if it was in the middle, in my opinion.


My biggest concern at this point is the medium window. I don't know if its large enough to contain all of the information we will need it to for some of the other interfaces. I think I may begin working on drafts for the buy/sell/trade interfaces after all because we need to get a better idea of how this menu layout looks in those contexts as well. Technically speaking we could have a different menu layout for each interface, but that's not very desirable because we break consistency.

Also, we should probably have a confirmation window when the user opts to confirm, saying "you will buy X, sell Y, at a net (profit/loss) of N drunes."

What do you mean by this? If you're talking about the confirm interface, there is one. When the player selects confirm, they menu contents will change to a list of all marked buys, sells, and trades. There the player can review every individual transaction item in one list (meaning they don't have to go back to the buy/sell/trade menus and examine what they selected there) and they can even change buy/sell quantities there if they so desire, or "undo" the purchase/sale/trade of any particular transaction. The confirm window will have that information you said and ask for a final confirmation from the player before completing the transaction.

[rujasu]

1) Put the top two menus back into a single menu. I put a seperator line between the menu options and the finance text, and I think it looks good. The top menu is also a bit taller than it was in the last iteration.

2) Typed out the finance text instead of using one letter acronyms. I think it looks much better and less ambiguous.

Both good ideas.

3) Moved the bottom window up above the larger window and filled it with the shop name and greeting text.

I still don't agree with this. More on that later.

4) Buy price and sell price information is now rated with a coin system. In this draft the buy price is two coins and the sell price is four coins. The more coins, the better deal a shop is for buying/selling.

Generally looks good, though I'd tend to think more coins == more money, therefore higher price rather than better deal. That is to say, a high coin rating on both buy and sell would be expensive to buy from but also gives a high return for sold items.

5) Renamed the "Shop Details" title text to "Shop Summary". Still not sure if this text is needed at all.

I definitely think it's unnecessary.

6) Category icons are now in three columns instead of two. I showed what grayed-out (unavailable) categories would look like.

No real complaints about this.

Other draft improvements, not really related to the interface design:

1m) Got the right font for the menu/title text. Looks pretty good I think.

2m) Added the selection cursor in

3m) Shrunk the drunes (coins) icon to 50% in size and placed it at both ends of the top menu.

I think the small-caps font looks great here.

A) Is the top menu aesthetically pleasing? Should the coins images be centered? Increased to their original size? Removed entirely?

Top menu looks great. Undecided on the images.

B) Should the middle menu window containing the shop name/greeting text be moved back down to the bottom?

IMO, yes.

C) Are the relative window sizes appropriate? Should the entire menu area be increased beyond the 800x600 area limit?

Sizes are fine, menu area is the right size and shouldn't be changed.

I don't think I agree with you rujasu that the interface looks more balanced with the big window in the middle. I think this draft looks plenty balanced as the top window is small, the middle window a little bigger, and the bottom window dominating the majority of the screen area. Of course we have to keep in mind that this layout we're trying to share between all the different interfaces (buy/sell/trade). I failed to mention that originally. In these other interfaces the large window will typically contain a list, such as the list of wares for sale or the player's inventory. The medium size window will contain details about the current selection (properties, who can equip, etc). I think the medium window looks better above the large window for the root interface because it contains greeting text, which you would expect to be listed above other information, not below it. But I think this medium window's location will be fine for the other interfaces. Having the list of all wares/inventory on the bottom actually makes it easier to read than if it was in the middle, in my opinion.

I think it fits much better with the detail window at the bottom and the inventory list in the middle. The greeting text in the beginning is insignificant to me, it just provides something to fill out the otherwise empty window. Remember that the shopkeeper will generally have a line of dialog before the shop window opens, so it might even work better to use the detail window for some sort of instructional text, and replace "Shop Summary" with the name of the store.

What do you mean by this? If you're talking about the confirm interface, there is one. When the player selects confirm, they menu contents will change to a list of all marked buys, sells, and trades. There the player can review every individual transaction item in one list (meaning they don't have to go back to the buy/sell/trade menus and examine what they selected there) and they can even change buy/sell quantities there if they so desire, or "undo" the purchase/sale/trade of any particular transaction. The confirm window will have that information you said and ask for a final confirmation from the player before completing the transaction.

Okay, that should be fine.

[Roots]

Generally looks good, though I'd tend to think more coins == more money, therefore higher price rather than better deal. That is to say, a high coin rating on both buy and sell would be expensive to buy from but also gives a high return for sold items.

Good point, I didn't think about that. So would star images be a better indicator then? The more stars the better the deal. I used coins instead of stars because I thought it would be more relevant to the shop and less cliche since we see star ratings for everything nowadays. If there's a better indicator than coins or stars, I'd like to hear suggestions.

5) Renamed the "Shop Details" title text to "Shop Summary". Still not sure if this text is needed at all.

I definitely think it's unnecessary.

I think I agree with you there.

I think it fits much better with the detail window at the bottom and the inventory list in the middle. The greeting text in the beginning is insignificant to me, it just provides something to fill out the otherwise empty window. Remember that the shopkeeper will generally have a line of dialog before the shop window opens, so it might even work better to use the detail window for some sort of instructional text, and replace "Shop Summary" with the name of the store.

Alright I'll move the medium window back down. I think replacing "Shop Summary" with the name of the store is a good idea, and then the medium window can just contain the greeting text. Maybe we could also get the medium window to contain a portrait of the shop keeper? I'll be much more satisfied with the medium window on the bottom if the name of the shop is in the larger window.


I'm going to start working on drafts for buy/sell mode now and hope to have them posted later today. I'll make sure the medium size window is at the bottom for these drafts. I'll put together a third (hopefully final) draft for the root interface once I get some more feedback on it, particularly the coin images at the top and what would be a suitable image for indicating the shop's rating.

[rujasu]

Good point, I didn't think about that. So would star images be a better indicator then? The more stars the better the deal. I used coins instead of stars because I thought it would be more relevant to the shop and less cliche since we see star ratings for everything nowadays. If there's a better indicator than coins or stars, I'd like to hear suggestions.

I can't think of anything better than stars at the moment. It is cliche, but then again that's good because it's recognizable. Perhaps even re-inforced with a color-code, where one star is red, three is yellow, and five is green.

Alright I'll move the medium window back down. I think replacing "Shop Summary" with the name of the store is a good idea, and then the medium window can just contain the greeting text. Maybe we could also get the medium window to contain a portrait of the shop keeper? I'll be much more satisfied with the medium window on the bottom if the name of the shop is in the larger window.

Portraits? I'll be happy if we can find someone to make portraits for the main characters and the most important NPC's, at this point. Otherwise, generally agreed.

I'm going to start working on drafts for buy/sell mode now and hope to have them posted later today. I'll make sure the medium size window is at the bottom for these drafts. I'll put together a third (hopefully final) draft for the root interface once I get some more feedback on it, particularly the coin images at the top and what would be a suitable image for indicating the shop's rating.

Okay, sounds good.

[Roots]

I can't think of anything better than stars at the moment. It is cliche, but then again that's good because it's recognizable. Perhaps even re-inforced with a color-code, where one star is red, three is yellow, and five is green.

I like the color coding idea. It may just be providing redundant information to the player though (more stars == good, plus green == good)

Portraits? I'll be happy if we can find someone to make portraits for the main characters and the most important NPC's, at this point. Otherwise, generally agreed.

Of course I'm not suggesting we do a unique portrait for every shop keeper. But I thought we were going to have some generic silhoutte's done to substitute for portraits of less important characters in the game.

-----------

Here's my first take at a draft of the buy interface. The sell interface will look and act very much similar to the buy interface so I don't plan to make a separate draft for it. These things take serious time to put together.



Once again, point by point.

01: The only thing changed in this top window is that all the action options (Buy, Sell, Trade, Confirm, Leave) are replaced with only the text of the selected action. This isn't done in the code right now and I noticed that it was difficult to tell what interface you are in after you've entered it. This way makes it plainly clear.

02: This sub-windowed area contains the icon images for all of the viewable categories of wares sold. The grayed out icons could represent either the categories not currently selected, or the categories unavailable (e.g., if the shop doesn't sell shards then the shards category icon would be permanently grey).

03: This highlighted icon is the currently selected category icon and the category name. In this case, its weapons. When weapons is selected, the list on the right would only show the weapons available for sale (however this draft shows various categories in the list on the right, its not technically accurate in this sense).

04: This area of the large menu contains the list of wares available to be purchased along with some header title for the text. The Name field includes a 1/4 sized icon image of the ware as well as its name, given plenty of space so we can have very long names. Notice the cursor is pointing to Karlate Helmet and on the right side are scroll arrows, allowing us to display a virtually infinite sized list. Nine entries are viewable at one time. The list is ordered based on object ID, which we have designed in the game already to group like-objects and rank relative strengths.

05: Price should be fairly obvious. Stock is the amount available in stock at the store. Own is the quantity of that object already owned by the player, and Buy is the amount the player has indicated that they wish to purchase. Price numbers are unaltered digits while quantities are preceded with a lower case x.

06: The bottom medium window contains details about the selected entry. Here we see the name of the selected item replicated (this time in title text) and its full size icon. The Ox2 indicates that there are two sockets on this equipment for attaching shards.

07: This lists the four physical and metaphysical elements. Green up arrows over the elements represent an advantage for that element (in this case, the helmet has extra defense against fire and mauling damage). Likewise for red arrows. Elements with no effect are grayed out.

08: This space is blank. It should contain status icon images in the same manner as 07, but we do not yet have status icons. So I just left this as reserve space.

09: Sprites of characters in the party that indicate whether they can equip the selection or not. In this case, Claudius and Kyle can equip it but Laila can not (her sprite icon is grayed out). Claudius and Kyle's sprites will be animated in this case, but obviously I can't show you that with a static draft. Kyle already has this head gear equipped and this is indicated with a green letter E.

NOTE: I just realized I forgot to add a couple things in this draft. The base physical/metaphysical defense stats for the helmet (would go between 06 and 07) and a +/- stat indicator for the usable characters in 09.

-----------

Now on to the issues, of which there are many.

A) I'm not feeling comfortable with the category indicator in 02/03. The player uses the left select and right select to rotate through the categories and I was thinking that maybe the icons could likewise rotate in a circular fashion to indicate this switch. This custom animation would be a bit difficult though. I'm also wondering if unavailable categories (ie shop doesn't deal in X, Y, Z) should just not appear anywhere on the screen at all. Or perhaps unselected category icons can be made smaller. I don't know.

B) Along the lines of (A), what do we do when the "All" category is selected? Ungrey all category images? What should the category text say? "All Wares"?

C) The list box in 05 is too large. The scroll arrows and GUI cursor overlap with other visuals/text and it doesn't look good. I think the list size should be compressed to 8 viewable elements instead of 9 and give the GUI cursor enough room to work. This will probably mean taking more space from the side panel in 02/03.

D) The object details in 06-09 are context dependent. All weapons and armor will follow the draft format here, but items don't have elemental attributes, slots, or usable characters. Items will probably have just the name, icon, and text description, and shards will be somewhat similar I imagine.

E) For weapons and armor, there is simply not enough room in that window to display all the information the player may wish to know. We can't fit the text description and if we have any more than 5-6 characters in the party, we won't be able to show all of their sprites either. Not to mention with the small green/red arrows indicating element/status effects, its difficult to determine how large the effect is (remember there are four intensities for elemental/status effects).

-------

For problem E), I think the best solution is to display as much of the most (but not all) pertinent information we can in the lower window. If the player wishes to know more, they can hit confirm and the contents of the large window and bottom window will change to show every last detail. Those two windows combined should be enough space for us to display what we need. If anyone has a better idea, I'd like to hear it.

I'm a bit clueless on what to do with the category icons and window. Maybe we could make a "tabbed" interface on top of the large window with one tab for each category.I don't have any good ideas at the moment on this issue.

In general the problem's we face with this interface is space. We don't have enough of it to display everything that we'd like to. That's all I have for now.

[rujasu]

I like the color coding idea. It may just be providing redundant information to the player though (more stars == good, plus green == good)

Redundancy isn't a bad thing in this case -- it doesn't cost us real-estate to color-code, and it makes it easier to read.

Of course I'm not suggesting we do a unique portrait for every shop keeper. But I thought we were going to have some generic silhoutte's done to substitute for portraits of less important characters in the game.

Even if we do come up with silhouettes, I don't see much point in putting them in the shop screen. Again, you have an initial line of dialogue with the shopkeeper, so if he/she has a face image you'll see it then. I've never been shopping in an RPG and thought, "damn, this would be perfect if I could just see the shopkeeper's face." So I'd leave it off.

A) I'm not feeling comfortable with the category indicator in 02/03. The player uses the left select and right select to rotate through the categories and I was thinking that maybe the icons could likewise rotate in a circular fashion to indicate this switch. This custom animation would be a bit difficult though. I'm also wondering if unavailable categories (ie shop doesn't deal in X, Y, Z) should just not appear anywhere on the screen at all. Or perhaps unselected category icons can be made smaller. I don't know.

I'd make every one of those category icons smaller. There are a lot of icons on this screen, and the category icons are the least important up there. Honestly, I don't see the user using the L/R select feature all that much unless there are 20+ items on the list, and there shouldn't be that many. A circular animation seems like way too much work for way too little return. Maybe even have just one icon, and when you change categories do a basic horizontal scroll. I'm not entirely sure what would work best, honestly -- just something that isn't too distracting, I'd say.

B) Along the lines of (A), what do we do when the "All" category is selected? Ungrey all category images? What should the category text say? "All Wares"?

I guess that works. Keep in mind, that's probably what the user is going to see 99% of the time.

C) The list box in 05 is too large. The scroll arrows and GUI cursor overlap with other visuals/text and it doesn't look good. I think the list size should be compressed to 8 viewable elements instead of 9 and give the GUI cursor enough room to work. This will probably mean taking more space from the side panel in 02/03.

I'd say I'm on board with both of those suggestions, especially since I think that left hand column is already a bit large.

D) The object details in 06-09 are context dependent. All weapons and armor will follow the draft format here, but items don't have elemental attributes, slots, or usable characters. Items will probably have just the name, icon, and text description, and shards will be somewhat similar I imagine.

Agreed.

E) For weapons and armor, there is simply not enough room in that window to display all the information the player may wish to know. We can't fit the text description and if we have any more than 5-6 characters in the party, we won't be able to show all of their sprites either. Not to mention with the small green/red arrows indicating element/status effects, its difficult to determine how large the effect is (remember there are four intensities for elemental/status effects).

I'd definitely leave out the text description for weapons/armor. For characters, why not show the miniature portraits (like the ones used in battle) instead of the sprites? You'd be able to go to two rows that way, giving you room for 8-10 characters.

For problem E), I think the best solution is to display as much of the most (but not all) pertinent information we can in the lower window. If the player wishes to know more, they can hit confirm and the contents of the large window and bottom window will change to show every last detail. Those two windows combined should be enough space for us to display what we need. If anyone has a better idea, I'd like to hear it.

Sounds reasonable.

Again, thanks for doing this -- looks pretty nice.

[Roots]

I'd make every one of those category icons smaller. There are a lot of icons on this screen, and the category icons are the least important up there. Honestly, I don't see the user using the L/R select feature all that much unless there are 20+ items on the list, and there shouldn't be that many. A circular animation seems like way too much work for way too little return. Maybe even have just one icon, and when you change categories do a basic horizontal scroll. I'm not entirely sure what would work best, honestly -- just something that isn't too distracting, I'd say.

I agree. It really isn't necessary to have all possible category icons listed up there so in my working draft I just have a single icon that represents the current category. It looks much nicer and less cluttered so I think I'll stick with that unless someone comes up with a better solution. Should be easy to animate the icon and text changing when a new category is selected as well. Although I don't know what image to use to represent "All Wares". Should we have a separate image to represent that? I could also try making a small "stack" of category icons to represent all wares, but the "all" category is going to be used elsewhere I'm sure (menu mode) so I think we'd be better off having a specific icon for it. I can try producing one by combining some of our current icons.

As far as the user using this category feature, you may be right in that the player probably won't make use of it unless there is a very large number of wares in the list. They're much more likely to use this in the sell interface, where they could have dozens or even hundreds of objects in their inventory. So this feature is important and while we could cast it aside, it can be used to greatly ease the burden on the player when dealing with large object lists, which is greatly helpful (I speak from experience as a player).

I'd definitely leave out the text description for weapons/armor. For characters, why not show the miniature portraits (like the ones used in battle) instead of the sprites? You'd be able to go to two rows that way, giving you room for 8-10 characters.

i thought about that actually. Those portraits don't buy us much space. Their size is 45x45 pixels whereas sprites are 32x64. They are also harder to discern between the different characters and can't be animated like the sprites. (In Chrono Trigger the sprites were animated in shop menus when they could equip something and it looked really nice). I'll throw them up there in my next draft alongside the sprites and we can get a better idea of which is better.

[Roots]

Version #2 - Changes

1) Only one category icon is now visible at a time on the left side of the large menu window. I changed the text in the draft to "All Wares" to see how that would look, even though its still using the weapon category icon. I think it looks pretty good even though there's some unused space now.

2) Removed the narrow separator line between the object category and other fields. Since the category icon + text is in the middle with plenty of blank space surrounding it, I found that the separator line looked tacky and wasn't doing much. It looks much better without it.

3) List size is now reduced to 8 entries. Adjusted the list position. I also tried putting the scroll arrows in the middle of the list instead of at the far right end. I think I like it in the middle better, as there's more blank space surrounding the arrows and they are easier for the eyes to pick up.

4) Added the Phys + Meta ratings of the Karlate Helmet in the lower window. This is shorthand for "Physical defense" and "Metaphysical defense", and I think its fairly obvious what the numbers mean without writing all that out.

5) Put the elemental icons closer together and created a duplicate set intended to represent the location of the status icons instead of just leaving that space blank.

6) Put the sprites closer together and added the change in phys (+126) and meta (-40) below usable characters that don't already have the armor equipped. I used large numbers here to make sure that three digits plus a sign could fit reasonably well. I also changed the color of the E for equipped to white and made it a little smaller.

7) For comparison, grabbed mini face battle portraits to see how they would fare if we choose to replace them with the sprites.

-------

My thoughts.

A) I like how the large window looks now. I don't think I would change anything about it.

B) The lower window is a bit cluttered and could possibly use some more spacing between various information. Just a little though, because we want to provide all the info that we can.

C) I think the Equipped 'E' indicator would look nicer if it was a stylized icon instead of just plain text. Just a minor gripe, although a simple E certainly achieves what we want it to convey.

D) I definitely choose using the sprites over the portraits. In this draft I put 8 pixels of spacing between sprites, so Claudius + Laila's sprite take up 80 pixels of horizontal space and all of the vertical space. The portrait icons on the other hand take 90 pixels of horizontal space and all vertical space to convey the same information. Plus they can't be animated and are harder to associate with characters (IMO, because we're showing detailed faces in such a small area).

E) In this arrangement, I can fit in 9 sprites in this area, which isn't too bad (and is more than we could fit in with the portraits). I think we're not going to be able to do much better than that. Because i don't want something like this to arbitrarily limit the number of characters we can have in a party, we need a way to indicate that there are more characters to show with more status. I'm thinking of having a max of 8 sprites viewable in this area. If there are more than 8 in the party, there can be some sort of arrow or plus sign on the right side indicating such. Then the player can either hit the confirm key to bring up even more details about the selection, or maybe we can use another input command like "swap" or "menu" that will shuffle between sets of characters in the lower window. This is the best idea that I've thought of to solve this problem.

[Roots]

FYI: I'm starting to put these models into the code now. I realize that they're not finalized but I think they're close enough that only some minor tweaks will be made. I don't want to move on to the trade or confirm interface discussion yet either, as I haven't really put any thought into that yet.


A couple ideas popped into my head tonight while working on the root interface.

1) Maybe instead of the somewhat odd row/column configuration of category icons and text, we can instead arrange all icons in a single row and use a smaller font for the text, which would go below the icons. This would be a bit easier for the player to process visually since they will only have to scan left to right. If you guys think its worth a shot, I can put up a draft with this change and we can see how it would actually look.

2) In addition to the greeting text in the bottom window, what about also putting information on the current state of the transaction? Specifically I'm thinking total number of purchases, total number of sales, and total number of trades selected. Not entirely useful information, but it would fill up otherwise empty space.

[gorzuate]

You guys write a lot

For the root interface, I think the coin icons in the top window should be their normal size (or at least, let's see how it looks).

If a shop doesn't have a category, like leg armor, just don't show it all (instead of graying it out). It makes things less cluttered, and it's automatically implied they don't have anything in that category to buy. (Taking this particular example, could I sell leg armor to this shopkeeper, or would he not even accept it?)

For the shop's rating, stars will work for now (multicolored stars is overkill, IMHO), and if we ever come up with a better image it should be easily replaceable. I tried to think of something less cliché, but haven't yet.

Current state of the transaction in the root interface? Meh, if you like...


On the buy interface, the sprites do look better than the portraits. Here I think it's fine to gray out the sprites.
Ox2 is 2 slots for shards? Hmm... I wonder if the 'O' could be replaced by something more shard-like

[Roots]

You guys write a lot

That's how our design threads usually are. Go back and look at the discussion on the battle interface if you dare.

For the root interface, I think the coin icons in the top window should be their normal size (or at least, let's see how it looks).

I'll try it out in my next draft of the root interface, which I may do today or tomorrow.

If a shop doesn't have a category, like leg armor, just don't show it all (instead of graying it out). It makes things less cluttered, and it's automatically implied they don't have anything in that category to buy. (Taking this particular example, could I sell leg armor to this shopkeeper, or would he not even accept it?)

I think I agree with you here. I put them in gray initially because of the multi row/col format in which the are displayed in current drafts. If some entries were just "missing" there, it would look weird. I'll also work this into the next draft.

For the shop's rating, stars will work for now (multicolored stars is overkill, IMHO), and if we ever come up with a better image it should be easily replaceable. I tried to think of something less cliché, but haven't yet.

Agreed. If anything I think we can use a snazzy graphics engine effect to make them glow with more stars or something.

Current state of the transaction in the root interface? Meh, if you like...

You can't voice your opinion as "meh" and then not tell us how you'd like to see it.

On the buy interface, the sprites do look better than the portraits. Here I think it's fine to gray out the sprites.
Ox2 is 2 slots for shards? Hmm... I wonder if the 'O' could be replaced by something more shard-like

The little circle graphic is intended to represent a socket. It's similar to how Final Fantasy VII displayed their slots on their weapons and armor. The problem with putting a picture of a shard is that the player might confuse it for how many shards are equipped on the weapon/armor and not how many sockets there are.

[Roots]

Root Interface Draft v3



List of Changes

1) Made drunes icon images in the top menu 4x larger (they are now drawn at their original size)

2) Moved shop name to top of middle window and removed "Shop Summary" text

3) Replace coin indicators with stars. Placed graphic rating level below the corresponding text (Buy prices/Sell prices) instead of to the side.

4) Re-arranged category images to be in two row, four column configuration. Placed category text below icon instead of to its side.

5) Added a "Key Item" category. This is one of the object categories in the game, and while they can be bought they can never be sold. I forgot to add this in earlier drafts.

6) Moved greeting text to lower window.

7) Swapped position of middle and lower windows from previous draft version.

8) Removed all Junicode font text. Everything is now in Libertine.

Thoughts

A) I like the full-size drunes icons. I prefer them at this size compared to the smaller images from the previous draft.

B) I really like having corresponding text/graphics being positioned vertically rather than horizontally. Not only does it look better, but it will be easier to write the code to get these things aligned just right.

C) Yes, the unavailable categories are still grayed out in this image. I wanted to see what things would look like if we had all categories available in a shop.

D) If we go with not having available categories appear at all instead of graying them out as is done here, how should the available categories be drawn? Say for instance we have five: Items, Weapon, Head/Torso/Leg armor. Should the top row contain four categories and the bottom row contains only Leg Armor? Should Leg Armor be drawn centered on the row (between the draft's position of leg armor and shards), to the far left side (drawn where hand armor is located in this draft), or kept in its absolute position (where leg armor is already located in this draft)? I'm leaning toward the first option. It will be a little work to write the code for it, but I think it would look the best and be the most adaptable solution regardless of which categories are available.

E) The finance text in the top menu will have to span out further horizontally so that we can fit in larger numbers with less clutter. Other than that I think the top menu is pretty much perfect now.

[rujasu]

D) If we go with not having available categories appear at all instead of graying them out as is done here, how should the available categories be drawn? Say for instance we have five: Items, Weapon, Head/Torso/Leg armor. Should the top row contain four categories and the bottom row contains only Leg Armor? Should Leg Armor be drawn centered on the row (between the draft's position of leg armor and shards), to the far left side (drawn where hand armor is located in this draft), or kept in its absolute position (where leg armor is already located in this draft)? I'm leaning toward the first option. It will be a little work to write the code for it, but I think it would look the best and be the most adaptable solution regardless of which categories are available.

Personally, I'd go left-aligned rather than centered; centered doesn't quite seem natural to me in this case. It's a very minor issue though, and unless someone cares enough to make a fuss I'll leave that detail up to you.

Otherwise, this looks great. Looking forward to seeing it in game!

[gorzuate]

That's looking quite nice. I like the bigger the drunes icons.

With D), I agree with you about the first option looking best.

[Roots]

With respect to (D) in the last two posts, I went ahead and implemented the centered view. I tried it out with all combinations of different categories (1-8) and it looked great. I consider root interface finished now (not only in design, but in code as well). The only things I can foresee needing changes there are little polishing effects like maybe some animations and sounds. So now lets focus on the buy/sell interface. As a reminder buy/sell, are virtually identical in function and display. The only changes are a result of the fact that sell operates on the player's inventory instead of the shop's inventory, and of course we're selling instead of buying.

Buy Interface v3


Changes

1) Increased size of drunes in top window to the size we decided on

2) Swapped position of socket count and phys/meta ratings (I figured phys/meta was more important info, so it should be further to the left)

3) Changed elemental icons to the (much better) set that Jetryl made a while back.

4) Removed the character portraits since we decided using sprites was best

5) New icon image created to indicate if something is already equipped, instead of just a plain "E".

Thoughts

A) Don't like the equip icon? Then make something better after I add it to SVN later today

B) New elemental icon sizes are 25x25. They were 20x20 in the previous drafts.

C) Once again, I don't have status icons available so I just duplicated the elemental icons to represent where they can go.

D) If needed, I can squeeze in two more columns of status icons into the lower window and still have room. It will be cramped, but there will still be a little space between images.

----------------------------

Earlier we discussed how we wouldn't have enough room to display absolutely every piece of information about an object in the lower window. The solution was to allow the player to enter a command that would use both the middle and lower windows to display all information about the object. The draft below is my first shot at it.

Buy Detail Interface v3


Points of Interest

1) Effectively I decided to "swap" the contents of the middle and lower window from the original view and change draw orientations and positions slightly. The advantage to this is that in this view its still feasible for the player to increase/decrease quantity of the selected object.

2) We don't know how many status effects (and hence icons) will be in the game yet. I show 16 in this draft, which I think is a reasonable guess at the number.

3) The sprites and their stat variance/equip/usable status are drawn below the other stats in a single row that is centered on the screen. We can fit 19 sprites, maybe 20 sprites in this row, which should be plenty. I think planning for a max of 18 sprites is sufficient.

4) Below the sprites are two text boxes. The first contains the standard object summary text, providing a short description. Below that is the "lore" we've talked about before, where we provide a detailed explanation and history of the object and how it fits into the game's world and history.

5) In the lower window, notice that the category icon changed from the one representing all wares to the one representing head armor. The all wares category icon/text will never be viewed in this mode because we only display the category icon/text of the selected object. I couldn't fit the "Category" header text in there, so I just left it out.


Thoughts

A) My biggest concern is with the elemental/status icons. Its difficult to tell the intensity of the effect with the icons. Recall we have four levels of intensity in both directions (positive/negative). I was wondering if perhaps to the right of the icons which have a positive or negative effect I should write text further clarifying the level such as "+3", "-2", etc. Its easier to tell when there are a variety of intensities used (like in this draft) because you can compare icons relative to one another, but just having one or two icons alone may make it difficult. Or maybe I could draw a "legend" of intensities (draw all the arrow + box combinations without an inner icon). Here's the full set of elemental icons, for your consideration.



B) Another concern is the text summary and text lore so close to one another. Maybe a separator line is in order to make it clear that the two are different?

C) The lore may be long enough that it doesn't fit on the screen. I'm wondering if I can make use of the left/right select commands to "scroll" the middle window in case the contents are too large to fit in it?

D) Should the summary/lore text display be animated (with an option for the player to hit a key to finish the display), or should they appear instantly?

E) Another piece of information to consider adding is a range of market values. As you know shops have buy and sell ratings from 1 to 5 stars, effecting the buy/sell price of each object. For example, if the player is deciding whether or not to purchase a medium potion worth 140 drunes at a four star buy rating shop, it might be nice to show them the range of buy prices for that object so that they might consider waiting to find a cheaper shop.

The price ranges for an object with a base value of 100 drunes (same as the 140 drune potion in my example) would be as follows:
Buy: 110, 120, 130, 140, 150
Sell: 50, 60, 70, 80, 90

If the shop had a two star sell rating and a four start buy rating, the "140" and "60" would be highlighted in the display to indicate that's the shop's asking prices relative to the market.

This information could be put in the lower window where the name currently is. The name entry is redundant information since that is displayed in the middle window. So imagine "Name" being replaced with "Market Prices" and below that the buy/sell table.

Do you guys like this idea? I think I just sold myself on it after typing all this up and thinking about it. I vote for yes

[Roots]

I'm working on getting all the detailed info to show for items now and I'm not sure how to do it correctly. There are four properties unique to items that we need to display.

• Can it be used in battle?
• Can it be used outside of battle? (in map mode/menu mode)
• Does the item target (by default) allies or enemies?
• What is the type of target for the item? (Relevant only to items with battle use. Possibilities include: self, attack point, actor, party)

The way I'm intending to display this information is the following (I'm not doing a separate draft just for this)

• "Battle Use: " (checkmark or x graphic)
• "Map Use: " (checkmark or x graphic)
• "Target Group: " (ally or enemy text)
• "Target Type: " (text of the type of target)

My questions are as follows.

1) Is "Map Use" the best term to use? In the code we call it "menu use" referring to menu mode, but the player isn't going to know that by "menu" we specifically mean the menu in menu mode. There's lots of menus throughout the game so that wording is ambiguous.

2) For the text names of target types, should I refer to "actor" as "character" and "party" as "group"? Actor is the term we use in the code to refer to "character or enemy", but that term can be confusing to a player. Party may be an acceptable term but I'm not sure.

3) I'm not sure if "Target Group" and "Target Type" are good enough header descriptors. Can you think of anything better?


I didn't realize that items had all these properties. I may choose not to display the description text in the limited bottom window view after all.

[rujasu]

1) Is "Map Use" the best term to use? In the code we call it "menu use" referring to menu mode, but the player isn't going to know that by "menu" we specifically mean the menu in menu mode. There's lots of menus throughout the game so that wording is ambiguous.

Yeah, Map Use.

2) For the text names of target types, should I refer to "actor" as "character" and "party" as "group"? Actor is the term we use in the code to refer to "character or enemy", but that term can be confusing to a player. Party may be an acceptable term but I'm not sure.

3) I'm not sure if "Target Group" and "Target Type" are good enough header descriptors. Can you think of anything better?

I'd just consider the list of possible targets as follows:

Self
Ally
Enemy
All Allies
All Enemies

Only two of these should ever be a possibility (if something can target either an ally or an enemy, or if it can target all allies or all enemies). so just have something like:

TARGET: Ally, Enemy

or

TARGET: Self

or

TARGET: All Enemies

[Roots]

That's what the screen looks like when its selected to buy an item. I initially tried to put the item stats on the top of the window to the right of the item name, but there wasn't enough space to make it look nice, so I moved it down to its current position and set the description text slightly below that. I think it looks pretty good. And I went ahead and implemented rujasu's suggestion in the last post because it was a good one. I might move the check mark icon up slightly. There's also a red X icon I added to indicate the no use case.

For key items, which don't have these three properties, I'm going to move the description text up so that it is displayed in between the middle of where the two lines of text are for items. Then all that remains to figure out is shards, but I'm not going to do anything more than empty skeleton code for shards for this release since we don't have a solid design for shards in the game yet.