Navigation - Add icons to contextual sidebar

Resources

FE @annabeldunstone

We add icons to the first level items in the sidebar. This helps with recognition and will allow us to make a collapsible sidebar in the future.

We should only make this change once we have our own icons in the app. We don't want to confuse users by starting out with Font Awesome icons and then changing them.

The icons we create need to be very clear. For example, the Issues icon is not very recognizable right now and it'll be a problem if our navigation relies on unclear icons.

Icon list

Admin area:

• Overview
• Monitoring
• Messages
• System Hooks
• Applications
• Abuse Reposts
• License EE only
• Push Rules EE only
• Geo Nodes EE only
• Deploy Keys
• Service Templates
• Labels
• Appearance
• Settings (reuse from project)

Overview	Monitoring	Messages	System Hooks	Applications	Abuse Reports	License	Push Rules	Geo Nodes

Deploy Keys	Service Templates	Labels	Appearance

User settings:

• Profile
• Account
• Applications
• Chat
• Access Tokens
• Emails
• Password
• Notifications
• SSH Keys
• Preferences
• Authentication log

Profile	Account	Applications	Chat	Access Tokens	Emails	Password	Notifications
		the icon in admin area				(from #33757 (moved))	(from #32959 (moved))

SSH Keys	Preferences	Authentication Log
the icon for deploy keys

Group:

• About (group)
• Issues (reuse from project)
• Merge Requests (reuse from project)
• Members
• Settings (reuse from project)

About(group)	Members
Same as project("House" icon)	(from #33757 (moved))

Project:

• About (project)
• Repository
• Issues
• Merge Requests
• Pipelines
• Wiki
• Snippets
• Members (new with https://gitlab.com/gitlab-org/gitlab-ce/issues/35138)
• Settings

Resources

Specs

contextual-sidebar-icons.zip

Meta issue #32794 (closed) - Global and Contextual Navigation

mentioned in issue #32794 (closed)

added navigation label

mentioned in issue #32894 (closed)

Issues icon: I think people might be most familiar with the icon GitHub are using. Moreover, we are also using it as part of the icon for the Resolve all discussions in new issue button. We can just use the same one and keep the icon analogy consistent.

changed milestone to %9.5

added frontend label

I actually think it looks much cleaner without the icons. Is this definitely what we're going with?

@hazelyang I have some questions about the Pipelines, Document, and Wiki icons, that I've laid out here: https://gitlab.com/gitlab-org/gitlab-ce/issues/33757#note_33770949. The Wiki icon looks better here, the spacing of the “bookmark” shape is much better Also I have concerns about the Merge icon, here: https://gitlab.com/gitlab-org/gitlab-ce/issues/33503#note_33774928

• Issues: I understand your rationale for changing the issues icon, but we've already had this discussion when adding the icons with badges to the top bar, next to the user avatar. Currently we have the “hashtag” icon because that's what we use to reference them. At the time we thought that using the exclamation mark would confuse people because of merge requests references and also because of warnings. Take a look at the new icons from Bitbucket's redesign. I'm open to revisiting this conversation and changing the icon if we decide on a good alternative.
• Project: the “folder” icon clashes with its use for groups and subgroups
• Snippets: don't forget about them I think a “scissors” icon would work very well here. Bitbucket has that as well (image)

@annabeldunstone Yes, it looks cleaner, I agree with you. This is part of an exploration to see if we can use the icons to make a collapsible sidebar in the future. Maybe we'll end up ditching the icons in the sidebar and using another pattern for reducing the size of the sidebar on smaller viewports. But yes, this is something we're going with.

@pedroms Thank you for your opinions and questions! I'll leave my thoughts for your questions on each issue later (maybe it will take some time).

@hazelyang no problem, we're all here to make things better Take your time, I know it's a lot to go through but I couldn't help myself!

assigned to @hazelyang

Updated the icons. Not sure which icon is the better one for issues. If you have any good ideas, please let me know.

I just found that we are using to indicate resolving all discussion in new issue. For consistency, I would use circle + exclamation mark icon for issue in the sidebar.

added Deliverable label

changed the description

Is this UX Ready @hazelyang?

@hazelyang since people informally call issues 'tickets', I thought about using an icon of a ticket for issues, but we don't really call them that in GitLab. Just an idea we could try out?

If we have to choose between the hashtag and the exclamation mark I think I share @pedroms's view. The hashtag is more representative of issues in GitLab now that we use in the top bar and we could promote the association even more by making it an important part of the empty state illustrations, for example.

To me the exclamation mark means something is wrong, which can be representative of bug report issues. But since issues are used for feature proposals and general discussion too, I think it doesn't fit the purpose as well.

I'm not sure what the 'resolve all discussions' icon is supposed to mean. Maybe we can change that one, too. We could use a conversation bubble and a checkmark, for example.

@cperessini Thanks for your ideas!

I created a Ticket icon. What do you think? @cperessini @pedroms

---

I'm not sure what the 'resolve all discussions' icon is supposed to mean. Maybe we can change that one, too. We could use a conversation bubble and a checkmark, for example.

The icon means creating a new issue for the discussion in diff. I think maybe the point is creating a new issue. I am wondering if conversation bubble + checkmark icon would work. We discuss this icon later.

@hazelyang I really like that icon!

I think it can be just as good as the # if we use it everywhere (sidebar, top bar, empty states, etc.) It may even be better because we have the chance to give it a meaning of our own, whereas some people in testing seemed to associate # with Slack and therefore with messaging.

What do you think?

Would also be great to get the opinion of other people in the team! cc. @pedroms @sarahod @tauriedavis @dimitrieh @sarrahvesselov

Fully agree with you @cperessini, I like it! I know from previous rounds of user testing, there's a close relationship between issues and ticketing systems, so I think users would get the connection.

Would we be changing the icon on the top nav? I imagine they should match. I think most people seemed to understand the pound symbol to mean issues, but Im open to changing so long as we are consistent!

I am used to the term 'tickets` as well since many of my workplaces used JIRA in the past. It has taken me quite a while to say 'issues' in place of 'tickets'.

I think @tauriedavis is correct that people seem to understand that the pound symbol means issues. I am curious if anyone knows why we chose the pound symbol? It doesn't correlate in my mind, but I am just so used to seeing it that I never really gave it much thought. I don't feel strongly one way or the other, but do agree that it will need to be consistent.

We chose the pound symbol because thats how you reference issues in Gitlab. (#34027 (closed))

The pipeline icon kind of reminds me of an oven timer. Would something like this work? Might be too wide

@annabeldunstone I think...it might be too wide and hard to see the checkmark in small size.

@tauriedavis that makes perfect sense. It makes me lean a bit more toward keeping it the icon.

Final decision on these icons @hazelyang? Up to you!

I think we can give the "ticket" icon a try.

changed the description

added UX ready and removed UX labels

Does that mean we're changing the icon for the topbar as well?

mentioned in issue #35275 (closed)

@tauriedavis Yes! Created an issue(#35275 (closed)) for it.

@hazelyang I like both the new Project and Issues icons. But before we change the issues icon everywhere, I would like to see how it works for the “resolving all discussion in new issue”. I think the new icon represents a collection of objects (in this case issues), which may not work well if we are referring to a single issue and also in smaller sizes.

Personally, I would love to have a checkmark-style icon for issues, which is very much representative of the mental model: tasks, tickets, things to do. I know we already use it for todos, but this annoys me a bit. Look at how other players represent “issues”: Asana (tasks), GitHub (issues), Phabricator (tasks), Basecamp (to-dos), BitBucket (issues), JIRA old issue type icons, JIRA new issue type icons, PivotalTracker stories.

What is the reason behind changing the issue icon? Maybe I missed it in the conversation above but in our testing, people seemed to understand the pound symbol. Do we need to change it? People also understood the checkmark as todos. It seemed like they tested well so if we change it, there should be a clear reason for how it improves recognition.

@tauriedavis I actually remember a few users from the testing sessions struggling to guess what the icon meant.

On the round where we specifically asked about the icons ( https://gitlab.com/gitlab-org/ux-research/issues/5), it seems 3 users identified it correctly, 1 was a partial success and 2 failed.

@sarahod included the following notes in the issues and recommendations section:

Area affected	Problem	Number of affected users	Priority	Recommendations / further comments	Related issue number
Issues icon	Issues icon was mistaken as ‘chat messages’ / related to Slack (out of context). Further emphasised by users typically hovering over the icon to read the tool tip before clicking it (within context).	4	High	Try testing a different icon with users.

We didn't ask users explicitly about the meaning of the icon in https://gitlab.com/gitlab-org/ux-research/issues/7 but it was my impression that several of the users who succeeded at task 7 did so because of the tooltip more so than the icon itself.

My take is that the pound icon is not instantly recognizable. We can encourage people making the association by using it extensively in the app, but the same can be said of the new icon @hazelyang proposed.

I completely agree, though, that we should only make the change if we are certain the new icon will be more recognizable and a definite improvement.

---

@pedroms That makes sense within the idea that issues are used as 'tasks, tickets, things to do'. But isn't that what todos should strive to be? That makes me think we should stick with the checkmark for todos and use something different for issues.

assigned to @annabeldunstone

I just found out we'll need a new icon for a new system note, 'Mark issue as duplicate'. I think @hazelyang's new icon could lend itself to simple variations, like putting two tickets side by side for this case.

We could also create an icon for 'Related issues' by linking two tickets together, etc.

That can't be done with the current icon, so I think this is an advantage of the new icon over the pound symbol.

That's a good point @cperessini! Being able to rework the icon for different types of issue relations is definitely a benefit.

It looks like this is just for the project sidebar. Are we not doing icons for Group/Admin/Settings? If not, what do they look like when collapsed?

@annabeldunstone I looked but couldn't find any others. @hazelyang may know where they are or be able to create them.

Here is a list of all the tabs and which icons we are missing:

Admin area:

• Overview
• Monitoring
• Messages
• System Hooks
• Applications
• Abuse Reposts
• License EE only
• Push Rules EE only
• Geo Nodes EE only
• Deploy Keys
• Service Templates
• Labels
• Appearance
• Settings (reuse from project)

User settings:

• Profile
• Account
• Applications
• Chat
• Access Tokens
• Emails
• Password
• Notifications
• SSH Keys
• Preferences
• Authentication log

Group:

• About (group)
• Issues (reuse from project)
• Merge Requests (reuse from project)
• Members
• Settings (reuse from project)

Project:

• About (project)
• Repository
• Issues
• Merge Requests
• Pipelines
• Wiki
• Snippets
• Members (new with https://gitlab.com/gitlab-org/gitlab-ce/issues/35138)
• Settings

I added this list to the issue description so anyone can add to it if there are any missing.

changed the description

@tauriedavis Thanks for creating the lists! I'll work on those icons.

changed the description

No problem @hazelyang! Thanks for making them all!

Looking at some you have the description so far, I have some comments:

• Monitoring looks just like a computer. Have you considered an icon that has some sort of graph like element?
• I'm not sure I would understand the system hooks or application icons without having additional text. This is particularly tricky since when collapsed, there will be no supporting text. I don't really have any better suggestions, though. It may be a learned icon over time. Would a hook be too cheesy for system hooks? Like the key for deploy keys?
• I like the abuse report icon Its cute even though its sad

changed the description

@tauriedavis Thanks for the feedback! I updated the icons (including Monitoring, system hooks, applications ).

Awesome, those look great to me @hazelyang

changed the description

marked the checklist item Preferences as completed

marked the checklist item Authentication log as completed

marked the checklist item About (group) as completed

marked the checklist item Members as completed

marked the checklist item Notifications as completed

marked the checklist item SSH Keys as completed

marked the checklist item Access Tokens as completed

marked the checklist item Password as completed

marked the checklist item Emails as completed

marked the checklist item Applications as completed

marked the checklist item Chat as completed

marked the checklist item Profile as completed

marked the checklist item Applications as incomplete

marked the checklist item Chat as incomplete

marked the checklist item Emails as incomplete

marked the checklist item Account as completed

marked the checklist item Account as incomplete

marked the checklist item Chat as completed

marked the checklist item Applications as completed

marked the checklist item Account as completed

marked the checklist item Emails as completed

marked the checklist item Members (new with https://gitlab.com/gitlab-org/gitlab-ce/issues/35138) as completed

changed the description

@hazelyang awesome work! Some quick notes:

• Push Rules: I don't think it needs the “second” book on the background. It already gives the impression of a “rule book”, so one book is enough
• Group and Project: These two icons seem to be trying to communicate their meaning on a different level.
  • The Project's “house” icon doesn't communicate “Project” but it does hint at “homepage”, so I would expect to also have the same “house” icon for the Group about page.
  • On the other hand, the Group's “people” icon doesn't communicate “homepage” but it tries to communicate “group of people”, very similar to the Members icon and to the Profile icon (adding another person).
  • I think it's easier to use the same “house” icon for both Project's and Group's about pages.

mentioned in issue #33503 (closed)

mentioned in merge request !13204 (merged)

marked the checklist item Overview as completed

marked the checklist item Monitoring as completed

marked the checklist item Messages as completed

marked the checklist item System Hooks as completed

marked the checklist item Applications as completed

marked the checklist item Abuse Reposts as completed

marked the checklist item License EE only as completed

marked the checklist item Push Rules EE only as completed

marked the checklist item Geo Nodes EE only as completed

marked the checklist item Deploy Keys as completed

marked the checklist item Service Templates as completed

marked the checklist item Labels as completed

marked the checklist item Appearance as completed

@pedroms Thanks for the feedback! I updated them in the description.

Woohoo! Looks like we've got an icon for everything. Thanks @hazelyang for organizing the icons into folders. It's going to be so much easier to implement!

@hazelyang awesome, you rock!

closed via merge request !13204 (merged)

mentioned in commit 88958e5a

Thank you for the great new icons!

For the issue icon I honestly didn't think of tickets but of playing cards (https://boardgamegeek.com/image/981505/uno ). I'm not sure if there is a way to make them look more tickety.

Maybe it's okay if they look like cards? Gamifying issues a little bit? Either way, maybe @sarahod could throw this into a quick research session so we see how it measures up to the previous pound symbol.

marked this issue as related to #38499