web-platform-tests / web-platform-tests/interop

Improve UX of interop diagram

Open
#968 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

meta user-interface
Dominant language
JavaScript
Stars
524
Forks
35
Avg merge
1d 4h
Merged PRs (30d)
10

Description

The diagram at the Interop Dashboard is currently a little hard to use. To improve its UX I suggest to

  • make it bigger (or add an option to do so like a zoom feature), as it is sometimes hard to see the chart lines.
  • allow to toggle individual chart lines on and off to make it easier (or even just possible) to distinguish the individual lines as they often overlap.
  • Show the date of the test run and/or the exact version number of the browser in the tooltip to make it easier to distinguish individual builds.
  • link to the related test run ‒ and the individual branch of tests if a specific feature is selected ‒ from within the tooltip, if possible, allowing to compare specific test runs.
  • add (optional) markers or add different types of lines in addition to the colors to improve the graph's accessibility.
  • show a vertical line when hovering the graph and show the different progresses of the browsers at that specific date, making it easy to see the status at a specific point in time.
  • add an option to display both chart lines for the stable and experimental implementations to allow to compare them.

Please let me know if I should file individual issues for each of the features!

Sebastian

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the Interop Dashboard and inspect how its chart and tooltips are currently presented. First separate the proposed UX changes into a focused scope, then identify the relevant chart entry points and agree on which behavior to implement. Done means the selected interaction is usable, distinguishable, and validated in the dashboard.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, data-visualization, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.