Implement new sidebar for issue and merge request pages

This is first step in implementing #3981 (closed). We don't have new dropdowns yet so I used some workarounds. Also I did it from linux machine without having access to design materials. So some colors/paddings might not match - but I will improve it with next iteration.

cc @creamzy @JobV

Screenshot

When click edit link I replace value with selectbox. Its a workaround until we get new selectbox implemented

Merge request page use same sidebar code so it also affected

Added 69 commits:

• 94d065f4...0d65f09f - 63 commits from branch master
• da17ce9a - Implement issuable sidebar partial
• 238052ed - Move awards css to separate file
• 0ba6e687 - Redesign issue page for new sidebar
• d051a673 - Make edit link on issuable sidebar works
• 46a3aae5 - Implement new sidebar for merge request page
• 621d08d3 - Update changelog

Added 1 commit:

• 258faa85 - Fix tests for new issuable sidebar

@DouweM please review

Reassigned to @DouweM

Title changed from WIP Implement new sidebar for issue and merge request pages to Implement new sidebar for issue and merge request pages

You can also add/remove labels from issue page now when press edit button:

Also I think we might want to increase limited container width with extra 100px because now sidebar affect changes tab with diff.

Pff this is so... AWESOME!

Some thoughts:

• Editing labels inline is awesome
• Not always showing the assignee/milestone dropdowns is awesome
• Do we still need the cross-project reference at the very top? We can now also simply copy/paste the full link, and I don't think it's more important than assignee/milestone.
• The cross-project reference doesn't need a tooltip anymore.
• When no assignee/milestone/labels are picked, the "None" label should have a lighter text color to clearly show it's a placeholder.
• When scrolling down, the sidebar stays fixed, but the top padding is a bit too large.
• When editing the assignee or milestone, closing the selectbox without changing the selected option should hide the select2 again.
• When editing labels, the user should be able to select more than one before they're saved. Right now, the first label triggers a save, and the sidebar is reloaded and the select2 is hidden before they can pick another one.
• Participant avatars need bottom margin when there's multiple rows of participants
• The unsubscribe button looks like it's constantly in the active or hover state
• The text color for "Notifications" and all of the other labels is different
• The labels for "Assignee" and "Milestone" shouldn't end in a colon (:).
• The participants label should have more bottom margin

I love the look of the new sidebar, but I'm not sure about its new location and that of the emoji avatars. The page looks busier / more cluttered since there's so many things asking our eyes for attention above the fold. The content in the grey section is currently very clean and exclusively used for the title and description of the issue which makes sense hierarchically and makes it easy to focus on understanding the issue itself. Now we would have the emoji awards there that are not part of the basic issue description, and the sidebar on the right that pulls our eyes away from the issue description.

Before:

After:

Note that the screenshots are the same height, but the only thing we are seeing extra are the labels. Otherwise everything (the decription, comments, emoji awards, participants, assignee and milestone) was already clearly visible with the sidebar down below, but it didn't look as cluttered since your eyes only needed to navigate between UI elements vertically, rather than vertically and horizontally.

I love the look of the new sidebar, but I'm not sure about its new location and that of the emoji avatars. The page looks busier / more cluttered since there's so many things asking our eyes for attention above the fold.

I agree with @DouweM.
Especially on the MR page the new location of the sidebar makes it look cluttered because there are so many things displayed around the description.
Personally I really like the current structure of the MR and issue pages, because they focus the attention on the most important things (Description and in case of an MR status).

Regarding the placements of the emojis:
It now looks like they are a part of the decription text.
I think that's wrong, because those are actions other users can do.
At least in my mind that means they should be clearly seperated from the content.
At the moment we do that with a line, this is enough to convey to the user clearly that this is not part of the description text.

@DouweM do you want to finish this MR? It would be great to have it in 8.3

@dzaporozhets I would rather not, I'm kind of tired of doing UI/UX work this month :) I'm currently working on improving the web edit flow for forks etc which is a bit more Ruby-heavy :P

@haynes emojis are a part of the decription text.

I'm currently working on improving the web edit flow for forks

@DouweM can I have a link to issue?

@DouweM why you doing UI/UX? if you have a UX/UI problems please create UX label issue, please don't fix it yourself you just make it worse

cc @skyruler

Reassigned to @dzaporozhets

I will try to implement most of improvements from @DouweM . Since design is always subjective I propose we continue conversation and not blocking this MR

@skyruler I think you misunderstood me.
Probably because i explained it badly. I'll try to do better once i'm home later

@dzaporozhets OOOOK i did improvements for current page it should be much better if we can merge it together :)

