Improve project overview UI
In its current state, the Project overview is repetitive, confusing, and not intuitive/enjoyable to use. We should improve the information architecture/hierarchy of the placement of buttons, links, description, and reduce repetition.
Design
The most important change is to align everything to the left and use all the available horizontal space:
Title row
On the title row, the avatar matches the line height of the project name. On the same line, we show the visibility with a string that explains the icon (Public
, Internal
or Private
), as well as the project license and tags.
The license is therefore removed from the 'quick links' bar. There are two edge cases relating to the license:
- When no license has been specified, a project visitor will see the message No license. All rights reserved.
- When a project admin visits a project with no license, they will see a link with the string Add license.
If there are no tags, the component will not be shown at all. If there are more than 5 tags, or they cannot all be displayed without wrapping, the string should be collapsed to + X more
. The full list can be seen in a tooltip on hover.
Project description
The project description can display up to two lines of full-width text by default. If the description is longer, it will be truncated with an ellipsis (...
) and a Read more
link that will show the full description on click.
Buttons
For the actions row, we stop using the current smaller buttons and replace them with standard-sized buttons. These larger buttons also help by creating larger tap targets on mobile.
We will also retire the current component used for the Star and Fork controls, which are exclusive to this page. They will be replaced with the count component used in issue boards.
The buttons that will remain in this row are:
- Star
- Fork
- Clone
- Notifications level
- Request access / Leave project
The Download and Add buttons will be removed (research feedback will be gathered with ux-research#71 (closed))
Quick links and dashed buttons
We will keep the quick links and dashed buttons as they are for now, pending feedback to be gathered in ux-research#71 (closed)
Quick links and dashed buttons will be separated in two rows. Dashed buttons will always be shown below the quick links.
The quick links row will always show links to Files, Commits, Branches and Tags, even if the project has an empty repository. If that is the case, we will either disable interaction with these links or evaluate the possibility of creating empty state pages for these items.
When enabled, the quick links will be presented in this order:
- Project and contribution info (Readme, Changelog, Contribution guidelines...)
- Quick links to project sections (Repository, Commits, Branches, Tags...)
- Quick links to configuration (CI/CD configuration...)
Other sizes
For smaller screen sizes, the default behavior is for elements to wrap to the next line. Since everything is left aligned now, this should happen naturally.
The only exception is the quick links bar, which becomes scrollable. This is indicated by a fade effect on the right side. Note: Testing this particular interaction on a prototype would be beneficial.
Finally, for mobile sizes, the Clone URL widget becomes a split button that lets you switch between SSH and HTTPS.
Tablet size | Mobile size |
---|---|
Iterative steps
We should break down this into smaller steps. The order of priority we should follow is:
- Make everything left aligned
- Add the label to the visibility level icon
- Use standard buttons and controls
- Add permanent links to Files, Commits, Branches and Tags
- Enforce quick links ordering
- Make project description collapsible
- Move license
- Make clone widget a split button on mobile
- Make quick links section scrollable on smaller screens
Links / references
Spec previews can be found in the GitLab Design hosted repository