Author Topic: Reworking the wallet trading interface  (Read 22554 times)

0 Members and 1 Guest are viewing this topic.

Xeldal

  • Guest
Heres another rough layout.



with this layout you could potentially make the right column and the left column popout drawers that you could push out of the way to really maximize the viewable chart.

The "order history" on the right could also be tabbed with "Your Order history"

The tabs on the top left are getting kind of cramped, there's probably a better way to do that. 

Offline mdj

  • Full Member
  • ***
  • Posts: 192
    • View Profile
  • BitShares: mdj
Thanks for the input Xeldal. I've been thinking of replacing the price history chart with this: http://techanjs.org/

I guess that's more like what you'd want? I'm not really a trader, what kind of indicators would you like to see added? MACD? Moving averages? Interactive trendlines? Percentage axis?

Here's an example of what that library can do:

http://bl.ocks.org/andredumas/edf630690c10b89be390

Oh yes yes please that chart is sooo much nicer than the current one :)
Candles are nice but I like the ability to turn them off too.

Xeldal

  • Guest
Thanks for the input Xeldal. I've been thinking of replacing the price history chart with this: http://techanjs.org/

I guess that's more like what you'd want? I'm not really a trader, what kind of indicators would you like to see added? MACD? Moving averages? Interactive trendlines? Percentage axis?

Here's an example of what that library can do:

http://bl.ocks.org/andredumas/edf630690c10b89be390

Yeah that package seems better at a glance. Though I'm not seeing any way to change the period / interval ..   (the time period each candle represents)  which is one of my biggest gripes. 
Our current package only has zoom, where you set the entire viewable range, which is not ideal for technical traders because many rely on a specific known candle period.  You can figure it out by counting the viewable candles but that's annoying.   So scrolling and zoom are nice features but if you can't set the period (interval) there not so great.

My biggest issue with the current chart is that it only has like 7 days of history.

Bitcoinwisdom.com is a good example of getting it right.  They have a very nice charting package.  Looks a lot like  http://www.modulusglobal.com/products/trading-platforms/m4-html5/     but IDK

As far as  indicators anything beyond the standard Simple moving average,  MACD, volume, stochastics and maybe bollinger bands....  and you start appealing to a much smaller crowd and may not be worth the effort at this point.  Its great if they have other indicators but not entirely necessary.  Being able to draw simple lines and perhaps Fibonacci elements are a great plus as well.
   

Offline yellowecho

Quote from: Xeldal
A good improvement.  I'd personally prefer a different layout though.

I think the depth graph and trade history sections are too big and/or too prominent.

The chart, although in its current form is pretty useless, once redone/upgraded, should be front and center and should occupy as much screen real-estate as possible.

Heres another idea.


Also,  although not in the above pic,  the last traded price should be set apart made bigger more featured and highlighted in some way. 
Consider that most mainstream trading clients often don't have lvl2 data or depth graph.  They just have a chart, the last traded price and the most relevant bid and ask.  I'm not saying we don't need/want them.  Just saying that they are not as important as the chart and last price etc.

 +5% on all the suggestions.  It's similar to the layout on Bitstamp which I also prefer:  https://www.bitstamp.net/market/tradeview/
My only alteration would be to put the OPEN orders in a tab next to COVER.  Then I'd probably move the depth graph to the left and put a shorting-specific graph (depth, margins, etc) to the right to maximize real estate.


Quote from: svk
Thanks for the input Xeldal. I've been thinking of replacing the price history chart with this: http://techanjs.org/

I guess that's more like what you'd want? I'm not really a trader, what kind of indicators would you like to see added? MACD? Moving averages? Interactive trendlines? Percentage axis?

Here's an example of what that library can do:

http://bl.ocks.org/andredumas/edf630690c10b89be390

Yeah, that's a much better chart!!
696c6f766562726f776e696573

Offline svk

