Kibana: Lens chart icon design

[AlonaNadler]

Lens uses icons for charts type, it is used to switch between charts, it would be good to have good visual icon for the chart type, this list is expected to grow in the future with any new chart added to Lens

@ryankeairns @cchaos

[elasticmachine]

Pinging @elastic/kibana-design

[ryankeairns]

Here is an initial pass with several different stylistic approaches. There are two main themes (outlined vs filled) with options mixing those two extremes in different ways.

#### A few notes fore reviewers

• Each option (1-6) displays a subset of the icons currently needed (enough to get the feel) in both a monochrome and multi-color variation
• When reviewing, consider the smaller sizes (they were created at 24x24). See how well you can decipher the stacked vs non-stacked, etc.
• The colors are not set in stone, but note how a little accent can help decipher closely-related chart types
• Look for visual consistency across the rows. Are fills and outlines used in a similar way? Do they convey enough information? etc.
• The shapes are also not set in stone. Consider these rough sketches and feel free to note where little tweaks to shapes could be helpful. I intend to rebuild these when preparing the final set.

#### Next steps

Once we settle on one (or a couple) of stylistic approaches, I will build out a more complete initial set also delving further into color options.

Thanks for taking a look!

cc:/ @AlonaNadler @cchaos

[AlonaNadler]

Thanks @ryankeairns icons looks good.
Can we use the Elastic color palette more?
example

[ryankeairns]

Yes, I'll get into color more in the next round. Trying to nail down the shapes and styles first.

[ryankeairns]

Caroline suggested going down to 24x24 as smallest. That example you posted is nice, perhaps we should also discuss whether the minimum size can/should be bumped up a bit. That would allow us to do these more illustrative styles (and add more color).

I'll create a larger set for us to consider.

[ryankeairns]

I'll do more work on this, but here is a very quick-and-dirty test (viz colors + zoomed in) :)

[ryankeairns]

Here are larger, rectangular style approaches (24x36) that use base EUI and Viz color palettes. These are somewhat difficult to evaluate in a vacuum, so I'll try and get some up on a test branch for us to look at in the context of Lens.

[cchaos]

@ryankeairns In terms of sizing, these are the current places where the icons are used:

Right now it's both the large and medium size icons. It might be possible to increase all the usages to be a minimum of the large size 24x24 this does make them way more prominent, both good and bad.

The other option is to have the nice large detailed versions and a few simpler versions (more aligned with what we have now) as well for the cases where we need them in our typical EuiIcon usages.

---

Icon feedback

I visually gravitate towards the second grouping (blue and pink) but maybe it's also work exploring what solid gray and pink would look like (using pink as the main color throughout and adding gray when they're stacked).

I also like the less dense bar graphs, the few bars. Otherwise it might lean towards indicating the trend in their own data which is most likely wrong.

I'd look into your line graphs some more. It looks like your pink line has 5 points, while the blue line only has 4. They should have the same amount. I also found that smoothing the corners makes it slightly more appealing.

Here was the shape that I was using. I also used the same line shape for both the line and area charts.

---

Question for @AlonaNadler

In terms of using these as the layer chart type indicator, we had always planned to try to match the coloring of the icon to their selected coloring. I'm not sure how this will work with icons (mainly split layers). In the POC, I was just rendering a tiny chart with all their specs.

For beta, it's fine to use an icon, even if the colors won't match, but we should consider how we'll be handling this in the future as we develop the icons.

[cchaos]

Updated the first screenshot above, it was the wrong paste.

[ryankeairns]

The other option is to have the nice large detailed versions and a few simpler versions (more aligned with what we have now) as well for the cases where we need them in our typical EuiIcon usages.

@cchaos This feels like a good approach to me - add some more basic chart icons to the EUI set, then create larger/special icons for the keypad menu.

Hacked these into the UI and grabbed some quick screenshots:

[cchaos]

Of those four my eyes definitely still gravitate towards the blue/pink combo. But I worry it starts looking a little Google-y. 🤷‍♀ I also lost the stackedness of the bars just slightly. Maybe you can increase the height of the shorter pink sections?

I'd continue playing with the shape of the line and area charts. Mainly the line one feels lopsided because of the empty space in the bottom right. I think if you ground it towards the bottom instead of the the overal incline, it would help to balance it out.

Thinking about it some more, For the line chart we should probably have the lines cross as to not implicate that it's a stacked line chart (which should never exist). Also, we don't really have a separate chart type for single and multi-series bar charts so You can just go with the multi-colored one. Then we'll still need an icon for a table and a metric (single number) type of chart.

Something like:

And then we'll also need a horizontal bar chart that is missing currently from this selector.

[ryankeairns]

Thanks for the feedback. I've made a few tweaks, added a couple more samples (datatable and metric), and continued to test colors. While the blue/pink combo does stand out, I think I'm leaning towards the gray/green combination. It provides that extra punch (vs our standard icons) without being too bold, it fits with the colors we use in the nav drawer icons, and the green color seems to be the default color of Lens charts which makes for a nice consistency.

I'll start the rebuilding process next, working towards final shapes, while we further discuss color. As part of this next stage, I'll also nail down which additional base EUI icons we would need for the other areas of the UI.

Here is a screenshot of the latest with the gray/green color combo:

[ryankeairns]

This lighter gray may be too weak on contrast, but it's interesting:

Here's the latest pink/gray set; packs a little more punch:

[cchaos]

Oooh, yeah when you showcase it with the rest of the application the gray plus accent (green or pink) color looks great! I would think though, that all the icons would need a dual color combination? So far the area icon is kind of lacking compared to the others. But I'm not entirely sure how to accomplish that. Since the representation is correct.

I think we need to throw a random number or maybe a hash sign in the Metric icon. If you saw the icon out of context of the rest it would not clearly depict Metric.

I agree that the lighter gray, while visually interesting, won't stand up to contrast guidelines. We should also double check on the darker gray color too.

[ryankeairns]

@cchaos @AlonaNadler please confirm that this is the initial list of icons needed. I understand there will likely be more to come, just nailing things down.

1. Bar
2. Bar stacked
3. Bar horizontal
4. Area
5. Area stacked
6. Line
7. Datatable
8. Metric

[cchaos]

That list looks complete to me.

[AlonaNadler]

@ryankeairns icons look really good :)
The area unstacked doesn't have multiple series, which might be misleading. Can you draw multiple series as an overlay same in the line chart , to express the difference between stacked and unstacked
For metric, I find the icon less clear
Personally I liked the color blue pink icons to break the colors a bit, but I don't have a strong preference.

[ryankeairns]

@AlonaNadler I put together this quick example to make certain that I'm following.

Is this what you mean by overlaying additional series on the unstacked version (image on left)? I've included the stacked version (at right) for comparison.

[ryankeairns]

Here's the latest from the draft set... I've updated the metric and inserted the alternative Area icon based upon the preceding comment.

With the colors on top of one other (without any separation), it may be hard to visually decipher. I wonder if the single-colored area chart was enough of an approximation even if it's not entirely accurate? (I may also be misinterpreting that feedback altogether )

[cchaos]

Oh btw, I did find two more we'll need:

• Horizontal bar (you actually have this listed already, but..)
• Horizontal Stacked bar (yeah... we need this distinction... so many bar charts)

[ryankeairns]

I've rebuilt the shapes and made a few small changes to tighten things up (more whitespace, consistent use of spacing and color, mix of rounded and sharp corners - similar to EUI). There are now horizontal and horizontal stacked icons as well.

Relatedly, here are initial drafts for the stacked versions of existing EUI icons (left exists; right is new):

[cchaos]

The darker gray with the green looks really great! The contrast helps a ton to differentiate the shapes. Love the new shapes for the area and line charts. However, I'm not sure about the skinnier bars. I think the extra spacing causes the grouping of the bars to be lost. Looking at the previous mocks compared to this one, I think it's a lot easier to distinguish that it's a bar chart. I also like the way the old bars don't trend upwards. That they're more up-down-up-down.

I also think the table needs a third row and I liked how the content of the cells were highlighted in green versus the headers.

I also lean towards having all corners slightly rounded versus just the tops.

Looking at the glyphs, I think the shapes are right, but what do you think about filling in portions of the stacked versions? At 16x16, it really gets kind of lost. I think the fill will bring out that there is a different "section" to the bars/area.

[AlonaNadler]

Stacked vs normal area looks too similar, can you change the normal area to have on series on top of the other maybe use more transparency in the colors, apologies for nitpicking but this is a big cause for confusion in general between the two charts

[ryankeairns]

Alright, here's where we're at currently... there are a few options for the area + series style:

Other options for Area + series...

As for the EUI icons, I started with the filled parts but moved away from it. That said, I'm wokring at an extremely zoomed in state and can see that they're less 'heavy' at the small size. In other words, its not my favorite from a design perspective, but the all-lines approach can become hard to parse so I can get on board ;)

[cchaos]

I ❤️ all of these!

But I am confused by the line running through the area chart. Seems to me that's more indicating a mix-style chart (area + line).

@AlonaNadler We usually stay away from transparencies in icons as you never know what background they may be placed on that would cause those transparencies to shift the actual colors. I feel like it's enough that the two types are at least different icons and you can clearly see the "stacked" style in the stacked version.

[ryankeairns]

_Quick update:_

• The new stacked icons have been added on the EUI side and will become available in the next release (and once Kibana is updated).
• I believe the last outstanding question is what to do with the Area chart design. Once that is settled, I will attach the cleaned SVGs and hand this back to the Lens team for implementation.

[ryankeairns]

@AlonaNadler if you can weigh in on the final Area chart style (see options above), then I can finish creating the SVGs and get this to the eng team ASAP. Thanks!

[ryankeairns]

@AlonaNadler Here are two new options for the Area chart, based upon the line chart, as requested.

The option on the right does not use an actual transparency; the overlapping section is an opaque fill (darker shade of green). Personally, while I like that look, I'm leaning towards the option on the left since we aren't using this overlapping effect in the other icons.

Here's the proposed full set:

[AlonaNadler]

Excellent!! great job @ryankeairns
Option one the left seems good

[ryankeairns]

Attached is the final set of SVGs, thanks for all of your feedback!

---

👉 final.zip

---

[ryankeairns]

@cchaos here is the mixed chart SVG

---

👉 chartMulti.svg.zip

---

Preview