Author Topic: Core dev respond to GUI criticism  (Read 7822 times)

0 Members and 1 Guest are viewing this topic.

Offline yvv

  • Hero Member
  • *****
  • Posts: 1186
    • View Profile
I leave in EU and hold Euros. I want to send money to my friend in USA who wants USD. I go to transfer tab, specify how much USD I want to send, and the system goes ahead, checks order books and tells me how much Euros it will cost me.

Sounds like you want a Bitshares/Smartcoins version of shapeshift, right?

I've never used shapeshift, but ripple works the way I wrote. A program checks order books and finds a cheapest way to convert between currencies for you. It is a very convenient feature.

Offline kenCode

  • Hero Member
  • *****
  • Posts: 2283
    • View Profile
    • Agorise
I leave in EU and hold Euros. I want to send money to my friend in USA who wants USD. I go to transfer tab, specify how much USD I want to send, and the system goes ahead, checks order books and tells me how much Euros it will cost me.

Sounds like you want a Bitshares/Smartcoins version of shapeshift, right?
kenCode - Decentraliser @ Agorise
Matrix/Keybase/Hive/Commun/Github: @Agorise
www.PalmPay.chat

Offline yvv

  • Hero Member
  • *****
  • Posts: 1186
    • View Profile
.... Are you asking for something like "Convert" button? Such that you could specify a currency which you have, an asset which you want and the amount and the system would go ahead and buy that asset for you at a market price? Such button would be useful indeed."

I think this function would be very valuable for non-traders to use our system. Please consider this. Thank you

We are considering this:
When we were planning Graphene one of the features we wanted to have was "market orders" - user specifies only amount and buy or sell order executes at current market price. So in Graphene order can be executed in the same block it's placed and also it can be marked as "fill or kill" - this makes market orders much easier to implement. Now we only need to add simple buy/sell/short form to the GUI where user can specify amount, click Place button, agree with price and confirm.

An automatic currency conversion has a nice use case. Suppose, I leave in EU and hold Euros. I want to send money to my friend in USA who wants USD. I go to transfer tab, specify how much USD I want to send, and the system goes ahead, checks order books and tells me how much Euros it will cost me. Such functionality is implemented in ripple and is one of the nicest features of ripple.

Offline tbone

  • Hero Member
  • *****
  • Posts: 632
    • View Profile
  • BitShares: tbone2
.... Are you asking for something like "Convert" button? Such that you could specify a currency which you have, an asset which you want and the amount and the system would go ahead and buy that asset for you at a market price? Such button would be useful indeed."

I think this function would be very valuable for non-traders to use our system. Please consider this. Thank you

We are considering this:
When we were planning Graphene one of the features we wanted to have was "market orders" - user specifies only amount and buy or sell order executes at current market price. So in Graphene order can be executed in the same block it's placed and also it can be marked as "fill or kill" - this makes market orders much easier to implement. Now we only need to add simple buy/sell/short form to the GUI where user can specify amount, click Place button, agree with price and confirm.

This is a good idea.  For reference, Coinbase has a nice implementation (see below).  On the buy side, for example, they give users a choice of a) specifying x number of bitcoins you wish to buy, then they tell you how much that will cost, or b) specifying $x worth of bitcoin to buy, then they tell you how many bitcoins that buys you.   Then you just choose you source of funds, and wallet to deposit into. 

http://i.imgur.com/HWhr84Q.jpg?1

Offline valzav

  • Sr. Member
  • ****
  • Posts: 294
    • View Profile
.... Are you asking for something like "Convert" button? Such that you could specify a currency which you have, an asset which you want and the amount and the system would go ahead and buy that asset for you at a market price? Such button would be useful indeed."

I think this function would be very valuable for non-traders to use our system. Please consider this. Thank you

We are considering this:
When we were planning Graphene one of the features we wanted to have was "market orders" - user specifies only amount and buy or sell order executes at current market price. So in Graphene order can be executed in the same block it's placed and also it can be marked as "fill or kill" - this makes market orders much easier to implement. Now we only need to add simple buy/sell/short form to the GUI where user can specify amount, click Place button, agree with price and confirm.

