Add guidelines for help icon style and interaction

This is an actionable insight from the UX Department: MRs experience async critique research (insight).

What

Throughout the UI there are various combinations of icon variant and color for the help icon. Here are some examples from the MR widgets:

image

image

image

Their interactions are also varied:

  1. Some link to help content
  2. Some show a tooltip
  3. Some show a popover
  4. Some are a combination of link and tooltip/popover

Why

These UI inconsistencies contribute to a lack of polish and impact the sense of trust that users place on the product.

How

Add guidelines on when and how to use the help icon variants (filled vs outlined), which color to use (blue, gray…), and their interactions (links, popovers, tooltips).

Edited by Pedro Moreira da Silva