Switch between Dashboard and Visualize

[majagrubic]

No description provided.

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[ryankeairns]

[Capturing ongoing conversation from Slack]

Decisions to make for Phase 1

• Since we cannot easily display an empty panel within the grid, but we do want to keep the 'Create new' call-to-action always present even after a panel has been added (per our review last week with @AlonaNadler ), what should we do in the short term to keep it always visible? See prototype (below) for options.
• Alternatively, if we cannot make one of these short-term options work (or we simply do not like them), then do we just update the existing euiEmptyPrompt to include the 'Create new' button and forego the always visible panel/bar/button once a panel has been added? Instead, we shift efforts towards figuring out a longer-term solution (bottom bar, empty panel in grid, etc.). This means we spend another release or two with no 'always visible' call-to-action for creating new content.
• ^ If we go this route, then a mitigating design change might be changing the placement of the existing 'Create new' button (in the flyout) to a more prominent position near the top of the flyout for example.

Prototype (Phase 1/1.5)

I’ve updated the Phase 1 prototype based upon our discussion (start in edit mode, use existing modal layout, etc.). Given the complexities of keeping the empty panel always present in the grid for Phase 1, I’ve put together an alternative that moves the ‘Create new’ button up top to keep it always present (for Phase 1). There are alternatives (with notes) to this placement which you can view from the main page of the prototype link: https://www.figma.com/proto/EwodWYRUIjbNvYoi9G4Hnh/Lensboard?node-id=462%3A25229&viewport=1261%2C1950%2C0.37530964612960815&scaling=min-zoom Feel free to comment on the prototype or in this thread. Thanks!

cc:/ @majagrubic @AlonaNadler @timroes

[ryankeairns]

Feedback from Alona:

few questions:

1. can we have the empty panel as it is in the image when the dashboard is empty?
   

2. when the dashboard already has a few panels, ideally we can have the empty panel but I understand it is difficult. What are the feasible alternatives ?

@AlonaNadler I've noted some short-term alternatives in my comment above. Essentially, I see two options:

• place a button in the header (this is clunky, technically speaking)
• live with no button, move the existing button to a more prominent place in the flyout, and shift efforts toward an always present panel and/or a bottom bar.
• (adding another row for the button is in the mockups above, but it likely takes up too much space)

[majagrubic]

I am in favor of an empty panel. If this something that we agree on, I can start putting an effort into figuring out how this would work. The question of usability of this once the dashboard already has few panels is still questionable though.

[ryankeairns]

^ I am leaning the same way (empty panel when no panels) plus, coupled with that, moving the existing button to a better location within the 'Add' flyout... something like this which opens the viz type modal (removing the current popover menu that only contains a single link for 'Visualization'):

[ryankeairns]

I will add screenshots to this issue to clarify exactly what is being proposed.

[ryankeairns]

@AlonaNadler @timroes @majagrubic

Alright, we're narrowing in on our Phase 1 approach, but we've discussed many options and the final decision is still unclear. Here are some screenshots to better define where we stand for this initial effort. Please see the green note cards on each for description.

Ultimately, we need to decide on two parts for Phase 1:
A. what to do with the empty/welcome panels in the 'edit' and 'view' states
B. what to do with the 'Create new' button which provides the streamlined flow into Viz (and later Lens)

1. Option: Upon starting in in edit mode, show a new, minimal empty panel

This presumes we want to add this new panel to the grid in a subsequent release. Alternatively, we may want to go with the bottom bar or some other solution which makes adding this now less appetizing.

2. Update the welcome panel when in 'view' mode.

We could also use this design in 'edit' mode instead of the more minimal panel, especially if our preference is the bottom bar or something other than adding the minimal panel to the grid. This is how it works today - this panel appears in both 'view' and 'edit' mode albeit with slightly different text.

3. For Phase 1, we're unable to show the new minimal empty panel once a real panel has been added

I've added this screenshot to emphasize the point that the 'Create new' button would not be visible and only displays at the bottom of the flyout if we do nothing else

4. Suggestion: we live with the situation (described in previous point) for one release, and improve the 'Create new' placement in the flyout by moving it near the top

5. Alternative placements, for Phase 1

I share these for consideration, but each has drawbacks or may not be doable in the short term

What I am personally learning towards for Phase 1 is:

• Update the existing empty/welcome panel to include the 'Create new' button (@majagrubic already added this) and use the new graphic and copy (as seen in screenshot 2)
• Presuming we are leaning toward the bottom bar in the longer term, just continue showing the aforementioned empty/welcome panel; foregoing the more minimal empty panel (as seen in screenshot 1)
• Then, as a mitigating factor, move the 'Create new' button in the flyout to be more visible/discoverable (as seen in screenshot 4)

After Phase 1, we immediately switch gears to the bottom bar for the Phase 1.5/2 timeframe.

Thoughts?

[majagrubic]

Thanks for this @ryankeairns, this is very detailed 🙇‍♀
I like the proposal for Phase 1 as described in 1-4. I would go with redesigning empty screen as is shown in 1 and add the empty panel in the grid in one of the next releases. I think any reorganization of the "Create New" button as shown in alternatives under section 5 is just an unnecessary effort and I'd rather put that effort towards "empty panel in the grid" solution.

[AlonaNadler]

I like option 1 for the empty state, since we are sort of coupling Visualize and dashboard together. Can you make the empty panel bigger? so when going back after creating the visualization it feels more centered on the visualization. the second and thirds panel can be smaller my comment is just for the first panel.

Regarding option 2, when creating a new dashboard you immediately land on option 1, then when do you even get to option 2? (reading mode on empty panel)

Regarding option 3, @majagrubic I remember you wanted to explore the ability to add the panel once there is already visualization, any thoughts on that?. I know it is complex (and we can live without it temporarily) but it would be a lot better if we always in edit mode have an empty panel that allows users to add visualization even when there are already panels created.

[ryankeairns]

@AlonaNadler I can answer some of these:

I like option 1 for the empty state, since we are sort of coupling Visualize and dashboard together. Can you make the empty panel bigger? so when going back after creating the visualization it feels more centered on the visualization. the second and thirds panel can be smaller my comment is just for the first panel.

• Maja has already built and merged this design. We can try a larger size when we tackle your third point below.

Regarding option 2, when creating a new dashboard you immediately land on option 1, then when do you even get to option 2? (reading mode on empty panel)

• If you click on Save or Cancel before adding a panel, then you can arrive at this state. It's probably not seen often, but we've added the message there as well to get users back on track.

Regarding option 3, @majagrubic I remember you wanted to explore the ability to add the panel once there is already visualization, any thoughts on that?. I know it is complex (and we can live without it temporarily) but it would be a lot better if we always in edit mode have an empty panel that allows users to add visualization even when there are already panels created.

• Based upon Maja's previous comment, I believe this is where we'll be heading next - figuring out how to keep that 'add panel' visible even after visualizations/panels have been added.