Skip to content

Blue dot tooltip for Issue boards

Resources

FE @ClemMakesApps

Description

Issue Boards and Service Desk are under-utilized features. Many users do not know they are there or how they could benefit their workflow.

Proposal

Highlight Issue Boards and Service Desk with a Tanuki blue dot tooltip. The floating tooltip brings users attention to an area of the UI. Hovering over the blue dot tooltip opens up a quick description of that feature with links to more information. Users can permanently dismiss this message.

Service desk is out of scope. It is in scope here: https://gitlab.com/gitlab-org/gitlab-ee/issues/3212

(Replace "Tanuki" with "blue dot" below)

Design

Quick codepen mockup (not the finalized design, created for context and discussion):

https://codepen.io/sarrahvesselov/pen/VzeqqN/

  • Conditionally add a bouncing Tanuki next to the Boards menu item, only if the user has never dismissed it.

  • Conditionally add a bouncing Tanuki next to the new Service desk menu item (https://gitlab.com/gitlab-org/gitlab-ee/issues/3049), only if the user has never dismissed it.

  • Service desk is out of scope. It is in scope here: https://gitlab.com/gitlab-org/gitlab-ee/issues/3212

  • Always show only at most one bouncing Tanuki in the nav, at a time.

  • Show the highest precedence Tanuki that you (as the user) have not dismissed yet.

  • In the future we could add more Tanukis in different nav elements.

  • For brand new users, they would see a steady stream of Tanukis as they use GitLab.

  • For ongoing users, each time they upgrade to a newer version, they'll see a handful of new ones during the course of that version (however many we release).

  • "Dismissing" for a user means over all possible projects in the GitLab instance. As long as the user has dismissed it once ever in any project, it counts for the entire project. This ensures that the user only ever dismisses a Tanuki once.

  • The bouncing Tanuki appears next to the menu item, as shown in the mockup.

  • When you mouse-over the Tanuki, there is a dropdown with a message, that you can dismiss. If you dismiss the message, you dismiss the entire Tanuki.

  • In the message, there is a link. The link is to the Boards page or the Service desk page, respectively.

  • For CE and EES, show only the Boards Tanuki.

Screen_Shot_2017-08-01_at_14.16.51

2017-08-01_14.18.16

Screen_Shot_2017-07-31_at_9.27.22_AM_copy

Screen_Shot_2017-07-31_at_9.27.22_AM

Design

  • So a mouse-over tooltip rather than toggle-able, but with clickable area's
  • Pulsating dot:
    • codepen example
    • dot is 8px by 8px
    • dot is 16px to the right of the text inside the nav element
  • State can be stored with FE data, but is preferred to be stored on the user.. so it persists across devices (otherwise creating gitlab-ee~2311884 )

peh9k2wd5g

and opened:

boards

thumbs up icon: svg svg

Graphic: graphic-boards graphic-service-desk

graphic-boards.svg graphic-service-desk.svg

Edited by Hazel Yang