Reworking the wallet trading interface

[Xeldal]

The reason I'm trying to keep that left side relatively unoccupied is that I need to take into account smaller screens and the possibility of many open orders. Because the left side is fixed, you don't get scrolling if something overflows so it really needs to stay compact.

I think those are valid concerns. 
If the open orders table is scrollable it shouldn't matter to much how many there are, right?
with those accordion type drawers on a small screen you could close them all if you wanted or only open the one you needed.

I would shoot for not having any scrolling for the full page, just individual table scrolls.   

Here's another idea.  how about a very thin long button across the bottom, when clicked pulls the screen down to reveal all the big clunky tables with all columns included.  When the user scrolls back up to the main graph it re locks the screen and prevents scrolling until that long thin button is clicked again.  It could be some kind of overlay popup drawer also if thats easier .  Just brainstorming.

[svk]

The reason I'm trying to keep that left side relatively unoccupied is that I need to take into account smaller screens and the possibility of many open orders. Because the left side is fixed, you don't get scrolling if something overflows so it really needs to stay compact.

[Xeldal]

Perhaps an accordion style expanding sections for the left side depth graph, open orders, and order book,  if you feel like its getting too cramped.

That way under the Buy/Sell/Short section  if you only want to look at your open orders and don't care about the depth graph and order book you can collapse the ones you don't need and the whole side would be devoted to whatever you do want to see. 

They could all be open, or all be closed and any combination in between.

[yellowecho]

i'll working on that!

Cool- and the new flash screen you're working on looks stellar !

[cass]

I'd prefer the layout proposed by Xeldal.. I like the depth chart aligning with the buy and sell orders (more intuitive), a smaller open orders section, and larger graph.

Here we go.  this is my preferred.

i'll working on that!

[yellowecho]

I'd prefer the layout proposed by Xeldal.. I like the depth chart aligning with the buy and sell orders (more intuitive), a smaller open orders section, and larger graph.

Here we go.  this is my preferred.

[svk]

OK I've got some more work in on this today, here's what I've got so far:



I've kept the open orders on the left, but they're now combined meaning you get asks, bids and shorts in the same table, colorcoded using the same colors as always. Interest rates and collateral for shorts are shown in a tooltip.

Covers are now shown inside the tab on the left, with collateral and interest columns removed and placed in a tooltip instead.

The upper bar with the latest price etc is now fixed and always visible even if you need to scroll.

As you can see the price history has more than 10 days now, I changed that early on but forgot to tell you.

Next step now is to try to replace the highcharts chart with techan.js

[mdj]

from the design point of view i'll completely revamp GUI ... started with splash ... jsut playing for now ... but will polish all pages within the GUI over the next time!

https://bitshares.org/labs/ui/ui-splash-revamp-with-animate.mp4

Love it, nice work cass!

[cass]

from the design point of view i'll completely revamp GUI ... started with splash ... jsut playing for now ... but will polish all pages within the GUI over the next time!

https://bitshares.org/labs/ui/ui-splash-revamp-with-animate.mp4

[xiahui135]

A question: do we consider integrate some bridges or gateway to the client? Just a little work, and we will get a much smooth withdraw and deposit experience.

[Xeldal]

So it's starting to sink in for me that traders like their interface crowded!

I originally wanted to put the order history on the right like Xeldal and yellowecho have done, but felt there was not enough space. Are we really ok with only providing the quantity and price for the order history?

Empty space is wasted space that could have been given to the chart.

I think the best approach here is to make every effort to condense the data, provide as much of the important data as possible and leave the rest either to a popup tool tip or an entirely different page.

For all data sets, including history, the most relevant data is price and volume, and maybe time.  if your going to show time. use simple format like 14:23 , not "it happened roughly 2 hours ago" .  the latter is way too wordy and takes up too much space.   If I really want to see all the extra info related to history or whatever I can hover over the entry or view another page with all available data. 

I'd prefer the trading page feel like a HUD,  packed full of data but ultra streamlined and condensed.  The focus is the chart, everything else should be out of the way.  And on that note please please please, do not make a hover tool tip popup for the chart.  Those pop-up HLOC things drive me crazy.   HLOC data is important but it should not cover the viewable chart.  It should be static and off chart.  bitcoinwisdom.com does this well.

If the depth chart really isn't that important we can probably either provide a switch between it and the price chart, with the price chart as default, or make a small one like xeldal did.

One thing you guys are forgetting about is the list of open orders, which is below the buy/sell/short/cover tabs. Don't you want that visible at all times? If not we could make a modal for confirmation, but like troglodactyl said that will remove the possibility to short and buy to yourself at the same time.

It should definitively be viewable at all times, or at least a drawer or popup.... i guess it doesn't matter  so long as its small.  Its in all my drawups.  The problem with the current setup and why the popup was desirable imo is that the open orders were off screen, so for some time I wasn't even aware I was creating orders, I just thought the button was broken.  The open orders section doesn't need to be all that big either but you've got some extra room in most of these layouts so may as well use it. Change open sell orders / open buy orders ... to just Open Orders.    For a detailed breakdown the user can either hover over the order or go to another page with all available data listed if it doesn't all fit in the layout.

Yunbi has an example short compact open orders window.  https://yunbi.com/markets/btsbtc

The moveable grids etc are awesome, no matter what design we make its not going to please everyone.  Grids are great so long as we get the data column inclusion right.  Perhaps there could also be some way to define what data columns are included in each element.   and allow adjusting column width...  sounds like a lot of extra work though.

[cass]

Best if people can drag and drop the elements/panels to anywhere and any size as she/he want, and save as her/his favorite theme, and can switch among themes easily 

this would be awesome yes!!!

[yellowecho]

http://gridster.net/?utm_source=angular-js.in&utm_medium=website&utm_campaign=content-curation
http://gridster.net/demos/resize-limits.html

wow wow wow


BTW .. this was my original intend on august last year when i prepared the GUI screendesign for 2.0 wallet interface...

How difficult would this be to implement on the current client?

[ssjpts]

great jobs!!!

[abit]

Best if people can drag and drop the elements/panels to anywhere and any size as she/he want, and save as her/his favorite theme, and can switch among themes easily