Author [EN] [ZH] [ES] [PT] [IT] [DE] [FR] [NL] [TR] [SR] [AR] [RU] [EN] [ZH] [ES] [PT] [IT] [DE] [FR] [NL] [TR] [SR] [AR] [RU] [EN] [ZH] [ES] [PT] [IT] [DE] [FR] [NL] [TR] [SR] [AR] [RU] Topic: Reworking the wallet trading interface  (Read 3969 times)

0 Members and 1 Guest are viewing this topic.

Offline svk

Reworking the wallet trading interface
« on: March 16, 2015, 10:41:01 AM »

I've made some initial progress on reworking the trading interface of the wallet, I would like to get some feedback and for us to do some brainstorming on features. I've used the coinbase interface as inspiration, but due to the complexity of Bitshares trading with shorts/margin calls etc you end up having to display more info resulting in a more cramped interface, so it's hard to get it as nice as theirs.

The biggest changes so far are:
  • Buy/Sell/Short section is now fixed on the left side and always visible
  • The order book is displayed vertically next to the orderbook chart (sorting is weird because of ui-grid table)
  • Open orders for the currently selected tab are displayed immediately below in order to always be visible
  • Removed the price history chart
  • Removed grid lines from plots
  • Open orders other than the currently selected tab shown below the orderbook chart
  • Table headings are now black and bolded instead of grey (this applies elsewhere too, the old one was hardly visible imo)
  • Less paddings and margins to fit everything
Improvements I'd like to make still:
- Ideally I'd prefer to use standard tables instead of ui-grid but they do offer speed compared to standard angular.
- Put daily range, volume etc on top of orderbook chart like on bitsharesblocks
- Unify open order tables to contain buy, sell and shorts
- Split order history and price history chart into separate tab

You can check this out by using the web_wallet in a browser, simply checkout the branch newlayout_market, then follow the standard procedure for running the web wallet.

Here are some screenshots:



Worker: dev.bitsharesblocks

Offline xeroc

  • Board Moderator
  • Hero Member
  • *****
  • Posts: 12065
  • ChainSquad GmbH
    • View Profile
    • ChainSquad GmbH
  • BTS: xeroc
  • GitHub: xeroc
Re: Reworking the wallet trading interface
« Reply #1 on: March 16, 2015, 10:52:49 AM »
Nice work so far!  +5% +5%

Some suggestions:

- right align all numbers (price and volume) such that in the table all comma separators are aligned
- why is the price history gone? can't you add a button/switch above the plot to switch between orderbook/price history? I think cryptsy is doing it that way
- can I have a zoom function for all plots? You know, the second graph from highchartsJS
- If you are also pimping the JS part: make a double click of an order in the order book an instant "execute+confirm"

Also, what happens on a 4:3 screen?

edit: have you contacted @cass? He had some nice thoughts and templates for a feature reach and nicely looking trading page ..
Give BitShares a try! Use the http://testnet.bitshares.eu provided by http://bitshares.eu powered by ChainSquad GmbH

Offline cass

  • Hero Member
  • *****
  • Posts: 4324
  • /(┬.┬)\
    • View Profile
Re: Reworking the wallet trading interface
« Reply #2 on: March 16, 2015, 11:08:21 AM »
 +5%  +5% Yesss Sir :)

I'll will ping you for more suggestion later this day
█║▌║║█  - - -  The quieter you become, the more you are able to hear  - - -  █║▌║║█

Offline svk

Re: Reworking the wallet trading interface
« Reply #3 on: March 16, 2015, 01:37:16 PM »
Nice work so far!  +5% +5%

Some suggestions:

- right align all numbers (price and volume) such that in the table all comma separators are aligned
- why is the price history gone? can't you add a button/switch above the plot to switch between orderbook/price history? I think cryptsy is doing it that way
- can I have a zoom function for all plots? You know, the second graph from highchartsJS
- If you are also pimping the JS part: make a double click of an order in the order book an instant "execute+confirm"

Also, what happens on a 4:3 screen?

edit: have you contacted @cass? He had some nice thoughts and templates for a feature reach and nicely looking trading page ..

Not sure right aligning will work but I agree something needs to be done, also need to make the decimals more uniform.

