Board list capacity controls (WIP Limits MVC)
Problem To Solve
The more issues in progress in a given workflow stage, the longer it takes to complete any one given issue. That fact, coupled with the cost of context switching being a 15-40% negative drain on productivity, makes having multiple issues in progress incredibly inefficient. The goal of continuous delivery is to break customer value down into small vertical feature slices that can be iteratively and incrementally deployed. This article describes the problem from a quantitative standpoint and can be applied to the concept of both a broader release and a single unit of functionality capable of producing customer value.
Intended Users
Dev Managers, Execs, Team Leads, Product Managers, Project Managers
Proposal
Lists within Issue Boards need to be able to support a basic primitive such as "Work in Progress" (WIP) so teams have the flexibility to manually adjust the number of items in progress at any point in time for a given workflow stage. Teams need quick visual feedback on whether or not they are working within the limits.
For this MVC, we will only support WIP limits by issue count. Future iterations will include the ability to configure WIP Limits by other means such as total weight, issue type, etc.
The Issue Board WIP Limits Epic contains more context, user research, and information on why we are prioritizing WIP Limits vs. a capacity line.
What does success look like and how can we measure that?
- Adoption: What percentage of boards are using WIP limits?
- Impact: What is the throughput improvement for teams that adopt WIP Limits? (we will have to figure out how to track this, but theoretically we should be able to in a fairly straightforward manner).
Acceptance Criteria
- A user can add, update, remove a
Max
work in progress limit per Issue List. - The visual appearance of the List changes in accordance with the List States below, and remains in effect when a List is in the collapsed state.
- Sufficient telemetry implemented such that we can measure the "success criteria" outlined in the above section.
List States:
State | Severity |
---|---|
< Max |
None |
= Max |
Medium |
> Max |
High |
Design
View specs here: https://gitlab-org.gitlab.io/gitlab-design/hosted/alexis/ee%2311403-WIP-limits-spec-previews/
General flow
Interactions
Design requirements
Column List
- Remove 1px border from the list weight and list issue count display.
- Separate tooltips in the count by "weight" and "issue count" so they now read "## total weight" and "## issues". These can be triggered by hovering over the icon or the numbers. If a column has a WIP limit it reads "## issues with a limit of ##".
- Add new "list settings" button as a button-group to the list navigation. Use the settings icon for MVC.
- On hover of "list settings" icon trigger a tooltip that read "List settings"
- When a WIP limit is applied, display this after and next to the issue count, ie: 2 (ISSUES) /2 (WIP)
- If the WIP limit is not maxed, the issue count in the list will be the same color as it is currently and match the WIP limit count.
- If the WIP limit is maxed, the issue count in the list will change to our alert color red-500 (#db3b21)
- If WIP limit is maxed:
- The background fill of the list changes to red-100 (#fbe5e1) to match our alert banner styling.
- When the List settings button in the list menu has been clicked:
- Trigger a "list selected state" of the column:
- Border shadow styling of column: x:0, y:1, blur:2, spread:0
- Border shadow color of column: #000000, alpha/opacity 10% (this styling is the same as on our issue card box)
- Add background fill to the list top menu- Background fill color: Inherit the label color with an opacity of 10% (you can see in the mocks it inherits the green label color)
- Border shadow styling of column: x:0, y:1, blur:2, spread:0
- Trigger List Setting sidebar. This interaction is similar to clicking on an issue card in a board.
- Trigger a "list selected state" of the column:
List Settings Sidebar
-
Sidebar includes (EE) :
- The list category with that corresponding label. These could be Label (displays the label), Milestone (displays the milestone), and Assignee (displays the assignee). User can't edit
- Total issue count. User can't edit
- Total weight. User can't edit
- Work in Progress limit
- Reuse the pattern for adding weight for MVC.
- Position. Future scope/stretch
- Delete list
- Reuse the pattern for "move issue" for MVC.
-
Reuse current sidebar patterns and interactions for MVC.
-
Sidebar includes (CE) :
- The list category with that corresponding label. These could be Label (displays the label), Milestone (displays the milestone), and Assignee (displays the assignee). User can't edit
- Total issue count. User can't edit
- Total weight. User can't edit
- Position. Future scope/stretch
- Delete list
- Reuse the pattern for "move issue" for MVC.
-
Reuse current sidebar patterns and interactions for MVC.
Previous Issue Description:
Users of boards should be able to quickly and visually indicate what's "above or below the line" with respect to capacity planning. The use cases are numerous including sprint planning, but also for teams who use boards for tracking agenda items.
This issue is the MVC of more holistic board capacity planning functionality.
Intended users
Dev Managers, Execs, Team Leads, Product Managers
Proposal
Implement a UI element to create a line break for each column in a board. If a line is created, it appears at the top and can be dragged to any point in a column. Lines can also be deleted. Issues on a board should be draggable above and below the line and the line should adjust visually as needed. Issues should only move above or below the line if manually dragged, they should not be automatically adjusted.
For this MVC, we will not allow naming of the line, nor multiple lines per list.
What does success look like, and how can we measure that?
Number of lines created, in use, deleted should be measured to understand adoption of the feature.
Solution
Interaction flow | Anatomy |
---|---|
Requirements
- Move
remove list
option to the button group and use the associated button group button state behavior. I notice we use a different icon for the trash can than I see in the design pattern library. Can we investigate this? - Remove 1px border from the list weight and list issue count display.
- Add "List line" icon to button group (this icon is being created by the awesome @jeldergl to replace my mock but I will update this with the icon when we complete that)
- For MVC- let's treat this line almost as if it is a new issue card (interaction wise)
- A. User sees a new option within the button group.
- B. User sees list line tool tip on hover. Copy is: "Add list line".
- C. When the user clicks to add a list line, they see the line appear at the top of their list. There is an indicator that they can drag the line up and down (@jeldergl is working for an icon for us here to replace my mock, I will update when we complete that) as well as an option to remove the line.
- D. When a user clicks anywhere on the line (except for remove), the line becomes a card to further indicate it can be dragged and help with visibility when the line is overlapping other elements. We can hone this behavior (especially remove states) in future iterations.
- E. The line dragging behavior is similar to that of dragging an issue card for MVC.
- F. Once dropped, the line is back to its original styling.
- User sees tooltip "Remove line" when they hover over the remove icon in the line.
- User sees tooltip "Move line" when they hover over the drag and drop indication icon in the line.
- If a user moves all cards out of the list, the line remains. Lines remain under they are removed for MVC.
- If a user tries to move a line out of its list- preferred behavior would be that they are not able to do this and can only move the card up and down. For MVC, I think it should be fine if they can move a line out of a list and into another list as long as a user is able to have multiple lines per list.
- Stacking behavior: If a user has:
Issue A
Issue B
- line list -
Issue C
When they add Issue D
to the top of the list, their list now looks like:
Issue D
Issue A
Issue B
- line list -
Issue C