New Shop UI

[Crissa]

This isn't meant as a rant. The new shop UI is pretty, has some nice features and potential for some good layout. The sections are numbered in the image. But the old shop UI was weirdly efficient, so you have shoes to live up to! Many of these will have been mentioned elsewhere, I just wanted to put all the things I thought about in one place. Also, to give a better visual idea of what I was referring to.

First general bug is that the fonts in this window do not change when you change other NPC and UI fonts. The icons and fonts probably should follow the same rules as the other ones in the game; if they're 50% bigger than my inventory icons, that's okay, but right now on my screen they're 100% bigger.

http://crissa.twu.net/projectgorgon-shopui-annotated.png

1) This is where the meat is; the items we want to buy. This section is really given the short shift in this layout: It does what it should, expanding when the window expands, but is very crowded by the other frames.

. a) The buy icon is nice and big and regular. I like it.

. b) The spacing is too tall. It's wider even than double-spaced type. This should be reduced to at most double-spaced.

. c) The price is listed in a small font. It's bold, that's great, but the price is what we're looking for.

. d) '1 for' Since most items are singular, this is really unnecessary unless it's part of the stack. It shouldn't take up its own line, forcing a double double white space, should it?

.. -) Perhaps it could be appended to the prices, like '57 for 5' and placed on a single line.

.. -) Or maybe place the batch number in the icon, like you'd see in your inventory.

. e) Bug: When you hold shift, the prices and UI doesn't change or respond. (old UI function)

. f) Bug: When you buy something, the entire list is resorted. That makes finding where you were a pain. (old UI function)


2) Calculator.

. a) This section is unnecessary much of the time. Really we only need it to show when we've selected an item from the list, when we've pressed a modifier key to buy a larger or smaller amount of a moused over item. The old UI did this well.

. b) Bug: This section displays errors when in the consignment screen as if you'd buy the whole stack.

. c) This section doesn't change when you press shift to buy the entire stack.

. d) This section has unnecessary whitespace at the sides that it could be used more efficiently.

. e) The buy icon is weirdly smaller than for section 1.

. f) It duplicates the information in section 3. If it displays my cash on hand, that's not needed in section 3. If section 3 shows vendor allowance, I don't need it in section 2.


3) The tail.

. a) When I'm selling, I usually don't need to know my cash on hand.

. b) When I'm buying, I really don't need to know the vendor's cash on hand.

. c) This area really could say something better like 'how much more this vendor will buy from you' or something more detailed than 'vendor'.

. d) 'Unusuable'. If we're going to have ways to sort, this is a good place to put it. But what about having an item level range or a drop-down to select the skills we're interested in seeing listed? I really don't care that I can use level 15 Fire Gear when I'm looking for high level Unarmed gear. Level 15 gear is just as unusable in that situation as stuff I can't wear.


4) Tabs.

. a) The tabs have inconsistent widths.

. b) The labels are very low contrast. The grey is especially hard to see and pick out.

. c) The consignment tab shows regardless of whether there are anything in it or whether the vendor even takes consignments.

. d) The spacing is again, more than double spaced.


5) Tag line.

. a) There is a strange amount of excess whitespace here.

. b) It's not centered the same way the tabs are.

. c) It's not controlled by NPC font size.

. d) It's in the biggest font, but is the least important thing displayed.


6) Window title.

. a) It doesn't say the NPC's name. I really wish it said that instead of 'vendor'. I know it's the vendor window. (Actually, most of the window titles are superfluous.)

[Silvonis]

Thanks for your thoughts. As a side note, as I read this and as I have read your previous thoughts, your opinion(s) tend to come across in a way that you think things are broken or wrong when simply your opinion on the cosmetics is different. Another thing is that the new UI replaces the old UI completely, so when you say something worked ‘XYZ’ before and now it doesn’t – that doesn’t necessary mean it is broken or wrong.

What’s the point of saying this? Well, I think it is important to remember that your opinion on the cosmetics or new UI setup can be different from ours, but that does not mean either opinion is ‘wrong or bad’ and the other is ‘right or good’. It can be off putting to read feedback that gives that type of vibe and I just wanted to let you know that’s how it comes across sometimes.

