Issue list row re-design
Problem to solve
Summary
In order to add polish and make our issue lists more lovable, we should redesign the issue list and make it look more modern.
Job Story
Context: https://jtbd.info/5-tips-for-writing-a-job-story-7c9092911fc9
Situation
When I'm looking at issues on the issues list...
Motivation
I want to quickly find the relevant issue(s) that I'm looking for...
Expected Outcome
So that I can quickly collaborate on and/or triage the issue(s)
Intended users
Every single GitLab role/persona
Further details
As the Issues list view is one of the most widely trafficked part of the product, making it more usable is a win. The question we need to answer as part of the implementation process is ensuring that the changes we do end up with have some sort of validation that this is a positive step in the right direction.
Proposal
Make the issue list prettier:
internal customer since GitLabbers are heavy users of issues.
Design
- The label collapsing behavior is out of scope. Labels are always expanded.
- Implement designs from gitlab-design#83 (closed) for all project issue lists, group issue lists, and dashboard issue lists.
- The list layout acts like a table. If there is no milestone or due date or assignee, the column is not shown. If a field is present on one of the issues, but not on another, it should be shown as “empty”.
- Information to display:
- Status (open/closed)
- We've changed the closed issue status icon: a circle with a dash. We also need to change this icon in the mobile view of a issue detail page. We believe this is the only additional place to change the icon but we should search the codebase for any other instances.
- The “open issue” icon only appears in the “All” tab. The “closed issue” appears in the “Closed” and “All” tabs.
- Confidentiality
- Title (link to the issue)
- Path and ID
- Created timestamp
- Author
- Updated timestamp
- Upvotes
- Comments
- Labels (ignore the collapsed styling in the mock-up, the labels always appear expanded)
- Milestone
- Due date
- Weight
- Estimate
- Assignees
- Status (open/closed)
Mobile
From https://gitlab.com/gitlab-org/gitlab-ce/issues/47009#note_99058090: As for the mobile version, it's the same thing but we don't display the table header because, in that view, it's no longer a table with columns, it's just a list. All breakpoints have been considered and are available in the specs.
Permissions and Security
- This is intended to be cosmetic only, with no new actionable behaviors.
Documentation
- We will need to update the docs every single place a screenshot from the old issue list is used.
Testing
- Update specs to include any new data we are exposing on the issue list as a result of the redesign
What does success look like, and how can we measure that?
To Do
-
Connect with the original designer to get research, background, and context for the proposed changes.
Success Metrics
-
Measure current issue list design performance / rendering for certain activities like initial paint, filter updates, etc. against new issue list UI. -
Zero regressions in terms of usability.
Acceptance Criteria
-
New issue list design provides some sort of measurable improvement in terms of usability (i.e. page speed optimization, accessibility...anything). -
The new issue list design has quantitative data to back up the cost for the redesign (i.e. X improvements in Page Speed, significant boost in lovability...). -
There are no regressions in terms of usability or page speed.
Links / references
- If any contributor would like to add links and/or references, please feel free to edit the description and add them to this list.