Offline mike623317

  • Hero Member
  • *****
  • Posts: 637
    • View Profile
@vaalzav: From a different thread, but would help us appeal to the masses looking for safety in the event of a downturn. Worth considering dont you think ...

"If you're a trader you want/need the graphs and get off on all the analytical tools and blurb. But if I want to get out of worthless US$ and own things like oil, gold, silver or swiss francs I would just like to be able to do that as easy as possible without trying to understand what the Ask price is or what the graph is supposed to be showing. Bottom line: The price of gold is $1200.. here's $2400 and I now own 2 ounces of gold without any liability.

.... Are you asking for something like "Convert" button? Such that you could specify a currency which you have, an asset which you want and the amount and the system would go ahead and buy that asset for you at a market price? Such button would be useful indeed."

I think this function would be very valuable for non-traders to use our system. Please consider this. Thank you

Offline kenCode

  • Hero Member
  • *****
  • Posts: 2283
    • View Profile
    • Agorise
kenCode - Decentraliser @ Agorise
Matrix/Keybase/Hive/Commun/Github: @Agorise
www.PalmPay.chat

Offline Pheonike

Or maybe created a separate for exchange and Margin trading like polo. That's way each user type can have a full interface catering to their needs instead of trying to mix the two. We are going to need another tab in future for the bond market anyway.

Offline tbone

  • Hero Member
  • *****
  • Posts: 632
    • View Profile
  • BitShares: tbone2
@svk: It dawned on me that we really need the trading dashboard to be more front and center.  I propose that when a user clicks on the "Exchange" link of the main menu, instead of going to the list of all markets (as it currently does), it should take them directly to the trading dashboard for the last market they were viewing (perhaps default first-time users to BTS:USD). 

Then the table of favorite markets on the trading dashboard (hopefully at top right) can have a link to manage your favorite markets, which takes you to the current "Market Search/Favorites" page linked by "Exchange".  Perhaps the user should also be able to get to this Markets page via a new card in the Explorer called "Markets"?  Either way, the markets page really needs a table view, not just a card view.  And it should be possible to select and de-select markets the user wants in their list of favorites.  Those of you familiar with Poloniex may see where I'm going with this.  It's really nice being able to see the last price (and hopefully 24hr change and volume) of your favorite markets at-a-glance, not to mention being be able to load any one of those markets into the trading dashboard with just one click.

By the way, as much as I like using Poloniex, their UI has some real drawbacks.  For example, most of the elements on their "Exchange" page take up way too much space and really aren't laid out very well - plus they have the trollbox taking up a bunch of extra space - so you simply can't see everything you need to see without constantly scrolling around.  It's really irritating.  I don't think we're going to have that problem here.   :)

Offline tbone

  • Hero Member
  • *****
  • Posts: 632
    • View Profile
  • BitShares: tbone2

We have every number but the the most important, the CURRENT PRICE OF THE ASSET. Get rid of spread amount.  In it's place should be last price. Green if it is higher, red if it lower than previous.

Last price should really be green if at or above the ask, red if at or below the bid.  Same goes for Time & Sales (i.e. Market History) once that API is available. 

Offline tbone

  • Hero Member
  • *****
  • Posts: 632
    • View Profile
  • BitShares: tbone2
This is great feedback, thanks.

I've done a first pass on this in the Exchange yesterday, making the following changes:
  • Price chart is now up top, with a button to switch to the depth chart, it's also 400px high instead of 300px
  • The bids and ask in the left column have been switched
  • There's an option to put the orderbook horizontally below the Buy Sell buttons instead of on the left
  • You can invert the positions of the Bid/Ask columns in horizontal mode
  • You can invert the positions of the Buy/Sell buttons
  • The "Status bar" up top remains fixed when you scroll. It will contain more useful info once that's available from the backend
  • I also fixed the issue with extreme orders pushing normal orders off the screen
  • All these customizations will persist between sessions in the same browser
