wp-autoupdates icon indicating copy to clipboard operation
wp-autoupdates copied to clipboard

Make it visually clearer which plugin/theme rows have auto-updates enabled

Open pbiron opened this issue 4 years ago • 8 comments

The plugin/theme list tables make it really easy to tell which rows are for active plugins/themes, but making the background-color a light blue and a 4px dark blue left border:

current

I'm wondering if there is anything similar we can do to make it easier to which which have auto-updates enabled.

I'm certainly not a designer and am not really thrilled with any of the following, but I'm gonna throw them out just to get the discussion going:

proposed

alt-proposed

alt2-proposed

pbiron avatar Apr 26 '20 22:04 pbiron

and "It's fine just the way it is, we don't need to change it" is a perfectly reasonable response :-)

pbiron avatar Apr 26 '20 22:04 pbiron

I actually am a designer :)

  • img 1: The alternating green/blue borders just add noise/clutter. They don't make it clear what means what.
  • img 2: Having borders on the "outside" breaks the design-language overall. I don't see it passing.
  • img 3: Is the clearest of the lot. But not really a design.

IMO, having a separate column for the auto-updates might have been a good idea when initially working on this feature, But the Enable/Disable action really needs to find its way organically next to the other "Bulk-able" actions. Next to Activate/Deactivate/Delete etc. Perhaps with Auto-Updates Enabled text being bold. While Disabled being normal.

Another option would be to have a notice (green-left-bordered) inside the plugin row. Something that plays nice/alludes to the "Update Available" notice that we're already accustomed to.

abuyoyo avatar Apr 26 '20 22:04 abuyoyo

To me it would be nice to group all activation/inactivation actions to the same area. And in some way visually distinguish active auto-update from inactive. Personally I'm a fan of coloring backgrounds, but maybe thats not an option for accessibility?

In hindsight, adding color like the screenshot below is not clear enough. :) What does the green mean?

image

kebbet avatar Apr 27 '20 20:04 kebbet

Or change the layout by moving actions to a center column?

image

kebbet avatar Apr 27 '20 20:04 kebbet

I actually am a designer :)

Thanx for the feedback

  • img 1: The alternating green/blue borders just add noise/clutter. They don't make it clear what means what.
  • img 2: Having borders on the "outside" breaks the design-language overall. I don't see it passing.

The green right border is "inside", just the blue left border that core already adds for active plugins is "inside".

The suggestion there is motivated by the following:

  • After many years using WP, I've been "trained" by the blue left border to look in the 1st column and "confirm" that that means the plugin is active
  • The green left border is intended to "train" users to look at the Autoupdates Column to "confirm" which plugins have auto-updates enabled

Not great motivation, I know, but that was my thinking.

  • img 3: Is the clearest of the lot. But not really a design.

It's not really clear from that screenshot, but this one changes the background color (of just that one column, so that the blue background for active plugins isn't obscured) to green with roughly the same "opacity" as the blue background for active plugins (i.e., roughly the same modification of the color between the blue left border and the blue background).

IMO, having a separate column for the auto-updates might have been a good idea when initially working on this feature, But the Enable/Disable action really needs to find its way organically next to the other "Bulk-able" actions. Next to Activate/Deactivate/Delete etc.

I've said this before, but personally, I would prefer the Enable/Disable links to be row actions as well. But as pointed out in [https://core.trac.wordpress.org/ticket/48850#comment:36 this comment on the trac ticket], where you can also see many of the other designs that were tried before this feature plugin even got started.

pbiron avatar Apr 28 '20 16:04 pbiron

This is a solution that I'm thinking of for the auto-update status indicators.

auto-update-indicator

There is a design exploration in Gutenberg for using the blue dot as an indicator. (https://github.com/WordPress/gutenberg/issues/19909)

I think this can be explored in the future after merging into Core.

wittwitsan avatar May 12 '20 17:05 wittwitsan

I like that, it's subtle but not too subtle.

If/when that gets accepted for Gutenberg it is definitely worth considering for this.

pbiron avatar May 12 '20 23:05 pbiron

Yeah, I also love that design proposal 👍

audrasjb avatar May 12 '20 23:05 audrasjb