Swimlanes by epic (design stage)
Problem to solve
In an effort to expand our support for popular Kanban practices and use cases, we are adding in the first swimlane functionality for our Issue Boards via Epic Swimlanes.
As a user of Issue Boards,
I need to be able to group work on my issue board by Epic,
So I can clearly see how a specific Epic's issues are progressing through our workflow
See #7371 (closed) for general use case notes and customer feedback.
Proposal
This is currently in the ideation phase. Final designs will be posted here, but follow #7371 (closed) to see progress of this as it is implemented.
Swimlane design ideation
First iteration
A. Adding swimlanes from the edit board configuration area
The user can enable swimlanes from the Edit board
modal. For MVC this is just a binary on/off type option, but in the future we would allow users to select what type of swimlanes they want as well.
- Side note for future-scope: I think we could move that
Show labels
option into this area as well, unless we feel users are toggling this on and off constantly. I guess this also depends on if we think it would be more useful to toggle labels on and off for anyone viewing the board (more in line with the edit board option), or on just an individual user basis. - I put
Configuration options
as the title of this "bucket" of options to differentiate it from board scope, but this could💯 be iterated on. - I tried not to touch this modal too much for MVC. I think we could sneak in some quick wins like cleaning up font size etc though.
B. Swimlanes have been added. Swimlanes can be reordered (not MVC)
Swimlanes are represented on the board as epics. They can't be reordered for MVC so we will need to determine sensible defaults here. Future-scope could be allowing users to move swimlanes up and down in a way that isn't prone to erroneous errors and is hopefully friendly at different screen sizes. Drag and drop is not a great experience here right now.. more on that below.
C. Reordering lists (mimicking the current pattern-could be a strange experience)
The user can drag and drop columns as they currently can today. This is one that could get very complicated and become a bad experience very easily. I assume dragging these columns over swimlanes, specifically titles, could get confusing. I would almost say leave this out of MVC, but if we keep it in I will just need to do a lot of pairing with whomever picks this up to make sure this experience is usable.
D. Collapsing a swimlane
Swimlanes can be collapsed. Users can gain context on what is in the swimlane from the issue count included.
E. Swimlanes don’t apply to open and closed columns
Looking at this further- should we not "include" swimlanes within the Open
and Closed
columns? What is the intention here? This is what that could look like.
- If we include the open column, what does that mean for the epics swimlanes being inherited on to the board? Could that potentially bring in "too many" epics and epics users don't necessarily want to focus on?
F. Collapsing column list (not a great experience yet)
Collapse a column list is not a great experience (or at least, I haven't figured out this puzzle yet). You can see here the strangeness of trying to collapse this list -which breaks the swimlane "grid" and causes overlapping.
- What if we didn't allow users to collapse lists for MVC?
- In this example, I included the ability to collapse only open and closed, IF they are not affected by swimlanes. I'd assume these are the lists users would most like to hide.
- Again, maybe dragging and dropping lists could also be scoped from MVC.
🤔
Second iteration (most recent)
I did a quick video walking through the current flow I am ideating on for anyone interested: https://www.youtube.com/watch?v=kprGd7y5Aes . You can play with the basic prototype I walk through in the video here.Drag and drop ideation
#### Drag and dropI created gitlab-design#1122 (moved) for the team to think about this more deeply.
I think that spending some time improving our drag and drop interactions overall will improve the experience on the board (and in the case of swimlanes- make it at least usable). As it is now, a user could potentially be trying to drag a swimlane 3x the height of the screen to another place in the board, involving a lot of scrolling, and also involving a 3x height landing area.
These are just ideas- but some ways we could elevate some of this as show in the flow above:
- Dragging a column or a list shows only the header on drag. I would assume that the count indicators are enough indication of what is included in each object on drag.
- Instead of showing a more transparent ghost type state of the object being dragged on drag as a sort of landing area, we could remove the object from the board on drag (ie: if a user drags that 3x height swimlane, they no longer see that 3x height swimlane object on the board as it is in a minimized state (header) being currently dragged). This is a big step toward making this more usable... probably the biggest.
- Make landing area more apparent (I just put the blue dash outline here).
- We could support users that mistakenly moved an item by making it easier to undo (maybe toasts?).