search

elastic / kibana

Your window into the Elastic Stack
https://www.elastic.co/products/kibana
Other
19.72k stars 8.14k forks source link

[Dashboard] [META] Aesthetic by default #118429

Open ryankeairns opened 2 years ago

ryankeairns commented 2 years ago

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

Dashboard enhancements

:star: Possible Presentation Team priorities _:barchart: Lens dependency (?)

Layout

New panel types

Dark theme by default

Bulk styles

See related theming issue

Related work

:bar_chart: Metric and tick enhancements (via Lens)

XY enhancements (via Lens)

Elastic Charts considerations

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:

gvnmagni commented 2 years ago

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.

Guidance 01 Guidance 02

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

Micro Visualizations

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

Light Theme Dark Theme

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 commented 2 years ago

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

Caroline Horn Exploration

ryankeairns commented 2 years ago

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

ryankeairns commented 2 years ago

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 commented 2 years ago

Related to https://github.com/elastic/beats/issues/28071

ThomThomson commented 1 year ago

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: