Review How We Present Empty, Null, Undefined Values

[MichaelMarcialis]

Currently in Lens, it can be difficult to distinguish actual empty, null, and undefined values from their string counterparts. For example:

• We display (empty) to represent an empty value. However, this is nearly indistinguishable from an actual string value of "(empty)". The only visual indicator is the use of subdued text color.
• We display - to represent a null value. This is indistinguishable from an actual string value of "-".

Here's a helpful POC, provided by @nickofthyme, below shows the example values in code form and string form.

Should we reconsider how we are presenting these values in Lens visualizations? Should they be visually offset (italics, icon, color, etc.) in some way that indicates they are not simply a string value? As part of the forthcoming addition of color-by-term support to tables, we are planning to identify these special values with a prefixed asterisk icon, italic font, and accompanying descriptive text in the color mapping interface. Should we take a similar approach in our visualizations? Or perhaps indicate the values with an EuiCode component? Or leave as is? Assuming we do wish to make changes, we should also ensure that other Kibana apps (such as Discover) take the same approach for consistency.

CCing @nickofthyme, @teresaalvarezsoler.

[elasticmachine]

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

[dej611]

Possibly related issues: #156714, #115761

[markov00]

We believe this should be approached holistically and globally in Kibana, not just in Lens, but also everywhere else. It would be great if Design could provide the right guidance to follow in all the proposed cases and any other cases where values are missing/undefined/null/not-available.

[MichaelMarcialis]

Thanks, @markov00. I'll bring it up as an agenda item in the patterns working group to see if this is something the design team can provide some guidance around.

[gvnmagni]

tagging myself to follow the discussion @gvnmagni

[MichaelMarcialis]

Update: I've spoken with the patterns working group. The general consensus was that:

• Actual special values (empty, undefined, null) in user-generated table visualizations (including Discover's data grid), visualization legends, and value selector dropdowns should be represented with 1) italic font style and 2) subdued font color. If the user chooses to manually override the font color via the Lens color mapping feature, so be it.
• String values for "empty", "undefined", "null" will be shown as any other ordinary string (i.e. no offset font style or color).
• Non-user-generated tables (such as the various content management tables across the Kibana platform) are excluded from the above.

I will plan to write up a document for adoption into our official UX patterns library and share here for visibility. Stay tuned.