[Dashboard Usability] Redesign Dashboard Top Nav

[ThomThomson]

Problem

Currently, the Dashboard Top nav is getting busier and busier. We have a lot of functionality that needs to go up there, and the top nav only supports basic button types.

Solution?

If we were to revisit the top nav, and use more of the available eui buttons, switches, icon buttons etc we could save space, make our top nav toolbar more attractive, and be able to add more functionality without worrying

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[ThomThomson]

I've done some exploration on what this could look like and come up with a few wild ideas for discussion:

View / Edit toggle

What if we did View & Edit mode buttons as a toggle to the right of the breadcrumbs. This is the best I could come up with for the view / edit buttons that:

• Stays in the same place when you switch between view / edit even though the rest of the toolbar may change
• Shows an obvious mode switch - it's either one or the other
• Seems like an extension of the breadcrumbs, like it's a part of the navigation.

There might be a better way to accomplish these goals, but I was unable to figure it out.

Icon Buttons for Actions

What if we used icon buttons instead of written out buttons for the non-primary actions? We would have to show a tooltip very quickly on hover, but we can save a lot of space this way. I've tried to use the most descriptive icons, but there are probably ways to do this better. From left to right the buttons are:

• Settings , shows the dashboard settings just like today
• Share, shows the existing share menu
• Clone, this one is interesting - since we now have settings for renaming the dashboard, adding tags / description etc, we don't need the existing save as functionality, so I've replaced it with the easier to use clone option from view mode to make it more consistent. The icon here is copy, but there might be a stronger one. Of course we'd also update the copy here.
• Reset changes would reset to the last saved state. I used the returnKey icon here, but there has to be a better one that more obviously shows reset. Because we have more room in the tooltip here we could even update the tooltip to be "Reset to last saved state" or something more descriptive.

[teresaalvarezsoler]

I like this initiative. However, I think we need to align with the other apps, Discover, Lens, Maps, etc. The user needs a cohesive and coherent way of finding settings, sharing, reset options, etc. across all apps.

[ThomThomson]

@teresaalvarezsoler do you think we should close this one? I'm okay with doing so. It seems like we're keeping the editing toolbar which means we have a bit more space to play with and that these strategies for saving space are much less urgent. Plus you make a good point about consistency.