[DESIGN STAGE] WIP Limits MVC

User need

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.

Acceptance criteria

  • Visual feedback on if limit agreement has been broken
  • Ability to set limit by issue count (and flexibility for different limits in the future)

Design considerations

  • Focus state for column lists (reuse pattern for cards for mvc)
  • Correlate which list is selected and include the context of that list into the sidebar

Future scope

  • Improved focus state for cards and list
  • Improved interactions for sidebar
    • Where else should a user be able to click to close or "apply" the sidebar options?
    • Do we need edit next to each option or can we save on close or on "apply"?
    • How should we be titling these sidebars? What is a consistent pattern here (see below).
  • Improved design patterns for sidebar (ie: title)
  • Research use cases of weight in the list and perhaps remove it
  • Research if setting WIP by weight or other ways make sense to users
  • Research if min is needed

Proposal

General flow

Flow

Interactions

wiplimitsmvc

Design file

progress/alexis/plan/ee#11403-WIP-limits.sketch

Interactions

Column List

  • Remove 1px border from the list weight and list issue count display.
  • Add new "list settings" button as a button-group to the list navigation. Use the settings icon.
  • 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/2
    • If the WIP limit is not maxed, the WIP limit count in the list will be the same color as the issue 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:
    • Issue cards in the list border color changes to our alert color red-500 (#db3b21).
    • 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 focus state" similar to when a user presses an issue card in board:
      • Border around list color changes to border color: blue-400 (#418CD8)
      • Border shadow color: blue-200 (#b8d6f4)
      • Border shadow styling: x:0, y:1, blur:4, spread:1
      • Add background fill to the list top menu- Background fill color: blue-50 (#f6fafe)
    • Trigger List Setting sidebar. This interaction is similar to clicking on a issue card in a board.

List Settings Sidebar

  • Sidebar includes:
    • The list category with that corresponding label. These could be Label List (displays the label), Milestone List (displays the milestone), and Assignee List (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 sidebar patterns and interactions for MVC.

Future Scope

Add new issue cards to the bottom of the list

Moving the "add new issue" control fixed to the bottom of each column lists. Issue will always be added to the bottom of a list which allows users to better enforce limits and be more mindful when prioritizing issues in a column.

future-scope

Make sidebar contextual to the content it is actually affecting

The current sidebar slides out over the whole page, which makes sense when it is more of a page setting. How might we make it apparent that some sidebars only affect certain content and also allow users to still interact with other elements outside of that content if needed (ie: the filter bar that currently slides left with the sidebar in boards)?

future-scope

Updating selected card styling

Making the selected card styling consistent with the new selected columns pattern. This mostly consists of adding a more diffused shadow around the card.

  • Border color: blue-400 (#418CD8)
  • Background fill color: blue-50 (#f6fafe)
  • Border shadow color: blue-200 (#b8d6f4)
  • Border shadow styling: x:0, y:1, blur:4, spread:1

wipapplied

Edited by Alexis Ginsberg