Skip to content

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

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

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.

Web_IDE

Related issues

Proposal

  1. Remove ambiguous information/functionality that has no implication over the Web IDE – the nav bar and links.
  2. Improve the Edit, Review & Commit workflow by making it front and center. This can be improved further with helpful prompts and onboarding information.
  3. 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 ⬇️ Affects everything below
Left sidebar Project Level Houses the project/git related info; changes the contents of the file editor ➡️ Affects content to the right
Center area File level Tab bar and file editor 🔄 Contained work area
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. ⬅️ Affects content to the left
Bottom pane Project level Houses pipeline jobs, traces and web terminal 🔄 Contained work area
Status bar Project/File Meta Pipeline status, latest commit and editor related info 🔄 Contained work area

Design

Web_IDE

  • Left sidebar
    • Files
    • Commits
    • Branches
    • Merge Requests
    • Discussions
  • Right sidebar (Collapsible)
    • File info
    • MR description
    • Snippets
  • Bottom pane (Vertically resizable)
    • Pipeline - Jobs & Traces
    • Terminal