No hard feelings or anything – just sharing my perspective. Thanks for being involved and supporting us through development.

[Hood]

quite nit-picky and annoying. 2 years of development on this new GUI and you sound ungrateful for what we have and for all the effort that went into it. its one thing to suggest future optimizations, but this is all subjective changes to cosmetic things that many enjoy.

This is just my rude inconsiderate opinion though.

[Tagamogi]

Crissa - thanks for the screenshot with labels! Some things in the shop window have been looking fuzzily "not quite right" to me and it helps to have a picture in front of me.

Picking on a few things in your post:





1) This is where the meat is; the items we want to buy. ...
. a) The buy icon is nice and big and regular. I like it.

b) The spacing is too tall. It's wider even than double-spaced type. This should be reduced to at most double-spaced.

Yes, I really like the buy icon as well. Someone complained in another thread that it looked too much like a modern shopping cart, but I think it's pretty. I like the colors, I suppose. :)

I don't see how you can reduce the space between the items to buy without also reducing the icon size. The icons look about the perfect size to me, so I think the spacing is fine.



. c) The price is listed in a small font. It's bold, that's great, but the price is what we're looking for.

. d) '1 for' Since most items are singular, this is really unnecessary unless it's part of the stack. It shouldn't take up its own line, forcing a double double white space, should it?

.. -) Perhaps it could be appended to the prices, like '57 for 5' and placed on a single line.

.. -) Or maybe place the batch number in the icon, like you'd see in your inventory.

My preference would be to just get rid of the "5 for xxx" deals and always have the vendor sell a single item. That would allow more space to make the price bigger. It would also eliminate my new pet peeve of wanting exactly 3 sugar, buying 5 sugar from Fainor and then having to search through my inventory to sell 2 sugar back to him. ;)



. e) Bug: When you hold shift, the prices and UI doesn't change or respond. (old UI function)

I don't know if it's a bug, but it's definitely a feature I miss. It seems faster to me to shift-click on an item and have a popup where I can start typing my desired quantity immediately than to click on an item, move my mouse up, find the rather tiny quantity window to click in and then start typing while at the same time moving my eyes down again to make sure I'm still buying the item I'd intended. It may just be that I'm used to the way the old UI worked, though.



2) Calculator.

I think this is where the bulk of my awkwardness with the shop window comes from. I think I'd prefer the buy calculation to show up in the left corrner and to move the quantity text field to the right in order to be closer to "It's a deal", which would reduce the mouse movement journeys needed for buying multiple items.

Or, I'd be happy to eliminate the whole quantity selection at the top, really. I'd much rather have a list of items, each with a "Buy 1" and a "Buy more than 1" button that would allow me to enter a quantity right next to the item I'm trying to buy.



3) The tail.

. a) This section is unnecessary much of the time. Really we only need it to show when we've selected an item from the list, when we've pressed a modifier key to buy a larger or smaller amount of a moused over item. The old UI did this well.

I think this part is fine really. And showing the favor may actually be relevant if you cannot buy certain items because of your current favor level, or if you are trying to sell stuff and the vendor is almost out of cash, you may want to see how close you are to the next favor level.



6) Window title.

. a) It doesn't say the NPC's name. I really wish it said that instead of 'vendor'.

That's a pretty neat idea. I could argue I know which NPC I'm buying from, too, but I like the personalization idea. Maybe both titles could be combined like "Joeh's Shop" if we really want to get fancy...

Edit: In case, I'm being unclear, I like the new UI a lot and I'm quite appreciative of the development efforts that have gone into it. I also like nit-picking and over-analyzing, but I certainly have no problem with my nit-picky comments getting ignored as appropriate.

[Panties]

I agree with all of the points Crissa mentioned here, especially the bit about the tag line (5) being way too large and insignificant.

I think what made the old UI so "weirdly efficient" was that it was mostly straight to the point. A lot of stuff on the new vendor UI is spiffy, but it really only seems to subtract from my vendor browsing experience. In my opinion, the vendor UI would be much better without sections 2, 3, 5 and 6. It should also default to the shop menu when interacting with a vendor.

