Approval and WIP MR visualization could be confusing

With 9.5 we have new visualization for MR widget, specifically for Approval and when MR is WIP:

When I first saw this I found it surprising. The red X icon was previously used only to show that a pipeline failed. Now that it is used in multiple places, I keep getting confused and keep going to check why the pipeline failed.

I don't know what a better solution would be, but I want to raise this concern as we might want to think about a better icon for these actions.

Follow up on design for adding more hierarchy to mr-widget is https://gitlab.com/gitlab-org/gitlab-ce/issues/37479

maybe we can use a different icon for things that "failed" but are not pipelines?

/cc @sarrahvesselov @psimyn

added Plan [DEPRECATED] ~13921 labels

how about an exclamation mark instead of x:

Would it be the same type of confusion if we reuse the build skipped icon? The yellow one with exclamation mark?

I don't feel that it is a failure that someone did not approve, it should be informative notification.

I don't feel that it is a failure that someone did not approve, it should be informative notification.

@marin However it is keeping you from pressing the merge button like failed pipelines do.

Would it be the same type of confusion if we reuse the build skipped icon?

I think that would be better. Also imho the color should be a neutral one like grey.

Also imho the color should be a neutral one like grey.

I like that it is currently very visible that you can't merge.

Thanks for making this issue @winh, I agree with you on the 'X' icon.

I don't feel that it is a failure that someone did not approve, it should be informative notification.

I agree completely here @marin. @dimitrieh, can you give us some insight on the choice of icon here? I tried to find the original issue for context but can't seem to locate it.

Original issue: https://gitlab.com/gitlab-org/gitlab-ce/issues/32614

I found this issue to created by @dimitrieh

https://gitlab.com/gitlab-org/gitlab-ce/issues/34137

Seems to be a duplicate of this one for the most part.

assigned to @dimitrieh

mentioned in issue #36513 (closed)

You can't start a MR in a state of failure. That would be a huge bummer. There is a difference between part of the flow of an MR and an actual failure. Red should be a destructive color. This is not a destructive situation. It is a neutral state. If you want it like a check list that's a different thing. And please don't use the build icons. I've been using GitLab for a long time and you can't suddenly switch those icons from being all about builds to being used for other things. How about this. Instead of using established icons.

cc @sarrahvesselov @tauriedavis

Which technically should be a warning or neutral for the approvals.

OR

Which would all be green straight down the line for a good to merge situation.

Now the build icons don't work in the MR index page because they no longer mean build passes.

And please don't use the build icons. I've been using GitLab for a long time and you can't suddenly switch those icons from being all about builds to being used for other things. How about this. Instead of using established icons.

I agree with @jschatz1 on this one. I think that we need to be careful when appropriating symbols from established areas. There may be instances where it will align the UX and be beneficial, I don't think this is one of those instances.

I like the solution Jacob proposed @dimitrieh, I know you had ideas at one point that were similar. Let's investigate how this may work better for this situation.

Wouldn't the proposed design make it much slower to parse for someone with red-green colour-blindness?

After discussion at https://gitlab.slack.com/archives/C03MSG8B7/p1502816336000401 it becomes clear that reusing the more general CI icons to indicate something wrong, or success is not the way to go... as these icons are too ingrained with CI pipelines specifically.

Good point @arcresu ! This is the part that makes it difficult :). Basically, the situation is the following:

• We need a standardised way to indicate "success", "fail", "warning". These need to be different from the pipeline icons, but flexible enough to be used in multiple places.
• Color alone is not a complete option, as this is not inclusive design, thus an icon is needed.

I think the circle around the icon indicates that it is a job or pipeline (something ci related). Therefore we may be able to change this slightly..

will continue in a bit