[24] Tables Rewrite - Dashboard

[wmbutler]

The idea behind a tables rewrite is to change the look without worrying too much about functionality. This amounts to a facelift while establishing some best practices for the future. The wallet has a somewhat haphazard approach to accessing certain features. Some items are in a top menu and others are on a side menu. Side menus are notorious for wasting horizontal space. I think they should go away ultimately, but don't want to change so much at once that it confuses users. With that in mind, I'm going to submit a table concept for the Overview page. As you can see, I've suggested that we call it Dashboard instead.

Rather than the user scrolling down and accessing other menus to get to other areas, I've created pills at the top. Areas that contain balance detail also display the total balances in the pill for a glance.

You should notice that the functionality of the table is identical but instead of clickable text, we have meaningful icons. I have also created separate columns for symbols and quantities so our data lines up in a more pleasing way.

As you view this, realize that the top and side menus aren't visible in my mockup. This table would be displayed in place of:

As we get closer to consensus, I also need to propose a light themed version of this.

[btsfav]

great!

[wmbutler]

Open Orders

[wmbutler]

Margin Positions (UPDATED)

[wmbutler]

Activity

[o5j5vg55bv5hv5j5f8799f9]

These look amazing.

Few comments

1. whenever you estimate price of USD I think it should say "~" or "EST. USD" before number. B/c on non liquid assets this can be really random. specifically at the top
2. not clear why in open orders you have asset 1 and asset 2 as the same, shouldn't they be pair specific orders?
3. I don't understand what markets the markets tab shows
4. margin positions - this one needs most work. units are jumping around here.

• maybe switch places for 1st and 2nd columns and get rid of separator so it's clear DEBT is -8000 bitUSD. whenever you have units to the right of a number, number should be right adjusted and units left adjusted, so can even get rid of the separator between them. (see random space before BTS/bitUSD for e.g.)
• Then collateral units need to be specified. I can't remember if it can be something other than BTS, but that needs mention in title of column like COLLATERAL (BTS) or to the right of the column. If to the right, might as well have two units there per debt. one in BTS and one in units used for ratio calculation marked as estimate. so for bitUSD it would say 460,000 BTS and right below it ~51341 bitUSD
• need some more info of when getting liquidated here. easiest might be CURRENT PRICE next to CALL PRICE.
• I simply don't understand what VALUE(USD) means here. Shouldn't it be like USD value of collateral minus USD value of debt? I assume this is the only place locked collateral would count for holdings calculation and not in portfolio. I can't get 1345 USD out of 8000 USD and 460k BTS collateral anyway.
• update row adjustment seems pointless on all of them. should just be sorted by column
• update position field is missing
• very bottom does nice job of summing it up. could make it clearer by putting default units on it and summing up total debt in usd with negative sign, total collateral in usd with negative sign, and net difference for value where it does now (I think). both value column sum and addition of all collateral minus all debt should lead to same number at cross section where 700,000 is written now.

honestly I like having it all on one page with title and black space in between, but I'll manage w/o it too.

5. since portfolio is where the coins you have right now are, available to send, maybe it makes sense to call it just "wallet". there's been some confusion about bitshares dex and where bitshares wallet is and whether people should withdraw from the dex to be safe. It's obvious but having the words wallet written somewhere might finally get people to understand this IS the "wallet". They are literally viewing their account on blockchain.

Hope this helps. cheers.

[wmbutler]

1. Maybe a blanket disclaimer somewhere. Easier and cleaner
2. So there are 2 separate columns for those who want to export to a speadsheet. I'm open to combining them.
3. Doh, posted the wrong image. Will repost.
4. It's just a mock :)
   • Not sure I agree with numbers vs asset. I like to see the asset first.
   • What else can act as collateral?
   • That's the value of the collateral.
   • Not adding new features yet. Just changing the look of the tables. Patience grasshopper.
   • Value of the collateral (same as current data but with a different table style)
   • That allows the user to update their collateral position
   • See above
   • Units are in the header. Do we really need it at the bottom too?
5. Wallet is a bad word because it might make people think they are in the wallet mode rather than account mode.

[o5j5vg55bv5hv5j5f8799f9]