Oh yeah, the vendor favor meter shouldn't be in the shop menu either.

[Tagamogi]

It should also default to the shop menu when interacting with a vendor.



I'd actually really dislike that. As far as I'm concerned, the NPCs are my friends first and someone to buy my spare junk second, and I'd miss having the initial Talk page if it went away.

[Crissa]

Crissa - thanks for the screenshot with labels! Some things in the shop window have been looking fuzzily "not quite right" to me and it helps to have a picture in front of me.
Thanks, Tagamogi!

I think the new UI is quite pretty, too! ^-^ But I figured I should be specific (and get it all out at once) rather than just mumble and whine about it. I wanted it to be something so that others could see what I was talking about, and then (like with the number) have something we can discuss!


Yes, I really like the buy icon as well. Someone complained in another thread that it looked too much like a modern shopping cart, but I think it's pretty. I like the colors, I suppose. :)

I don't see how you can reduce the space between the items to buy without also reducing the icon size. The icons look about the perfect size to me, so I think the spacing is fine.
Well, sometimes features are in opposition to each other. Something which makes text readable in a list doesn't necessarily translate to an icon size and vice versa. More than double-space is less readable than double-spaced; but bigger more square icons are more readable than icons that are flattened. This is where I should link to some studies, but it might be a situation where my spouse would tell me 'Fish pay attention to the moon?' Anyhow, I just liked that it was the same size as out other icons, not some tiny button that was a unique size. (WoW used a coins icon, PG is using a cart icon; whatever reads)

