Standardized workflow for issues/improvements in the GUI

[wmbutler]

@akado please post this to a GitHub issue with screenshots. More than happy to look into it.

[Akado]

If I place an order let's supposed I want to sell asset X at 0,2btc and I want to sell five of those, it's 1 btc total. but If I want to sell at 0,0034 for example it will mess up the total saying some exagerated numbers like 600 btc. It happened on the METAFEES market. And if I placed that order, it wouldn't appear on the order book nor would it appear my order to cancel. I think I had to refresh the page if I remember correctly, so I could cancel it

[wmbutler]

This thread is probably outdated now. For all issues related to the GUI, I strongly recommend that you go here:

Issues can be filtered by enhancement and bug. You can also post new issues here. I will categorize and respond to as many as possible. I have a worker proposal that is almost fully funded for handling the mediation of these issues:

https://github.com/cryptonomex/graphene-ui/issues

Please vote for me:

http://cryptofresh.com/workers
update_worker_votes your-account {"vote_for":["1.14.9"]} true

[Akado]

for some reason METAFEE:METAEX.BTC market only appears on the hosted wallet and not the light client.

Known issue, already fixed in dev.

Awesome! Good to know 

[svk]

for some reason METAFEE:METAEX.BTC market only appears on the hosted wallet and not the light client.

Known issue, already fixed in dev.

[Akado]

for some reason METAFEE:METAEX.BTC market only appears on the hosted wallet and not the light client.

[jakub]

The current approach to the Deposit/Withdraw functionality currently looks very chaotic in terms of UX.
Firstly, there is this artificial split between Bridges and Gateways.
Secondly, each service provider seems to have its own concept of UI (specific to its service) which looks very inconsistent when viewed on a single page.

What I propose is to have the Deposit/Withdraw functionality organized in a similar way markets are organized:
(1) There should be an initial page where all gateway/bridge providers are listed (e.g. Blocktrades, Transwiser, Metaexchange, OpenLedger etc).
(2) Each provider should have its own dedicated page (just as each market has its own page). So by clicking on any provider listed in (1) you would navigate to a separate page which will be organized according to the specific offer of the provider and fully managed by the provider.

In this approach the gateway/bridge functionality would be detached from the account page and listed as a separate item in the top menu bar:
Dashboard | Explore | Deposit/Withdraw | Trade | Transfer

What do you think?

github: https://github.com/cryptonomex/graphene-ui/issues/521

[xeroc]

I can tell you that our wallet is more responsive and feels faster than gatehub at my first impression

[cass]

thx akado

[Akado]

@valzav @cass

[Akado]

does anybody have some bigger screenshots of gatehub.net UI?

http://40.media.tumblr.com/4d5631912fa68f2da28516cb704f154e/tumblr_inline_nnvx8j2pBJ1tsyj8x_1280.png

@valzav
is that big enough? You can zoom in a little but not much :/

You also have some here but quality isnt teh best, plus cant zoom in
https://www.facebook.com/GateHubNet/photos_stream


Have you considered something similar for the menu? Like a darker or some colour that contrasts with the rest the same way they have the center coloured and the sides darker? Of course we dont want something equal to what they have but something similar gives it a good look and helps users separate info and doesnt distract the eyes

[mike623317]

That where we need to get to. See how good that interface looks. Smart, crisp and professional. If we could try and imitate that I think we'd be golden.

Look at their wallet interface too. Simple yet slick.

[valzav]

does anybody have some bigger screenshots of gatehub.net UI?

[jakub]

The MORE MARKETS button is too inconspicuous, for a new user it's really hard to spot it.
Especially when compered to other similar buttons in the top section.

EDIT: Maybe it's good idea to have the list of favorites markets rendered as a drop-down list? This would imply that switching between different markets would work in a similar way to switching between different accounts on the market page? The drop-down could be attached to the market name (e.g. USD : BTS)  in the very top left corner.

It would release a lot of space in the bottom right corner of the screen and the troll-box could go there.
What do you think?



github: https://github.com/cryptonomex/graphene-ui/issues/448

