Design: Improve the hover and click interaction in the DAG graph (Needs)
Problem to solve
Based on user research it takes some time to understand that it's possible to actually track the trail of dependent jobs by clicking on them.
There’s a lack of affordance to suggest that the pipes in the visualization could be interacted with, which could be added by modifying the hover state.
Check out the current interaction here.
Intended users
User experience goal
I want to easily see the trail of all of the jobs dependent on each other.
Requirments
- When you hover over the node, its trail should be highlighted similar to the hover highlight we already have for links between two jobs.
- We should highlight the whole trace for the node that you're hovering on, and not just the preceding jobs.
- For making the click interaction more discoverable, we can show a "tip" popover that only shows up once for the users with an existing DAG visualization (users who use :needs keywords) or for new users who have just started using :needs. Clicking "Got it!" dismisses the popover forever.
- We want this pop-up to be open when the user opens the graph, so they see it before they hover over any of the nodes. For the anchor, the top node in the second level should work. We need to make sure it's always visible on most common screen sizes.
Tip popover |
---|
The button in the popover is the primary small button.
Proposal
We would like to break this issue into 2 steps
- callout #262666 which appears when the user open the DAG visualization - this will allow discoverability of the DAG interactions
- Hover and node click interaction for the job trail #262669 The actual feature which highlights the whole trace for the node that you're hovering on.
Further details
Permissions and Security
Documentation
Availability & Testing
Links / references
UX research insights on Dovetail: