Per Victor: I can't totally recall my initial reactions to these icons. But I currently I don't find them confusing, but I use GitLab waaaaay too much so I'm biased.
Do you think this is worth any user research? Especially initial reactions type of research
@victorwu@annabeldunstone This can be tested through preference testing on UsabilityHub! It'd be great to have 2-3 sample icons for users to choose from, in addition to the current icon.
Once we have the icons, I will create the test then send it to GitLab First Look and/or coordinate to get it tweeted out via GitLab Twitter
Great thanks @katokpara. What’s next steps? Move this into a milestone for that research work? Are you able to provide those extra icons or should we ask Annabel?
@victorwu Are there any other icons you think we should test? If not, I will test the current icon vs a checked checkbox as @markpundsack suggested. I'd only need help for creating new icons to test, otherwise I'll just use the existing files.
Note that a checked checkbox is also being used for Todos (not sure if we avoid using the same icon twice). I can still test it though.
I created a UX Research issue to track the details: ux-research#144 (closed). The goal is to send the test out next week!
@katokpara : There's additional icons here that I think would be interesting to test. But I'm worried too many would make the test invalid? Or you would do different tests on that platform and it doesn't matter? Anyways, here are the icons, and I'll let you decide: https://gitlab.com/gitlab-org/gitlab-ce/issues/57642.
Thanks @victorwu! I will go with all blue icons for this Issues test, so that the focus is on the actual icon. I can do a different test for the MR icon color.
Thanks @katokpara! I'd like to get some input from other UXers on putting together a few different icons to test against, since I have next-to-zero experience creating icons.
I think a checkmark would make sense. Maybe we could layer it over the current Open circle instead of using plain checkboxes.
Maybe we could layer it over the current Open circle instead of using plain checkboxes.
@annabeldunstone I think that's a cool idea! And it'd be distinct from Todos. I'll wait for input from others before sending the study out to users. If you could make that icon the same color as the current one that'd be great too.
Similar to Victor, I wasn't confused by the icons but I feel to close to the product to not be biased.
I do think the square box with a checkmark is too close to a done todo, though. The circle differentiates it (slightly) but also relates it more to the open icon.
I like it, but that would mean we'd need separate icons for Closed merge request and Closed epic. Do you think they should be consistent?
Here's an idea on how we might do this:
Closed MR has a cross instead of a checkmark because closed MRs usually mean the work was abandoned, instead of reaching success through a merge.
I do share the concern that Closed issue looks very similar to the todos icon, but maybe we can rely on context to differentiate them, I'm not sure.
The circle differentiates it (slightly) but also relates it more to the open icon.
Do we have a definition for what the Open circle is supposed to mean? Does it come from the Do not enter sign with the bar removed? Or maybe does it relate to the concept of openness in an empty circle?
I think it would be useful to understand what the circle means to users to see if it makes sense to use it as the base shape for all status icons.
@cperessini Ohhh I like those a lot. It would solve the problem I'm currently having trying to combine the issue/epic icon with the status color for an epic/issue tree
I do share the concern that Closed issue looks very similar to the todos icon, but maybe we can rely on context to differentiate them, I'm not sure.
I also want to point out that GitHub uses the checkmark to represent a closed issue. Asana also uses a checkmark for completed tasks. I agree that it could look a bit similar to Todos, but the checkmark itself feels like a good direction.
to let the user know an issue has been created from a vulnerability:
I like the consistency and how these icons all relate to each other so maybe we can forgo the use of icn/issue-created as it was intended to be used in the security dashboard which was:
To give secondary feedback to the user that, in fact, an issue was created and just use the issue link along with a toast message.
For Merged MR, I'd like to see the checkmark still involved. That icon represents MR to me, whether merged or not.
FWIW, it would have been helpful if the icon used on epics for closed issues was at least used elsewhere, like on the issue page itself. I've often gone to the issue to see if I can learn what the icon means, only to find the issue uses a badge without an icon. Not a blocker, but consideration for future iteration.
Also FWIW, I have no problem with circle vs box vs rounded box. If for whatever reason you can to use a circle for issues, that's fine. It's the checkmark that matters.
For Merged MR, I'd like to see the checkmark still involved. That icon represents MR to me, whether merged or not.
@markpundsack Yes I agree. We're heading in the direction of different open icons per object (issues, MRs, and epics) and then a checkmark layered over each of those icons when it is closed or merged (closed MR will have an x layered over it instead, like in @cperessini's design)
This design evaluation was split into 4 variants of the same test questions with different icons presented in a different order. Test A received 45 responses, Test B and C received 46 responses each, Test D received 48 responses.
Key Findings:
51% of users selected issue + checkmark as best representing a closed issue
The users who selected this icon stated that they chose it because a checkmark means “done” and communicates that the work for the issue is completed.
Some users made the distinction that this icon looks “Positively closed,” which would mean that the issue was resolved. On the other hand, the message may not match when an issue is closed without a resolution.
Other users stated that they chose this one because the others looked similar to traffic signs or that they were communicating a more negative meaning for "closed” such as blocked, do not comment, declined, etc.
When asked to determine the status of an issue
Users who saw an issue + checkmark icon (Test A) stated that the issue was Complete (49%) or Open (31%). 0% of users stated that it was Closed. Later on in the test, the majority of respondents selected issue + checkmark as best representing closed, compared to the other icons. Their explanations for why they chose the icon was that it seemed to say the issue is "Done" which supports the fact that "Complete" was the top choice in this question.
Users who saw a “ban” icon (Test B) stated that the issue was Blocked (39%), Closed (17%), or that they didn’t know (30%).
Users who saw the “Do not enter” icon (Test C) stated that the issue was Open (28%), Merged (13%), Closed (11%), or that they didn’t know (30%). Answers were very split in this test.
Users who saw a filled circle icon (Test D) stated that the issue was Open (33%), Complete (23%) or that they didn’t know (31%).
The majority of users mentioned a distinction between a closed/non-actionable issue and a closed/complete issue. Some say that a closed issue means the task is completed while others say that it is no longer needing attention. Others acknowledge different interpretations of a closed issue including no further action required, resolved, no longer need attention, and declined.
74% of users understand that the open green circle icon represents an “open” issue.
@katokpara : What are your recommendations for next steps (if any)? Also, I don't think we will introduce reason/resolution meta-data / meta-state associated with an issue any time soon. I.e. GitLab will not know whether a closed issue is due to something being resolved or otherwise. We won't have this feature anytime soon I think.
@victorwu This decision comes down to how strongly we want to signal why the issue is closed. The checkmark signals that the issue is approved, resolved, or completed. The do not enter icon seems to signal that the issue can't be actioned, is declined, or no longer needed. I believe that users can learn either of those associations, but there was more uncertainty associated with the do not enter sign.
Overall, the majority of respondents supported the checkmark icon. While it may not fully cover the case where an issue is closed with no action, I think this icon would generally signal to users that they no longer need to act on an issue. In a way, an issue that will no longer be discussed or actioned could be conceptualized as "complete" as well.
@katokpara thanks for sharing the results and your recommendation!
While having a favorable and unfavorable distinction for closed issues could be interesting, I think it should be okay to continue with our current approach of having only one type of closed state and therefore one icon.
Would it make sense to choose a unified direction for all these icons and test them in context? I think seeing them all work together will reinforce their individual meanings. Would we need an alternative proposal (maybe the current state) to see which one works better? Or are there any other methods we can use to confirm whether this is an improvement?
Would it make sense to choose a unified direction for all these icons and test them in context? I think seeing them all work together will reinforce their individual meanings. Would we need an alternative proposal (maybe the current state) to see which one works better?
@cperessini That would work well! We could have two versions of a test that includes mockups showing the all of the proposed vs current icons in context. The two tests would be given to different sets of users and we can see how results compare.
Thanks @katokpara! I like the proposed next steps- creating mockups with all of the proposed icons vs our current icons. Will ping you in the new issue to get started on this
@annabeldunstone I think it would be fair to close this, and then open another issue that proposes replacing these icons with the new open/closed issue icons in gitlab-svgs#94 (closed) that we’re planning on using for the epic/issue tree. Colors could stay the same.
So…
Item
Before
After
Open issue
Closed issue
Thoughts? I know that’s another icon issue to create, but probably more actionable.
@jeldergl Sounds good to me. Are they named the same? I see you've already opened an MR to replace the icons in gitlab-svg. Will that fix instances within GitLab or do we need a separate issue for that? Just trying to get everything on track and closed out before the end of this week (when I'll be off for 4.5 months).