[cass]

We need to remember that there is usually a wow effect when you see a UI design for the first time but this feeling often fades away once you get used to it and start using it.
I have to admit that our BTS 2.0 design scores well in this respect - for me it's still a real aesthetic pleasure to play with it.

yep totally agreed - and tested the ripple GUI .. but must also admit . the first view is by far mor impressive then using it

[jakub]

We need to remember that there is usually a wow effect when you see a UI design for the first time but this feeling often fades away once you get used to it and start using it.
I have to admit that our BTS 2.0 design scores well in this respect - for me it's still a real aesthetic pleasure to play with it.

[cass]

(i will continue work on unqiue icons asap)
Also the gray shades of Table headers etc .. i really like on their GUI ..

[cass]

gatehub ripple gateway seems to have a similar clean interface, maybe it could spark some ideas

https://gatehub.net/
https://twitter.com/GateHubNet

I really like it how they use the white color and various shades of gray to differentiate between important and less important stuff. Also, their icons are really cool.
Design-wise, it's a very mature product. We'll get there, it's just a matter of time.

wow nice .. yea ... but no wonder they made it really slick .. as Enej (CEO) is a very talented UI/UX designer.. (The designer behind www.bitstamp.com)

[Louis]

I think it would be helpful to add the following to each of theses cards:

Last Price
24 Hour Change
24 Hour High
24 Hour Low

[jakub]

gatehub ripple gateway seems to have a similar clean interface, maybe it could spark some ideas

https://gatehub.net/
https://twitter.com/GateHubNet

I really like it how they use the white color and various shades of gray to differentiate between important and less important stuff. Also, their icons are really cool.
Design-wise, it's a very mature product. We'll get there, it's just a matter of time.

[Pheonike]

Must be nice to have clean and functional interfaces. Maybe one day we will be there.....

[Akado]

gatehub ripple gateway seems to have a similar clean interface, maybe it could spark some ideas

https://gatehub.net/
https://twitter.com/GateHubNet

[fuzzy]

This is great and very useful jakub.    Fuzzy, send this man 300 brownies!

Done!

I sent them together with (most) of the backlogged hangout brownies. 

It will be from "browniedistro" and will have 300 + 200 = 500 brownies: BLOCK #375138

[cass]

In previous releases the https://bitshares.openledger.info/#/transfer page was completely cleared after a successful fund transfer, which I thought was desirable, as you usually don't do the same transfer twice.
It no longer works like that - currently all fields remain populated, giving the impression that the fund transfer has not gone through as intended and needs to be repeated.
Is there a reason for that or is it a bug?

Maybe the best solution would be to leave the TO and FROM fields unchanged but to reset the AMOUNT and MEMO fields.

github: https://github.com/cryptonomex/graphene-ui/issues/400

sounds like a bug… @valzav ?

[jakub]

In previous releases the https://bitshares.openledger.info/#/transfer page was completely cleared after a successful fund transfer, which I thought was desirable, as you usually don't do the same transfer twice.
It no longer works like that - currently all fields remain populated, giving the impression that the fund transfer has not gone through as intended and needs to be repeated.
Is there a reason for that or is it a bug?

Maybe the best solution would be to leave the TO and FROM fields unchanged but to reset the AMOUNT and MEMO fields.

github: https://github.com/cryptonomex/graphene-ui/issues/400

[DestBest]

what is core rate?

Core Rate = Rate a which an asset is converted to BTS in order to pay fees

[lzr1900]

what is core rate?

[cass]

We should have icons next to each asset for easy identification (as shown on the image).

I minimized a couple of markets (minimized button circled in red), but how do I get them back?

i begin to think to use icons could be feel a bit to noisy then ..

[svk]

I minimized a couple of markets (minimized button circled in red), but how do I get them back?

To get them back you need to run the search and find the market you've removed from favorites (or "minimized" as you call it) and add it (or "maximize") again to your favorites.

