Consider making issuable sidebar white
With the new navigation in place, we are considering making the issuable sidebar white. This is to further align this information with the page content, as well as make the page feel less boxed in.
Activity
For what it's worth: I love the clear separated panes in the new UI with different background shades. I hope you're not planning to make everything samey-super-white with barely visible low contrast separation lines again..
Edited by username-removed-551317
@TonasJ we are only talking about the isuable sidebar here.. so that is the sidebar on the right for issue/mr/job pages. We are considering this, as this info is subject to the content on a certain issue/mr/job.. while the other sidebar and top nav.. are in hierarchy above that/separated from it.
It would prob look like this:
@tauriedavis @cperessini @pedroms another consideration is the position of this right sidebar vs the bread crumbs bar.. how are we thinking on that? is there an issue on that?
also as we can maaaaybe optimise stuff with the titlbar
another consideration is the position of this right sidebar vs the bread crumbs bar.. how are we thinking on that? is there an issue on that?
@dimitrieh I have been thinking about this too. It makes sense to me that the sidebar be below the breadcrumbs because it is a part of the content of the page. Here are a few options I've been considering to try and make the sidebar more related to the content of the issue/MR
The current approach is better for displaying more information vertically, especially in the expanded state of the issuable sidebar, but the hierarchy isn't as clear
Current Floating Flush with right edge 
-
Here's a mockup for the expanded sidebar. I removed the horizontal bars separating the sections and made the titles bold isntead to give it a cleaner look. I also tried to make it a little thinner, since the current issuable sidebar is wider than the navigation sidebar.
Edited by Chris Peressini @dimitrieh yes that is exactly what I thought it would be and that change seems to be live already - and as I said above, I think it is a step backwards. I think making the issue sidebar white is a bad idea and goes back to the messy low-contrast layout with no clear separation of panes and layout areas which takes much more focus to look at and to find things.
Edit: ah either it's not live or it has been rolled back. At least on my other screen it still looks quite shaded unlike your suggestion screenshot where that sidebar is completely white - but this only shows that even the current live version is quite low-contrast already, and if at all it could use some more contrast for the sidebar backgrounds and not less.
Edited by username-removed-551317-
To me, having the issue title bar with the breadcrumbs feels overwhelming. Add the floating sidebar to that, and it feels like there is a lot of stuff happening and Im not sure where to look first.
🤔 I prefer this mockup (but with breadcrumbs aligned to the content):
because it has a distinct area that shows where you are, a distinct area for the page content, and a distinct area for the sidebar content.
I do think we should consider @TonasJ's. The intention here is to make the issuable sidebar tie more closely with the page content. But if it actually makes it more difficult to differentiate sections of the page, it may not be the right answer. Just something to keep in mind.
mentioned in issue #37828 (closed)
The intention here is to make the issuable sidebar tie more closely with the page content. But if it actually makes it more difficult to differentiate sections of the page, it may not be the right answer. Just something to keep in mind.
I do not believe that making the issue sidebar white makes it difficult to differentiate that area, but that is just an opinion. I would really like to do some research on this as I think getting this right would be a big improvement! @sarahod, is there a chance for us to schedule some user testing to see if @cperessini's designs here https://gitlab.com/gitlab-org/gitlab-ce/issues/35740#note_36361770 are an improvement?
@sarrahvesselov sure! So essentially, we're trying to find out what impact (hinders/improves/makes no difference) changing the colour of the sidebar has on a user's ability to find content located in the sidebar? Does that sound right?
The change making the issue bar white seems to already have gone live. Since many here seem to have trouble reproducing my impression of this, let me try to illustrate it as clearly as I can.
On a smaller window width with the current white issue bar, it now looks like this:
This is made worse if there are nearby boxes inside the content area (as in above edited screenshot) which are close to the sidebar border, of which the border looks exactly the same making it all feel like it blends over.
To illustrate this "blending feeling" even better, have this over-the-top "mockup" of how this feels like to me on initial sight:
However, the old version of the new layout with the darkened sidebar gave me this initial reaction:
I hope I made it more clear why I think this is a clear step back in terms of clear separation of content areas and therefore the initial grasp a user gets on the overall site layout.
The change making the issue bar white seems to already have gone live.
No, the sidebar is still gray @TonasJ.
Thank you for the further illustration of how you perceive the lack of contrast. Many have also complained about the darker color and how that feels boxy and constricting. We are taking all points of view into account and will be doing some user research before making a decision.
So essentially, we're trying to find out what impact (hinders/improves/makes no difference) changing the colour of the sidebar has on a user's ability to find content located in the sidebar? Does that sound right?
Yes @sarahod. The balance I am trying to strike is this: The issues sidebar does not create a false frame around content opposite the sidebar, making users feel boxed in and claustrophobic. The issues sidebar feels like part of the issues page but still holds its own weight as an action area for the issue.
@sarrahvesselov thanks, got it!
@sarrahvesselov interesting, I'm seeing now on my other screen as well. On my laptop screen (which isn't such a bad one) I can't tell any color difference since it's so similar already, as unintentionally demonstrated by my last post
😆 I think the main problem is that less contrast works well and looks better with a lot of spacing on large screens, but on smaller widths with everything so close together it makes stuff harder to separate the different layout parts... especially if the screen isn't good/bright enough to tell apart the subtle shading.
Edited by username-removed-551317I think the main problem is that less contrast works well and looks better with a lot of spacing on large screens, but on smaller widths with everything so close together it makes stuff harder to separate the different layout parts
Excellent point and really helpful feedback @TonasJ. We will make sure to keep that in mind when testing it.
-
Should I hold off on https://gitlab.com/gitlab-org/gitlab-ce/issues/37660 until research is finalized? Related issue but slightly different.
User research now in progress: https://gitlab.com/gitlab-org/ux-research/issues/32
added UX research label
I ran a usability click test with 144 users. Users were a mixture of GitLab and non GitLab users. They were asked where they would click to add a due date to an issue.
The click test consisted of two variants:
- A - Existing sidebar
- B - White sidebar
Each user saw one of the variants. The task was judged on accuracy and speed.
Accuracy
- A - 90%
- B - 81%
Speed
- A - 10.6 seconds
- B - 12.1 seconds
Conclusion
A white sidebar performed worse than our existing sidebar colour. Users also had a higher propensity to click the ‘Edit’ CTA on the issue description when they were shown the white sidebar, suggesting that users were less likely to align the sidebar content with the page content.
Edited by Sarah O'Donnell
