Sidebar design polish

[ropsii]

Summary

There are various typographic and other visual inconsistencies in the sidebar — like vertical rhythm, font size, element hierarchy, mixed icon styles, and such. I propose a polished version that addresses all those issues.

Motivation

Couple of examples of the visual issues in the current design:

1. Font-size hierarchy: Different font sizes between main navigation items and filters. This is sometimes justified, but the difference is only 1px, which only makes things look messy.
2. Vertical rhythm: The spacing between the lines in the main navigation items and filter items is different. Again, it adds to the feeling of disorder.
3. Icon style: Applications, Settings, and Documentation use outlined icon style, and User Info is filled style.
4. Color hierarchy: Notice how the currently selected item Applications is white (while other items are tamed down), and then the filter items are also white, which is logically inconsistent.

Proposal

I propose a redesigned version with the following improvements, from top to bottom:

1. Use the full Argo logo
2. Move the collapse button to a more consistent position
3. New custom icons, consistent in style
4. Uniform vertical spacing between items
5. Consistent active and hover states
6. A more usable collapsed state (See Collapsed Alt below)
7. Slightly adjusted background color for better contrast

[wojtekidd]

+1 for Collapsed Alt - with descriptions and filters.
This is soo nice 😍

[YGwen]

In my opinion (and experience), filters are the most used feature for day to day operations, and unfortunately having those icons on top of the filters harms the user experience of operators.
Our company's ops team still uses 1080p monitors, and it means that they have to scroll down in order to use the filters.
I do think that in this regard, the previous UI was more user friendly and that the UI should emphasize the most used features of the product rather than the administration menu buttons.

[ropsii]

Thanks for the comments @YGwen. Do you think this is more usable?

[drewboswell]

This would be way better than the current layout for sure (see issue #11354 )

[alexef]

@ropsii should filters take all vertical space? (so move the page title and the action buttons to the right to make space for them)?

[ropsii]

@alexef I understand the motivation, but that would be logically incorrect since they control what's right of them. I think that would make the page hierarchy confusing.

[drewboswell]

Any chance of this entering into the next patch release? Our operational brethren are suffering scrollitis

[YGwen]

Thanks for the comments @YGwen. Do you think this is more usable?

It's awesome !

[drewboswell]

This change really is needed. At my place of work we have frozen all ArgoCD updates until this is dealt with, it's that awkward a layout.

[jannfis]

Any chance of this entering into the next patch release? Our operational brethren are suffering scrollitis

Sorry to disappoint here, but such a "dramatic" change (i.e. moving the filters out of the side bar) will most likely not make it into a patch release. So probably, the earliest we will see such a big change is Argo CD v2.7. I think adapting font-sizes, spacing etc in the sidebar would be a perfect fit for a patch release, however.

@ropsii and others, we do have a UI/UX related slot within our regularly scheduled contributors' meetings. I think this may be a perfect topic to align with the rest of the UI/UX folks and maintainers. @rbreeze and @reginapizza, are the UI/UX meetings still regular?

[rbreeze]

@jannfis +1 about patch release, I agree.

SIG UI meetings are still on the schedule for every week but they usually are cancelled due to lack of agenda topics. I agree this is worth talking about though, so we can add it to the agenda and be sure to hold the next meeting.

[drewboswell]

Any chance of this entering into the next patch release? Our operational brethren are suffering scrollitis

Sorry to disappoint here, but such a "dramatic" change (i.e. moving the filters out of the side bar) will most likely not make it into a patch release. So probably, the earliest we will see such a big change is Argo CD v2.7. I think adapting font-sizes, spacing etc in the sidebar would be a perfect fit for a patch release, however.

@ropsii and others, we do have a UI/UX related slot within our regularly scheduled contributors' meetings. I think this may be a perfect topic to align with the rest of the UI/UX folks and maintainers. @rbreeze and @reginapizza, are the UI/UX meetings still regular?

It´s not such a "dramatic" change, it is just how it was before 2.5.x which was more adapted to non-huge screens.

[drewboswell]

This is still a problem use wise. The design went from easy to use to annoying for many of our operators, myself included.

[drewboswell]

@jannfis +1 about patch release, I agree.

SIG UI meetings are still on the schedule for every week but they usually are cancelled due to lack of agenda topics. I agree this is worth talking about though, so we can add it to the agenda and be sure to hold the next meeting.

Can you please bring this up in the design meetings you mention. There is a disconnect between designers' screen resolution and the reality in many IT, Ops, Dev teams.

Argo now looks like crap and is annoying to use for people with 22, 24 inch screens with 1920x1080 resolutions.