Creating Group, Subgroup, and Project icons
Problem
There has been feedback that users don't realize when they are in a a Group
, Subgroup
, or Project
as the sidebars look very similar. Check out gitlab#12785 (comment 232215849) for some context. This is also the case in areas like "Your groups" where there is no surface indication as to if a list item is a group or subgroup. Having icons to associate with each segment will help users better visually correlate where they are in the project and help differentiate these three objects.
Solution
I don't currently have a solution for these icons, but I give some context into where they would perhaps be used and what I am thinking below in Examples.
Example(s)
We seem to either show no icon, or use the home
icon for these objects. In gitlab#12785 (closed) we are ideating on how to better indicate if a user is in a Group
, Subgroup
, or Project
and I am proposing using these new icons in the sidebar along with the updated title to give better context.
Please excuse my doodly doodles
We could also start correlating the icon with the avatar in the sidebar in some way. Some rough ideas would be to show the icon as a hover state of the avatar, or using the icon as a sort of badge on the avatar. These are nice because they both give the users context even when the sidebar is collapsed.
Badge | Hover |
---|---|
![]() |
![]() |
Checklist
Make sure these are completed before closing the issue, with a link to the relevant commit or issue, if applicable. Get familiar with the icon contribution guidelines.
-
Author: Create a Sketch file in your progress folder just for this icon. -
Author: Ask another Product Designer to review your personal Sketch file, linking them to your latest commit so they know where to find it. If they have the capacity, they should assign themselves to this issue. If not, try pinging another person. -
Reviewer: Review and approve icon in the author's personal Sketch file, according to the workflow. -
Author: Add icon to the GitLab Sketch UI Kit (pattern library and/or instance sheet), following this step-by-step process. -
Author: Ask the reviewer to review icon in the Sketch UI Kit files. -
Reviewer: Review and approve icon in the Sketch UI Kit files, according to the workflow. -
Author: Create an issue in the SVGs library to add the icon. Mark it as related to this issue. -
Author: Create a new MR and follow the necessary steps to add the icon to the SVGs library. -
Assign the MR to a maintainer of the project for review.
-
-
Author: Add a read only (FYI) agenda item to the next UX weekly call to inform everyone of the new icon, linking to this issue.