The icons on the item list (section #1 (https://forum.projectgorgon.com/usertag.php?do=list&action=hash&hash=1) ) should probably follow the same rules as the icons in our inventory and control bars. They could, perhaps, be a ratio larger if that's what's visually desired, but right now, they don't follow the UI customization rules at all. I really expected them to; Imean, these are the same icons after all! The text for the item names could big larger, or be split with the price beneath;




Sword, masterwork
. . . . . . . . . . . . . . . (space until end of line) . . 57sversus bigger font with fewer characters or smaller icons


Sword, masterwork . . . . . . . . . . . . . . . (space until end of line) . . 57s

In fact, this is usually called full vs compact; Discord offers this and both Mac and Windows folders have these view options it's so standard a thing. Of course, my preference is for bigger text when I can get it (I have astigmatism now) but I still like the efficiency of compact. Especially in long lists. If I need to look closer, that's what mouseover and selecting is for, right?

Since there is a section #2, you could have a double-height icon there and then half or normal heigh icons in the list (section #1). There's lots of ways to do this to make things flow better ^-^


My preference would be to just get rid of the "5 for xxx" deals...
Well, then we'd have to introduce fractional pricing some other way. Because that's what this is; Fainor's prices would either display wrong because of rounding or he'd have to sell his salt for more per unit. Personally, that's what I use the number-enter pane (section #2 (https://forum.projectgorgon.com/usertag.php?do=list&action=hash&hash=2) ) for.


I don't know if it's a bug, but it's definitely a feature I miss. It seems faster to me to shift-click on an item and have a popup where I can start typing my desired quantity immediately than to click on an item, move my mouse up, find the rather tiny quantity window to click in and then start typing while at the same time moving my eyes down again to make sure I'm still buying the item I'd intended. It may just be that I'm used to the way the old UI worked, though.Well... Yes and yes. Yes, because it was a chorded click to jump so it was quicker than two separate clicks. And yes, because an installed base teaches people to work a certain way, so they'll necessarily become better at the system they're using.


I think this is where the bulk of my awkwardness with the shop window comes from. I think I'd prefer the buy calculation to show up in the left corrner and to move the quantity text field to the right in order to be closer to "It's a deal", which would reduce the mouse movement journeys needed for buying multiple items.

Or, I'd be happy to eliminate the whole quantity selection at the top, really. I'd much rather have a list of items, each with a "Buy 1" and a "Buy more than 1" button that would allow me to enter a quantity right next to the item I'm trying to buy.
Those are both very good ideas, too.

My preference is for chorded clicks. Generally, the best UI has multiple paths of different obviousness to do the same task. An obvious way, so that novice (or less invested) users can access the UI and then a quick way, so experienced (or more invested) users can speed up their access to be less tedious.


And showing the favor may actually be relevant if you cannot buy certain items because of your current favor level, or if you are trying to sell stuff and the vendor is almost out of cash, you may want to see how close you are to the next favor level.
Section #4 (https://forum.projectgorgon.com/usertag.php?do=list&action=hash&hash=4) ? That's the thing; it's taking up a line which could display another item. Think of the number of times you needed to know your favor versus the needing to scroll to find another item on the list. Which is higher?

Personally, I never care about the favor, unless I'm doing something which can change it. If I only saw it on the gift-receipt pane and the greeting pane, that'd be fine.

What if it were a mouseover result? If you mouse over the vender allowance or an item/skill you can't buy via favor, it would tell you your favor level? That might be more intuitive for new players, making a direct connection between favor and the things which change by it.


That's a pretty neat idea. I could argue I know which NPC I'm buying from, too, but I like the personalization idea. Maybe both titles could be combined like "Joeh's Shop" if we really want to get fancy...
Section #6 (https://forum.projectgorgon.com/usertag.php?do=list&action=hash&hash=6) ...Actually I forget the name of who I'm speaking to all the time. Right now I have the window set so their name from the target window just peers over the top but really most of the window titles seem superfluous.

I use a mac, so I'm pretty used to windows all being moveable by just clicking anywhere on them. That's how I always set up my popups and dialogs in windows. Heck, back in windows 3 I specifically bought software that made everything into dialogs and trays that did that instead of windows and folders.


...so when you say something worked ‘XYZ’ before and now it doesn’t...
I'm comparing expectation and functionality. The new shop UI is prettier, but that doesn't mean it's better. I'm of the opinion that you should show as much as you can - but at the same time, you shouldn't show any more than is necessary. Right now the shop UI doesn't follow the same rules for customization that other UIs in the new set do; it doesn't follow the same rules for the icons that other icons do; the NPC speech is in a different font; and it repeats information making the window more crowded and less accessible to someone less invested in the game.

It's not a big deal. This is alpha, and critiques can get long. Lots of things are expected to change. That's why the feedback. ^-^


This is just my rude inconsiderate opinion though.
Which is why I prefaced my post that it was not, in fact, a rant, but poking at the details I felt made the UI less usable. The new UI is quite a bit prettier, brighter, and does have all the information we need. There are a bunch of really cool new windows - like the target window and the mini map - which are really cool. It just does it in a less efficient way (like the shop UI) in some places than before. That's why the title of the thread is 'Shop UI', not 'The UI sucks and PG should burn!' @-@

I've been making UIs and giving software feedback for thirty years. This isn't just art; there are actual ups and downs to choosing different UI elements and how they're displayed. Sometimes observations even in conflict: Like the readability of a list vs the size of icons; triple spaced font bad, big squarish icons good.

The point in bug and usability reporting is to say what's identified, and then say what the expected behavior is. My expected behavior may not be yours: But that's the point of saying 'this does X, I expected y, I feel z'. That's the core of bug reporting. This is alpha, right?

[Tagamogi]

This is where I should link to some studies, but it might be a situation where my spouse would tell me 'Fish pay attention to the moon?'


Well, if they are ocean fish, paying attention to the moon could allow them to predict tides and thus help them avoid being caught on beaches at low tides... But not being a fish, I'm probably ok skipping studies for now.

Anyway, I think a lot of how the shop UI is perceived may come down to screensize. Here's a picture of how mine looks at 1900x1200:
https://i.imgur.com/554QJjR.png

One very important difference between your UI and mine is that mine easily displays 8 items in secton 1 all at once. I wouldn't want my list to be any longer than that, so having sections 3 and 4 at the end works perfectly for me.

I think you could also make an argument that having section 4/favor level adds a nice element of consistency to the UI since it's present in all NPC dialog options. But no, I don't actually look at it much, and I'd be fine if it either disappeared or changed into a mouseover like you suggested. I'm just also fine the way it currently is. :)

