WC 4.0 Design Feedback

[manospsyx]

Hey all,

Congrats for getting close to releasing 4.0. Love the awesomeness that's built into the reporting system and the general UX direction.

My goal with this issue is to pass on some design feedback. It's mostly details, but details can make a difference in how users interact with interfaces (and how they feel while doing so). Details also shape the perception of professionals about the platform at different levels: From code, to design/UI/UX, to the product as a whole. Details often reveal information that may help us see fundamental decisions more critically.

I'll try to be as short as possible here. If you find this feedback useful and need details, I'm happy to share more. Please share this with your design team. It might help them see some of what's about to be shipped in new light.

Awesome

• The "Inbox, Notices, Stock, Reviews" toolbar is awesome as it serves a real need: It adds shortcuts to common store owner actions, and gives plugins a chance to interact with the user via messaging. 💯

• The new reports are a great addition to the platform as well, and building them on top of React results in a snappy user experience that's much needed in that section. 💯

Awesome?

The WC Admin Bar

WC 4.0 introduces a new admin bar that basically exists to accommodate two elements:

• A breadcrumb on the left
• A toolbar on the right

The main problem that the admin bar solves is this: It creates a space that keeps the toolbar visible on all WooCommerce pages.

At the same time, it introduces a few annoyances:

• It limits useful space, which is already limited by the WP Admin Bar. it's not the pixel count (height) that matters here. The black bar on top already gives you a "contained space" feeling on smaller laptop screens: Adding another, bigger, contrasting, fixed element under it makes that feeling even more pronounced.
• It's a big white fixed block in a dark menu environment -- it ends up attracting more attention than justified by the purpose it serves.
• It contains a breadcrumb in a breadcrumb-less WordPress dashboard, which looks like it has been added to fill up the white space in order to justify its existence. Does WC really need a breadcrumb? If test subjects were confused about their whereabouts, could it be that they are just not familiar with the new screens yet? Is there really a deep hierarchy of menus that needs to be shown to the user? WP doesn't need breadcrumbs because it's mostly flat. WC doesn't deviate far from that rule. With the exception of some Settings menus that get a bit deeper, e.g. Shipping Zones, there is little in WC that screams "depth".
• The breadcrumb is red-ish. Red = attention. Red is nowhere to be found in WP, with two exceptions: Delete buttons and notices. See any more red in the toolbar? It's the red that signals the arrival of a new message! It's a different red that's red for the right reason, but it gets choked by the "breadcrumb" red, which trains the user to ignore red color up there.

Some more issues with the white bar:

1. It can never live side by side with these:

These roll-outs are designed to be at the top of the page, and graciously disappear behind the bar when the user scrolls down. They are already "over the top", one might say, but they work well as they are really easy to ignore if you don't want them to be in your way.

This looks like someone has pulled down the "Help" menu, and ended up pulling the WC bar instead:

Isn't it confusing? Those rollouts look like something that "gets in the way" of the new bar.

2. Making it white has forced you to resort to things like this to make it stand out from the content:

There are no shadows in WP. The organization (hierarchy, separation) of information relies mostly on color and borders. Not adhering to WP design conventions creates an effect similar to what store owners often experience when they install a plugin that contains its own styling approach, or worse yet, CSS lifted from different sources. People have different ways to describe that impression. Here's it's subtle, but it's there.

The Flyout Panels

WP conventions. Consistency.

Color. WC has never been 100% consistent with its use of purple, but this looks new. It looks like it's part of a new palette used in the Analytics panels. If there's a new purple coming for the WC brand, it needs to be introduced everywhere, at the same time, and signal something that's well communicated. Otherwise, it doesn't contribute to making the user feel they are navigating familiar waters, which is what you want when you introduce new elements and experiences. Also: Those grays are quite "cold" by WP standards.

Then, there's the overall design direction here. In WP 5.3, we have seen borders used to greater effect than before, which makes these flyout panels look even more alien.

There are also some glitches with animations when flying those panels in and out.

Analytics

