Consolidate Top Bar and Dropdown Menu to Left Side Under Bitshares "b"

[Xeldal]

Problem: Navigation is a mess. We have 5 different competing styles of organization and you can't find everything in any of them. Some items are repeated in 3 or more places. Some pages are slightly different depending on how you choose to get there.

menu items feel strewn all over, unorganized, all as top level items. where they could be grouped from a single menu.

Solution: We only need 1 comprehensive menu.
Menu should not be more than 2 levels deep if possible. Top level should be as simple as possible without being too general or too verbose.

Because there are 2 levels, having it on the left in vertical columns is ideal as apposed to the right side where you'd be moving from right to left, which is backwords in reading. Or from the top where you quickly run out of room and make a mobile version more complicated. Because there are 2 levels the 1st should persist. At least if there is a 2nd level for that item or until the "b" is pressed again. Alternatively the first column persists always (except for exchange) and the "b" just brings you to the desktop/home.

Picture first I have the menu Item "Account" selected showing a sample of what you might find there in the second column.
In the second picture is a sample of what you might find in the menu item "Wallet"

The Active account in the top right could still have a drop down for quickly switching accounts like it was previously.

Optional: I've removed the Dashboard. Nothing that's on the dashboard now should be on the ultimate dashboard. but for simplicity it can be added as the top menu item in the first list so you don't lose that page if not linked from the menu. Ultimately the homepage or dashboard will be something less exchange focused and more general. I have some ideas for this but will save for another issue.

Action: The simplified version of the issue is simply to move the existing menu from the right side drop down and the top bar, over to the left side and either persist or operate from the "b" instead of the account name.
The more complex version is to actually organize it and give it a second level with all of its paging intricacies.

This issue draws from ideas in #748 and is hopefully more clearly defined and actionable. Feel free to close if not or I'm just repeating myself. : )

[wmbutler]

We might consider placing things that are account specific in a menu under the user's name while placing things that crossover to different accounts as a menu under the bitshares logo. My only reservation in regards to this is that it is unusual for the logo in the top left corner to be a menu. It's typically a link to "home".

When I think of Home, the dashboard comes to mind because it provides a clear snapshot of a user's holdings which is arguably the most important thing for a user.

I'm somewhat philosophically opposed to your mockup that shows a hierarchical menu, or even something that requires 2 clicks to access. They tend to be difficult to navigate and often require some dexterity to choose an option followed by another menu with a sub-option. Also, horizontal menu's at the top leave the canvas free for more width which is great for our columnar data.

Probably the thing that bothers me the most about the most recent change is that I have to navigate all the way down the right menu to get to my starred accounts right now. This is a good argument for the right menu containing fewer items:

• Login
• Send
• Deposit
• Withdraw
• Possibly "Buy"
• Settings
• Help
• Accounts
• Each starred account

With a Left Menu containing

• Voting
• Assets
• Signed Messages
• Membership
• Vesting
• Whitelist
• Permissions

But even then, many of those items proposed for the left menu are account specific as well and are better suited under the user's name on the right side. It's not an easy problem to solve, but I'm happy to keep iterating on it.

[Xeldal]

My biggest complaint with what we have is that the items are scattered. Some items are under the username, some are top bar, some can only be found by first clicking one of those 2 and then navigating yet another menu somewhere else.

I think we can find solutions to your objections. Home: I agree that the "b" is more like a home button and its not necessary that it be link with the menu in any way. We don't have a suitable home page at the moment so I just put up a blank screen with the "b" in the middle. In most cases the menu could persist so there would be no reason to click the "b". Only if you had selected the Exchange where the full width is used, would it be necessary to navigate back home to get the menu. So it's not like a drop down, it is just part of the home page.