In section 1/item list, it looks to me like the text is just centered in the middle of the line and the line height is determined by the icon size. On my screen at least it looks like the icon is the same height as my inventory icons, and the text looks the same size as my other text size selections to me. So, I'd prefer that the game keeps my selected sizes over arbitrarily picking icon and font sizes on its own in an effort to improve line spacing... If this section should be more adjustable, I think it would make more sense to have custom-size icons + text for the shop UI, and continue centering the text in the center of the line the way it currently is. You could then pick smaller icons + larger font for it in order to get a more compact display. Of course, then we'd end up with a lot of custom options which gets confusing too.



My preference is for chorded clicks. Generally, the best UI has multiple paths of different obviousness to do the same task. An obvious way, so that novice (or less invested) users can access the UI and then a quick way, so experienced (or more invested) users can speed up their access to be less tedious.

Yes, my preference is for shift-click too. I was just thinking though: I have a coworker who is functionally one-handed, and he'd never be able to do a shift-click since that requires two hands working together. So, the new UI is actually much more accessible in this case. I'd still like the shift-click to also work, but I can live with the way it is. (For now. ;) )



I use a mac, so I'm pretty used to windows all being moveable by just clicking anywhere on them. That's how I always set up my popups and dialogs in windows.

Not sure we are talking about the same thing here but that is actually something I find confusing about the new UI in general: You usually have to click on the title bar in order to move a window or bring it to the foreground. I keep expecting I can click anywhere in the window instead and then I wonder why I can't get my inventory window to pop to the foreground...



Well, then we'd have to introduce fractional pricing some other way. Because that's what this is; Fainor's prices would either display wrong because of rounding or he'd have to sell his salt for more per unit. Personally, that's what I use the number-enter pane (section #2 ) for.

The quantity entry does not currently work for items that are sold in stacks. If Fainor offers 5 sugar for 7 councils and you enter a 3 in the quantity field in section 2, then as soon as you click out of the quantity entry field, the UI will helpfully change the quantity to 15 for you since you obviously intended to buy 3 stacks of 5 items. :p

I'm hopeful that's a bug and not an intended feature, but that got me thinking whether the whole item stack buying thing is really needed anyway. The main stacked items that come to my mind are sugar, salt, flour and fuel oil. Fuel oil is already exactly 3 councils each, and I can't say I care whether any of the food items cost one council more or less if I buy them individually. Even in the old UI, I preferred buying my salt unstacked from Velkort.

[Crissa]

Well, if they are ocean fish, paying attention to the moon could allow them to predict tides and thus help them avoid being caught on beaches at low tides... But not being a fish, I'm probably ok skipping studies for now.It's a line from a song about salmon, who in fact do pay attention to the moon. Actually, even coral pay attention to the moon.


Anyway, I think a lot of how the shop UI is perceived may come down to screensize.Yes. Mine is the default size I received. I could easily stretch it out vertically to display eight, and that's what I did. Still, having the same details on all of the NPC pages seems to me to defeat the idea of having pages at all.



In section 1/item list, it looks to me like the text is just centered in the middle of the line and the line height is determined by the icon size. Yes. I think in general the text height should be no less than 1/2 the icon height. Actually, slightly bigger depending upon the gutters of the icons.


Yes, my preference is for shift-click too. I was just thinking though: I have a coworker who is functionally one-handed, and he'd never be able to do a shift-click since that requires two hands working together.That's why you should always have more than one way to do it. The more paths, the more accessible to both new players and old. If lots of things use shift-click, your friend could assign a modifier key to the mouse; I've done that with games before.

The new UI only has the one way to do things, so it's actually less accessible. A long ramp can be used by wheelchairs and able pedestrians equally... But it's actually more difficult for those with crutches and distance limitations. So there should be options. ^-^


The quantity entry does not currently work for items that are sold in stacks. If Fainor offers 5 sugar for 7 councils and you enter a 3 in the quantity field in section 2, then as soon as you click out of the quantity entry field, the UI will helpfully change the quantity to 15 for you since you obviously intended to buy 3 stacks of 5 items. :p That seems like a bug. x-x