New Work Item View (Design & Technical Feasibility Validation)
Context
- Performance: The issue view needs to be refactored into a single Vue + shared state application that leverages a single backend API.
- Usability: The current issue view and existing interaction models are not sustainable as we move further into making issues more extensible
- For the purpose of this issue and discovery, we are renaming the object "issue" to "work item"
Because we need to refactor the issue detail page, it is a good opportunity to explore how to improve the overall usability of what is now a fairly outdated and inefficient interaction model.
Design Goals
- Users can quickly understand what an item is (what's the focus), how it's being done (what's the breakdown/assignment), how far along it is (what's the status), and what decisions are being made (what's being discussed)
- Users can easily update a single work item, or work through a planning session where many items are built or updated in succession
- Project (Parker) and development leads (Delaney) can easily understand the state of work being done and the relationships between work items (i.e. what has to happen first, or how big the remaining work is)
- Project managers (Parker) feel comfortable with the tools at hand and empowered by the ease of the use regardless of technical expertise
- Provide all contributors to GitLab with an easy to understand model for extending the work item framework
Original goals
Originally defined as part of #328660 (closed)
Note: Some of the terminologies in this issue -- such as fields, apps, relationship, and global actions -- are referencing definitions from this epic.
- I can always view and/or edit the description while reading comments.
- Controls to update meta-data or take global actions (close, clone, and so on) are always accessible without scrolling.
- I can view a work item from anywhere in the product without leaving the current context (#13319).
- Fields and apps that are not used consume as little of my view as possible.
- The work item is optimized for collaboration, decision making, and clearly communicating decisions that have been made without having to scroll or open numerous tabs to view referenced issues and comments. (#27155)
- I do not need to click an edit button in order to edit a field or description. I do not need to click save in order to save the field.
- All apps use a consistent, predictable visual and interaction model.
UX principles
In addition to global GitLab design principles, to achieve work items design goals work items should...:
Collaborate in real time A streamlined approach to reading and updating information provides a seamless, real-time collaboration experience.
Shorten the context to action flow Relevant context and action are easy to find whether using work items to understand something new or to continue collaborating. Work items can hold extensive information but provide just enough detail needed.
Iterate from familiarity Project management tools have long-standing market presence and user familiarity. Build from common patterns and behaviors to simplify onboarding, then demonstrate unique value.
Optimized for rapid planning The experience excels at the high-frequency use in collaborative teams without alienating new or infrequent users.
Always extensible Work items adapt easily to provide users with the tools they need where they need them. The work item platform easily accommodates new and enhanced features.
Coherent in every configuration As work items can be applied in different ways, and will be designed anticipating future extensibility, each implementation should feel cohesive and meaningful — broken experiences should not be possible.
Architecture Goals
As quantified here -- &5531 (comment 520016792), there are several benefits of consolidating views into a larger Vue app.
High-level:
- Consider creating a larger app outside of the issue detail view that we could eventually move other Vue apps into.
- GraphQL Subscription first, GraphQL only.
- Pajamas first.
- Single Vue app.
- Enables our long term vision for extensible issues.
- Is designed to be a single app for all issuables with minimal to no conditionals about which type of issuable.
- An issue takes less than 1 second to load all of the content above the fold.
Success
- Make our users more efficient at accomplishing their tasks (reduce clicks, time to completion for a task)
- Improve SuS
- Reduce technical debt, improve performance, and enable future changes to be easier by leveraging a single approach for FE / BE.