While doing the search be aware that the search currently does not work as it should, i.e. you need to enter the full name of the asset you are looking for.
So you need to know exactly what you are looking for, which is very user-unfriendly.
If I recall it correctly, svk once said he was waiting for an issue in the back-end to be solved before he could fix it.  And when it's fixed, entering just a few initial letters will do the trick.

That is correct.

I should rename the left column to "Add favorites" or something to make it more clear that's where you need to search to add assets, people seem to be having a hard time there.

[jakub]

I minimized a couple of markets (minimized button circled in red), but how do I get them back?

To get them back you need to run the search and find the market you've removed from favorites (or "minimized" as you call it) and add it (or "maximize") again to your favorites.

While doing the search be aware that the search currently does not work as it should, i.e. you need to enter the full name of the asset you are looking for.
So you need to know exactly what you are looking for, which is very user-unfriendly.
If I recall it correctly, svk once said he was waiting for an issue in the back-end to be solved before he could fix it.  And when it's fixed, entering just a few initial letters will do the trick.

[jakub]

On the account overview page, why not remove the pop-up for updating collateral. Seems like an unnecessary step. Just add the collateral amount slider to asset row on the overview page.  This way we can see all collateral info in one spot instead of clicking each asset. You can add a help button next to the collateral position title that pops up to explain how it works.

Or at least add the collateral ratio number of each asset to the overview page so we don't have to click update to see it.

I think adding the collateral ratio number is the best option.
Having a slider right in the asset row would require much more space to be used up for this. Also, adjusting the ratio is not something you do very often.

So I'm adding this to the github list on your behalf.
github: https://github.com/cryptonomex/graphene-ui/issues/397

[Louis]

We should have icons next to each asset for easy identification (as shown on the image).

I minimized a couple of markets (minimized button circled in red), but how do I get them back?

[Pheonike]

On the account overview page, why not remove the pop-up for updating collateral. Seems like an unnecessary step. Just add the collateral amount slider to asset row on the overview page.  This way we can see all collateral info in one spot instead of clicking each asset. You can add a help button next to the collateral position title that pops up to explain how it works.

Or at least add the collateral ratio number of each asset to the overview page so we don't have to click update to see it.

[Pheonike]

On the account overview page, why not remove the pop-up for updating collateral. Seems like an unnecessary step. Just add the collateral amount slider to asset row on the overview page.  This way we can see all collateral info in one spot instead of clicking each asset. You can add a help button next to the collateral position title that pops up to explain how it works.

[cass]

@cass
On the dashboard page, a tile representing a third-party account in the hover mode looks very similar to a tile representing my own account (both have blue labels), which is confusing.
(This refers to the Open Ledger color scheme only)

thx yep ..

[svk]

Yea we're using highcharts. I wanted to use a more specialized stock plotting library but in the end none of them were acceptable due to high license fees.

I might migrate them do D3 eventually but it's a lot of work and highcharts is already implemented and easy to work with..

[Louis]

Maybe the color contrast that Polo has makes the chart look cleaner (to me at least), I guess because I am use to their color scheme. Would there be a option to change color themes in the future? For users that already feel more comfortable having a light background.

[cass]

AFAIK we're using highcharts also ..

[Louis]

I think the dev team has made great improvement over the past week on the GUI. Kudos

Suggestion: Instead of reinventing the wheel, can we use a ready made javascript charts for the candlesticks, market depth charts, etc?

Here are a few I found:

http://www.amcharts.com/demos/candlestick-chart/
http://canvasjs.com/javascript-candlestick-chart/
http://shop.highsoft.com/highcharts.html

It seems like Poloniex is using one of them. They are a bit pricey but worth getting it.

Maybe we are already using a plugin, but I think we should give people what they are familiar with.

Just a thought.

[jakub]

The Call Limit and Margin Call Price seem to be gone.
They appear briefly when you flip the market but then disappear again.



github: https://github.com/cryptonomex/graphene-ui/issues/395

EDIT: fixed

[jakub]

There is an unnecessary horizontal scroll-bar on the membership settings page.



github: https://github.com/cryptonomex/graphene-ui/issues/394

EDIT: fixed