Price history charts are pretty ugly due to a bug in the client giving too big ranges, that should get fixed in 0.7 I believe though. But I just feel it gets too messy with that plot on the same page, I'll try to bring it back through a switch or tab.

Not sure which second graph you mean, I could put in a zoom similar to what you have on bitsharesblocks here: http://bitsharesblocks.com/charts/prices

Currently clicking on a row fills out the bid/ask part, insta-confirm is dangerous imo, I prefer to keep it as is.

On smaller screens things move down etc, it works ok but not as nice of course.

Worker: dev.bitsharesblocks

Offline xeroc

  • Board Moderator
  • Hero Member
  • *****
  • Posts: 12065
  • ChainSquad GmbH
    • View Profile
    • ChainSquad GmbH
  • BTS: xeroc
  • GitHub: xeroc
Re: Reworking the wallet trading interface
« Reply #4 on: March 16, 2015, 01:50:15 PM »
Cool .. thanks for the feedback .. much appreciated.

This is the second graph I am talking about:

It allows to define the 'borders' of the bigger plot
Give BitShares a try! Use the http://testnet.bitshares.eu provided by http://bitshares.eu powered by ChainSquad GmbH

Offline svk

Re: Reworking the wallet trading interface
« Reply #5 on: March 16, 2015, 01:56:06 PM »
Cool .. thanks for the feedback .. much appreciated.

This is the second graph I am talking about:

It allows to define the 'borders' of the bigger plot

Right, that's called the "navigator" in highcharts terminology. Not a fan of that myself really, adds clutter. You can get the same effect through x-axis zooming directly on the plot, like I have on the price chart that I linked above.
Worker: dev.bitsharesblocks

Offline valzav

  • Sr. Member
  • ****
  • Posts: 294
    • View Profile
Re: Reworking the wallet trading interface
« Reply #6 on: March 16, 2015, 01:58:15 PM »
 +5%
It would be great to combine open orders into a single table before putting this into production - due to fixed order form tabs this layout has more tight requirements to screen real estate. Probably each order in combined orders table would need to take two lines because not all orders types have the same set of fields and this table wouldn't have header. Different orders can be shown in different colors - the same colors used for table headers now.
Also I would suggest you to show charts in tabs, so users would be able to select what they want to see - either price chart or order book chart.
BTW right align numbers is already on my to do list, I think I'm going to address it this week.

Offline valzav

  • Sr. Member
  • ****
  • Posts: 294
    • View Profile
Re: Reworking the wallet trading interface
« Reply #7 on: March 16, 2015, 01:59:40 PM »
- 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.

Offline xeroc

  • Board Moderator
  • Hero Member
  • *****
  • Posts: 12065
  • ChainSquad GmbH
    • View Profile
    • ChainSquad GmbH
  • BTS: xeroc
  • GitHub: xeroc
Re: Reworking the wallet trading interface
« Reply #8 on: March 16, 2015, 02:03:32 PM »
Right, that's called the "navigator" in highcharts terminology. Not a fan of that myself really, adds clutter. You can get the same effect through x-axis zooming directly on the plot, like I have on the price chart that I linked above.
Awesome! Thanks .. can you make it work with mouse wheel scrolling?
Give BitShares a try! Use the http://testnet.bitshares.eu provided by http://bitshares.eu powered by ChainSquad GmbH

Offline svk

Re: Reworking the wallet trading interface
« Reply #9 on: March 16, 2015, 02:05:05 PM »
+5%
It would be great to combine open orders into a single table before putting this into production - due to fixed order form tabs this layout has more tight requirements to screen real estate. Probably each order in combined orders table would need to take two lines because not all orders types have the same set of fields and this table wouldn't have header. Different orders can be shown in different colors - the same colors used for table headers now.
Also I would suggest you to show charts in tabs, so users would be able to select what they want to see - either price chart or order book chart.
BTW right align numbers is already on my to do list, I think I'm going to address it this week.

Yea agreed on the charts and the combined orders, the shorts complicate things with extra columns but at least the buys/sells should be doable.

What do you think about removing one of the quantity columns, i.e only showing USD quantity plus price or BTS quantity plus price? (removing Total column)
Worker: dev.bitsharesblocks

