Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Lens] Improve interface when only visual options are visible #179519

Open
markov00 opened this issue Mar 27, 2024 · 3 comments
Open

[Lens] Improve interface when only visual options are visible #179519

markov00 opened this issue Mar 27, 2024 · 3 comments
Labels
enhancement New value added to drive a business result Feature:Lens impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. Team:Visualizations Visualization editors, elastic-charts and infrastructure UX: UI/UX Designs Requires design mocks before development and UX lead approval on PR before merge. UX
Projects

Comments

@markov00
Copy link
Member

markov00 commented Mar 27, 2024

When using the Gauge chart or a table visualization, there is only a single button on the top of the workspace for the visual options. This button now, without the chart switcher feels a bit lonely and out of context.
We should find a way to fill up that space.

image

In the same context, I also see the missing alignment of the chart panel with the rest of the page, as it now (after applying all the aspect ratios) feels floating in the middle of the page.

A couple of possible solutions/suggestions:

  • align the chart panel always to the top of the workspace
  • let's consider the introduction of the chart title and description as an element on the page
  • move the Visual options and other options to the right side of the screen (these need to be accessible also in the inline editing experience so it's worth starting moving them to the side

@MichaelMarcialis We need your input here

@markov00 markov00 added enhancement New value added to drive a business result Team:Visualizations Visualization editors, elastic-charts and infrastructure UX Feature:Lens impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. UX: UI/UX Designs Requires design mocks before development and UX lead approval on PR before merge. labels Mar 27, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-visualizations (Team:Visualizations)

@kibanamachine kibanamachine added this to Long-term goals in Lens Mar 27, 2024
@dej611
Copy link
Contributor

dej611 commented Mar 27, 2024

move the Visual options and other options to the right side of the screen (these need to be accessible also in the inline editing experience so it's worth starting moving them to the side

I like that. I was going to propose it as well.

@MichaelMarcialis
Copy link
Contributor

align the chart panel always to the top of the workspace

I'm a bit torn on this one. On one hand, I can appreciate bringing the visualization panel in closer proximity to the toolbar. On the other hand, with the introduction of aspect ratios and min/max widths for certain visualization types, I fear this would leave a lot of empty space below certain visualizations and look a bit odd/sparse.

Part of the current "floating" feeling is likely coming from the lack of visual framing between sections like the layer panels and field list (which are aligned top) and the visualization itself (which is aligned center). Perhaps an alternative would be to retain the center vertical alignment of the visualization, but restore some kind of stylistic divider between the three primary sections (field list, visualization, layers). This could come in the form of borders, background colors, etc. Thoughts?

let's consider the introduction of the chart title and description as an element on the page

I like this idea, especially if we intend on keeping the toolbar in its current location. We could display the title of the visualization saved object and offer an edit button to allow users to change the name or description of it if they wish (without relying on the save modal).

move the Visual options and other options to the right side of the screen (these need to be accessible also in the inline editing experience so it's worth starting moving them to the side

This may work as well, seeing as we already show the toolbar above the layer panels in the inline flyout editor already. The one thing to consider here is that the toolbar space above visualization is also used to house any conditionally appearing errors/warnings and the "apply" button (when auto-apply is disabled). Would we want those to also move above the layer panels? Would there be enough space to do so? And would such a change hurt discoverability?


Additionally, I've been considering whether the toolbar menus are even necessary in some cases. For example, could the current axes toolbar menu settings appear within individual layer axis dimension configuration flyouts (accounting for shared axes, like a histogram's x-axis, by updating any shared settings dynamically across both dimensions)? Another example could be migrating visual toolbar settings like line interpolation and missing values to the individual layer settings flyouts. Would it make sense for us to perform an audit of all existing toolbar settings and see if it makes sense to continue to house them there or if they should be relocated/consolidated elsewhere in the interface? Or do we prefer to continue to offer these settings apart from the layer panels?

In any case, I'd be happy to do some explorations on these proposed changes. How would ya'll like me to prioritize this? I'm currently assisting the management team with some designs, but if this is a high priority, I can move it to the top of my to-do list. Let me know.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New value added to drive a business result Feature:Lens impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. Team:Visualizations Visualization editors, elastic-charts and infrastructure UX: UI/UX Designs Requires design mocks before development and UX lead approval on PR before merge. UX
Projects
No open projects
Lens
  
Long-term goals
Development

No branches or pull requests

4 participants