@skyruler I'm not doing any real UI/UX work, but I spent some time this month fixing a lot of small things like inconsistencies that annoyed me in the UI: list of merge requests. I fixed some small things during the weekend and that kind of spiraled out of control into fixing a lot of things :)

@dzaporozhets #3215 (closed) and #3441 (closed), as an example. Not a lot of UX changes, mostly making it work so that people don't wonder why there is no "Edit" button by making the fork automatically etc.

@DouweM thank you for the feedback, but some of your concerns are too subjective.

Do we still need the cross-project reference at the very top? We can now also simply >copy/paste the full link, and I don't think it's more important than assignee/milestone.

The point of it being at the top is because it needs to be placed in one place to be easily found and copied for references/chats/etc.

The cross-project reference doesn't need a tooltip anymore.

It does, basic UX to show the feedback of the system, the point is the tooltip message should change when the linked is copied.

I love the look of the new sidebar, but I'm not sure about its new location and that of the > emoji avatars.

The emoji avatars belong to the issue/MR part, as they show reaction on it. If you want something different, you can use comments. It is just the same pattern as we're going to implement for comments.

The page looks busier / more cluttered since there's so many things asking our eyes for >attention above the fold. The content in the grey section is currently very clean and >exclusively used for the title and description of the issue which makes sense hierarchically >and makes it easy to focus on understanding the issue itself.

Disagree, there is a 2 columns structure which first is much better for responsive layout, as now responsive layout is a mess, second - does not affect eyes movement plus there is strong colour support for grouping elements, third we don't need more that 600-700px for issue body from readability perspective anyway. While right now as soon as you reach the end of the issue/MR body it is not clear what happen next.

I will check all the feedbacks closely later.

@DouweM we also doing inconsistencies i'm fixing some stuff on a fly while implementing UI framework :) at the end it's a mess

@creamzy thank you for response

@DouweM @creamzy @skyruler I propose since now every merge request that modifies UI has cc for Andriy or Liza. This will allow them to be acknowledged with changes

@DouweM paddings and margins, as well as naming will be fixed by @skyruler later, as Dimitriy is not CSS/HTML pusher. Because of the specific technics used in GitLab he helped with putting down the grid for us, later pixel pushing will happened.

@creamzy

The point of it being at the top is because it needs to be placed in one place to be easily found and copied for references/chats/etc.

In chats, the cross-project reference doesn't work since it's not a link, and in comments, starting with 8.3, you can just copy the full URL and it will automatically be displayed using the short version in the comment, so writing it like gitlab-org/gitlab-ce#123 is no longer as useful as it was before.

It does, basic UX to show the feedback of the system, the point is the tooltip message should change when the linked is copied.

The tooltip now shows the same data as the label above it, that seems like duplication and isn't that way anywhere else in the system. The "Copied!" tooltip makes sense to me.

The emoji avatars belong to the issue/MR part, as they show reaction on it. If you want something different, you can use comments. It is just the same pattern as we're going to implement for comments.

I think it makes more sense to have user actions in a separate section from the actual issue description, like @haynes mentioned.

Disagree, there is a 2 columns structure which first is much better for responsive layout, as now responsive layout is a mess

I agree, but we can do responsive layout with two columns.

second - does not affect eyes movement

It definitely does for me, my eyes have a harder time figuring out where to look when they see an issue page that looks more busy than it was before.

plus there is strong colour support for grouping elements,

Sure, but more there are still more grouped elements.

third we don't need more that 600-700px for issue body from readability perspective anyway.

True, I think we can make the description section less wide, but I really dislike filling that up with the sidebar.

While right now as soon as you reach the end of the issue/MR body it is not clear what happen next.

How so? The next part is reading the discussion.

@skyruler

we also doing inconsistencies i'm fixing some stuff on a fly while implementing UI framework :) at the end it's a mess

Maybe I should have communicated with you better, but I think it was worth spending some time improving the consistency for 8.3, instead of waiting for 8.4 or 8.5 when the UI framework comes.

@dzaporozhets

I propose since now every merge request that modifies UI has cc for Andriy or Liza. This will allow them to be acknowledged with changes

Sounds good, apologies for forgetting to do that earlier.

@creamzy:

paddings and margins, as well as naming will be fixed by @skyruler later, as Dimitriy is not CSS/HTML pusher.

I don't understand why we cannot fix them now. Having a proper framework is super important, but that will take a little time to be ready, and I don't want to have something in 8.3 that has "wrong" paddings and margins if it takes little time to fix it.