I like your idea of putting favorite markets also in the right column, I can't really put 24hr change or anything like that in there though because that data isn't available from the backend. I used to wish for a market summary api call in BTS 1 as well...

I might put in your smaller vertical depth chart also.

About the Price History time frames: the ones we have enabled right now are the default ones that the witness_node is configured for out of the box. I'll see if we can add some more in the backend. Since the time frames available will likely change between different api providers, the backend might also need to have an api call to let us know which ones are available.

And finally about the market history: tbone you are correct, it only shows trades that have happened while you were in that market. The reason is simple: the backend has no market_history api call, so there's no way for me to get it. I've been asking for this since June, hopefully they'll get to it eventually..

Great, I'm really excited to see some of these changes.  By the way, I envision the right column including that list of favorite markets at the top, then the smaller vertical depth chart just below (if you decide to add that), then the Market History.  If you do add the smaller depth chart, perhaps you can make it hideable so the user can choose to see more of the price history, which can be very useful sometimes.  Speaking of price history, I'm surprised that's not available in the 2.0 back end since it was available in 1.0 and it's such a must-have.  In any event, once that data is available, that table should also include the time of the trade as I'm sure you would agree. 

Quote
I like your idea of putting favorite markets also in the right column, I can't really put 24hr change or anything like that in there though because that data isn't available from the backend. I used to wish for a market summary api call in BTS 1 as well...

Can't you use the chart data to show the change in price between now and the close of the last daily period? 

A couple other things I wanted to point out:

1.  The order book column headers could be a lot more clear.  For example, instead of using "Price", I would use "Bid" for the price column header on the bid side, and "Ask" for the price on the ask side.  Also, "Amount" is too vague.  I would consider using "Quantity" (which was used in 1.0), it's much more clear.  "Value" is also too vague and I would consider using "Cost" instead.  I know some people will think these things are trivial, but they really do make a difference.  Below is a sample order book with these changes to the headers, plus a couple of changes I mentioned in my previous post. 

http://i.imgbox.com/9XvflGtV.jpg


2.  You may have caught this already, but in the BTS : Trade.BTC market, the prices in the order book are getting rounded to 5 decimals vs. 8 (I added trailing zeroes above just to see what it looks like).   

3.  Also in the BTS : Trade.BTC market, when you buy BTS, the order confirmation Says "Amount to sell: x.x Trade.BTC", which really indicates the total cost of the BTS I'm buying instead of the quantity of BTS I'm buying.  I think that would make more sense for the inverted market (Trade.BTC : BTS) so perhaps technically it's not wrong, but it's going to confuse people and I would recommend matching the confirmation more specifically to the selected version of the pair.  Also, the order confirmation has field labels for "Amount" and "Price, but not total cost of the trade (i.e. QTY * price), could you add that?  So if it's BTS : Trade.BTC and you are buying, confirmation should show:

Quantity to buy:  x BTS  (NOT Amount to sell: x Trade.BTC)
Price:  y Trade.BTC/BTS
Total: z Trade.BTC

4. It's difficult to view the order book on the charcoal gray background.  Can you use black for the background instead, I think the increased contrast will make a real difference. 

Hope you find this helpful.  Looking forward to seeing some of your modifications.  Thanks for your efforts.


Offline svk


We have every number but the the most important, the CURRENT PRICE OF THE ASSET. Get rid of spread amount.  In it's place should be last price. Green if it is higher, red if it lower than previous.
This ties in to what I said above: without a market history api call we don't have the current price...

I'll add the price of the last trade that happened while you had the view open, but it won't be there until an actual trade happens..
Worker: dev.bitsharesblocks

Offline Pheonike


We have every number but the the most important, the CURRENT PRICE OF THE ASSET. Get rid of spread amount.  In it's place should be last price. Green if it is higher, red if it lower than previous.

Offline svk

some little things:

