New app switcher design

[rashidkpc]

With the move away from tabs inside the wrapping "Kibana" app, we need a way to switch between apps that hopefully requires less than 2 clicks. I imagine a collapsable drawer that is available on every page at the top, with a row of icons. This would keep the tab experience, but allow us to also convey that these things are apps with their own functionality

Phase 2 of this might shift the collapsable drawer to include only "favorites" which can be added, removed and reordered. The drawer would have a "more apps" link to bounce the user to the app switcher page.

[alt74]

I like 👍 I'll explore this...

[rashidkpc]

Quick mock up. I figured that drawer could be collapsable. Ignore icons, arbitrary.

[alt74]

1

[alt74]

2

[alt74]

3

[alt74]

4

[alt74]

5

[alt74]

6

[rashidkpc]

Number 4 is my favorite. I'm not a fan of drop downs for this as they're require an extra click every time you move. This design would require every app to come with a 16x16 (or whatever) icon. What would the UI look like if there were too many apps to fit horizontally?

[alt74]

7

Option 5 - Thinking outside the box to keep the vertical space to a minimum. All other options are taking up quite a bit of space and we got a 3 tier top bar going on. Also, I reduced the size of the logo to win some extra space.

[alt74]

7 Collapsed

Menu turned off. So same functionality as all other options. User can decide if they want to see the menu or not.

[rashidkpc]

What happens when there's too many apps to fit horizontally? What about a side bar? A sidebar could at least allow us to scroll and would use more plentiful horizontal space vs limited vertical space? Also not a fan of the boxing effect of the header on those last 2

[alt74]

Yeah horizontal navs can run out of space quickly also harder to read a longer list vs vertical. And left hand nav that is able to collapse wouldn't take away a lit of space. I'll explore this mocks coming :)

[alt74]

Left hand nav study. Could collapse down to just icons.

[spalger]

@alt74 👍 Looks very clean and modern

[alt74]

[spalger]

superseded by #5796