Shopping Interface

A discussion area for general design issues that staff would like detailed feedback on.

Moderator: Staff

User avatar
Roots
Dictator
Posts: 8660
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Re: Shopping Interface

Postby Roots » Mon Jan 18, 2010 9:48 pm

Its time to start making some decisions about the confirm interface before I start coding it (coding will likely start later this week). The confirm interface is basically the equivalent of the "check out" page you might see for a store's online website. We want to present the player with the list of items they have chosen to purchase/sell/trade, give them a chance to change quantities of those selections, and allow them to finalize the transaction. With that said, here's my first draft of this interface.

Image

Point by point

01: The top menu is the same as always. Only now it says "Confirm".

02: These are the transaction types. Whichever one of these is marked ("Buy" in this example) determines what shows up in (03). The user can use commands (left select/right select perhaps?) to cycle through these and display the lists of what they have marked to buy, sell, and trade.

03: This is the list of objects to buy. The player can use the left/right arrows to change the quantity to buy here. This includes allowing the user to set the quantity to x0, effectively removing it from the cart. The sell list will look very similar. The trade list will be a bit different. I imagine 4 entries in this list instead of 8, where each entry has the sprite of the character the trade is for, the two pieces of equipment being traded, and their relevant price and other info.

04: This is a total of all object purchases. "Buys: 13, 8 unique" means that the player has marked 13 things to buy, and 8 of those are unique items (so multiple quantities of some objects are being purchased here). Same idea with Sells. Trades lists the number of trade transactions marked as well as the number of unique characters that are receiving a trade. So in this case, maybe Claudius is trading 4 pieces of equipment, Kyle is trading 2, and Laila is trading 1.

05: This is the action prompt and options where the player chooses what to do. Purchase will finalize the transaction. Continue shopping returns to the root interface. Empty Cart unmarks every planned purchase, sale, and trade.

--------

Thoughts

A) This draft is just a rough first stab to get the discussion going. I don't like it very much and I think there's a lot of room for improvement. But it pretty much has all of the visual data that I thought we should display in this interface.

B) I don't like how I show the transaction lists (Buy/Sell/Trade) in (02). It doesn't look very clean to me and I don't think the use of the check mark is a good way to indicate the active view. Maybe it should look/work more like the buy interface's category display? But we don't have icons to represent "buy", "sell", and "trade" so without those it will just be text that says the current transaction list view. Hmm :huh:

C) I don't like the words "Buys" or "Sells" in (04). I couldn't think of another good shorthand that meant "Number of objects to buy". Additionally I don't think the "#, # unique" text looks good. Maybe if it was a bit more like "# Objects, # Unique" it would be better because it would be more balanced? Saying objects would also make it more clear that this part of the window is listing the number of objects to buy/sell/trade with just a single word.

D) In (05) I don't like any of the names of the action options that I wrote down there, but I couldn't think of anything better. I really want to avoid the use of the word "cart" because its so dot-com era/web-ish. They probably don't even have carts in this era in this type of store!

E) Empty Cart is a dangerous option to have in there because it can erase several minutes of careful shopping with one key. (The difference between continue and empty is a single arrow key stroke). I think if empty cart is selected, the question + text in (05) should change to a confirmation that the user really wants to perform that action.


Look forward to hearing what everyone else thinks. :)
Image
rujasu
Developer
Posts: 758
Joined: Sun Feb 25, 2007 5:40 am
Location: Maryland, USA

Re: Shopping Interface

Postby rujasu » Mon Jan 18, 2010 10:27 pm

Initial thoughts:

The player shouldn't generally have to buy a key item. I guess there could be an occasional situation where this happens, but don't put too much thought into the interface for it. And, of course, key items should never be allowed to be sold -- this makes me think they shouldn't be bought either.

"Empty Cart" should be "Clear Order" or something like that.

Buys/Sells could be Purchases/Sales, maybe?

I don't have any other ideas at the moment, though.
User avatar
Roots
Dictator
Posts: 8660
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Re: Shopping Interface

Postby Roots » Mon Jan 18, 2010 10:35 pm

rujasu wrote:The player shouldn't generally have to buy a key item. I guess there could be an occasional situation where this happens, but don't put too much thought into the interface for it. And, of course, key items should never be allowed to be sold -- this makes me think they shouldn't be bought either.