I'd like to see a button between the BID and ASK books on the left column, to flip the layout so that BID is on the bottom and ASK is on the top.   

Market history always seems to be empty.  I'd like to see colored numbers indicating whether it was a buy or a sell.

The price history chart need more period options I don't think we need 15sec and 1min, I'd like to see options for 2hours, 4hours, 6hours 12hours

The price history chart only seems to have 20 or so points of history available.  It needs much more than this.  The candles have to much space between them, if you're only displaying a few candles they should be expanded to fill the whole space.  It looks like the volume bars do this already but not the price bars.

On the price history chart if no trades were made for a defined period, there should be a dash "-" (empty candle (or doji) ) on the chart instead of just an empty field.

The price history chart should be on top, depth chart on the bottom.  Price history chart should have much greater height

I'd like to see the Left column depth book centered vertically and I would like to see the last price displayed in the center instead of, or in addition to, the "spread".  I don't know that knowing the spread is really that important for most people.

As far as specific GUI feedback goes:

Wallet Management
I agree with a previous poster that wallet management needs to be a little less confusing.  For example, it needs to be MUCH clearer which operations pertain to 2.0 vs. migration from 0.9.3.  Many people seem to be confused between "Restore Backup" and "Import Keys".  I'm not 100% sure either, but I think the former pertains to 2.0 while the latter pertains to 0.9.3.  So at the very least those buttons could be renamed "Restore 2.0 backup" and "Import 0.9.3 Keys".  Although perhaps more ideally, instead of having all of the buttons bunched together, there would be some separation between a) the wallet functions that a brand new user would be concerned with vs. b) the wallet functions for migrating from 0.9.3 (or from the previous web wallet).

Trading Interface
Although I believe 3rd parties will ultimately offer great trading UIs, I think it's imperative that the default GUI is very usable if we want to bootstrap these markets ASAP.  That said, I agree with most of Xeldal's comments.  Here are some reinforcements and additions to his feedback. Others may have posted additional feedback since I started composing this post a couple hours ago, so there may be overlap. 

1. Order Book
It's standard for bids to be at the bottom, asks at the top (for the oddballs, you could have function to flip).  Also, showing the spread in the middle of the order book is unnecessary. It's much more critical to show the last price in this space.  The last price should be displayed red if it was a sell (at or below the bid) and green if it was a buy (at or above the ask).  The red and green may need to be brightened a little to stand out on the dark gray background.  Also, it's unhelpful for column labels to take up such valuable real estate right in the middle of the order book.  I would move them to the top (and perhaps also the bottom) of the order book. 

2. Charts
I also completely agree with Xeldal's chart comments including the position of the chart as well as how to display the bars, etc.  Another important thing is that when you position your cursor over a chart, it really, REALLY needs to show crosshairs (i.e. both vertical and horizontal line spanning the chart) rather than just a vertical line.   This may seem trivial, but I can't stress the importance of it enough. Also, let's allow the user choose from the most common time frames (see below).  If it's necessary to prioritize some over the others to start, I would prioritize the ones underlined below. 

            1w  |  3d  1d  |  12h  6h  4h  2h  1h  |  30m  15m  5m  3m  1m

3. Market History
Regarding Market History, I'm not sure if it's empty because it only shows trades that occurred since I loaded that market on the screen, or because there just haven't been any trades in that market yet.  Either way, it really needs to show the last x trades regardless of whether you leave that screen and come back. 

4. Markets at-a-glance
Market History really doesn't need to take the whole vertical column.  Some of that column could be used to display a list of your "pinned" markets including the 24 hour volume and price change.  So now while you're on the full view (chart, order book, market depth, order form, etc.) of one market, you can see all of your other important markets "at-a-glance" and easily toggle between their full views. 

5. Market Depth
Finally (for now?), I really don't think the market depth needs to take up so much real estate. It's really just a visual aid and can be much smaller.  It would also make a lot more sense if it's orientation was vertical rather than horizontal (see below, click on link for actual size).  In this orientation you can visualize not only the buy and sell depth, but if you look at the bright red and green line, you can also much more easily visualize how steeply or gradually the price would go up or down with a given amount of buy vs. sell volume. 