Because of the specific technics used in GitLab he helped with putting down the grid for us, later pixel pushing will happened.

I think there is always a time for (a little) pixel pushing. We have a release every month, and I want GitLab to look better every month, rather than looking worse every month and only super beautiful after a couple of months.

@skyruler @creamzy I may sound a bit annoyed but I'm not, it's just been a long week. I really appreciate all your work and I will try to work with you more in the future instead of doing my own UI thing on the side.

Have a good weekend everyone :)

@DouweM

How so? The next part is reading the discussion.

No, next part is 2 side layout with lots of distraction, while the issue/MR itself should conduct single thread with discussion.

I am not sure why you're not happy with a cross-project reference, it's all the same, just different placement. If you still consider it's not so important we can move it down, but I got other feedbacks from community, that is why it is where it is.

All subjective parts of design are discussible, while objective design theory is not ^^

@creamzy

No, next part is 2 side layout with lots of distraction, while the issue/MR itself should conduct single thread with discussion.

It feels to me like by moving the sidebar up, we added distraction to main issue description which used to be clean. We used to have a busy discussion area with the sidebar, but now everything looks busy!

I am not sure why you're not happy with a cross-project reference, it's all the same, just different placement. If you still consider it's not so important we can move it down, but I got other feedbacks from community, that is why it is where it is.

I think the cross-project reference used to be very important, but is now less important because we support URLs as references, and I think it's definitely less important than the assignee/milestone.

All subjective parts of design are discussible, while objective design theory is not ^

Which part do you mean by objective design theory?

Added 1 commit:

• bd6ad9c2 - Few UI improvements to new sidebar implementation

@DouweM The Gestalt principles and everything about cognitive science to begin with. If you're interested in the subject, please google it, there are tones of nice info worth reading, too many to mention here. Articles are much easier to begin with. Later I can advise you some books, just ping me.

I am going to return emoji awards back to gray area since this MR is more about sidebar. We can discuss it and implement in 8.4

MR

Issue

I really like a discussion happening here 😃

But I will continue with delivering this poor sidebar and finally get it merged today 🚎

Added 1 commit:

• 6f082105 - Move awards back to gray panel and few improvements to sidebar

Added 1 commit:

• 389b6bdd - Fix tests

Added 66 commits:

• 389b6bdd...722f1481 - 56 commits from branch master
• f7bba47f - Implement issuable sidebar partial
• 76ff8eac - Move awards css to separate file
• b0591ff0 - Redesign issue page for new sidebar
• aa5bf409 - Make edit link on issuable sidebar works
• c6c24431 - Implement new sidebar for merge request page
• 6117ae98 - Update changelog
• 617ba013 - Fix tests for new issuable sidebar
• b4ea6ad1 - Few UI improvements to new sidebar implementation
• 19118114 - Move awards back to gray panel and few improvements to sidebar
• 7cbcc21d - Fix tests

mentioned in commit 03a5df99

Status changed to merged

@dzaporozhets I love this enhancement. It'll make label heavy workflows so much smoother. Awesome work! 🍻

Ok. I'm finally home and am catching up with the discussion.
The award emojis have been moved back, so for now I'll focus on the sidebar with my comments.

Let's start with the basics first:

What's the intend behind this design change? What are the current problems?
@creamzy answered this partly in a comment already, but I think it would be nice to get it out one more time complete.
Also a suggestion for the future:
Answer these questions in the issue for a bigger design change next time - just to provide some context for the community.
The issue only contains 2 screenshots and noone knows why this needs to be changed without an explanation 😉

Some more questions:

Which information does the user need to see the most?
What's most important on a page?
Where should the initial focus of the eyes be?

For me on the issue and mr pages the most important thing is the description and after that for mrs the area with the build status, accept button and so on.
So the perfect page for me would make me focus on the description as soon as I open the page.
I don't need to know any of the information in the sidebar until I know what the issue/mr is about.

Next my thoughts on the sidebar being moved to the top:

@creamzy wrote:

does not affect eyes movement plus there is strong colour support for grouping elements

As I wrote earlier I disagree that it should be moved to the top because the initial focus on the description gets lost a bit.
When I open the page now, I get a lot more information at the first glance that I don't need at the moment. This results in the page being heavier to my eyes and i take a little while to focus on the description and to blend out all the stuff that doesn't interest me in that moment.

@gsmethells thanks!

I apologize if I'm showing up a lot during the 8.3 release here, but I thought I'd just add my 2 cents. If you want me to butt out, I will, but I believe that because