Thanks for the input Xeldal. I've been thinking of replacing the price history chart with this: http://techanjs.org/

I guess that's more like what you'd want? I'm not really a trader, what kind of indicators would you like to see added? MACD? Moving averages? Interactive trendlines? Percentage axis?

Here's an example of what that library can do:

http://bl.ocks.org/andredumas/edf630690c10b89be390
Worker: dev.bitsharesblocks

Xeldal

  • Guest
A good improvement.  I'd personally prefer a different layout though.

I think the depth graph and trade history sections are too big and/or too prominent.

The chart, although in its current form is pretty useless, once redone/upgraded, should be front and center and should occupy as much screen real-estate as possible.

Heres another idea.


Also,  although not in the above pic,  the last traded price should be set apart made bigger more featured and highlighted in some way. 
Consider that most mainstream trading clients often don't have lvl2 data or depth graph.  They just have a chart, the last traded price and the most relevant bid and ask.  I'm not saying we don't need/want them.  Just saying that they are not as important as the chart and last price etc.

Offline cass

  • Hero Member
  • *****
  • Posts: 4311
  • /(┬.┬)\
    • View Profile
Yes :) looks really cleaned up and well structured!  +5%
BTW - pinged you via skype!
« Last Edit: March 30, 2015, 10:04:03 am by cass »
█║▌║║█  - - -  The quieter you become, the more you are able to hear  - - -  █║▌║║█

Offline svk

Another day, another iteration! I'm quite happy with this version, it looks nice and clean and is much more usable than the original, so I hope we can merge this to develop soon. I'm not sure the combined bids and asks arrays are getting updated properly however, maybe @valzav can have a look at that. Here are some more screenshots:





Worker: dev.bitsharesblocks

Xeldal

  • Guest
I played around a bit with the layout . 
Got rid of alot of dead space,
put trade interface next to bid/ask,
made chart bigger,
got rid of extra information from history that could be a tool tip pop up if necessary. 
made bid/ask on a single scroller,
moved the buy/sell button and active account name in trading tab. 
removed repetitive section titles,
stacked column heading to conserve space.    What do you think?

Offline speedy

  • Hero Member
  • *****
  • Posts: 1160
    • View Profile
  • BitShares: speedy
Can it show the entire chart history, along with async loading to zoom in via dragging the mouse?

Highcharts supports this: http://www.highcharts.com/stock/demo/lazy-loading
« Last Edit: March 21, 2015, 03:38:37 pm by speedy »

Offline kaibakker

Love it!! I also would like to see the transaction-history to be flipped with the open orders. :)

Offline xeroc

  • Board Moderator
  • Hero Member
  • *****
  • Posts: 12922
  • ChainSquad GmbH
    • View Profile
    • ChainSquad GmbH
  • BitShares: xeroc
  • GitHub: xeroc
Can you feel the spirit of decentralized development and coders being #paidbyprotocol?

My eyes get wet by looking at this thread .. +5%!

Offline abit

  • Committee member
  • Hero Member
  • *
  • Posts: 4664
    • View Profile
    • Abit's Hive Blog
  • BitShares: abit
  • GitHub: abitmore
Thanks for all the feedback everyone! I've kept working on this yesterday and today, and now have a workable version combining what I had with some of your ideas. I hope you'll recognize it Arhag ;)



All orders are now grouped together, shorts with sells and buys with covers (covers not yet implemented). Shorts are color-coded blue, buys green, sells red.

Clicking on "Account orders history" replaces the blockchain orders with your personal orders.

Volume, high, low and change are for the current day.

Clicking on the "Margin calls" or "Shorts" button makes the respective tables visible one level below the current tables. Inverting the market switches the buttons correctly.

Clicking on the "Cover" tab replaces the orders history table with the open margin orders table, I had to put it there due to space issues.

