How do you want to see your order book?

And is it any different during an auction?

We are currently adding auction functionality to Vega Console (our in-house trading UI). Auctions exist at the beginning of a continuously trading market, or when prompted by price/liquidity monitoring. It will also be possible to propose markets that trade via a frequent batch auction.

In this thread I’d like to take a moment to reflect on how we display market depth…
What is it that people are trying to do when looking at market depth?
What should we show and how?

What do you look for in a good order book, what are your favourite or most-used features on order books on trading platforms? Is there anything you wish for but that no one’s made yet? Let me know!

What we have now

At the moment there are two ways you can see the order book: The depth chart shows cumulative volume, and the order book shows the volume at each price as well as cumulative volume. Note that the X axis on the depth chart is linear, whereas the order book only includes prices where there are orders.

The functionality we are considering

Features that we are keen on adding:

  • Aggregation or precision controls so that you can group orders together at different tick sizes. e.g. The market might quote to 5 decimal places but you may want to group at 2.
  • Visualising your orders, including your priority at a given price.
  • Fine control of the depth chart. At the moment you can zoom but you might want to see a specific distance from the mid price.
  • Trading from the order book. One click to place an aggressive limit order at a specific level. Left click to increase size of a passive order, right click to reduce… that sort of thing.
  • Clicking/tapping the depth chart to populate a deal ticket.
  • Include rows in the order book where there is 0 volume, so you get the same linear effect as the depth chart in terms of seeing support/resistance.
  • Customisation of all the things!

With the auction functionality we are considering:

  • What we do in an auction where the buy orders overlap with the sell orders.
  • How to show auction specific information like indicative uncrossing price / volume and auction end conditions etc.

What are you doing when looking at market depth?

Some broad-brush use cases that exist in typical continuous trading:

  • I want to see levels of support and resistance, this will help me price my order for the best price or make judgements about the way the market might move
  • I want to trade a certain volume and I want to know how my orders will affect the book. For example if there are 1,000 contracts at the best bid, what will my average fill price be if I did a market order for 5,000?
  • I want to see how close an order I’ve placed is to getting filled

And in an auction:

  • Will my order fill at uncrossing (i.e. when orders are matched)?
  • Where should I place my order for the best price before uncrossing or after uncrossing?
  • What will the book look like after the auction finishes?

And going a little deeper I think some people may be interested in details like:

  • Orders that are provided by liquidity providers vs. other traders
  • Who is placing these orders (as far as a pseudonymous system allows), are there a handful of large actors, etc?
  • Positions that may be closed out. The system will have to close them out with a matching order, what price will this be?
  • Visualising the order book over time including events like fills, edits and cancelations.
  • Other ways of visualising market depth in addition to our existing views

…although these might be challenges that we take on later or with ConsoleVR

I’ll post some initial design exploration shortly but let us know if you have anything to add, either in terms of features / functionality you’d like or an insight into how you use the state of the order book to inform your trading.

4 Likes

How do other trading UIs do it? Well, here is a collection of screenshots and annotations in a figma file and below are a few highlights…

Layout

The vertical order book is pretty typical, as is some sort of depth chart. In some cases you can see the bids and the asks next to each other. Occasionally you’ll get a depth visualisation on the candle chart. :nail_care:

Cumulative depth, depth at level, and including both

Interestingly there is real diversity over whether to show the volume at a given price or the total volume up to that price from the mid. Sometimes you get both, but rarely a visualisation of both.

There are a couple of places you have a choice. :+1:

Vega Console (below left) shows both “at price” and “cumulative”, it does so to the same scale. Sometimes this can hide significant variations in the volume at a given level. The mock up on the right also shows both but uses two different scales, so that the difference in volume between two levels is emphasised and you still get a sense of the cumulative scale… maybe :thinking:

Grouping/aggregation and prices with no orders

Aggregation or grouping is where volume is lumped together at certain price increments rather than having a row for every price. Different UIs allow you to group at different increments: Coinbase starts low then doubles, for example. Others appear to have a handful of hard coded increments, none (that I’ve seen) let you set your own.

Systems that group sometimes have the effect of being like a depth chart in that the vertical axis is smooth, without any gaps. On the left (below) the difference between the best bid and the 6th row is 2.2, but the best ask and the 6th row is 3.8. On the right aggregation means that each row is .50 from the next. You could also choose to show rows for prices that do not have any volume.

On many UIs the depth chart is open along with the orderbook, so you could argue they do different jobs. Although I’d respond that being able to click a price with no orders is handy if you’d rather have a fill earlier and pay .01 for it, or join the back of the queue at a better price. But traders are all different so customisation is often a good call.

Precision and “handles”

FX interfaces often show quotes with the more interesting part of the price in a larger font.

This is sometimes called a handle. I’ve not seen any crypto exchanges that do this although Coinbase Pro and Kraken both use typography to highlight significance. Note the use of light font weight and colour to knock back trailing zeros, or highlight where values are interestly different from preceding rows.

Navigation

The default view is typically centred on the mid price with a 50/50 split between buys and sells, but some offer a way to jump to either the buy or sell side.

A few allow you to scroll to see orders outside of the current view. I’ve not seen a way of indicating you’ve reached the end of the orders. On some exchanges you can’t place orders too far from the mid. Normally I’m not sure what is preventing me from seeing more, this or some API limitation.

Showing your orders

There are a few examples of platforms that show your orders in the book. Kraken does a good job of showing them on the candle and depth chart with little circles.

Coinbase has a column dedicated to showing your open order volume at a price. Trading technologies and ProRealtime have a “ladder” or ticket/order book or DOM style ticket (I had to Duck-Duck-Go it… “Depth Of Market”). This is all about placing, cancelling and editing orders in context of the market depth. :sunglasses:

Placing and editing orders

Most (if not all) allowed you to click on a price in the order book to populate a deal ticket with that price (some do the same thing for the candle and depth chart, too). Kraken’s little dots that show your orders are draggable. The DOM-style books above allow one-click order management without having to touch a separate deal ticket.

Huobi has this feature too, although I’m not 100% sure it is the same, it does appear to allow one-click execution. I assume the icon is referencing Pacman eating the book.

Priority and fill progress

On the crypto platforms, I’ve not seen anything that shows where my order sits in terms of priority at a particular price. The people who placed their limit orders at the same price as me but earlier will get filled before I do, and the people after me will have to wait.

Perhaps we are getting to the differences between pro and retail? I note that Trading Technologies reserves a whole column for fill info (not the same as priority, but if I’ve had some fill I know I’m first). Kraken shows its little dot on either the outside or inside of the depth chart before I make an order, a hint at the difference between joining the book and getting a fill, again not quite a priority. When exploring products built for traders (not by exchanges) I noticed a few things that might do this (above right). As well as some other visualisations that I’ve not dived into yet…

Hover

Few do anything with hover other than highlight the row you are on. Some provide a tooltip that I think is intended to help you understand what average fill you might get on an aggressive limit order order.

Kraken goes to town with hover, it highlights the same level in candle chart, depth chart and book. It also gives you some indicative fill info. :thumbs-up:

Communicating change

We don’t want Vega Console to feel like a slot machine (other exchanges might want that effect) but it might be good to give some sense of what is happening beyond just showing the raw numbers. Have a lot of orders moved, has the volume of buys just shifted, was it because of an aggressive order or a massive edit/cancel?

Here are 10 seconds of a few exchanges doing their thing (full size)…
change

Coinbase highlights cancels/decreases with grey and increases with Red/Green , Bitmex flash a background colour red/green show a value has changed. At the moment console flashes the parts of a value that have changed red/green depending on the change direction. Some do nothing, and I can see the case for this.

Few do anything in the order book to show matched trades, you could say that is the job of the trades history view, but I think there is potential in the mid/last trade indicator.

Using animation is a nice idea in theory, I’ve not not seen it done well. Perhaps animating the volume bars would work?

Viewing all these order books side by side makes me wonder about tools for comparing market depth across exchanges.

Terminology

IIRC there isn’t a single right answer about what the right word to use is in trading. Here is a quick list of words that are used in no particular order.

B.Order/Buy/Bid/Ask/Sell/S.Order

Size, Vol, Volume

Priority, time-priority

Market size, Price, My Size,

Total, Cumulative, Stack, Amount, Quant, Sum, Cost

Order types

If I were trading big money I might be paranoid about stop orders, I don’t want others to know my targets, but maybe I can’t afford to be close enough to the exchange that my bot will execute my order in time. Either way, I like this visualisation that included stop orders.

For Vega I think there is more potential here, for example showing pegged orders, or ones from liquidity providers, or doing something with the fact that open position data and margin levels will be public. Here is a nice article that looks to visualise “human traders” distinct from the robots (as well as some other interesting things). Bitmex has this auto deleverage thing, I think there is room for innovation here.

Auctions

The thing with auctions is that the bids overlap with the asks. We are going to have to do some overlapping. Hence two columns in the vertical view and an overlap in the depth chart.

What have I missed?

I’ve not spoken much about the depth chart (maybe a follow up post).

It would be great to hear from you. Do you have things that you like to see that I’ve not mentioned, is there anything that is especially important? Do you have any ideas of other ways it could be done? Is there something I am not thinking about?

3 Likes

Love this! :heart_eyes_cat: :muscle:

This is an AMAZING analysis of whats out there. I love the look into the difference between pro and retail platforms, as it’s important for Vega to work for pro-traders but also be accessible to everyone, and we’re also keen to work out where the pros just get better tools for visualising orders, positions, risk right now (or vice versa) and make sure that everyone gets those good tools. Making sure that we’re building a set of tools that help people do useful trading rather than encouraging gambling is something I’m really passionate about, and stuff like this is how that happens.

I personally love the FX style price grids with one click execution, and visualisations that combine price and depth in one place that you can also trade from. What do others think?

Hi Michael

Wow, what a great research!

I love this feature and I’ve used it many times while trading on decentralised exchanges.

Love this!

Same here, I did not see this in any crypto exchange. I kind of like it.

That’s such a good point. I think adding this indicator would be appreciated!

In my opinion, you should not shy away from making the user interface as pro as possible. Crypto trading communities are very competitive, they support each other with knowledge and resource sharing, but there is a rivalry there in terms of being the most “pro” trader. Giving them access to professional financial instruments validates them as traders. They also share info among themselves about new useful features they found on the exchanges so having distinctive features creates “word of mouth” marketing opportunities.

The “slot machine” look ( :rofl: ) is implemented by other exchanges to give traders “a feeling” of participating in a liquid and popular market. I’ve used DEXs with very illiquid markets where nothing would move on the screen and orders just sit there doing nothing… That’s also not the look you’d want to have (even if markets have large volumes). I like the ideas you have here.

2 Likes

@Marcin I wholeheartedly agree with you about not shying away from being pro. Vega is for real world trading, even beyond crypto derivatives and I’m so passionate about levelling the playing ground opening up and even collaboratively improving access to live data, pro tools etc. as I’ve witnessed the asymmetric advantage that more sophisticated players in markets get and I love that Vega as a network is the opposite of walled gardens and gatekeepered access.

2 Likes

@michael A lot of my friends are using Tradovate and loving it.

3 Likes

Thanks @Marcin Looks promising. I’m going to have a go now.

1 Like