[liondani]

When the market depth chart is clicked, the price input field is populated with a wrong price (probably x10).
Also, clicking on the depth chart no longer produces a red dashed vertical line being drawn on the chart - is it a bug or was it intentionally removed?



github: https://github.com/cryptonomex/graphene-ui/issues/393

seems they have taken care... 
https://github.com/cryptonomex/graphene-ui/issues/369

[jakub]

When the market depth chart is clicked, the price input field is populated with a wrong price (probably x10).
Also, clicking on the depth chart no longer produces a red dashed vertical line being drawn on the chart - is it a bug or was it intentionally removed?



github: https://github.com/cryptonomex/graphene-ui/issues/393
EDIT: It's been already reported by liondani https://github.com/cryptonomex/graphene-ui/issues/369

[jakub]

The [Market Depth] / [Price Chart] button is unnecessarily highlighted after being clicked.
After clicking elsewhere on the screen the highlight disappears. IMO there should be no highlight at all.



github: https://github.com/cryptonomex/graphene-ui/issues/392

[DestBest]

Explorer Blockchain Page should not display "Last Block" but rather "Next Block"

[DestBest]

Favourite Markets Page should not be showing "Base Supply" but rather "Total BTS Collateral". What makes more sense?



https://github.com/cryptonomex/graphene-ui/issues/389

[DestBest]

Later on I'll open the corresponding issues on github and amend the URL links between github and the forum posts.
(I am assuming here that the devs find this kind of workflow useful)

Very nice initiative 
I'm with you on this (at my level)

[DestBest]

Price of UIA not displaying correctly on My Favourite Markets


https://github.com/cryptonomex/graphene-ui/issues/388

[DestBest]

Market Search page should display a list of the top market available.
Sorted by volume of trade in last 24h or in last 7d.



https://github.com/cryptonomex/graphene-ui/issues/387

[DestBest]

I tried to short some HKD for a test and closed my short right after it, the balance for HKD is still showing up in the overview even if the account doesn't have any HKD left. I think the overview should not be showing 0 balances.


https://github.com/cryptonomex/graphene-ui/issues/386

[jakub]

@cass
On the dashboard page, a tile representing a third-party account in the hover mode looks very similar to a tile representing my own account (both have blue labels), which is confusing.
(This refers to the Open Ledger color scheme only)

[jakub]

Can we get a tile view option for the exchange page too?

I'm not sure what you mean by the "exchange page" but if it's the https://bitshares.openledger.info/#/markets page then it's been upgraded to have two viewing options in the most recent release.

[jakub]

On web wallet , when you attempt to buy a membership it asks for your password to confirm , that does not happen on Turkish version . It directly asks you to confirm the transaction and proceeds if you click yes even though the wallet is locked.

I've tried to replicate it but it seems to me that this problem has nothing to do with the Turkish language, but rather it is a general bug regarding an attempt to perform actions on third-party accounts.
It's been reported a long time ago and still waits to be resolved:
github: https://github.com/cryptonomex/graphene-ui/issues/250

[jakub]

This is something I'd like to see in the GUI but it might be a bit controversial and I am not sure if others find it useful:

(1) I think we should the history of price feeds available for viewing in the GUI.
(2) Additionally, I'd recommend using the price history chart to show the history of price feeds - they could be displayed as an unobtrusive thin gray line placed in the chart's background.

[jakub]

The #/explorer/accounts page has a very nice feature: it's able to keep its state, i.e. when you navigate away from it and then navigate back to it, the page remembers the content of the filter field.
Would it be possible to apply the same functionality on other pages? e.g.
#/explorer/witnesses
#/explorer/committee-members
#/markets
#/transfer

github: https://github.com/cryptonomex/graphene-ui/issues/272

[jakub]

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's a nice-to-have behavior.
The two markets are perfectly symmetrical and so the user expects the corresponding charts to be symmetrical as well.



github: https://github.com/cryptonomex/graphene-ui/issues/385

[jakub]

@jakub, checkout most recent version https://bitshares.openledger.info/#/markets - svk has fixed some of the issues today