re: what else can act as collateral? - from asset creation menu if you check smartcoin, can write in text for short backing collateral: https://i.imgur.com/XGm0ufl.png for example (no idea if works)

re 5: as has been suggested before, wallet-model is extremely confusing and leads to most common questions in support. word "wallet" is used in "wallet model", bitshares.org/wallet, web wallet (which is what all web UI are), light wallet (software wallet, downloadable client has it directly in file name), and generally wallet is "A cryptocurrency wallet is a secure digital wallet used to store, send, and receive digital currency". generally, wallet is "where your money is".

I have 50+ crypto and they have all generally referred to wallet as software and location in UI where you see your balances: most common wallet design: https://i.imgur.com/bY8j4if.jpg or e.g. steemit web wallet literally has a tab called wallet for balances. openledger.io (most used ui?) under simple mode writes out "wallet" at the top too.

the only phrase that has the least business of having the word "wallet" in the name is "wallet-model"

wallet model is extra confusing because people who are trying to get a wallet pick it because it's called wallet. account model users are confused how do they withdraw money to their wallet from the dex. bts predates a lot of crypto, but should be consistent with terminology to make it easier to understand.

The main difference is in backup requirements (file) and having multiple accounts - hence I think "wallet model" should be renamed - "file model" or "multi-account file model" with the first option hidden unless advanced user. Someone restoring from a file will quite obviously figure out file one is the one to use.

[wmbutler]

Regarding the wallet naming, I think we are stuck with it. I think if a user picks an account model and then sees their wallet balance, it's going to get very difficult to support them, whereas, their portfolio can be referred to as such whether they choose the wallet model or the account model.

[wmbutler]

Markets

• Maybe we need the logos here too?

[wmbutler]

Colors:

Top Left Holdings: 27384B Top Bar: 1A242F Dimmed Header Text: 606060 Table Header: 1A242F Table Cells: 27384B Bright Text: 000000 Green: 7ED321 Table Cell Border: 323131

[wmbutler]

On side bar:

• Change Overview to Dashboard.
• Remove Open Orders since it gets incorporated into the Dashboard.

[svk31]

Holdings vs Portfolio is confusing to me, they mean the same thing.

[wmbutler]

Let's call is Estimated Value. This fits with the recent naming convention changes. I updated the mockups to reflect this.

[tbone-bts]

I really like the new design of these tables. One thing confuses me, though. What is the purpose of the Markets table? Unless I'm missing something, it really doesn't seem to belong here.

[wmbutler]

Well, the problem is.... it doesn't really belong anywhere. Right now it's located above the hierarchy of a chosen account, which, for the majority of our users is kinda silly because they only have 1 account. This means that they have to migrate up in hierarchy to view the market and then choose their account after that. So..... I was thinking, why not just put the market in the dashboard? It's still available to all accounts but it's not in the awkward spot it's in now.

[svk31]

The table layout of activity is very problematic due to the amount of different transaction types (~40). Trying to fit them all in a table will require a lot of columns, making it confusing imo. It also does not handle proposed transactions very well, I'll see if I can find an example of how that looks atm.

Due to the amount of columns its also very bad for smaller screens and mobile, that's a general concern of tables.

[tbone-bts]

Well, the problem is.... it doesn't really belong anywhere. Right now it's located above the hierarchy of a chosen account, which, for the majority of our users is kinda silly because they only have 1 account. This means that they have to migrate up in hierarchy to view the market and then choose their account after that. So..... I was thinking, why not just put the market in the dashboard? It's still available to all accounts but it's not in the awkward spot it's in now.

I'm not just confused about why the Markets table is in the dashboard. I really don't even understand what its purpose is, or how it's specific to a user. What is its equivalent in the current UI? Sorry if I'm being dense!

[wmbutler]

@svk31 The motivation behind activity was to make it useful for exports. I've reposted it with a new look but left the layout and functionality the same as the old one so we can move forward and tackle a better exportable activity screen at a later date.

[wmbutler]

@tbone-bts I just explained it. It's current equivalent in the UI is this:

[svk31]

Does that mean you want to remove the current Dashboard?