1. GitLab strives to be simple it forces most workflow into labels
2. Users must scroll to see labels in the current layout

therefore, it is worth some effort to consider being able to see the labels above the fold in order to better enable label based workflows.

@haynes I still think Title and description is the main focus. It has gray background color compared to sidebar and discussion. Maybe bold black cross-project reference takes unnecessary attention but we can easily fix it. In general I think 2 column layout is a good improvement. It improves readability since issue description is more narrow now

For me personally its pretty easy to focus on issue title/description here:

At the same time I enjoy fact I can read text without scanning all page width. Same like with comments

@dzaporozhets

I still think Title and description is the main focus.

sure. it has the main focus. But that doesn't change the fact, that there are now more information to look at that's unnecessary when reading an issue first.
Thus just regarding the focus on the description this is a step back.
We can argue about how big the impact is thought ;)

Maybe something like this would be a possible compromise:

I only moved the sidebar down a bit with paint so it doesn't look very nice, but you get the idea.
With that you'd keep the 2 columns layout consistent, but shift the focus to the issue description more.

@haynes the whole point of UI changes is to make it look nice.

@haynes give it a try 😃 I am sure we get used to new sidebar quite fast. And it will look nice. If it will be a real usability issue we all will notice. Changing ui is hard but I really want to make GitLab looks nice.

@dzaporozhets Why did you remove all stuff related to award-emoji?

I found it in separate file. It's good to have all movement in the same commit because it's much easier to track.

@vsizov sorry I forgot to add file in same commit

After looking at a few issues and MRs on gitlab.com (very recently, after 8.3.0-rc1 was deployed) to try to get a feel for the new sidebar, I certainly agree with some of @DouweM and @haynes concerns.
First of all, moving the sidebar to the top takes some valuable space away from the issue description (which - we all agree on this - is the most important part). On the 13-inch laptop which I happen to be using right now, the horizontal space available for the issue/MR description is just too small and the distraction from the new sidebar is considerable!

Also, I would like to second the concerns raised about the very prominent placement of the cross-project reference. I think @DouweM gave some pretty good (and unaddressed) arguments why it is unnecessary to have it at the top.

Hate to say it so bluntly, but while looking good in some mockups, the current sidebar implementation is clearly a step backwards in productivity/usability for me (in the sense of focusing on the issue not the overhead associated with it).

@pbr thank you for your feedback, but now with some small steps we are building foundation for future releases, so we would love to proceed like in mockups above.

@skyruler and everyone else: Thanks, maybe I didn't manage to make my point clear enough. I love almost everything about the new sidebar! It looks great and has many advantages that can and will contribute to a better UX!

But: The (top) placement kills a lot of this again! It adds distraction at a point where you want to focus on the things that matter. Also, once again, there are many good arguments for moving the cross-project reference down. As you know: It often is the small things that matter (and give a better-than-the-rest UX).

@pbr I don't agree with the top placement. I think before it was moved in an uncomfortable place for longer issues, which was very unwieldy.

I do think the focus does not lie on the issue body enough. I worry it's more an issue with color. I created an issue for this: https://gitlab.com/gitlab-org/gitlab-ce/issues/4122

Thanks for creating that issue, @JobV. I think it's a good idea to continue the discussion there!

Crossposting below comment:
Apparently we agree that there is too much focus on the sidebar now. Still, I do believe that this is (mostly) due to the issue body lacking horizontal space. I realized that my browser window was just a few pixels too wide to not automatically collapse the left menu/navigation bar (is that what it is called?). Maybe it is worthwhile reconsidering that threshold, in case you guys want to stick with the sidebar positioning?

mentioned in issue #4122 (closed)

