Extensions are represented by icons or icons with labels in the top bar. Users can interact with them by clicking to add information to the file view, clicking to go to the external documentation or read labels to learn about the file.
The usability of the Action Items Bar has a high impact on users since the currently implemented version does not scale well when working with many items. It also has a high impact on the company's goal of getting more people to use and build the extensions.
This issue also is high-urgency since we're adding more extensions to the registry, and we foresee people enabling more of them. If we don't refactor the existing solution now, we're facing the possibility of producing more Design Debt when adding on top of the existing solution.
The Impact-effort matrix used to prioritise Design Debt issues.
I've differentiated three functional spaces that we could use for extensions: top horizontal, bottom horizontal and vertical. Each of those spaces has its pros and cons in relation to the needs of the extension action items.
Low-fidelity mockup of horizontal & vertical spaces dedicated for extensions.
The second round of usability testing included the same tasks as the first iteration and was divided into two phases:
From our usage data we know that many of our users prefer to keep Sourcegraph at 1/3 width of their browser.
Both vertical and horizontal can handle overflowing content. Users can use scroll the action items or text labels using arrows.
I needed to adjust the solution for the diff view. I've decided to place file-specific horizontal bar below the path so that all the information about the file are in one place. Action items are a global element - they influence all the files in the diff.
Sourcegraph extensions in GitHub's interface
Sourcegraph extensions in GitLab's interface