http://i.imgur.com/K8GxLV2.jpg
     

Also, positioning your cursor on the depth chart could pop up some details (see second image below). 

http://i.imgur.com/NNBXQRV.jpg


By the way, I do understand that it may be very useful to have the market depth chart visually showing the Settlement Price, Margin Call Price, and Call limit lines.  If those items cannot be displayed in a smaller version of the depth chart described above, then perhaps allow the user to toggle between a larger version of the depth chart and the main price chart (with the default being the price chart, of course) as was the case in the previous GUI.  In this case I would still have the smaller vertically oriented version visible elsewhere.

I hope this feedback helps.  I'm confident that much of this could be implemented without much trouble at all.  And I look forward to seeing the GUI evolve quickly in the very near term.  Thanks for all of your efforts!


This is great feedback, thanks.

I've done a first pass on this in the Exchange yesterday, making the following changes:
  • Price chart is now up top, with a button to switch to the depth chart, it's also 400px high instead of 300px
  • The bids and ask in the left column have been switched
  • There's an option to put the orderbook horizontally below the Buy Sell buttons instead of on the left
  • You can invert the positions of the Bid/Ask columns in horizontal mode
  • You can invert the positions of the Buy/Sell buttons
  • The "Status bar" up top remains fixed when you scroll. It will contain more useful info once that's available from the backend
  • I also fixed the issue with extreme orders pushing normal orders off the screen
  • All these customizations will persist between sessions in the same browser
I like your idea of putting favorite markets also in the right column, I can't really put 24hr change or anything like that in there though because that data isn't available from the backend. I used to wish for a market summary api call in BTS 1 as well...

I might put in your smaller vertical depth chart also.

About the Price History time frames: the ones we have enabled right now are the default ones that the witness_node is configured for out of the box. I'll see if we can add some more in the backend. Since the time frames available will likely change between different api providers, the backend might also need to have an api call to let us know which ones are available.

And finally about the market history: tbone you are correct, it only shows trades that have happened while you were in that market. The reason is simple: the backend has no market_history api call, so there's no way for me to get it. I've been asking for this since June, hopefully they'll get to it eventually..
Worker: dev.bitsharesblocks

jakub

  • Guest
I think the market page is not very far from being quite good.
I'm not a frequent trader myself so I'll offer a more general perspective regrading more universal issues.
These are my suggestions:

(1) I'd suggest using javascript tabs to split the content into smaller pieces as I assume you almost never need to view everything at the same time. But if that is too radical, I'd at least move the market history list to the very bottom of the page. And instead put the favorite (or most recently viewed) markets in the right column - this should take less space than the market history list.




(2) All those small font labels need to be removed or replaced with bigger fonts. It does not make sense to have them the way they are now because they are illegible anyway so they just pretend to offer information without actually doing it.




(3) The header of the table listing my active orders should be removed if there are no active orders. Or at least there should be some space separating the table header from the chart below or a text label saying something like "Currently you have no active orders". Otherwise the table header looks like something is wrong or like being part of the chart below which is quite confusing.




(4) The market history chart should definitely contain flat candles if there are no trades in a given period.
Also, I'd recommend using the same chart to show the history of price feeds - they could be displayed as a thin gray line in the background.




(5) IMO there is too much contrast between the darkness of the background and the whiteness of the new order input fields. Those fields should be bright but not 100% white. This is clearly an aesthetic issue, nevertheless for me an important one as the text input fields visually dominate too much.




(6) The market depth charts should be perfectly symmetrical when you flip the market from USD:BTS to BTS:USD. I know that technically nothing is wrong as this is just a scaling issue but nevertheless it should be fixed. The two markets are perfectly symmetrical and so should be the corresponding charts.

« Last Edit: October 19, 2015, 07:15:11 am by jakub »