[5.5][dot5enko] Exchange Header

[wmbutler]

We are planning to integrate TradingView for the charting, but I wanted to go ahead and submit a UX for the header which includes how we will display key metrics. This will help tradingview integration to at least have a design to draw inspiration from. I stole this look from GDAX largely. Principle changes over our existing layout allow for a full row of information without letting the order book cut into the left edge. The new design also stresses large information with small labels.

• [ ] Remove all up and down arrows
• [ ] All fonts are Roboto Regular (except 24hr, user Roboto Bold)
• [ ] User can click on the 24hour volume to toggle between each asset

Current

Proposed

[dot5enko]

@wmbutler i claim this. Arrow in the latest price block is quite informative, do you really want to remove it? maybe we can make it like 24h price - with appropriate colors?

[Xeldal]

suggestions: 1) replace "24 hour price" with "24 hour change"

2) anywhere there is a "price" (ie "settlement price") where we currently list the quote over the base (ie bitUSD/BTS). I suggest only listing the quote (ie bitUSD) like you have in the example for "latest trade price". I haven't check every exchange in the universe but I haven't found a single one that lists the full fraction (quote/base). A couple reasons come to mind. A trading pair is listed BASE/QUOTE, if on the same page you're seeing lots of the opposite arrangement(ie QUOTE/BASE) like you do on our exchange. It can be confusing as to whether you have the exchange oriented the right way or if its flipped. Another reason is that the price of something almost always presumes that the base = 1 and so the full fraction isn't necessary.

The price is how much of the QUOTE currency is necessary for 1 of the BASE.

so: old-> Settlement Price = 0.640118 bitUSD/BTS new-> Settlement Price = 0.640118 bitUSD

The same should be applied throughout the entire exchange page.

[wmbutler]

• [ ] I agree with both of @Xeldal points here.

[dot5enko]

ok. start working

[wmbutler]

@wmbutler i claim this. Arrow in the latest price block is quite informative, do you really want to remove it? maybe we can make it like 24h price - with appropriate colors?

• [ ] Use green/red pulse color anywhere a price change arrow indicator might have been before.

[wmbutler]

@dot5enko can you have this completed by Jan 4?

[dot5enko]

@wmbutler i'm working on it whole day. Still have few issues, try to accomplish them today

[wmbutler]

Happy to increase the hours if needed.

[dot5enko]

@wmbutler would be great if we can add two hours here.

[wmbutler]

Done. Any progress? Would love to see some screen shots. Also wanted to make sure that the div goes all the way across which would push My Market / Find Markets down as well.

[dot5enko]

@wmbutler hm... i haven't seen that from your screen shot, so now its only pushes chart and order list. But seems it would be not that hard to meet your requirements. This is the current state of header. Trying to complete it today

[dot5enko]

@wmbutler not yet ready with price pulsation and market depth/chart switch button

[wmbutler]

Looking awesome

• [ ] +/- sign on 24 hr change indicator
• [ ] The seocnd screenshot is better. Remember, there can be a lot of items added to that bar when assets are settled, etc.

[dot5enko]

yup, they're all stylized in that way: settle price, margin call prices. i'll try to make screenshota with all of them

[wmbutler]

• [ ] Add a line across the bottom of your header that helps delineate the header from the rest of the lower elements. Just something to add definition.

[dot5enko]

@wmbutler how about this border? i got color from bottom of "my markets"

[wmbutler]

• [ ] Maybe stick with a neutral gray or something? I was thinking something that just bridges my markets to left side. Remember, we are going to get fancier with this once we go to tradingview so this just needs to get us through to that.

[dot5enko]

ok. no problem)

[dot5enko]

[wmbutler]

Schwing!

[dot5enko]

forget to make a screenshot with margin call price on it. Here is a simulated behaviour with appropriate colors: / Got it. Prices are crazy today!

[dot5enko]

@wmbutler check last modifications

Volume asset change on click:

stats pulsation (look at a latest price):

If everything is ok, i'll make a PR