Relook at Web IDE information architecture
As we continue to add more features to the Web IDE, there is need to define a scalable information architecture. Below I've highlighted some critical design issues with the present IA. Many of the issues linked below are related and from a design point of view, can only be tackled when looked at holistically.
Problems
1. Main nav bar
- The name "Web IDE" evokes the notion of a web app. The lingering nav bar on top breaks this illusion as it provides links that take the user out of the Web IDE.
- Link to "Projects", "Snippets", etc. might give a false meaning as being related to the Web IDE and the currently open project.
- The global search bar could be confused with the search functionality an IDE might provide.
- Similarly, the icons for issues and merge requests could be associated with the currently open project.
Related Issues
2. Edit, Review and Commit workflow
- The Commit button at the bottom guides user from one stage to next but many users have reported an apprehension to click on the button labeled "Commit" fearing that it might commit their changes before completion.
- The left sidebar icons are not intuitive enough, not labeled and risk being undiscoverable to users who are not familiar with git.
- By using the left sidebar for git workflow, we cannot place any other feature here. This creates a situation where we might end up putting new features on the right sidebar.
Related Issues
- Improve commit flow from unstaged to staged to commit
- Follow up to Improve commit flow from unstaged to staged to commit
3. The right sidebar
- The right sidebar is currently the only place to put new content panes or features. This could create a confusing mix of contexts in a single location.
- As I started work on displaying MR description, comments and discussions inside the Web IDE, I realize that there is nowhere else to put this other than the right sidebar.
- We already have pipeline jobs and traces here and we have plans on putting Web Terminal and Client Execution features there.
- There is also a need for horizontal panes to improve the usability of terminals and logs.
Related Issues
- View merge request description in web IDE
- Design exploration for viewing merge request discussions in the Web IDE
- Support horizontal web terminal in the Web IDE
4. Need for distinct context separation
This issue can be summed up as a need for distinct context separation in the Web IDE. This ties into the need for a scalable information architecture, one that can accommodate the new features that we'll build in the future.
Related issues
- Web IDE branch picker
- Show commit history in web ide
- Design discovery for file templates in the Web IDE
- WebIDE client evaluation with live preview
- Design discovery for client and server evaluation in Web IDE
- Be able to see and checkout git history on the current branch in Web IDE
Proposal
- Remove ambiguous information/functionality that has no implication over the Web IDE – the nav bar and links.
- Improve the Edit, Review & Commit workflow by making it front and center. This can be improved further with helpful prompts and onboarding information.
- Define clear and distinct visual boundaries for each of the contexts and establish a clear direction of information flow.
Section | Scope | Description | Perceived direction of information flow |
---|---|---|---|
Navbar | Editor Level | Changes the mode of editing |
|
Left sidebar | Project Level | Houses the project/git related info; changes the contents of the file editor |
|
Center area | File level | Tab bar and file editor |
|
Right sidebar | Project/File Meta | An collapsible accessory pane to the editor. Can potentially house UI for file templates or snippets. Open to future exploration. |
|
Bottom pane | Project level | Houses pipeline jobs, traces and web terminal |
|
Status bar | Project/File Meta | Pipeline status, latest commit and editor related info |
|
Design
- Left sidebar
- Files
- Commits
- Branches
- Merge Requests
- Discussions
- Right sidebar (Collapsible)
- File info
- MR description
- Snippets
- Bottom pane (Vertically resizable)
- Pipeline - Jobs & Traces
- Terminal