Greedy Goblin

Thursday, March 23, 2017

Market UI without typing against mistakes

In every game the market UI is a long table full of numbers. You must scroll and find the one you want to accept. You can easily get lost between hundreds of 1-2 item orders. But the horrors start when you want to set up a new order. The new order interface is usually on a different window, so you first have to check the existing orders, memorize the price you want to make and type it into the proper window. A mistype can be very expensive. The more user unfriendly the interface is, the more people won't bother and just click "OK" on the first option, making traders very rich and them frustrated.

I saw worse and better implementations (Albion Online has outright horrible), but all of them are such multi-column tables that are several pages long. And all of them need lot of typing without mistype or you can lose a lot of currency with a click. Instead, I designed a market UI where you don't have to type at all (after you selected the item) and it's practically impossible to make a mistake. This is the buying verstion, which combines simple buy and setting up buy order:
  • The blue arrows are sell orders. Their position tells their price and their size tells their volume. You can click on any of them to select and then you get an information page and an option to buy that order. There is a clickable volume field where you can type how much you want to buy. All volume fields on the interface are the same. If you want to buy more than the order maximum the "Buy this" button greys out and the volume field turns red.
  • The red arrows are existing buy orders, you can click them for information too.
  • The huge, unselectable arrows on the two ends are showing the volume of offscale orders. The scale must be centered on the relevant field, otherwise it will be rendered unusable by a few extreme orders. However those arrows inform you that orders exists outside of the scale. If you are unhappy with the automatic scale, you can move it left and right with the side arrows on the bottom numerical scale or zoom in and out with the middle tools and with proper hotkeys.
  • The gray arrows are highest significant buy order and lowest significant sell order on nearby markets. The information upon selecting has location instead of issuer and no option to buy them
  • The dark blue arrow is your own sell order, if you select it, you have "Cancel order" instead of "Buy this".
  • The huge unselectable green arrow is the traded volume and price at the last day that informs you about the state of the market.
  • The red selection tool, marked by the green star is the cheapest instant buy element. Its left arm is on the cheapest sell order, the right arm moves automatically as you adjust the volume. You can do it by rolling the mouse wheel or clicking any volume field and typing if you insist. The selection tool enlarges enough to cover enough orders to buy the needed volume. Below the tool there is an information field where you can see the volume and the totals and a buy button to buy the selected items.
  • The black arrow is your possible buy order. Its size represent the volume, it's the same as every other volume fields. So when you roll the mouse, this arrow grows together with the cheapest instant buy selector. If you click anywhere, the arrow follows you, except it can't go higher than the right arm of the instant buy selector, as it would be stupid to set up a buy order that's more expensive than instant buy. If you click on any existing buy orders, your arrow jumps 1s above it. There is a field to set up exact price, it's needed when the market is empty so you can't move in relation of other order. You can finalize the buy order by clicking the button on its information field.
Selling items uses the same interface, except the selection tool is blue; it's above the slider and span over buy orders; its information field is above the tool, the button is blue and say "Sell". You have a possible sell order arrow above the slider with blue "Set up sell order" button and when you select a sell order, it jumps 1s below it. When you select a buy order, you get the option to sell to that order. Since buy and sell are different color and upside down, you can't mix them up.

You can't place wrong order by accident. The instant buy/sell selection tool gives a limit on one side, if you make mistake on the other side (try to sell 10x higher than you mean), it would visually be out of scale. If you'd input 10x higher volume, you'd get a huge arrow and huge selection tool, dominating the field.

I will offer this interface design to the Albion devs, but any game dev is free to use it.


Anonymous said...

where do i see the names of the traders i am buying from?
do 1000 orders x 1 item @same price show up as 1000 arrows or a single arrow?
if seller sells 1 order x 1000 items can a buyer buy a fraction of that trade?

Smokeman said...

I like it! I like it a lot!

There is more that needs to be shown, like the equilibrium price (Which should be centered) but the base concept is seriously solid. I would replace the arrows with lines (Same info, smaller footprint)

But this is a hell of a start.

Gevlon said...

Good ideas, I modify the pictures today.

Esteban said...

Very nice. Can't go wrong with a simulated analog dial.

And it allows for some cool overlays of historical data for the more advanced user.

Anonymous said...

Might work better to have a graph instead of distinct arrows or lines, with peaks and valleys to represent how much or little of a commodity is available at a given price. That way it would be easier to see things at a glance, and you wouldn't need to click so accurately if there's lots of orders clustered around a given price. All listed goods (or buy orders) would just merge together. It would be less personal, and give less of an impression of how many people were selling/buying at a time, which could be an advantage or a disadvantage depending on how you view it. You also wouldn't have to set things in specific stack-sizes, and people could just buy however much they wanted from the items listed. Just click at a given price, then move a slider to select the amount.

Similarly, having the ability to zoom in or out might be helpful, probably to 2-3 specific levels. 1x, 5x, and 10x maybe. It would probably also be useful to have a market history available, maybe again in a few specific levels. Current (where you can buy and sell), last hour, and last day. Something along those lines. It would be a lot of extra functionality, and give actual market traders good information, but still only add 2-4 buttons to the UI, and require no typing.

dobablo said...

I like the GW2 simple interface all that is greatly aided by having a single global market.

Anonymous said...

Some remarks:
1/In the proposal you setup a range to buy items. Why not setup a range to sell the items instead of 1 price for all the items in the stack.(first item cheaper then the last one)
2/A range selection of on the buy orders to quickly sell your stack might also be handy.
3/The interface will work great for items where a lot are available, things like ores. But might not work if the variety is big think of "green items" of WOW

Gevlon said...

********************************** Update **************************************

The post was rewritten and the UI upgraded due to feedback. Issuer information and direct sale added. Buy order and simple buy merged.

I stick to arrows because line would even go too high (100x bigger: 100x higher). The arrow grows in two dimension (100x bigger: 10x higher, 10x wider) while still have a small tip to show the price.

Kobeathris said...

The Guild Wars 2 Market is the best I have seen, you can check it out with a free account (I think). You can only buy from the lowest price listed, or setup a buy order for lower, you can only sell to the highest listed, or setup a sell order for higher. I don't think you can setup a sell order or buy order for less than the price the item would sell to a vendor. If you want to buy 1000 of a thing, it just buys you 1000, using up the lowest priced sell orders first and going up until you have your 1000 things. Same with buy orders, if you are selling, it uses up the highest priced buy orders, until your stuff is gone. I don't think it shows an average, but you can scroll up and down on the prices, and usually see a "wall" of like 100,000 items for sale or for purchase so you can estimate how quickly an item is moving. You can buy and sell from anywhere, but have to go to the trader to pick up items you bought or money you received. Selling just poofs the item from your bags to the market.

Alessandro said...

Fantastic post!

The "Auction House" of games usually sucks in terms of UI, your proposal would be a game-changer in any game market...

S Riojas said...

That would be a much better UI than what Albion has...

Actually, any UI is better than what Albion has in terms of markets.