elastic / kibana

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

[Side Nav] Show icons in recents list #69664

Open timroes opened 4 years ago

timroes commented 4 years ago

In the old navigation entries in the "Recently viewed" list had an item of the application they belong to in front of them:

screenshot-20200623-095208

In the new navigation there are no icons anymore:

screenshot-20200623-112742

Icons help users drawing a quick mental link between the item and the actual content. Iconography can be significant faster than text to draw that link (especially given that often users don't have any significant "differences" in the way they name e.g. their dashboards vs canvas workpads).

Not having icons in that list makes the quick identification of individual entries in that list for users significantly harder and thus I mark this as a UX regression.

elasticmachine commented 4 years ago

Pinging @elastic/kibana-core-ui (Team:Core UI)

ryankeairns commented 4 years ago

While there are existing icons that could be associated to most of these items, the general directive is that we (Elastic) have opted to discontinue creating icons (i.e. logos) for every product. Given that new direction, the icons were intentionally excluded from the new nav design as new products will no longer have an associated icon.

Perhaps there is another solution here such as appending the app name to the link, but I'm not sure if that will work in this design.

@johnbarrierwilson do you have any thoughts?

timroes commented 4 years ago

This is really sad to hear. While studies usually show that icons by themselves are usually not recognizable, they also show that users are quicker at parsing and thus finding and icon than text (not actually understanding that icon, but just recognizing it again). So by getting rid of a lot of those icons, we take a lot of this "find at first glance" away from the user.

alexfrancoeur commented 4 years ago

I've actually run into this issue when having both a dashboard and a visualization with the same name. I can't tell how much of a reality this is for production use cases, but it was very much a trial and error to get to the right item. If we choose to address this issue, outside of navigation, I believe we'll need a similar differentiator for navigational search - no? At least, that's what we previously planned. It's not uncommon, and we already have visual indicators by "type" today. I think the larger question is, does it overwhelm the new simplistic nav.

image

image

image

image

We planned to have this type of indicator in navigational search:

image

Not Kibana, but another search example:

image

ryankeairns commented 4 years ago

The latest search designs also remove the icons from saved object results, for the same reason. Applications returned in the search results would show the parent (i.e. solution) logo.

Reminder, the intent is to show recents in the default search results. In that case, the application name would appear as metadata/subtitle which addresses this concern to some degree as well. See the Web Traffic / Logs example below.

Screenshot 2020-07-07 10 25 08
johnbarrierwilson commented 4 years ago

...the intent is to show recents in the default search results. In that case, the application name would appear as metadata/subtitle which addresses this concern to some degree as well. See the Web Traffic / Logs example below.

That's exactly right. The issue that @timroes brought up is true and thankfully just a temporary problem. An icon in the sidebar for recently viewed items might be helpful, but ii isn't taking a step in the direction we are going for solving this problem in the long-term.

Once recently viewed items are in the global search area of the header (hopefully sooner rather than later), the colored application name in the result will serve that same purpose. If the proposed solution that Ryan shared was just the text below the object name without color, the icon argument would still be valid. But, as the label has color as well, it serves the same purpose as the icon in helping users quickly identify the object-type they want to access.