[Design Proposal] Creating a global header in Explore

[kasiazjc]

Hi all,

We've been getting feedback that Explore is quite cluttered, so we wanted to clean up the UI a little bit and one of the things that we would like to change is the header in Explore. It is also related to changing the chart creation flow that Jess proposed.

I am looking for feedback around creating the global header with cleaner design. The global header would also include "save" button - so we would separate "run" and "save" flows. More context below (in the designs there may be some other changes, but as they are in progress, please do not take a closer look at them just now - just global header!)

Current design
→ Title of the chart is shown above the chart and it may be easy to miss
→ There is a lot of different icons and pills. This causes a few problems -

• the icons may not be intuitive,
• the primary actions are hard to find,
• it's not scalable - when we want to add more actions/ways to download the results, we struggle with adding it in a "nice" way so it does not clutter the design further

Proposed change
→ Header is now global at the top of the page, so you can see that it is related to all of the content visible on the page
→ "save" button is added to the global header in context - before it was placed next to the run button, which was causing problems with discoverability
→ There are "quick actions" placed next to the title of the chart - adding to favourites and copying the url link
→ Other actions are added to the "more" button on the right, next to save button; "download" is now scalable and we can add many different formats.
→ Pills related to performance (time to execute the query, number of rows) stay above the chart

Screen.Recording.2022-03-10.at.12.00.27.mov

Let me know your thoughts. Thanks for reviewing! 🙏

[j4m4l]

May I suggest we expose the top bar "Action Menu", so custom actions can be added (to extend Superset) .
Ex - we had a use case to provide the statistics about query performance as pop up, when such an action is clicked.

[kasiazjc]

Thanks for the comment and sorry - I am not sure if I understand what you mean by "exposing the top bar Action Menu". Could you tell me more?

Custom actions can be added to this Action Menu/popover with the list of actions by the Superset users and this could trigger additional popovers etc. So you could have something like this for example and it would trigger the pop up:

[ktmud]

This definitely looks cleaner than current design! Can you also show where the status label/query running time counter and row count pill will be located? I'd imagine still near the save button? Sorry that I missed this one!

May I also suggest increase the spacing of the dropdown menu and add icons to menu items to increase usability?

[kasiazjc]

Thank you!

For the dropdown menu we will be actually using components that are already in the app for the consistency, maybe I missed something in the designs though and it's different 🤔 We are now working on creating a design system for Superset and then we will be making some adjustments to the components, so I will add increasing the spacings to the feedback section.

When it comes to the icons I think it's tricky, because it may be hard to scale in the future when we will be adding more things and through testing we found that icons are not that intuitive. In components like this they may be too overwhelming too, so we'd like to use them as little as possible if that makes sense.

[danisola]

Overall looks much cleaner and organised!

The only thing I'm not convinced about is the "Run the query" button at the bottom of the middle column. In my opinion, it's the main button on the screen and it should be better next to the "Save" button. It applies to the whole chart, so I think it makes sense to have it in the global header.

[kasiazjc]

Thank you for the feedback Dani!

We moved "run" button to the bottom of the control panel to put it in context and we wanted to separate the two buttons because "save" and "run" are two different flows. Global header is more of a "settings" section, and everything below is more of a "creation" section. When you are creating the chart you make changes/configure the chart in the control/middle panel, so ux-wise it's more natural to put the action in the context, otherwise after the configuration user would have to look for the button that would apply the changes they made. We also tried to emphasise the "run" button more, that's why it's a primary button and "save" is a secondary button. Hope that makes sense! Saying that, I will gather more feedback and look into it.