Offline valzav

  • Sr. Member
  • ****
  • Posts: 294
    • View Profile
Re: Reworking the wallet trading interface
« Reply #10 on: March 16, 2015, 04:22:26 PM »
+5%
It would be great to combine open orders into a single table before putting this into production - due to fixed order form tabs this layout has more tight requirements to screen real estate. Probably each order in combined orders table would need to take two lines because not all orders types have the same set of fields and this table wouldn't have header. Different orders can be shown in different colors - the same colors used for table headers now.
Also I would suggest you to show charts in tabs, so users would be able to select what they want to see - either price chart or order book chart.
BTW right align numbers is already on my to do list, I think I'm going to address it this week.

Yea agreed on the charts and the combined orders, the shorts complicate things with extra columns but at least the buys/sells should be doable.

What do you think about removing one of the quantity columns, i.e only showing USD quantity plus price or BTS quantity plus price? (removing Total column)
I think it's fine to get rid of total column

Offline Xeldal

Re: Reworking the wallet trading interface
« Reply #11 on: March 16, 2015, 04:52:18 PM »
    +5%
    It would be great to combine open orders into a single table before putting this into production - due to fixed order form tabs this layout has more tight requirements to screen real estate. Probably each order in combined orders table would need to take two lines because not all orders types have the same set of fields and this table wouldn't have header. Different orders can be shown in different colors - the same colors used for table headers now.
    Also I would suggest you to show charts in tabs, so users would be able to select what they want to see - either price chart or order book chart.
    BTW right align numbers is already on my to do list, I think I'm going to address it this week.

    Yea agreed on the charts and the combined orders, the shorts complicate things with extra columns but at least the buys/sells should be doable.

    What do you think about removing one of the quantity columns, i.e only showing USD quantity plus price or BTS quantity plus price? (removing Total column)
    I think it's fine to get rid of total column
    Great stuff  +5% 

    some suggestions:
    • Get rid of as many of the columns as possible.  Add all the extra data information to a nice detailed pop-up tool tip.  Yunbi does this very simply but it could be more stylized and informative.  If you hover over the volume of the order it gives you the total etc. 
    • It would be nice if the entire thing was on one page, no scrolling.   how about tabbing Margin Call orders, Short Orders and Market history into one table.
    • All the tables are too big, lots of white space.
    • The Chart should be center stage.  I assume its removed until something better is made??  to conserve screen real estate perhaps tab it as well with the candlestick chart.  or make the depth chart much smaller and placed on the side between Bids and Asks.  Look at Yunbi's trade page for an example. https://yunbi.com/markets/btccny
    • If possible, the market your currently trading should always be visible, as well as the current feed price.  If the screen doesn't scroll obviously this is not an issue.  If it does perhaps adding a small frame at the top.
    [/list]
    « Last Edit: March 16, 2015, 05:17:22 PM by Xeldal »

    Offline kaibakker

    Re: Reworking the wallet trading interface
    « Reply #12 on: March 16, 2015, 07:00:36 PM »
    Great work, looks already a 100 times better.

    - Have you thought about flipping the sell orders book in reversed order, like how they do it on the Coinbase exchange. This gives a good perspective on the spread.
    - What I also really like about Coinbase is that they don't let you scroll through all the tables, just showing the most relevant ones that fit into you screen. I often get tangled up by all the scrolling views in the Bitshares client.
    - I don't know the exact consequences of this, but have you thought about the idea to integrate shorts into the sell view. Give the shorts a different color that the sell orders, don't show the intrest rate or collateral. They aren't interesting for a buyer of the asset. And show the price as the max(minimum_price, price_feed).
    Only the moment someone clicks the short tab, a user is interested in the intrest rate and collateral. So I think it would be good to only show it than.

    Keep up the great work!


    Offline arhag

    • Hero Member
    • *****
    • Posts: 1213
      • View Profile
      • My posts on Steem
    • BTS: arhag
    • GitHub: arhag
    Re: Reworking the wallet trading interface
    « Reply #13 on: March 17, 2015, 01:12:12 AM »
    My preference would be something like the following:
    Code: [Select]
    BitUSD : BTS [flip]      Call price       Last price       Spread   Total BitUSD Supply   Total BTS Supply
                             100 BTS/BitUSD   105 BTS/BitUSD   0.905%    433,000.00 BitUSD     2,503,706,843 BTS
    ------------- -----------
    | Orderbook | | History |
    | --------- | |         |
    ----------------------------------------------------------------------------------------------------------------------------------
    |   |                         
    |   |                                                   [Orderbook Chart]
    |   |
    |   | Show quantity in: (*) BitUSD  ( ) BTS
    |   |
    |   | Bids                                                           Asks
    |   | ----------------------------------------------------------     ----------------------------------------------------------
    | l | | Type          | Quantity (BitUSD) | Price (BTS/BitUSD) |     | Price (BTS/BitUSD) | Quantity (BitUSD) | Type          |
    | e | ------------------------------------------------------------   ------------------------------------------------------------
    | f | | Margin Call   |         12,000.00 |           111.1111 |^|   |           112.0000 |          1,215.00 | Short Sell    |^|
    | t | | Buy BitAsset  |            600.00 |           101.2500 |||   |           120.0000 |            750.00 | Sell BitAsset |||
    |   | | Expired Cover |          1,601.32 |           100.0000 |||   |           120.0000 |          5,000.00 | Short Sell    |||
    | c | | Buy BitAsset  |            512.34 |            99.9091 | |   |                    |                   |               |||
    | o | | Buy BitAsset  |            200.00 |            99.0000 |v|   |                    |                   |               |v|
    | l | ------------------------------------------------------------   ------------------------------------------------------------
    | u |
    | m | [*] Display detailed short information
    | n | ------------------------------------------------------------------------------------------------------------------
    |   |
    |   | Margin Call Orders                                                       
    |   | ---------------------------------------------------------------------------------------------------------------
    |   | | Call Price (BTS/BitUSD) ^2 | Interest Rate (APR) -- | Owed (BitUSD) -- | Expiration      ^3 | Condition  v1 | 
    |   | -----------------------------------------------------------------------------------------------------------------
    |   | |                   110.0000 |                   0.00 |        12,000.00 | 6 Days             | Margin Called |^|
    |   | |                   130.0000 |                   2.00 |         1,501.32 | 2 Days Ago         | Expired       |||
    |   | |                   135.0000 |                   0.00 |           100.00 | 1 Day Ago          | Expired       |||
    |   | |                   130.0000 |                   0.00 |        10,000.00 | 10/25/2015 9:18 AM | Active        |||
    |   | |                   165.0000 |                   1.10 |         3,000.00 | 30 Days            | Active        |v|       
    |   | -----------------------------------------------------------------------------------------------------------------
    |   |
    |   | Short Sell Orders
    |   | -------------------------------------------------------------------------------
    |   | | Price Limit (BTS/BitUSD) ^1 | Interest Rate (APR) v2 | Quantity (BitUSD) -- |     
    |   | ---------------------------------------------------------------------------------
    |   | |                    112.0000 |                   1.00 |             1,100.00 |^|   
    |   | |                    112.0000 |                   0.50 |               115.00 |||   
    |   | |                    120.0000 |                   0.00 |             5,000.00 |||   
    |   | |                             |                        |                      |||
    |   | |                             |                        |                      |v|   
    |   | ---------------------------------------------------------------------------------
    |   |
    |   | ------------------------------------------------------------------------------------------------------------------
    |   |
    ----------------------------------------------------------------------------------------------------------------------------------
    The left column under the "Orderbook" tab would be similar to what you have in the left column in your layout (the box with tabs to Buy, Sell, and Short and the respective open orders tables underneath), however there would be an addition Cover tab which would include the "Open Margin Orders" table (renamed "Open Margin Call Orders"). Later I can imagine the Cover tab supporting functionality like partial covers and adding collateral. Also the BitUSD balances and BTS balances would be shown in the left column (on top of the buy/sell/short box) and not in the right column (because they are user-specific information not market-specific).

    There are two main tabs in my proposed interface: "Orderbook" and "History". The "History" would show the price history chart and the "Blockchain Orders History" table underneath it in the right column, and it would put the "Account Orders History" table into the left column. The "Orderbook" tab looks as I have laid out in ASCII above. I will explain it in more shortly. Despite this tabbed interface, if the screen is large enough, I think it makes sense to instead pull out the history tab contents and put it on the right side next to the orderbook tab contents. In this case I think the "Account Orders History" table should not be in a column by itself but rather underneath the "Blockchain Orders History" table. So the layout for large screens would be a three column layout in which the left column is the same as the left column described above, the middle column is the contents of the right column in the mockup above, and the right column is the price history chart followed by the "Blockchain Orders History" table followed by the "Account Orders History" table.

    The tables have removed the two quantities (Quantity and Total) and kept only one. The asset that is used to display the quantity is the one that is selected in the "Show quantity in:" option box. The user change that selection at any time and it will update the Quantity columns of all of the tables appropriately. The market can be flipped as usual using the [flip] button. If the [flip] button is pressed in a "BitUSD : BTS" market, it will replace it with a "BTS : BitUSD" market and make appropriate changes in the rest of the interface. In general, the market is "Quote : Base". The prices will be given in Quote/Base. So if the market was flipped to "BTS : BitUSD" all the prices in BTS/BitUSD would be replaced with prices in BitUSD/BTS (also the ascending/descending sort of a price column would be flipped). By default the quantity to show is selected as the Quote asset, but of course it can be changed with the "Show quantity in:" option box.

    The "Display detailed short information" checkbox toggles whether the "Margin Call Orders" table and "Short Sell Orders" table will appear underneath it. By default this checkbox can be unchecked (meaning not showing the tables).

    When looking at a "Quote : Base" market in which neither Quote nor Base is BTS or alternatively one of Quote or Base is BTS and the other is not a BitAsset, the layout would look the same except there would be no "Display detailed short information" checkbox (and no "Margin Call Orders" table or "Short Sell Orders" table), and the Type columns from the "Bids" and "Asks" table would be removed.

    When looking at a "Quote : Base" market in which Base is BTS and Quote is a BitAsset, the "Margin Call" type and "Expired Cover" type would be under the "Bids" table and the "Short Sell" type would be under the "Asks" table (as demonstrated in the example above). On the other hand, when looking at a "Quote : Base" market in which Quote is BTS and Base is a BitAsset, the "Margin Call" type and "Expired Cover" type would be under the "Asks" table and the "Short Sell" type would be under the "Bids" table.

    The orderbook chart should always show the order types that fall into the "Asks" table on the right side and show the order types that fall into the "Bids" table on the left side. They should also be color coded to match the color of the titles of the "Asks" and "Bids" tables appropriately. The orderbook chart should allow one to zoom in/out and define the domain to be smaller than [lowest bid price, highest ask price]. Also the quantity shown in the orderbook chart should be of the asset selected from the "Show quantity in:" option box. The orderbook chart should of course visualize the feed price as a line as it currently does.

    As can be seen by my mockup, the short sell orders are combined with the sell orders into one table. The "Short Sell Orders" table would include detailed information about the short sell orders that are not included in the combined table (such as interest rate offered), but would also differ from the combined order in that the price limit column would be the price limit set by the short (even if it is less, in BTS/BitAsset price, than the current price feed). The number shown for short sell orders in the price column of the combined table is instead max(price limit in BTS/BitAsset, feed price in BTS/BitAsset) if the Base asset is BTS or min(price limit in BitAsset/BTS, feed price in BitAsset/BTS) if the Quote asset is BTS. Also, short sell orders and sell orders at the same price are not coalesced together in the combined table to show that there are two different types of orders offered at the same price (my hope is that the market engine would actually match sell orders before short sell orders at the same price so that this visual distinction actually has important meaning, but until then it is just an aesthetic choice). However, multiple short sells orders at the same price are coalesced together and multiple sell orders at the same price are coalesced together. Similarly, expired cover orders, margin call orders, and buy orders are not coalesced together in a way that mixes types in the combined table (again it would be nice if the market engine guaranteed that given three orders of different types at the exact same price, the margin call order was matched before the expired cover order which was matched before the BitAsset buy order). However, orders of the same type and at the same price are coalesced together.

    The collateral column is removed from the tables because it is redundant information (it can be calculated from the given columns and knowledge about the initial collateral requirements, margin call requirements, and expiration period of the BitAsset system). However, this information and any other detailed information (such as the precise time that a short position expires or the principal BitAsset owed not counting the interest) can be included in tooltips when hovering over a specific order in any of the "Margin Call Orders", "Short Sell Orders", "Blockchain Orders History", "Account Orders History", and "Open * Orders" tables. The tooltip over orders in the "Bids" and "Asks" tables could not provide the same level of information because in general orders can be coalesced together in those tables. However, the tooltip could still provide a calculation of the Quantity in units of the other asset type that is not already displayed as a column in the table.

    The "Bids" and "Asks" tables should highlight orders for which one of the user's orders are coalesced into. Also, orders exactly at the price feed should also be highlighted in a different color.

    The "Margin Call Orders" table adds a Condition column to show whether the short position is Active, Expired, or Margin Called. The expiration column also shows the expiration date even if the short position has already expired ("1 Day Ago" to "30 Days Ago" to a timestamp if older than 30 days). An "Expired" short position can become "Margin Called" but a "Margin Called" position can never become "Expired". The Expired and Margin Called items in this table are not removed until their BitAsset debt with interest (which is the Owed column) is fully paid off. Margin Called orders might have a Call Price larger than the current feed price, as shown in the mockup example. This can happen since the Margin Call would have been triggered when the call price was lower, but partially covering the short through the margin call could increase the call price. For example, if the short in that example originally owed 15,000 BitUSD and had a call price of 99 BTS/BitUSD, then the price feed updating to 100 BTS/BitUSD would trigger a margin call on that short which would cause it to purchase asks up to a price of 111.1111 BTS/BitUSD. Let us pretend there was only one ask order below that price: a short sell order for 3,000 BitUSD at 0% interest and a price limit at 110 BTS/BitUSD. Then the margin call would match against that order (fully matching the short sell order), pay 330,000 BTS from its collateral of 2,970,000 BTS, and reduce its debt owed from 15,000 BitUSD to 12,000 BitUSD. Thus the new collateral would be 2,640,000 BTS and the new debt owed would be 12,000 BTS, which correspond to a call price of 110 BTS/BitUSD. But just because the new call price is higher than the feed price doesn't mean the order is no longer margin called; the margin call order stays (and in fact moves with the price feed maintaining its 10% difference) until the remaining 12,000 BitUSD is fully matched.

    Finally, the ^N and vN indicators on the "Margin Call Orders" and "Short Sell Orders" table indicate table sorting rules. The arrow direction indicates whether the column is sort in ascending or descending order. The number is a priority in sorting. The items in the table are sorted according to the column that has the first priority in sorting order, then any items with the same value are sorted according to the column that has the second priority in sorting order, and so on. Clicking on the sorting indicator toggles between ascending, descending, and neutral. Whenever a sorting indicator that had priority N is toggled to neutral, any existing columns with non-neutral sorting indicators that have priority greater than N in the table have their sorting priority decremented by one automatically. Whenever a sorting indicator that was neutral is toggled to a non-neutral setting, it gets a sorting priority that is one larger than the current largest sorting indicator priority of the table.
    « Last Edit: March 17, 2015, 01:25:14 AM by arhag »

    Offline CLains

    • Hero Member
    • *****
    • Posts: 2598
      • View Profile
    • BTS: clains
    Re: Reworking the wallet trading interface
    « Reply #14 on: March 17, 2015, 01:25:38 AM »
    Great work svk!  +5%

    I played around with the screenshot in paint for a bit, maybe some ideas http://i59.tinypic.com/10okydj.png

    random ideas:

    collapsable open orders (they pop up when they are relevant)
    collapsable sell/buy/short/margin/blockchain orders history
    markets with search and tab,
    have relevant user listed as a heading with balances under, and direct tab to select other users.
    use pop-ups after clicking buy/sell/short
    use strong colors for the button we want people to click on (buy/sell/short)
    have a price chart with mutiple time-scales to chose from
    have an option to select background colors (themes).

    too much! I know. great job so far, everything you're doing is top notch :)


     

    Google+