For the courageous you can check it out by pulling the branch from github as always.
I think it could be better if the 'order books' field and 'new orders' field are closer, so people don't need to move eyes/mouse across the screen, it's useful especially when you implemented the 'click and fill order form' feature (another click needed for submit) in the future.
« Last Edit: March 21, 2015, 03:10:14 am by abit »
BitShares committee member: abit
BitShares witness: in.abit

Offline arhag

  • Hero Member
  • *****
  • Posts: 1214
    • View Profile
    • My posts on Steem
  • BitShares: arhag
  • GitHub: arhag
Thanks for all the feedback everyone! I've kept working on this yesterday and today, and now have a workable version combining what I had with some of your ideas. I hope you'll recognize it Arhag ;)



All orders are now grouped together, shorts with sells and buys with covers (covers not yet implemented). Shorts are color-coded blue, buys green, sells red.

Clicking on "Account orders history" replaces the blockchain orders with your personal orders.

Volume, high, low and change are for the current day.

Clicking on the "Margin calls" or "Shorts" button makes the respective tables visible one level below the current tables. Inverting the market switches the buttons correctly.

Clicking on the "Cover" tab replaces the orders history table with the open margin orders table, I had to put it there due to space issues.

For the courageous you can check it out by pulling the branch from github as always.

Nice job!

Can you include other screenshots like what it looks like when you flip the market or when you press the "Margin calls" or "Shorts" buttons.

Also, I think you should allow the left column to change width as necessary to fit the tables (so that the open margin orders table can appear under the Cover tab), and  just push the other columns to the right (meaning allow for horizontal scroll on smaller screens). In that case, I think it would be better to switch the middle (price history) column with the right (market depth) column, because as Shentist said it is the more important information especially when you are ready to buy and sell. And, it would be nice if the left column could be a drawer that you could hide and pull out as desired. On smaller screens you could see the market depth and price history columns, and then when you are ready to place or cancel orders, you can pull out the drawer which might push the price history column slightly off-screen (it could be reached via horizontal scrolling though). When you are done you can again hide the drawer and see the full market depth and price history columns in the browser window. And on larger screens, the drawer could be left open and all three columns would be visible at all times.

Edit:
Also, I would really like to see the following under the "BitUSD : BTS" label:
Code: [Select]
Show quantity in [ BitUSD |v]  Show price in [ BTS/BitUSD |v]
Where the [ ... |v] are drop down boxes.

The first drop down box would have two classes of items. The first class is the Base class, which in this case would include BTS as well potentially other SI variations of BTS units such as kBTS (these other options other than the base unit would have to be manually specified per asset type). The second class is the Quote class, which in this case would include BitUSD as well as its other potential (manually specified) SI variations. Changing the quantity selection would make replacements everywhere a quantity field is shown in the page which includes the boxes in the Buy, Sell, Short, Cover tabs, the Buy and Sell tables, "Blockchain Orders History" table, "Account Orders History" table, "Open * Orders" tables, "Margin Orders" table, "Short Orders" table, the vertical axis of the volume bar charts under the price history chart, the vertical axis of the market depth chart, and the Volume label.

Each class of items would have a default unit choice. The default selection to display the quantity fields would be the default unit choice within the Base class. So in a "BitUSD : BTS" market the default quantity display selection would be the default choice in the BTS class (perhaps kBTS would be a good default in this class). In the "BTS : BitUSD" marekt the default quantity display selection would be the default choice in the BitUSD class (perhaps just sticking with BitUSD would be a good default in this class).

