Confidential issues page re-design

@dimitrieh @hazelyang : What do you think?

added ~874211 UX ~14281 labels

changed the description

I think this is a good idea! I'm not sure about having it in the banner, though: that's something that is always visible, and moves in front of other content as you scroll. Making something that doesn't need to be private confidential isn't a big deal, but making a confidential issue public by mistake is a problem, so we should be careful about how easy we make it.

@smcgivern : The banner design is already live on .com .

Good point about adding some friction when we make something unconfidential. I'd suggest to introduce a secondary click / modal to confirm. But I like how it's actionable right in the banner area (in addition to the sidebar). And so the secondary click also applies to the sidebar UI I would say.

@victorwu I know, that's how I know it's so visible I just mean that I don't think we should make it easy to remove that banner, because it's there for a reason!

Looks good to me. I am not sure that we have "Mark unconfidential" in the banner. I don't think it's an action that people do it frequently. Maybe we can only have it in the sidebar.

added feature proposal label

changed milestone to %9.5

@hazelyang @sarrahvesselov :

As discussed in https://gitlab.com/gitlab-org/gitlab-ce/issues/33840, unfortunately the re-design was not well-received. Could we use this issue to do another iteration that achieves several goals:

Move the toggling of confidentiality functionality out of the main inline form area. In my proposed UI above, I have it in the sidebar. But I think the goal is to take it out of the main area, so that eventually we can make the main area only for editing the description. So sidebar is good imo. But I'm definitely open to any other ideas.
Solve the problems in https://gitlab.com/gitlab-org/gitlab-ce/issues/33840 and https://gitlab.com/gitlab-org/gitlab-ce/issues/29741:
- Make it more obvious to users that you are viewing and participating in a confidential issue.
- The feedback in https://gitlab.com/gitlab-org/gitlab-ce/issues/33840 is that it was overwhelming/intrusive. See that issue for details.
- When you cc a person in a confidential issue, they might not see it (https://gitlab.com/gitlab-org/gitlab-ce/issues/33840#note_32985691). <-- This last problem maybe we don't need to solve in this one issue and can be solved later.

assigned to @hazelyang

The main interaction in an issue is leaving comments. I think if we have an obvious message in the editor box to indicate the issue is confidential, we can solve the problems above.

Can we have the confidential issue text be a link instead of What are confidential issues?? I think the message we deliver should be clean and direct. What are confidential issues? might distract people's attention.

What do you think?

@hazelyang : That looks good to me. That's pretty much the same design we have now. Except the message is to the right of the preview button. Can you review the existing design and consider the problems we laid out, and other things we didn't consider. What should we change. What should remain, etc.

I really like this solution @hazelyang. I think you hit the nail on the head with this one, leaving a comment is the time a user really needs to know who will be able to see that comment.

mentioned in issue #34258 (moved)

changed title from Make marking/unmarking confidentiality inline to Confidential issues page re-design

changed the description

@hazelyang: I updated the description (and title). Let's reset and let you do a complete design of confidentiality (at least on the issues page), and really consider all the problems. I've listed out all the problems in the description that I can think of / recall. And some you've already considered in the previous issues already. Can you look at these first, and make sure we've captured everything we can think of. Please do add any other problems you can think of.

When you have a few designs, let's invite more people to review this time, including the people in https://gitlab.com/gitlab-org/gitlab-ce/issues/33840.

And let's use this issue to capture all your designs. We can create separate issues to work on each part one by one. So please think about a comprehensive design. You don't have to be limited to one small thing. We can worry about that later once we have some designs.

@victorwu Thanks for updating the description!

My thoughts:

We can utilize the orange background to group the elements related to 'Confidential issue' together. As you mentioned, it draws more attention. Also, it certainly needs to be more noticeable.
I am not sure if people really understand what is a confidential issue after reading the message, so providing a link to doc may be necessary. I don't think people want to discover it in our document by themselves.

I added Learn more as a link to the doc and remove the underline of confidential issue(Screen 03).

New design:

The icon in the header also has an orange background, so it looks more obvious. (Screen 01)
If the header is scrolled up and disappeared on the screen, the Confidential issue banner fades in on the bottom-right corner of the main area. (Screen 02)

As the design on https://gitlab.com/gitlab-org/gitlab-ce/issues/29741#note_26099441, the banner only appears when scrolling.
The background of the banner is transparent, so it would feel less intrusive or annoying.
The reason I chose the bottom-right corner: It would be less intrusive than the top-right / top-left corner. And the bottom-left corner is the least intrusive one, but it doesn't work in our situation. It will overlay the avatars.
Using icon + text instead of only icon --> I think icon + text is more clear than just an icon.

If the comment box appears on the screen, the Confidential issue banner will fade out, because we already have a message in the comment box.

Screen 01	Screen 02	Screen 03

@hazelyang : That looks really good. Thanks for providing that design. Do you have any thoughts of a new design for how to move the turning on/off confidentiality out of the main area of the issue? Sidebar or somewhere else?

@briann @ernstvn @marin : Can you please look at the designs here (https://gitlab.com/gitlab-org/gitlab-ce/issues/33874#note_33427336) and give some feedback. I think they solve many of the problems discussed previously. (The problems I've outlined in the description in this issue.) Thanks!

mentioned in issue #33840 (closed)

I cannot comment on the color decision until I've used it for a while but the proposed designs look way less obtrusive. I really like the fact that the big banner is reserved for the comment box and otherwise it is less "in your face".

That looks much less intrusive. I don't see a need to have a floating box to let the user know an issue is confidential when scrolling. Something in the sidebar would be more than enough and wouldn't cover up the comments or emoji/edit buttons.

LGTM :-)

Thanks all. @briann : I like the floating box because it gives you a quick reminder that you are looking at a confidential issue at anytime (one of our goals / problems to solve.)

Regarding the sidebar, @hazelyang : Let us know what you think. If we end up putting toggling of the confidentiality in the sidebar, would that be enough, so that you don't need to the floating box? In that case, we would need it higher in the sidebar, so that it always persists and is more prominent, or use the yellow-orange color in the sidebar. If you could give us a design that includes the toggling UI, I think that can really help bring that together.

I really like the floating box, but can understand how it might be a distraction.

mentioned in issue #34330 (moved)

@victorwu I lean toward floating box.

The toggle in the sidebar will be placed under Participants since it isn't a feature which is used frequently. So it is possibly outside of the screen in the smaller size screens (13" / 12"). If we want users to notice it, it should be fixed on the bottom of the sidebar(B: Sidebar). I think perhaps it would cause the same problem mentioned on #33840 (closed).

I created a rough prototype (https://framer.cloud/uwBCF) to simulate the way floating box works. You can play it and feel how it is. For me, it's less intrusive than the B: Sidebar.

A: Floating box	B: Sidebar

I think having an always available button to set confidentiality will result in a lot of issues being accidentally made public, or accidentally being made confidential.

@briann @hazelyang : Let's try the floating box as in https://gitlab.com/gitlab-org/gitlab-ce/issues/33874#note_33532692, design A. Looking at the framer prototype, I think it's pretty non-intrusive with the color and how it appears only when scrolling. The framer prototype is great. Thanks!

@hazelyang : Can you design the toggling of confidentiality too? Will it be in the sidebar? The reason I think it should be in the sidebar is because I want to move toward: https://gitlab.com/gitlab-org/gitlab-ce/issues/34330. Feel free to give feedback on that concept there and how it relates to here.

@briann : Right now, when we toggle functionality, we do it by checking the checkbox. It is a fairly frictionless operation already, and I'm not aware of any high number of accidents? We have a message saying This issue is confidential and should only be visible to team members with at least Reporter access.

In any case, @hazelyang should be able to provide a design (for toggling) that meets these design goals:

It should align with the longer-term goals of: https://gitlab.com/gitlab-org/gitlab-ce/issues/34330.
It should be easy to use.
You should always be in control. You should not be able to make mistakes easily.

@victorwu Yes, but that checkbox is only visible when editing the issue. This mockup makes it appear that the confidential flag can be easily disabled when not in edit mode (I realize edit mode is on the way out so maybe this point will be moot soon).

@briann: Yep exactly, we're moving away from the concept of an edit mode. But that definitely shouldn't mean we're making it easier for users to make mistakes.

My suggestion for making it safe for users to not easily make a mistake is that when you click the confidentiality toggle, there's a secondary confirmation. I don't think we typically use modals. But maybe a secondary button appears that asks you to confirm. And we should have clear messaging as part of the flow. I'm sure @hazelyang can come up with better designs though. So let's let her provide some designs and we can should critique them.

@victorwu Yeah, I like the idea of a confirmation.

Because it's not an irreversible action, I think having a confirmation just under the confidentiality section would be more friendly than a modal.

After clicking the Eye icon, the icon is changed to be a X icon. The confirmation is also expanded.
Users can collapse the confirmation by clicking X icon or Cancel button.

The reason I use an icon instead of a real button as a button is that it's an action should be careful, a real button would be too obvious. And the icon indicates the status of confidentiality more clearly than a button(On/Off). For example, when the issue is confidential, the button is showing "Off". I sometimes feel that it's confusing.

01 - Issue is confidential	02 - Confirmation	03 - Issue is public	04 - Confirmation

@hazelyang : I think that's great. There's a good amount of friction so you can't really make a mistake. But the interactions are simple enough so it's not a pain to use.

I like how you are using "Turn on" and "Turn off" to make it really obvious / explicit about it. I think we need to tweak the wording a bit. For example, I think maybe "This issue is not confidential" or "non-confidential" would be better than "This issue is public". I don't think we have the concept of "public" issues. So I don't want to introduce that into the product explicitly. Can you point me to the design repo and I could maybe tweak it?

The only worry I have is discoverability. I understand your point about "too obvious". But I think there's a distinction between these two considerations:

Making a mistake because you don't understand the UI, it is confusing, or you click by mistake (small screen on mobile, for example).
Being able to discover and use the feature.

What do you think about keeping the eye icon and having it change. So it could be near the "Confidentiality" label. But to go into "edit" mode of the feature, you just have the Edit link positioned exactly like all the other elements in the sidebar. And you click on it to activate the mode. That way, users won't be confused at all, and it is still super usable, since going into edit mode is exactly like the other elements.

added frontend label

added Deliverable label

I don't think we have the concept of "public" issues.

We do have the concept of "public" projects though, so for me the wording maps over just fine @victorwu. "non-confidential" takes a bit more to grok at a glance than public vs. confidential.

What do you think about keeping the eye icon and having it change. So it could be near the "Confidentiality" label. But to go into "edit" mode of the feature, you just have the Edit link positioned exactly like all the other elements in the sidebar. And you click on it to activate the mode. That way, users won't be confused at all, and it is still super usable, since going into edit mode is exactly like the other elements.

I think this would be better in order to maintain consistency.

@sarrahvesselov : If we use "public" issues, I fear that it would be confusing to since we have "public/private/internal" projects and they don't map well. Right now, when we say "non-confidential", we just mean default visibility level: https://docs.gitlab.com/ce/user/project/issues/confidential_issues.html#making-an-issue-non-confidential

And there's even more edge cases: https://docs.gitlab.com/ce/user/project/issues/confidential_issues.html#permissions-and-access-to-confidential-issues.

This is what we currently have for system notes. Could we re-use the language?

So in the sidebar we would have these two options:

This issue is confidential
This issue is visible to everyone

And as shown in @hazelyang 's mockups, we could also use "everyone" to indicate non-confidentiality. Perhaps we can stick with this wording ("confidential" and "visible to everyone") for this issue, and we can work on further refining wording in future issues?

Another option is just simply "None" to mean non-confidentiality.

and

Another option is just simply "None" to mean non-confidentiality.

I prefer "None" and "This issue is confidential". Quick and easy to understand.

What do you think about keeping the eye icon and having it change. So it could be near the "Confidentiality" label. But to go into "edit" mode of the feature, you just have the Edit link positioned exactly like all the other elements in the sidebar. And you click on it to activate the mode. That way, users won't be confused at all, and it is still super usable, since going into edit mode is exactly like the other elements.

Sounds good to me.

@victorwu @sarrahvesselov Updated the designs and the text of confidential status! Thanks!

01 - Issue is confidential	02 - Confirmation	03 - Issue is not confidential	04 - Confirmation

changed the description

Updated the description. If there is still something we need to discuss, please let me know and feel free to add UX back. Thanks!

added UX ready and removed UX labels

I have one question on this @hazelyang. When being edited, you show an 'x' where the 'Edit' had been. I don't see this functionality currently with any of the other editable areas. In the other areas, the 'Edit' remains and there is an 'x' within the actionable area that allows you to cancel the action. Since there is a 'cancel' button present, do we need the 'x'?

nice! @hazelyang

my points here:

can we make it an item above milestone? (so it has a consistent location.. so we don't have to search for it?)
can we make it as small as possible when it has no confidentiality?
can we make it more obvious (a little towards the reverted design perhaps) when it is actually confidential? As this must be instantly clear.. while not being in the way.. like it was before
can we make the turn on button blue, and turn off button red?

@sarrahvesselov @dimitrieh Thanks for your feedback!

When being edited, you show an 'x' where the 'Edit' had been. I don't see this functionality currently with any of the other editable areas. In the other areas, the 'Edit' remains and there is an 'x' within the actionable area that allows you to cancel the action. Since there is a 'cancel' button present, do we need the 'x'?

I just thought its interaction was similar to 'Time tracking' interaction. But you are right, we don't need 'x' if there is the 'Edit'. I will update the design. There will be a dropdown instead of a Expansion. It will be more consistent with our current design.

can we make it an item above milestone? (so it has a consistent location.. so we don't have to search for it?)

I thought it's not a feature that will be edited often, compared to other features, so I put it on the bottom of the sidebar(above notification). But your opinion also makes sense.

How about we put it under lables? It's more approachable but not so obvious.

can we make it as small as possible when it has no confidentiality?

Could you elaborate it? Just not sure I understand what you meant. Thanks!

can we make it more obvious (a little towards the reverted design perhaps) when it is actually confidential? As this must be instantly clear.. while not being in the way.. like it was before

Could you elaborate it?

can we make the turn on button blue, and turn off button red?

I am not sure if we should make the 'Turn on' button in blue and 'Turn off' button in read.

When people are going to turn on the confidetiality, they also need to be careful since some of the members involoved in the issue will not get the notifications or not be able to comment(depends on their permission). So maybe blue doesn't work for this.

Those 2 scenario are not irreversible actions but need to get some attention. I think orange (warning) would be better.

can we make it as small as possible when it has no confidentiality?

Could you elaborate it? Just not sure I understand what you meant. Thanks!

can we make it more obvious (a little towards the reverted design perhaps) when it is actually confidential? As this must be instantly clear.. while not being in the way.. like it was before

Could you elaborate it?

Yes @dimitrieh, I am not sure I understand either.

i am withdrawing my statements :) i was thinking the otherway around! to explain it simply! i thought it had to be reallly really clear when an issue is confidential.. but of course.. in that case it is already protected :)

@hazelyang Did you play with the interaction when you get to the bottom of the page with the comment box? Does the prompt in the lower right just fade out and the one on the comment box fades in? I can see some strange interactions happening here so wondering if there is a clear design/animation for that

@tauriedavis It will work like this. You can play with it.

Awesome @hazelyang, looks great. Love the framer prototypes :)

changed the description

Since we are adding the confidentiality visibility information in the sidebar, do we need a floating banner still? It kind of feels like an advertisement

mentioned in merge request !12801 (merged)

Here are current udpates: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/12801#note_34760359

Any thoughts about the banner since the sidebar will provide the same amount of information while scrolling?

Thats a good question @selfup! If you can always see the confidential status in the sidebar, is the orange banner necessary @hazelyang ? Might be worth checking out Regis' MR locally

Yea I will work on the collapsed version soon so that both scenarios can be played out

@tauriedavis @selfup Thanks for the feedback!

I checked out the MR locally. Yes, I think we don't need the banner. Thanks!

@hazelyang : The confidentiality UI in the sidebar won't be visible if there are a large number of labels or the screen size is not tall enough. The gif in the MR doesn't show labels or the weight field either. So do you think this would be a problem for most users? On my computer I can see the entire sidebar here in this issue with three rows of labels.

Please provide a final design (if you don't think it's a problem, please say so). And then please keep the description updated with the designs. If we are not using the banner, then the description right now is not up to date. Thanks.

@victorwu Thanks for mentioning the scenario that I was missing!

I think people can see the confidentiality (in a browser) on a smaller screen(12") when they scroll down, so this might not be a problem for them. If the users really meet this problem, let's add the banner back in the future.

I'll update the description. Thanks!

changed the description

Thanks @hazelyang . That's great. cc @selfup

assigned to @selfup和@victorwu

changed the description

mentioned in issue #18608 (closed)

Closed by https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/12801

closed

@selfup : Can you please update the documentation for this feature? Thanks.

I'll take a look sure!

mentioned in issue #36352 (closed)

mentioned in issue #36450 (closed)

Confidential issues page re-design

Resources

Problems and discussion

Design

Confidentiality in the sidebar

Designs

Child items ...

Activity

Admin message

Admin message

Confidential issues page re-design

Resources

Problems and discussion

Design

Confidentiality in the sidebar

Activity