bitshares / bitshares-ui

Fully featured Graphical User Interface / Reference Wallet for the BitShares Blockchain
https://wallet.bitshares.org
MIT License
517 stars 570 forks source link

Re-imagine Menu and Navigation. #748

Closed Xeldal closed 6 years ago

Xeldal commented 6 years ago

I think the entire Wallet UI menu structure and navigation should be re-imagined.

Problems: Navigation is all over the place vertical and horizontal many levels deep. Confusing. Tables and menus in tables and menus... everywhere.

Much of information is horizontal. Both the menus and data tables everywhere are all horizontal. Which in general is terrible for mobile viewing.

First impression of the wallet on the screen is an Exchange desktop. Lots of markets, and symbols and prices etc. Too much for the average user. Looks terribly complicated. While the exchange is an important technological aspect of Bitshares, the wallet should not present the user with the exchange data as the default first impression. You should never see the exchange unless you specifically go there. You want to appeal to everyone, not just active traders to use the wallet. Active traders are a relatively small niche. You want to target people who have and use a wallet. (Just about everyone). Desktop (home) should be simple, clean and generic, ideally nothing to do with the exchange.

Solutions: Exodus is a great example of clean and simple. For a home screen, maybe a blank screen with a big Bitshares logo right in the center. And that's about it. Or maybe some pretty network stats of activity. The more simple the better. The point is, get away from the exchange as default. There will be many(most) who use bitshares that will never touch the exchange.

Click the Bitshares logo in the top left, and primary menu frames left (with icons).

Each Item when clicked, frames a new vertical menu just to the right with a list of further options. Or if no further options exist, it opens the page for that item (see Exodus for an example of what i mean)

Account:

Wallet:

Exchange:

Voting:

Backup:

Settings:

In the Wallet menu if you select SmartCoins, instead of pulling out a 3rd vertical menu, I think it makes sense to expand underneath the item a list of smartcoins, with the option to edit the list. This same expansion works for other items as well, like OpenLedger expands out to show all OPEN.xxx assets. Rudex expands for all RUDEX.xxx etc.

Under Exchange the Internal (simple) would be the default view. Super simple (look at exodus or shapeshift for an example) Just show the trade from and trade to coins and using the existing orderbooks on the Bitshares Exchange populate the fields as if they are using shapeshift. Based on how much they want give them the price they would pay, how much they will get etc.

Selecting Internal (advanced) would bring them to the full featured exchange page like we have today.

Shapeshift and Blocktrades could be listed here also for external coins. Although this might be problematic when a gateway is down, relying on them to send to shapeshift won't always happen and then troubleshooting and dealing with support could be troublesome. It's a shame that our current only option for automated simple "buy"ing is through blocktrades. Default should be an internal exchange. With outside 3rd parties offerings as secondary.

In the Exchange menu I threw in 2 user created portfolios 1 and 2. These aren't necessary at the moment but just something that could be done in the future. Providing analytics based on what the user wants to track.

Bill has a nice mock-up of a clean design with the menu dropping from the username in the top right (can't find the issue number to link) that would be an improvement over the current layout. I like his idea, and his layout could replace the 1st primary vertical menu I've detailed above. For the secondary menu, however, it will be necessary to frame a more permanent view. You don't want to get into multiple level dropdowns inside a drop down. I think I prefer the framed menu as I've describe over the dropdown menu in Bills mock-up but either or a combination of both would be ok.

From the Wallet menu. You can select any of the tokens you hold individually. Selecting BTS for example will pull up a screen dedicated to that coin with all its info. (Look at Exodus for a good starting point) Here you can send, receive, deposit, withdraw, settle, borrow, etc. All the things you can do with that coin. It will also list your available balance, open order balance, margin position etc. Because we are concentrating on a single coin you can display things vertically instead of in a horizontal table so it translates better for mobile.

This issue isn't very actionable as it's very broad and non specific, and may be better suited for a forum post. Or an addition to some of the other existing Menu related issues. IDK. Feel free to close if that's the case.

landry314 commented 6 years ago

Thank you for all your thoughts and effort to improve this program!

I absolutely agree that the exchange should not be the first thing you see. It should function as a simple wallet for people who just want a bank account to hold some bitusd or whatever. The trading might scare them away.

wmbutler commented 6 years ago

I agree with basically every idea here, but, this is not an actionable github item. I'm going to close it and link it to #630

I will look at Exodus for examples and also will be posting some thoughts for market discovery.

I also agree that the Markets should not be the first thing the user sees.