Yes key items will never be allowed to be sold in shops. There usually won't be any available to buy either (maybe never), but I wanted to leave the option open to buy them. Who knows, maybe we have a key item in the game where the player has to travel around the world collecting multiple magic stones or something, some of which are found for sale in shops. Don't worry there's only about 10 lines of code needed to add support for key items in the object viewer.

-----

As for your other suggestions, I think they're all better than what I initially put in the draft.
Image
User avatar
gorzuate
Developer
Posts: 2575
Joined: Thu Jun 17, 2004 3:03 am
Location: Hermosa Beach, CA
Contact:

Re: Shopping Interface

Postby gorzuate » Tue Jan 19, 2010 12:22 am

How about instead of using the check mark to designate what you're looking at we use glowing text? So in this case, "Buy" would be glowing. Just an idea.
Image
User avatar
Roots
Dictator
Posts: 8660
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Re: Shopping Interface

Postby Roots » Tue Jan 19, 2010 2:10 am

gorzuate wrote:How about instead of using the check mark to designate what you're looking at we use glowing text? So in this case, "Buy" would be glowing. Just an idea.


I don't know how to make text "glow". I'm sure its possible to do (and maybe there's even partial support for it already in there), but I don't know. What about if I colored the text of the active type in yellow and made that text noticeably bigger? That would do the trick I think. Perhaps not the most visually aesthetic solution, but pretty good and easy to do with what we've got available right now. I think I'll go with that unless someone suggests a better idea.
Image
User avatar
Roots
Dictator
Posts: 8660
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Re: Shopping Interface

Postby Roots » Tue Jan 19, 2010 6:05 am

I forgot to mention that the leave interface is going to be nearly identical to the confirm interface. The only difference is the question to the player will change to something like "Exit the shop?" with a Yes/No/Go to Confim set of responses. The leave interface only appears if the player tries to leave the shop when they have any marked purchases/sales/trades. If there's no marks, then when the player selects "leave" from the root interface, shop mode exits without prompting the player with this interface. Just wanted to make it clear that this confirm interface is also going to be used in the leave interface.
Image
User avatar
Roots
Dictator
Posts: 8660
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Re: Shopping Interface

Postby Roots » Thu Jan 21, 2010 3:50 am

I think for the confirm interface I'm going to move the content at 04 to share with 02. I'll rename the titles of 02 as "Purchases", "Sales", and "Trades" and left align the text. Below each title I'll list the amount in two lines: "# count" and "# unique" in a smaller font. The selected view category title will be highlighted in yellow. For 05, I'm going to change the question to "Will that be all?" since the current question of "Finalize this purchase?" really begets a yes/no answer and we provide more options than just that. I'll also add an option in 05 for "Modify Order", which will move the selection cursor up to the object list.
Image
User avatar
Roots
Dictator
Posts: 8660
Joined: Wed Jun 16, 2004 6:07 pm
Location: Austin TX
Contact:

Re: Shopping Interface

Postby Roots » Tue Jan 26, 2010 8:58 am

The changes I've listed above are implemented in my local changes and they look pretty good. The only problem I had was fitting all the confirm options in the lower window in a single row (the options are: "Modify Order", "Clear Order", "Complete Transaction", and "Continue Shopping"). I tried putting them in a 2 row by 2 column formation and it looked better, but still not as nice and simple as a single row. I decided to remove the "Continue Shopping" option from the list and instead hitting the "cancel" key brings the user back to the root inteface. This works the same in the buy and sell interfaces (there's no explicit command for going back to the root interface; you just hit cancel). So I think its acceptable. I should have a commit tomorrow with the confirm interface mostly complete.

-----

Now for the leave interface I'm wondering what the prompt/options to the player should be there. Remember the leave interface only appears if the user tries to leave the shop when they have marked transactions. The leave interface allows the player to view those transactions, but not to modify them in any way. The text below is my first stab at what it should say. I'm thinking four options: one which allows the player to scroll through the transaction lists (buy/sell/trade), one which returns to the root interface, one which sends the player directly to the confirm interface (so the player can complete the transaction), and one which actually leaves the shop. The "Confirm" option isn't really necessary since the player can enter the confirm interface after selecting the "return" option. I don't know...any suggestions for improvement?


"You still have marked transactions. Are you sure you want to leave the shop?"

: "View Transactions"; "Return" ; "Confirm" ; "Leave"
Image

Return to “Design”

Who is online

Users browsing this forum: Google [Bot] and 4 guests