The second drop down box would have various items for different units of a Base/Quote price (thus BTS/BitUSD in the "BitUSD : BTS" market). Inverting the prices would require flipping the market. However, the drop down would allow displaying the price in different units within this Base/Quote price class. There would always be the typical option (in this case BTS/BitUSD or BitUSD/BTS), but other options could be manually added for each market. For example, in the "BTS : BitUSD" market one might add BitUSD/kBTS unit as an option. And in fact, that might be chosen as the default price unit in the "BTS : BitUSD" market since the prices (currently) look nicer in BitUSD/kBTS (for example the price feed right now in the "BTS : BitUSD" market is around 8.08 BitUSD/kBTS). Changing the price selection would make replacements everywhere a price field is shown in the page which includes the boxes in the Buy, Sell, Short, Cover tabs, the Buy and Sell tables, "Blockchain Orders History" table, "Account Orders History" table, "Open * Orders" tables, "Margin Orders" table, "Short Orders" table,  the vertical axis of the price history chart, the horizontal axis of the market depth chart, and the High, Low, Latest Price, and Call Price labels.

A few other things.

All non-editable quantity fields should show the same number of decimal places everywhere (with proper rounding) and all non-editable price fields should show the same number of decimal places everywhere (with proper rounding). Right now the prices in the tables have 3 decimal places while the prices in the labels at the top have 4 decimal places. Even worse, the volume label is displayed in BTS (and so is the market depth chart vertical axis) while all other quantity fields are in BitUSD. In my opinion these should all be the same unit (as described above) and also the number of decimal places in the Volume label at the top should be the same as the decimal places in quantity fields in the tables. However, clicking on a particular order from the Buy and Sell tables may fill in prices and quantities at a higher level of precision (perhaps in the maximum precision of the asset) in the fields of the Buy/Sell/Short box. Also the detailed information shown in the tooltip when hovering over any table item (or even the labels at the top) can show the quantities and prices with higher precision (perhaps in the maximum precision of the asset for quantity values)

I think the market label at the top ("BitUSD : BTS") should make both the Quote and Base asset hyperlinks that send the user to the page specific about the asset. This would be something like the "Asset Info" tab of the asset on bitsharesblocks.com.

Finally, you should change the color of the "Shorts" button to blue to match with color of the prices of short orders in the table below it. And you should change the color of the "Margin calls" button to something other than green, red, or blue so that it is not confused with regular buy or sell orders or with short orders. This should be the same color as the color of the prices of margin cover orders (and optionally expired cover orders) in the table below it. In fact, I would rename the "Margin calls" button to just "Calls" (and rename the "Margin Call Orders" table to "Call Orders") so that it encompasses both (potential) margin calls and (potential) expired calls. Then the "Call Orders" tables could further disambiguate between an order that is "Not Called" (a short position that has not yet been margin called and has not yet expired), "Expired Call" (a short position that has expired but not yet been margin called), or "Margin Call" (a short position that has been margin called regardless of whether it has expired yet or not).
« Last Edit: March 21, 2015, 01:30:17 am by arhag »

Offline jsidhu

  • Hero Member
  • *****
  • Posts: 1335
    • View Profile
- Ideally I'd prefer to use standard tables instead of ui-grid but they do offer speed compared to standard angular.
Another reason to use ui-grid is fixed table headers.

I found ui-grid doesn't offer flexibility that you need to render big tables effectively... maybe it has changed but last year i tried to use it however when your scope variable changes it will tear down the dom and rebuild the whole table... causing lags and delays between refreshes... if you dont have live updates its ok i guess... so with my appraoch i simply dont replace my scope variable i have to go into each cell and check if its changed, if it has then update it.. and that seemed to be 50x faster and now i can have 2k-3k table cells without noticing anything on the standard pc.

I believe it is because you have to pass in the variable that holds your table data (scope var) and it will rely on angular to check against it (which simply checks that the memory address has changed) and doesn't do the dirty checking like I do above. The memory address changes when you overwrite your scope variable if it is an object.
Yea I'm not a fan either, I've replaced most of them with standard tables in the new layout. I also found a great directive for fixed headers so that's no longer an issue.

Yea I think thats what I was saying earlier too in the other thread... id like to try ui-grid again one day and with angular 2.0 i believe alot will be fixed and optimized.
Hired by blockchain | Developer
delegate: dev.sidhujag