Skip to content
This repository has been archived by the owner on Feb 22, 2022. It is now read-only.

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

Open
pbiron opened this issue Apr 26, 2020 · 8 comments
Open
Labels
design enhancement New feature or request

Comments

@pbiron
Copy link
Contributor

pbiron commented Apr 26, 2020

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 pbiron added enhancement New feature or request design labels Apr 26, 2020
@pbiron pbiron changed the title Make it clearer which plugin/theme rows have auto-updates enabled Make it visually clearer which plugin/theme rows have auto-updates enabled Apr 26, 2020
@pbiron
Copy link
Contributor Author

pbiron commented Apr 26, 2020

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

@abuyoyo
Copy link

abuyoyo commented Apr 26, 2020

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.

@kebbet
Copy link

kebbet commented Apr 27, 2020

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
Copy link

kebbet commented Apr 27, 2020

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

image

@pbiron
Copy link
Contributor Author

pbiron commented Apr 28, 2020

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.

@wittwitsan
Copy link
Member

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. (WordPress/gutenberg#19909)

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

@pbiron
Copy link
Contributor Author

pbiron commented May 12, 2020

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

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

@audrasjb
Copy link
Contributor

Yeah, I also love that design proposal 👍

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
design enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

5 participants