Thanks, valzav & svk & cass (and whoever else works on this).

The number of issues that I've been reporting might look a bit overwhelming (they seem to never end) but I'd like to let you know how much I appreciate your efforts.
I know it takes a lot of work and time, especially for the final tweaks like these.

[bitacer]

On web wallet , when you attempt to buy a membership it asks for your password to confirm , that does not happen on Turkish version . It directly asks you to confirm the transaction and proceeds if you click yes even though the wallet is locked.

[Pheonike]

Can we get a tile view option for the exchange page too?

[valzav]

@jakub, checkout most recent version https://bitshares.openledger.info/#/markets - svk has fixed some of the issues today

[cass]

Dark font colors on the #/markets page make the tile titles unreadable.
(This refers to the Open Ledger color scheme only)

thx jakub .. yea i'm on it .. was a fast shot during my stay in shanghai tbh (not much time etc).. i will go over the skin this weekend ..!
And thank you for your input .. it's well appreciated.

[jakub]

This is great and very useful jakub.    Fuzzy, send this man 300 brownies!

Thank you, BM.
You noticing it and acknowledging the importance of the GUI being flawless - this itself is absolutely rewarding for me.

Later on I'll open the corresponding issues on github and amend the URL links between github and the forum posts.
(I am assuming here that the devs find this kind of workflow useful)

[jakub]

There should be a list showing the history of my filled orders directly on the market page.
Having to refer to the account's overview page to access this information is not very convenient - it should be part of the market page.



github: https://github.com/cryptonomex/graphene-ui/issues/383

[bytemaster]

This is great and very useful jakub.    Fuzzy, send this man 300 brownies!

[jakub]

The font size for headers' subtitles of market orders list and market history list is way too small - it takes an effort too read them.
Maybe changing them to a brighter color could also help.



github: https://github.com/cryptonomex/graphene-ui/issues/382

EDIT: fixed

[jakub]

The market orders list should have a total column for both BTS and USD (no matter which perspective of the market is chosen, i.e. both USD:BTS and BTS:USD).
This should be applied only in the horizontal view as there is enough space there.



github: https://github.com/cryptonomex/graphene-ui/issues/381

[jakub]

The cross-hair horizontal line on the price history chart should show its current read-out on the chart's vertical axis.



github: https://github.com/cryptonomex/graphene-ui/issues/380

[jakub]

The text label displaying the details of mouse-hovering over a price candle (circled in red on the screen-shot below) is very difficult to read.
There should be some colors or different shades of gray used to help the human eye distinguish between different bits of information.
Or we could just copy the Poloniex solution - arrange the information in a structured grid.



The Poloniex solution:


github: https://github.com/cryptonomex/graphene-ui/issues/379

[jakub]

When you adjust the time horizon in the blue section below the price history chart and you push the mouse too much to the right-hand side, the adjustment process is unexpectedly reset and you need to start over, which is quite annoying.



github: https://github.com/cryptonomex/graphene-ui/issues/378

EDIT: fixed

[jakub]

The labels in time horizon section below the price history chart seem to be quite random which is confusing - sometimes it's a date (e.g. 15 Oct) and sometimes it's time (e.g. 15:00).  A more uniform convention should be applied.
Also, the mouse cursor should turn into horizontal adjustment mode only when the mouse hovers over the adjustment "knobs".



github: https://github.com/cryptonomex/graphene-ui/issues/377

EDIT: fixed

[jakub]

Switching between different time periods on the price history chart is slow - it takes a couple of seconds to apply the change.
If making it snap is impossible there needs to be a graphical indicator that the user's action is being processed.



EDIT: Fixed (now the transition is much faster so probably no progress indicator is needed)

[jakub]

I guess the label circled in red on the screen-shot below indicates the most recent price. If that's the case, this convention is very unclear for the user.
The most recent price should be placed next to the Settlement Price and Margin Call Price and clearly marked as Recent/Last Price.



github: https://github.com/cryptonomex/graphene-ui/issues/376
EDIT: The issue has been closed by svk.

