Further improvements to Project overview UI: Discovery
Additional improvements were proposed for the Project overview UI in https://gitlab.com/gitlab-org/gitlab-ce/issues/44704.
-
De-stress the top info overload section, add more whitespace
-
Look into specced out projects, but also barebone projects that only have a name
-
Enhance contrast to better differentiate between frequently used actions and less important actions
-
Review new repository languages bar as additional UI element
-
Project ID field should be less intrusive
-
Remove remaining full-width horizontal border lines
-
Can we utilize more color?
-
Move meta information in title row to its own row?
-
Documentation link that can hold an internal (or external) URL, configured via settings (interesting for product discovery, can be then split off into its own issue)
Copied comments from some UXers:
Hey @cperessini coming in late here, still wanted to leave some comments ;)
- A distinct way to visually dissect this piece of UI is still missing imo
It feels like a big blob imo. I like GH's implementation the best, as its clear and consistent in placement.
For example I still foresee, inconsistent placement for projects with long names (See for example this example)
Perhaps https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/19480 might give a way to break up the contents a little more.
The page wide project description feels a step back in terms of typographic standards and does not help with the visual distinction either
🤔 Looking at competitors it seems that our project home page is still lacking a clear call to action button. GH did that very smart (which aligns with their goals of the page, so correct me if I am wrong here) where they made the project homepage feel a bit more accessible to new comers by hiding the download/ssh link inside of the green button. What is our primary action on this page?
Forgive me if those things already have been considered, otherwise I would love to hear your thoughts
😉
I also agree with @dimitrieh. I am wondering if we could increase the contrast between "High priority" info and "Low priority" info on our project home page. So people might be able to get the info they want quickly and easily.
I am also curious about the reason we put the number before the
icon + label
. I am wondering if it would conflict with the common reading behavior (Left to right).I am sorry that I am a little late to this party. I just would like to share some thoughts.
🙂
@cperessini I'm also late to the party (
🎉 ) but I just wanted to say I agree with @dimitrieh and @hazelyang in that the top part needs more contrast. And maybe we have too many elements there?
Solution
After around 5 iterations and lots of received feedback I managed to clean up the UI. I achieved that by only removing certain (duplicated) elements but mostly by moving things around and grouping them.
Desktop
Fully specced out | With clone dropdown | Barebones |
---|---|---|
Changes:
- moved star, fork, clone buttons to top right, made them smaller
- avatar is now larger (64px)
- 'Request access' is now a link instead of a button
- overview comes before the description + changed styling and added icons
- description font-size is now 16px (large-paragraph)
- quick links to files are moved downwards below the commit/pipeline info
- margins changed to group content into 4 groups to clean up the interface
- visibility info reduced to icon-only and moved to the right of the title
Tablet
Fully specced out | Barebones |
---|---|
Mobile
Fully specced out | Badges expanded | Barebones |
---|---|---|