[happyconcepts]

Is there a specification for this dashboard rewrite? I ask because I share some of @svk31 's concerns such as small screen usability, for example.

My higher level concern is that this dashboard page needs to be simplified and not crammed with all the collateral data columns etc for advanced users at the expense of basic or casual users. I would urge breaking the content into two separate screens; back when there were 3 coins it made sense to show them too on this screen, but now no longer IMHO.

Although the dark blue #27384B table cell bg is quite pleasing to me, the trained UX part of me recognizes that the table itself already has a different background color from the rest of the page, and the table header color is effective too. I would urge us to reduce color clutter in the table(s).

I support UI improvement and especially UX improvement, and I want to encourage you @wmbutler for undertaking this rewrite.

[wmbutler]

@svk31 I think we should have a screenshare to go everything. @happyconcepts the contents are identical to the current contents, just with a more natural table style. Regarding clutter, that will need to be a separate issue. I don't think it's realistic to change the functionality and the style at the same time. I fear we will never get anything completed.

[tbone-bts]

Oh, that. Why not just leave that as is on the dashboard page (behind the Bitshares logo in the main menu)? It really makes no sense on the account page alongside all of those account-specific tabs.

@tbone-bts I just explained it. It's current equivalent in the UI is this:

https://user-images.githubusercontent.com/1254810/30677222-223ce458-9e50-11e7-88d9-1760b51f52a2.png

[wmbutler]

I already explained why.

[tbone-bts]

Maybe I should have been more specific. Your reason for moving it doesn't make sense. Why would a user need to "migrate up in hierarchy to view the markets and then choose their account after that"? In fact, why would a user "need" to view the Top Markets table to begin with? Of course they can, if they like. But they can also go straight to the exchange, and from there choose the market they are interested in viewing. And if they ever find themselves on the exchange page with the wrong account selected, they can always change that right on the exchange page. Absolutely no need to jump around the way you are describing.

So I don't understand the problem. Although perhaps what you're getting hung up on is the fact that the page behind the Bitshares logo, which currently houses the Top Markets table, is called "dashboard" and has some dashboard-y stuff that you want to move to a new dedicated "dashboard" page. That makes sense, but just leave the Top Markets table where it is, rename its page "homepage" and perhaps add anything else that makes sense on a home/default page to make a good impression on (or be helpful to) first-time visitors.

[wmbutler]

I guess my real point is....who really looks at top markets? In the context of trading, I care about my specific holdings and their values. I don't really give a crap about how BTWTY:BTS is trading... Why should I be forced to see that first thing?

I care about My Portfolio on My Dashboard. Sure, I should be able to look at markets if I want, but giving it such prominent placement makes very little sense to me, other than maybe some small indicators for the largest markets like BTC, LTS, ETH.

I'm not suggesting we get rid of top markets. I'm just proposing that we remove it from the default home position because it makes more sense for a user to see their holdings from the "Home" position.

[tbone-bts]

@wmbutler The point I made in my prior post is that the home/default page is for new visitors. Looking at the websites of Bitstamp, Bitfinex, Bittrex and Poloniex, each has a home/default page that is geared towards new visitors in a similar manner. That is appropriate and sensible. Also, 3 of the 4 cited exchanges display Top Markets or some kind of market data on that default/home page.

I really don't think this is even a minuscule problem for existing users. They will simply go directly to the page they like to start on via any number of methods including bookmarks, quick links, auto-fill of recently visited sites, etc.

[landry314]

Are we to ignore any visual problems with the tables as they are to be replaced? The semi blue border that appears on "See More" after you click on it, for example, I was about to create an issue, but it will probably just be closed and referenced to here...

[svk31]

Yea just ignore that for now.

The tables are almost ready but I won't include them in the next release since we need some color schemes for the other themes and more testing.

[wmbutler]

@svk31 There is a black background color that you are missing. It's designed to provide more contrast because of the dark blue.

My mockup:

Your progress:

Also, the header bar should flex width wise so it feels like it encapsulates the contents of each section.

[wmbutler]

I did some testing and I think we need:

• [ ] 12px left/right padding for headers. Be sure to account for left or right justification
• [ ] 10px left/right padding for td's
• [ ] I think we can bump up the font size a small amount.
• [ ] % Total Supply to abbreviate?

Portfolio Page:

• [x] Add Header title: Hide
• [ ] Icon for hiding asset

[wmbutler]

Thoughts for Visible vs Hidden Assets.

• [x] Note Visible/Hidden controls at top.
• [x] Hide / Show controls on last column

[wmbutler]

• [x] Remove Markets Tab/Header. Leave Markets where it is on the current wallet with no style changes. We can tackle that another time.

[wmbutler]

• [x] Remove gray borders from header
• [x] Right justify values
• [x] No currency units on every category (only on Estimated header on left)

[wmbutler]

• [ ] Updated open orders (see above open orders UX)

[svk31]

Your open orders ux needs to include buy and sell orders, and I definitely think the price of the order still needs to be included.

With only the qty column it becomes hard to know what that actually refers to with no units shown anywhere.

[svk31]

Also, how do you navigate from the open orders to a market?

[wmbutler]

• [ ] Let's leave the Markets accessible by clicking on the Bitshares logo in the upper left and remove it from here. That will keep things consistent for now.

[svk31]

I went ahead and implemented Open Orders the way I think it has to be:

QTY in this case always refers to the first asset, Total is the second. Clicking the shuffle icon flips the price and switches the content of the Qty and Total columns, like this:

It can still get confusing for accounts with many orders, as shown below.

For accounts with orders in many markets I felt it was necessary with some virtual separation between markets, like this:

[wmbutler]

I think visually it would look better if you:

• Centered the markets on the swap symbol (see my open orders mock, this probably requires 3 columns with the swap symbol being in the center column with the other columns are justified right and left respectively).
• Keep the row height the same at all times
• aligned all decimals (even if it means introducing padded zeros)

NOTE: I think different markets will be obvious because of the length of the market names.

It's looking great BTW!

[svk31]

Ah yea the centering is just an oversight from some columns that got merged.

It gets very cramped without any spacing between markets, I'll play around with it to check.

The decimals will vary from market to market due to varying precisions of the assets so it's impossible to have them be the same everywhere I think

[svk31]

How about this in Activity:

I put the filter select box, csv and 'More' buttons in the final row, and changed the buttons/text for icons. Should I move it to the top maybe similar to the Active/hidden switch in portfolio?

[svk31]

vs

[wmbutler]

Yeah, that takes care of line height, so now just:

• [ ] decimal padding, max decimals are 8 so why not just display every asset with a padding of 8? This will give consistency which I think will be pleasing to the layout.
• [x] centering on the switch symbol (which will require additional columns with hidden left/right borders)
• [x] Is the order expiration time easily accessible? Having this would allow us to easily move to timed orders in the near future.

[wmbutler]

• [ ] I think the filter controls need to be at the top. Fix the width of the first column so it doesn't change widths with each filter switch. Note the Table Header is the select menu.

[svk31]

I removed the order expiration time since the GUI doesn't allow you to set it anyway, meaning all orders have 5 year expiration times.

Not sure what you mean by the padding for decimals.

[wmbutler]

Regarding expiration times, if we have the info I think it makes sense to display it. By displaying it here, we are providing relevant information and it paves the way towards allowing the exchange interface to accept date/time restrictions on orders.

Here is the difference in look wrt decimal padding. It forces the decimals to line up.

without_padding	with_padding
3,431,231.20	3,431,231.20000000
1.587458	1.58745800
1,231.00	1,231.00000000
345.6789	345.67890000

My point here is that if you always pad to 8 decimals, you end up with a more readable table, one that aligns values making it easier to perform math operations and determine value more easily. After looking at it, I can see arguments both ways. This might be a configurable option in the future, I suppose, if you are opposed to it.

[wmbutler]

This screencast demonstrates two subtly adverse behaviors that would be resolved with my suggestions above:

• Column shifts due to changing decimal precisions will go away
• The user will not need to reposition their cursor to swap pairs

[wmbutler]

• [x] padding-left: 5px on the Active/Hidden container

[wmbutler]

• [ ] 100% height on the black background