Move list options out of dropdown and into the ✨ New list✨ widget
Problem to solve
When monitoring a team's work in flight, I need to be able to easily review and digest the current progress so that I can confidently report to stakeholders and leadership.
This current progress
could include things like:
- The health of issues in progress
- The flow of issues from milestone <> iteration and/or iteration <> iteration
The current Add list experience in Issue Boards |
---|
![]() |
With the addition of Health status
and timeboxes like Iterations
- users are requesting to apply these as column lists within their boards. Adding these in as tabs to the current experience could start pushing the bound of usability. How might we make this experience more flexible for future options?
Intended users
User experience goal
Users are able to quickly configure a board with lists that provide value to them and their team.
Proposal
-
Move the options
Label
Assignee
andMilestone
out of the Add list dropdown and into their own respectiveNew list
widgets. AddIterations
as a list type as well. -
Health status
andEpic
are future scope. -
See more information and resources about the larger experience in the epic.
🎥 Notes on the interactions here
- User can add a new list/column from the header as is the current experience (small change, discoverable- future scope can be validating the
add
being to the right of the workflow)- Change name of the
Add list
button toCreate list
- Change name of the
- On click of the
Create list
button, theNew list
:- The board scrolls to the end of the lists (to the right edge at the end).
- The
New list
widget slides in from right to left and appear to the right of theClosed
list or last list (at the end of the board). - The
Create list
button is now disabled with a tooltip on hover explaining that a user should finish adding their first list before trying to add another.
- The default column/list type is
Label
, but the user can change the type from the list/column itself via the dropdown.- If the user changes the list type, the copy and content in the header and body of the widget is contextual to the type being added.
- If the user adds some information into one list type, navigates to another list type, then back to the previous type- the information they entered is stored and available. Scenario: User adds
Abby A
to their assignee list and then switches to a label list. They then immediately switch back to assignee, andAbby A
is still selected.
- Once the required information is inputed, the
Add
button is enabled and the user can add the list to their board. - The user sees the column/list added to the board.
- I would love us to display some styling of the list adding to the board. Maybe a flash of a blue focus state around the list fading in and out.
- Optionally we could also add a toast here to further reenforce this.
- If the user tries to navigate away from the board when the
New list
widget is open, a dialog appears asking them to confirm they want to navigate away without saving changes.
Classic board
- The board scrolls horizontally. The
New list
widget can be scrolled away from.
Swimlanes board
- The board scrolls horizontally and vertically, with swimlanes fixes. The
New list
widget appears to the right of theclosed
list and last swimlane. This will cause the swimlane titles to truncate to before this widget. - The user can still scroll horizontally and vertically but the
New list
widget is fixed to the right of the board and does not scroll away or scroll vertically.
General walkthrough
Iterations
-
Add :board_new_list
feature flag !52869 (merged) -
Move Label lists to New list widget #299487 (closed) -
Create Iterations New list widget #250479 (closed) -
Move Assignee lists to New list widget -
Move Milestone lists to New list widget
Artifacts
-
🎨 Figma specs: Click here
Label list | Assignee list | Milestone list |
---|---|---|
![]() |
![]() |
![]() |
Iteration list | Health status list | Epic list |
---|---|---|
![]() |
![]() |
![]() |
Mobile |
---|
![]() |
What does success look like, and how can we measure that?
Users are using Boards to track their work items due to increased value to them. Boards have a certain threshold of lists on them. Let's track how often users click Create list
and see if usage of Boards in general is increasing.