[Dashboard] [META] Aesthetic by default

[ryankeairns]

Placeholder for now. Currently conducting research and will add findings + suggestions here.

Dashboard enhancements

⭐ Possible Presentation Team priorities
📊 Lens dependency (?)

Layout

• ⭐ [Dashboards] Collapsible Panels #1547
• 📊 [Lens] Improve metric alignment #120386
• [Dashboard] Layout templates #124457

New panel types

• ⭐ [Meta] Standalone text embed for dashboards  #120420
• [Dashboard] [Meta] Provide a dedicated image panel #57241
• [Dashboard] Provide a dedicated video embed panel #124415

Dark theme by default

• https://github.com/elastic/cloud/issues/96627 (via Cloud)
• Dark Mode per User #48687 (🚫 blocked by user profiles)
• Ability to set dark mode per dashboard rather than only globally within a space. #75081 (🚫 blocked by theming)

Bulk styles

See related theming issue

• ⭐ 📊 [Dashboard] Configure axes across an entire dashboard #124460
• ⭐ 📊 [Dashboard] Configure legends across an entire dashboard #124461
• 📊 Set/change color palette across an entire dashboard #124462

Related work

📊 Metric and tick enhancements (via Lens)

• [Lens] Make metric color fill the entire space #122091
• [Lens] Add metric Viz config options, title position and sizing #124124
• [MetricVis] Add possibility to configure label font and position in metric unified renderer #125251
• [Lens] Make metric color fill the entire space #122091
• Employ nice ticks via feat: nice ticks everywhere elastic-charts#1087 (fixes X Linear scale wrongly compute ticks elastic-charts#364)

XY enhancements (via Lens)

• [Lens] Default legend size to fixed #129474

Elastic Charts considerations

• Typography improvements (bold options, consistency, etc.)
• Chart typology (e.g. circles or hexagon shape option for heatmap)
• Metric + micro combo visualization elastic-charts#1578
• Remove the padding in Elastic chart elastic-charts#736

Promote the use of more visualization types in editors

See what is available: https://elastic.github.io/elastic-charts

Consider the design / handling of small multiples in a dashboard:

• [Lens] Support small multiples / facet / trellis for XY and Partition charts #72063
• Small multiple for gauges/bullet graph elastic-charts#1235 (related)

[gvnmagni]

Hi all, with @ryankeairns help and guidance I made a little analysis of dashboards made by other companies in order to understand what are the features that we can integrate as well to make our dashboard more beautiful and aesthetically pleasing.

This is a list of the most important points from my perspective, it could be easily improved and I strongly encourage everybody to contribute, I would love to see what other people think about this:

1. Grouping charts / Including charts into groups (maybe collapsable) force the users to create rows of charts and it creates an additional margin between rows creating a bit more of empty space that makes everything lighter.
2. No axis labels when unnecessary / Most of the times using a better written title can save us from having labels on the axis, 99% of time based charts can be solved this way
3. Color contrast between shapes and background / A vivid a vibrant contrast between charts elements and the background can help a lot in making it look more appealing
4. Dark theme / Unfortunately this is not a very deep point, dark themes always make platform look more techy and can have higher contrast with colours. Some competitors set it by default, we could differentiate by type of users
5. Color gradients. / I’m not a fan of this given the implications that this might have in reading data, but I’m sure that users love gradients
6. Typography hierarchy / Especially in textual components such as Metric
7. Charts typology / Two ways here, we can easily improve our current charts with new options (heat maps with circles) or we can create custom charts since we know the data structure coming from Elasticsearch
8. Thumbnails - Metric upgrade - Micro Visualization / We can improve our Metric component to be more appealing and even more informative.

A longer explanation of these points can be found here: LINK

What I did then was trying to apply few of these concepts to our dashboard and these are few things that I would love to share.

1. User guidance
In order to avoid the user to create messy and unnecessary complex dashboards, we could implement a sort of initial guidance. I drafted two alternatives, one with short and direct indications, one with longer descriptions.
I know this get in conflict with our current starting point for dashboard but would be interesting to see if there is room and interest for this kind of features.

2. Micro visualisations
Our metric component could be improved by adding a simpler version of our current charts behind the text. This would help in adding an information layer and at the same time it will make the block more appealing thanks to the use of colours and shapes

3. Overall mock
These two images shows how we can apply few of the points above (grouped charts, no axis labels, vivid colours, microviz…).

Please keep in mind that these images are purely speculative, not a single rule of our design system has been fully respected and we should take these only as material to start a conversation rather than actual design mocks. Even though I would love to hear from people and to understand if there is an interest in discussing these aspects.

[gvnmagni]

This is an exploration made by @cchaos that I would love to include into the conversation. I made a quick export in order to have an image here but the Figma file can be found here: link

[ryankeairns]

For those following along, I have updated the description to capture Giovanni's feedback as a set of issues organized by topic.

[ryankeairns]

Quick update - several PRs have been merged (linked in description, above) that provide much more flexibility with metric visualizations. This will help us move much much closer to the proposed designs suggested by Giovanni (full color backgrounds, better text alignment, etc.)

Something else for us to track: redesigning/improving the sample data dashboards. Perhaps a good trigger for this would be when Input Controls move to GA and we have a native text/markdown panel. cc:/ @andreadelrio

[ryankeairns]

Related to elastic/beats#28071

[ThomThomson]

Removing the Presentation team label from this for the time being. If the designs and ideas here result in an actionable change we can open a new issue to make the change.

Otherwise, we will keep focusing on the improvements identified in Dashboard Usability, and will continue to explore different styles for Embeddable panels.

Together with the beautiful new metrics these should cover most of the worse offenders harming dashboard aesthetics, but I do think it's worth continuing to explore this, especially the look and feel of dashboard panels. We should think about questions such as:

• Is the background color of the dashboard correct?
• Do the Dashboard panels need shadows?
• Do the dashboard panels need a border? In edit mode should that border be dashed?
• Is the border radius correct?
• Is the gutter size correct? Should we provide more options for gutter size? small | large | none for instance?