After testing this a day on my pc at work (which only has a 4:3 19" Monitor),
unfortunatly I still feel like the sidebar placement is very distracting.
It is especially bad on MRs/issues with screenshots in the description.
As you can see in the screenshots this is all very narrow and at least to me it's very hard on my eyes.

I think we can still do a 2 column layout even if the sidebar is moved down again.
You could simply render an empty div with the same color.
Simple Mockup made with mspaint:

@haynes I'm really sorry to hear that you have problem with 19 inch LCD screen, but we tested it out on 13',15' and 27' LCD screen seems working well

Research says the optimal line length on the Web is considered between 50-60 characters. Long lines make it more difficult to focus and to correctly jump from one line to the next. If someone feels some discomfort reading shorter body text, it's only matter of your habit.

As for the Cross-project reference , we will move it to more prominent position, thank you for the feedback. BTW I am happy you pay attention to the sidebar now, in the past people tend to avoid using it.

@skyruler so I guess me and everyone else with small screens have bad luck?
I don't get it. Several people voice their concerns and problems with the current design and the only things comming from you are either sarcastic or sound like you don't care at all.
Please don't take this as an offense, but reading your last few comments does not make you look very professional.
Please accept that there are some issues with the design (how big or small these are is certainly discussable) and try to work together with the people who are trying to improve it.

@creamzy as I wrote before, limiting the length of the text is not the issue.
(see the mockup in my previous post)
The discomfort is coming from 2 things:

1. Loss of focus compared to before
2. Additional information that are not needed at that place.

@creamzy

Research says the optimal line length on the Web is considered between 50-60 characters. Long lines make it more difficult to focus and to correctly jump from one line to the next. If someone feels some discomfort reading shorter body text, it's only matter of your habit.

I know. But often, issue bodies are not just text like in an email or a book, but rather a wild mix of copy/pasted code, log excerpts and screenshots. For all of the above, you don't choose to write long lines, but it might be an inherent property of the content, if you will. Whether you (both as in @creamzy and as in "the user" 😉) like it or not, there can simply be a need for lines with 150+ characters.

With the new layout, you will often end up scrolling horizontally in the issue body. Have a look at #4124 (closed), which happens to be the most recent issue. And believe me, there are much, much worse cases.

People use GitLab to make working with code easier. And in this environment you possibly can't apply all aspects of design theory as they would apply to other media or types of content.

Some of these cases might not be beautiful, but I am sure it can increase productivity to deviate from certain guidelines and principles (in rare cases).

As for the Cross-project reference , we will move it to more prominent position, thank you for the feedback. BTW I am happy you pay attention to the sidebar now, in the past people tend to avoid using it.

Who said that the x-project reference should get more prominent? I think rather the opposite is the case. And regarding paying attention to the sidebar: Yes, people do pay more attention to it now. But there is a large risk that it happens at the cost of not focusing on the content enough.

And just another (hopefully last) addition regarding sidebar location. Don't you also feel like there are quite a few different and almost unrelated UI elements crammed into very little space here? (Window width is about 1280px)

You even end up having linebreaks in places, where you really don't want them.

While being presented a lot of information that is only important in maybe 10% of the cases, the key information (the reason you go to that page) is not as obvious as it used to be.

It might be my ignorance, but I fail to see the one (that would be enough 😀) convincing argument for having the sidebar at the top. And I think this change comes at quite a cost...

@pbr GitLab is used not only by developers, and code issues are not the only business cases I as a designer need to consider here. I feel strong trust issues, that's it

maybe we need to collapse left sidebar earlier and have min width for the issue body, but no-one wants to consider other solutions because everyone is super busy caring about sidebar.

@pbr GitLab is used not only by developers, and code issues are not the only business cases I as a designer need to consider here. I feel strong trust issues, that's it

I don't understand the last sentence, can you rephrase it if it's important? Thanks.

(Edit: In case you feel that people don't appreciate your work enough, I can assure you that this is not the case. I am sure pretty much everyone here is very happy with the design work recently! But when people raise concerns and come up with proposals to make it even better, it should be possible to have a proper discussion by exchanging arguments and explaining the reasoning behind larger changes.)

But ok, point about other business cases taken. (Side note from my experience: Try not to offend (abstractly speaking) your main target and customer group when worrying about possible great business cases of the future. This has ended deadly for more than a few startups.)

maybe we need to collapse left sidebar earlier and have min width for the issue body, but no-one wants to consider other solutions because everyone is super busy caring about sidebar.

This is what I suggested earlier. But thanks for coming back to it.

So far this is what we have as suggestions to improve the situation:

Site as a whole:

• different sidebar positioning
• collapse left sidebar earlier
• change the color of the issue body and the sidebar ( #4122 (closed) )

Sidebar:

• change the location of the cross-project-reference

Emoji Awards (change was reverted)

• visual indication that this is not part of the original description

Did I miss anything?

I happen to work on a 12' laptop screen (1366x768) and indeed I feel that it's a little too crowded. Also I have now lost the subscribe notifications area as you can see from the image below. I have to set firefox to full size or drop the bookmarks toolbar to make it appear.

---

I propose we move discussion to original issue which is still open - https://gitlab.com/gitlab-org/gitlab-ce/issues/3981 instead of merged request

@haynes @pbr @axil much love guys, let's move discussion to the issue. We've brainstormed your feedbacks from yesterday, nothing better that live user testing. Sidebar pushed back, and right now we know all the pitfalls, wishes and troubles to be solved.