[jakub]

The horizontal part of the cross-hair line on the price history chart sometimes jumps from the price section to the volume section even when the mouse is still hovering over the price section.



github: https://github.com/cryptonomex/graphene-ui/issues/375

[jakub]

Dark font colors on the #/markets page make the tile titles unreadable.
(This refers to the Open Ledger color scheme only)



EDIT: Fixed (very nicely)

[triox]

I've signed up to github, but I don't know what the hell I'm doing.

What I dislike about the GUI is the whole concept of "following" other people and their balances. I know this is available on the blockchain, but I don't see why it has to be a part of the default and most wide-spread UI. It's just creepy.

Other than that, the GUI is dynamite.

[jakub]

And I have a small but important request to the devs:
Please add a version number (or release date stamp) in the GUI - if you do want to help us in offering the feedback.
Otherwise we have no way of knowing if we are not wasting our time giving you feedback about things that have already been fixed.

I've been asking for it many times. I hope it isn't hard to do. But maybe it is - just let me know.

There is a version number in the package.json
https://github.com/cryptonomex/graphene-ui/commit/3fa801c42481dade205424506fd38e6ad0819b13
It may need to exposed in the GUI too .. but the code iteself has a version

The main thing is to have it exposed in the GUI.

[xeroc]

And I have a small but important request to the devs:
Please add a version number (or release date stamp) in the GUI - if you do want to help us in offering the feedback.
Otherwise we have no way of knowing if we are not wasting our time giving you feedback about things that have already been fixed.

I've been asking for it many times. I hope it isn't hard to do. But maybe it is - just let me know.

There is a version number in the package.json
https://github.com/cryptonomex/graphene-ui/commit/3fa801c42481dade205424506fd38e6ad0819b13
It may need to exposed in the GUI too .. but the code iteself has a version

[jakub]

To get the process started, I have a small but important request to the devs:
Please add a version number (or release timestamp) in the GUI - if you do want to help us in offering the feedback.
Otherwise we have no way of knowing if we are not wasting our time giving you feedback about things that have already been fixed.

I've been asking for it many times. I hope it isn't hard to do. But maybe it is - just let me know.

EDIT: This will also be useful when helping other users with their issues - knowing which version the user is running is the very first thing that needs to be established.
We already have several live environments running (https://bitshares.openledger.info,  https://bitshares.dacplay.org, https://bitshares.org/wallet) so it's not obvious which one has the latest release.
I know that with online deployment upgrading is just a matter of reloading the URL in the browser, but still it's useful to know when you need to do it.

github: https://github.com/cryptonomex/graphene-ui/issues/384

[jakub]

It looks like the GUI improvement process will last for several weeks, so why don't we introduce a standardized workflow aimed at improving the communication channel between the community offering feedback and the devs turning this feedback into code?

We've already had 2 or 3 threads on this forum trying to tackle this communication loop but they've always ended up being quite chaotic as it's hard to keep track of so many issues at the same time if we just rely on a tool which is designed for facilitating discussion, not issue tracking.

Initially I was thinking about setting up a dedicated Excel spreadsheet but then I thought there is no need to reinvent the wheel as github offers very good tools for that. We just need to make a connection between github and this forum.

To make this practical, I would like to propose the following workflow:
(1) When you spot a non-critical bug or have some ideas for improvement, just make a post in this thread (ideally with screen-shots).
(2) If your idea is clearly non-controversial or you've received positive comments on the forum, open a new issue on github and paste a link to your forum post there.
(3) And to close the communication loop, paste the github link back to the forum post.
If you don't have a github account (and you cannot be bothered to have one) just say so and someone else will do the github part for you.

This way an issue/improvement can be handled by the devs in a professional way on github and further clarifications can be offered there. Also, the feedback giver will be able monitor the progress (or lack of it) regarding the issue they've discovered or improvement they've proposed. At the same time, since we have the issue/improvement posted on the forum, the community will be able to offer comments and thoughts about it and help to estimate how important it is (or maybe it does not make sense at all).

What do you think?