[Meta] Status, Health & Severity

[gvnmagni]

This meta issues is meant to be a reference for all activities related Status, Health and Severity levels across Kibana. The final goal is to create a clear set of guidance for the representation of these kind of information across the product.

This activity is an evolution of a former smaller initiative (#203387) that helped us to realize that we needed to set a wider scope and solve the issue with a more comprehensive approach.

While we initially set this activity with the idea of solving a datavis issue (how do we color severity levels in charts?), we then understood how this could be expanded to EUI component and additional concepts, such as Health and Status. We decided to re-organize this activity in order to frame all this in a better way.

What's the final goal?
A good example of what we aim to achieve is this documentation page made by Dynatrace (link). The final goal is to have a clear set of guidelines that would cover the use of colors, language and semantic, icons, shapes and accessibility features in this specific context.

General consensus
After a few first conversations where Solutions's team got together sharing their own experience, we believe we can start having a series of important points that are generally shared across all stakeholders.

• We need a limited set of levels and colors (ideally 5 or 6)
• Tints of colors chosen to represent levels of health/severity will then need to be applied to various use cases and the use of shades will come in help (specific shade for Text, for Charts, application in element of components such as border and backgrounds...)
• We need to investigate the introduction of additional tints to Borealis color spectrum (namely an Orange for negative levels and potentially some neutral tints for positive levels)

Steps and planning

• Step 01: Define a clear association between Levels and corresponding tints
• Step 02 (in parallel with step 01): Define a semantic logic for levels, how they are called and described
• Step 03: Provide clear guidelines on how to use these levels/colors in components, texts and charts
• Step 04: Expand these concept to icons and shapes

Linked issues:

• Shared Severity color palette (Borealis Update) #203387
• https://github.com/elastic/ml-team/issues/1429
• [One Discover] Update log.level indicators color #202985
• https://github.com/elastic/security-team/issues/11620
• [OneDiscover] Histogram log.level color indication #186273
• https://github.com/elastic/platform-ux-team/issues/634
• Introduction of Severity Colors eui#8537
• [Visual Refresh] Update severity colors eui#8601 (review)
• [Visual Refresh] Add additional color palettes eui#8697
• [EuiPalettes] Add additional color palettes eui#8725
• [OneDiscover] Histogram log.level color indication #186273

[gvnmagni]

Open discussion 01 (separate comment so that we can reply to this directly): Number of levels

While there is a general consensus on the fact that we need a limited number of levels, we should define a specific value in order to proceed.

I feel like like the options that we have are mostly two, having 5 levels or 6 levels but we are not obviously forced into these options, please everybody feel free to expand if needed.

The difference between these options is that a series of 5 levels would give us a sort of inflection point in the middle, in between positive and negative values, that could be used as a neutral point in the middle.

Let's talk about this and see what could be the best option!

[gvnmagni]

Open discussion 02: Colors

While it seems clear the need of an Orange tint (thank you @ek-so for including it already in our color spectrum), I personally still find it complex to define what tints should be use for the positive side of this scale.

Should we consider adding new tints? Should we avoid using Primary blue that is already semantically connected with interactive elements? Are the grey tones too desaturated?

[dimadavid]

@gvnmagni
I think Green for success/good state is pretty standard.
Yellow Orange and Red for more critical statuses works too.

Blue and Blue Grey.
Can you show them in use: charts, alerts, process status etc. would be helpful to see them in context.

[gvnmagni]

After a few conversations we have been able to reach consensus on a series of important points:

1. This set of values will be formed by 5 main levels and an additional one for "unknown/unassigned" values
2. In order to accomodate needs in terms of look & feel and understanding of levels, an Orange tint and a Light Blue (Sky blue) have been added to the Borealis color spectrum. Both these tints can surely be update/adjusted in case of need
3. Naming of levels still needs to be defined and UX writers will be involved, for the sake of moving forward we will be starting with the naming shown in the next image

This will be our new starting point and we can proceed testing it out starting from these values. In order to do that, in our Figma file I created a set of color variables for the following kind of interface elements:

• Backgrounds (filled and light)
• Borders (strong and base)
• Text
• Datavis

The logic behind the choice of the used shades for each of these variables has been as consistent as possible with the choices made in Borealis. We can now use these variables to test the result of these colors in various use cases.

The shades applied can absolutely be revised in case of need, this is meant to be a starting point (consistently thought, but still a starting point, in case of need everything is still open)

Everybody can find these variables both within our Figma file, or available as a library within the Elastic organization, please feel free to test it out.

The following images show a few uses cases:

[gvnmagni]

Thanks to solutions designers this proposal has been tested and generally approved. There will be cases in which we will need a bit of customisation to accomodate the context needs (eg Discover, ML) but it looks like this set of colors can work.

Next steps will be:

• Set up proper Figma variables and decide how to integrate these into current EUI Figma Files
• Set up tokens in EUI codebase
• Set up documentation page for proper guidelines

[gvnmagni]

Request for introduction of Severity tokens into EUI codebase has been submitted with the following issue elastic/eui#8537

In the meanwhile, these color variables can be found already in Figma libraries (both Elastic UI and [VR] Elastic UI Borealis)

[smith]

The OpenTelemetry Logs Data Model defines Severity fields. These are the fields that will ultimately encode the concept of a log level and replace log.level in ECS.

When displaying log severity in observability UIs, the guidelines for display in the data model should determine what gets shown to users.

[gvnmagni]

PR for Severity Tokens in EUI is currently under review!

elastic/eui#8601 (review)