2 clicks: The current menu requires 2 clicks. : ) I know the kind of menu your talking about where the second level requires dexterity and skilled mousemanship to accurately navigate to the item you want. Where if you stray too far the menu will disappear and you start over. That's not the type of menu pictured here. Once you've selected the first level item, if it has a second level(some don't, so only 1 click) the second level will also persist, making navigating the menu a breeze.

Horizontal frees the canvas This is true. It's a bit of a trade off though because horizontal menus have there own drawbacks as well. Limited space for the number of items listed and viewing issues for mobile are the biggest. There really aren't many things except for the Exchange that require the full width. Even the largest horizontal table in the poorly name "Portfolio" doesn't require but a little more than half the screen and this and other tables can be made vertical with the proposed menu system if desired/necessary. In addition, if a full width is desirable in some places, it is easy enough add a button to collapse the left menu to a thin strip only showing icons for example. Retaining 95% of the horizontal space. (Example pictured below)

Account specific items Account specific items proposed here are all listed in the first menu item "Account". Hard to get more available then that. There's too many account items to list them all under the account name, in addition to the the list of switchable accounts. The list is just too long. I think limiting whats under the top right account name to just switchable accounts and maybe repeating 1 or 2 other items if you must is the best approach. So long as everything can be found in the main menu and it's not fragmented. Let's not put some here and some there.

Thank you for entertaining these ideas.

[handijk]

I was trying to fix the bitshares navigation in my spare time because it annoyed me the first time i tried bitshares. I stumbled upon this issue when creating a pull request, it is not exactly the same as what you guys discussed but it comes very close and i like the way this works over the way it used to be, an arrow for hiding and showing the menu in desktop view could be added.

Tell me what you think, i also see some more improvements that could be made now, but i will leave those for another discussion.

[Xeldal]

The 2nd level expanding within the 1st is a nice idea. I had intended something like this for the second level to expand and show all the various coins under the items "SmartCoins>", "Openledger>", "RuDEX>" etc ... Anything with the > symbol was meant to do this to avoid having 3 levels.

I think it could work containing everything in the one column. The only drawback being when it expands so long that it pushes the top level items off the screen, you'd either need to scroll down or first close the expanded items. neither of which is a big deal.

I'm pushing to have each coin individually selectable within the menu to get away from the giant table we have now, as well as to showcase and delineate BTS, SmartCoins, and the various gateway's coin offerings. It not only reinforces the fact that Bitshares contains multiple exchanges but also educates the user that there is a difference between these gateway coins and the Core SmartCoins and BTS.

The giant table is too much and is bad for mobile. giving a separate page for each coin would allow you to move vertically with the information and provide a more digestible visual experience. Exodus is a good example of this.

The giant table is good for something though. Being able to see everything in your wallet at a glace. I think we can keep the table but it should be a specific item within the wallet menu and maybe drop all or some of the links to deposit/withdraw , send, adjust, buy, etc to condense the table or make room for other info you can't find somewhere else ... as these particular items would be better located from each specific coins menu page.

[wmbutler]

The 'giant table' won't be so giant after we implement responsive design. It's just something we are dealing with for the moment.

I'd like to avoid having left right and top. It starts to feel arbitrary about where we are placing things. Going to let this discussion continue to see if we move closer to common ground.

[Xeldal]

I'd like to avoid having left right and top. It starts to feel arbitrary about where we are placing things.

@wmbutler In that we are in total agreement. That is the impetus for this consolidation.

I don't think we need the top and right menus. But by removing the top menu items, we would have a long strip of "wasted" space. It's something to consider, either "how could we use this space?" or is there a way move the account name in top right so the screen could display fully top to bottom. ??? IDK, I like having the account name up there and it's certainly useful for switching accounts. It might be better to just effectively use the top bar space with something (other than a menu) or just leave it bare. With a full menu on the left.

[handijk]

If you add menu items in the top things get complicated real quickly when adding menu items and you will run out of space on smaller resolutions, on the left there is more room for menu items to expand. The top bar is not just wasted space, you could put a page specific title there, or, even better, you could put a global search on top which shows (e.g.) starred markets and users on focus and could be used to autocomplete search users or markets.