emphasize dashboard create new CTA

[AlonaNadler]

In previous releases we emphasized the dashboard create a panel call to action
In 7.10 the create panel moved into the right and changed to less emphasized color

please change the color of the create panel to emphasize it (more than the refresh button)
@ryankeairns

[elasticmachine]

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

[timductive]

Maybe we can tackle this as part of #81812

[ryankeairns]

I'm actively gathering up existing designs and will communicate back out to the team.

[AlonaNadler]

We do have future plans to move to the toolbar model Ryan design

Should we consider an initial toolbar with only add panel?

[ThomThomson]

+1 to the idea of an initial toolbar.

If we do this, we can also unify the placement / highlighting of save buttons between our editors and dashboard which will make transitions even smoother.

[ryankeairns]

+1 to the toolbar design, that's part of what I'm gathering up.

We currently have alignment across all apps in the Kibana group with regards to that header menu layout. That does not mean we can't make changes, but it they should be considered holistically and coordinated.

[ryankeairns]

As Alona notes, the simplest thing we can do is add an initial toolbar with the 'Add panel' button that opens the current/redesigned modal. We could also consider adding a small button group alongside it to surface additional types in order to address the odd 'Create new' UX in the 'Add from library' flyout (for ML swimlanes). It would look something like this...

If we want to make Lens the default for that button, then we could use a separate link to open the current modal or expand upon this second group with something like...

This is not precise with regards to content, but gives you an idea of the options we would have by adding a first version of the toolbar. More to come, but thought this might get your wheels turning...

[AlonaNadler]

With regards to the second image above, @ryankeairns why do you call out all other charts explicitly? what are the benefits in this approach?
I prefer the approach of a button with primary and secondary action. Primary opens Lens secondary opens the chart selection popup in Basic+. For open-source only primary action that opens the chart selection. I think it resonates with what we are trying to achieve in terms of Lens as default. in the toolbar, we can emphasize maps, markdown, controls, ML and in the future dedicate image upload and navigation links

I prefer this approach

The icon though are not well understood, we should somehow add labels to them

[ryankeairns]

With regards to the second image above, @ryankeairns why do you call out all other charts explicitly? what are the benefits in this approach?

It was just a rough idea... I've been discouraged by the EUI from using a split button, so this was a first (admittedly pretty ugly) take on how to expose the other types. I'm in agreement with your preference towards a primary/secondary action.

The one thing we still need to account for will be the library as it does not exist in the redesigned modal (nor did it obviously exist in the old modal).

[ryankeairns]

@AlonaNadler do the toolbar mockups below align with your thoughts for 7.11 and beyond?
I've added labels to the Maps and ML buttons and added a means to open the library flyout. Having ML split out like this will also allow us to fix the odd 'Create new' button in the flyout.

Also, @cqliu1 asked whether we should remove 'Create new' and/or 'Add' from the top header menu.

• I can see the value in keeping 'Create new' (re-named as 'Add panel') in the header in that it stays visible upon scrolling. On the other hand, there's inherent simplicity in having a singular 'Add panel' button (in the toolbar).
• During usability testing, removing the 'Add' menu link proved effective in redirecting current behavior (clicking Add seems to be the default for many), although, the test presented the library link within a menu that opened upon clicking the 'Add panel' button. In the design above, we no longer use a popover menu and, instead, accessing the library is done via the folder button.

[AlonaNadler]

Thanks @ryankeairns that's really good,

For 7.11 mocks:
Should we add a label to the library? 'm concerned people won't find it. We are doing a few changes at once: changing visualize into visualize library, changing the name from add to open library flyout and there is a new icon.

For the future mocks:

• native dashboard elements look great!
• open viz modal I'm not sure it's discoverable enough, we might need to add that to the users tests or figure out alternatives. any reason you prefer that more than the previous design in which the add panel had a secondary action that opens the viz modal?
• In OSS add panel should open the viz model
• in OSS please keep solutions in the toolbar - @alexfrancoeur any thoughts?

I can see the value in keeping 'Create new' (re-named as 'Add panel') in the header in that it stays visible upon scrolling. On the other hand, there's inherent simplicity in having a singular 'Add panel' button (in the toolbar).

I agree let's keep it in the top menu

[ryankeairns]

Thanks for the quick feedback; made a few updates:

• Added 'Library' label (trying to keep the text short, in general)
• Added note to change the header menu link from 'Add' to 'Library'
• Added OSS note re: Add panel behavior

Updated mockup

• open viz modal I'm not sure it's discoverable enough, we might need to add that to the users tests or figure out alternatives. any reason you prefer that more than the previous design in which the add panel had a secondary action that opens the viz modal?

The EUI team strongly urged us to not go the route of split buttons as the secondary options have particularly low discoverability. I'll keep iterating on this and test out another design(s) during the test.

---

Summarizing the work for 7.11

• Add V1 toolbar (as seen above)
• Change 'Add' top menu link to 'Library'
• Change 'Create new' top menu link to 'Add panel'
• 'Add panel' buttons (header and toolbar) still open the viz modal, same as today
• Remove 'Create new' from flyout (I'm proposing this in conjunction with adding the toolbar; same UX for Canvas in future)