The new UIs designed for the Analytics section blend in well with the elements introduced in WP 5.0 / Gutenberg and contribute to a feeling of consistency. That's mainly a result of using borders generously. Some feedback here:

• Checkboxes. We already have a couple flavors in WP: https://a.cl.ly/P8uRYkq0 and then https://a.cl.ly/WnuNEBnZ -- then WC introduces a new one: https://a.cl.ly/7KuRyprZ

• Color. These appear to be part of a new palette: https://a.cl.ly/nOuNmlOq -- I'd love to see a palette developed around the Woo purple, make it official and share it with everyone who develops WC plugins.

• Some interactions/animations could use some improvement, for example this rotation: https://a.cl.ly/4gumx1g9 -- and then some more of that red (buttons) in there.

Closing

I understand there's a lot about design that is subjective. But design issues usually create observable results. Some might be obvious, e.g. "users having difficulty to complete an action". Others might be felt by the users, but won't reach the surface until the right questions are asked, or the user is asked to compare alternatives. Color has that kind of effect.

I'd love to see the new "Inbox, Orders, Stock, Reviews" icons get their own place in or around the existing WP Admin Bar at some point.

I'm sure we'll all have a chance to collect more feedback from our users over the coming months. I'd be happy to contribute in any way I can if you ever decide to review the design work that has gone into 4.0.

[peterfabian]

Thanks for the feedback! I'll move the ticket over to WC Admin repo as it primarily relates to the new UI coming from WC Admin.

[timmyc]

cc @LevinMedia @josemarques @jameskoster @pmcpinto

[manospsyx]

I'd love to see the new "Inbox, Orders, Stock, Reviews" icons get their own place in or around the existing WP Admin Bar at some point.

Happy to do some brainstorming with the team and build a couple static prototypes based on the native WP design language.

[josemarques]

Hey @franticpsyx, thanks for this really awesome feedback. We appreciate all the time you took to highlight all of these. Without getting into a lot of detail here's how we are addressing some of the issues you pointed out:

The WC Admin Bar: We are aware that introducing a new element on the screen did decrease the usable real estate on the screen. While this wasn't something that test subjects complained about we are already working on an iteration for this feature that reduces the visual footprint and particularly how it can co-exist with the screen options and help roll outs.

Color: We're also working on harmonising all the colors being used in WooCommerce and aligning those with the color scheme that was introduced in Gutenberg.

Analytics: Regarding the colors being used in the checkboxes: these actually relate to the data being displayed in the charts bellow. Depending on the number of data points on the chart the user is able to display or hide those on the chart using those checkboxes. Here's an example of different types of colors that these checkboxes can assume:

Looking forward to hear more from you as we introduce more design updates in future releases.

[LevinMedia]

Thanks again, @franticpsyx for your thoughtful comments! One additional note on the color scale used for analytics. It was selected primarily because of it's accessibility, and secondarily it happens to be harmonious with other primary colors in the app (Woo's purple, and WordPress's blue.)

We're using the Viridis color scale. There's some great detail behind the scale here: https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html

[manospsyx]

@josemarques thanks for responding! Here I was referring to the design of the checkboxes:

We already have a couple flavors in WP: https://a.cl.ly/P8uRYkq0 and then https://a.cl.ly/WnuNEBnZ -- then WC introduces a new one: https://a.cl.ly/7KuRyprZ

but @LevinMedia has fully answered my question about the scale being used there. What an awesome resource -- thanks so much for sharing!

Would be nice if we could include this in the official guidelines for extension developers.

We're also working on harmonising all the colors being used in WooCommerce and aligning those with the color scheme that was introduced in Gutenberg.

👍 One area that could be improved in time for the 4.0 launch is around the use of color outside the Analytics section. Mainly:

• use of red (type/buttons)
• use of the "signature" Woo purple instead of the (Viridis?) purple, e.g. for highlighting active tabs

I'm sure that in time, the newly introduced UIs can be further harmonized with the most recent changes to the WP design language. Happy to contribute in any way we can from our side at SomewhereWarm!

[timmyc]

cc @loranallensmith for some really great design feedback from the community.