WordPress.org

Make WordPress Core

Opened 11 months ago

Closed 11 months ago

Last modified 8 months ago

#46623 closed enhancement (fixed)

Site Health: possible confusion with red/orange badges in the "Passed Tests" section

Reported by: pbiron Owned by: desrosj
Milestone: 5.2 Priority: normal
Severity: normal Version: 5.2
Component: Site Health Keywords: has-screenshots site-health has-patch commit
Focuses: ui, administration Cc:

Description

Following up on discussion in slack, at first glance having big RED or ORANGE badges in the Passed Tests section could be confusing.

Seeing red/orange in the "Passed Tests" section could alarm some users...until they realize that the color coding of the badges seems to have to do with the Category of the test (RED for security, orange for performance, etc) rather than the status of the test (passed/failed/etc).

Some suggestions were:

  • Use GREEN background for all tests in the "Passed" section
    • I tend to favor this option
  • Use the current colors, but use them as an outline for the badges in the "Passed" section

See screenhots (which have the badges "positioned to the right" from #46622, although the alignment of the badges is not part of this ticket).

Attachments (19)

site-health-badges-orig.png (22.8 KB) - added by pbiron 11 months ago.
This is how things look in 5.2-alpha-44986 (modulo the alignment)
site-health-badges-outcome.png (22.3 KB) - added by pbiron 11 months ago.
This is how it could look if the background color of the badges in the "Passed Tests" section indicated the outcome of the test
site-health-badges-outline.png (22.5 KB) - added by pbiron 11 months ago.
This is how it could look if the outline of the badge indicated its category
46623.patch (1.6 KB) - added by Clorith 11 months ago.
46623.2.diff (2.0 KB) - added by pbiron 11 months ago.
Screen Shot 2019-04-02 at 9.50.04 PM.png (268.9 KB) - added by garrett-eclipse 11 months ago.
Successful test of 46623.2.diff
site-health-dashicons.png (31.3 KB) - added by pbiron 11 months ago.
use dashicons to indicate categories, instead of colored badges
Site_Health_Status_‹_Dropping_Coin_—_WordPress-3.png (54.2 KB) - added by mdwolinski 11 months ago.
Site_Health_Status_-_No_Color.png (176.0 KB) - added by mdwolinski 11 months ago.
For reference to how it would look without category colors.
Site_Health_Status_‹_one_pixel_border.png (45.9 KB) - added by mdwolinski 11 months ago.
Quick, not perfect, one pixel border mock-up
site-health-no-colors-borders.png (42.6 KB) - added by pbiron 11 months ago.
all badges with no colors but a 1px soft grey border
Solid.png (218.5 KB) - added by melchoyce 11 months ago.
Outlined.png (220.8 KB) - added by melchoyce 11 months ago.
46623.2.patch (5.3 KB) - added by Clorith 11 months ago.
46623.3.diff (5.5 KB) - added by xkon 11 months ago.
refresh of 46623.2.patch
46623-after-patch.PNG (44.3 KB) - added by ianbelanger 11 months ago.
Blue outline after patch
E5F5FA.png (47.2 KB) - added by melchoyce 11 months ago.
E5F5FA and 555D66
BFE7F3.png (48.1 KB) - added by melchoyce 11 months ago.
BFE7F3 and 32373C
46623.4.diff (5.4 KB) - added by melchoyce 11 months ago.
Swaps out badge border and text colors for core equivalents

Download all attachments as: .zip

Change History (78)

@pbiron
11 months ago

This is how things look in 5.2-alpha-44986 (modulo the alignment)

@pbiron
11 months ago

This is how it could look if the background color of the badges in the "Passed Tests" section indicated the outcome of the test

@pbiron
11 months ago

This is how it could look if the outline of the badge indicated its category

#1 @pbiron
11 months ago

oops, uploaded the wrong first screenshot (meant to use the one with the badges aligned right, to be consistent with the other screenhots here).

#2 @pbiron
11 months ago

#46736 was marked as a duplicate.

#3 @afercia
11 months ago

  • Keywords site-health added

#4 @garrett-eclipse
11 months ago

Thanks for pointing me here from #46736 @pbiron I agree it would be nice to soften the badges on the passed tests. As my ticket w/ screenshot suggested I would second you on going with the outline/border as it would be straight-forward and keep the distinction of security from performance.

#5 @hedgefield
11 months ago

  • Keywords needs-design-feedback removed
  • Type changed from defect (bug) to enhancement

I agree the outline looks quite good actually, and it solves the problem of having to make sure colors have sufficient a11y contrast with the text. Right-aligning them also looks good to me. One tweak I would make is to make the corners square instead of rounded so people don't confuse them with buttons, but otherwise go for it!

#6 @SergeyBiryukov
11 months ago

  • Component changed from General to Administration
  • Milestone changed from Awaiting Review to 5.2

@Clorith
11 months ago

#7 @Clorith
11 months ago

  • Keywords has-patch commit added

46623.patch changes the badge visuals and positioning (meaning we fix #46622 as well, as it made sense to consolidate badge changes in one patch).

@pbiron
11 months ago

#8 @pbiron
11 months ago

46623.2.diff outlines badges only in the "Passed Tests" section and sets the border width to 2px (the lighter colored borders are hard to see with 1px, especially orange).

p.s. I still prefer the badges in the "Passed Tests" section to have a green background, but using outlines is better than red/orange backgrounds.

@garrett-eclipse
11 months ago

Successful test of 46623.2.diff

#9 @garrett-eclipse
11 months ago

  • Version set to trunk

Thanks @Clorith and @pbiron the latest patch works nicely there. Looks good to commit here.

#10 @xkon
11 months ago

Hm, seeing the screenshot that @garrett-eclipse posted, it kinda looks confusing to me having them with the same colors but with/without background depending on the list they are on.

I agree with @pbiron as well, success is usually "bound" to green, so simply removing the background doesn't feel right in my eyes/brain at least.

I'd personally prefer only a color change, but not the actual "looks" of the labels (background vs border).

This ticket was mentioned in Slack in #design by xkon. View the logs.


11 months ago

#12 follow-up: @melchoyce
11 months ago

Do the passed tests need badges? Could they be grouped within the results by category instead?

#13 @hedgefield
11 months ago

Oh I like that idea @melchoyce, in the results they are not fragmented so we could just make category headers, nice.

#14 in reply to: ↑ 12 @pbiron
11 months ago

Replying to melchoyce:

Do the passed tests need badges? Could they be grouped within the results by category instead?

That's certainly a possibility from my perspective.

However, that would still present a difference between the "Failed" and "Passed" sections...since the "Failed" tests aren't grouped by category. And that difference will take a certain number of "brain cycles" on users' part to grok why things are different.

#15 follow-up: @hedgefield
11 months ago

That's a fair point. FWIW, in my mind I figured we would give ALL the labels the borders instead of the fills, but I must admit I now see it was only implemented for the passed tests ha. The problem that the borders solve is to make the labels feel not so intense, right? And conceptually they're not meant to even indicate priority per se, they're categories, just that security issues should not be taken lightly and thus are red. So would giving all the labels borders instead of fills also be a good solution?

#16 in reply to: ↑ 15 @pbiron
11 months ago

Replying to hedgefield:

FWIW, in my mind I figured we would give ALL the labels the borders instead of the fills, but I must admit I now see it was only implemented for the passed tests ha.

The patch that @Clorith posted did change all badges to use outlines...but I thought that was a mistake, hence my patch.

During the discussion on slack (referenced in the description of this ticket) I interpreted the suggestion for outlines to apply only to badges in the "Passed" section...as a way to lessen the discord of having red/orange badges on passed tests (since as @xkon points out, in many/most people's mind (mine included) those colors suggest that something is wrong).

The problem that the borders solve is to make the labels feel not so intense, right? And conceptually they're not meant to even indicate priority per se, they're categories, just that security issues should not be taken lightly and thus are red. So would giving all the labels borders instead of fills also be a good solution?

The CSS defines 8 or 9 colors for badges, but on the sites I've run it on the only ones that have ever showed up are red and orange. And I've interpreted that as:

  • red = bad, fix this
  • orange = warning, fix this if you can
  • green = all good

So, maybe the whole problem is using colors in the first place. Here's a radical idea, what if instead of colored badges we used dashicons to indicate the categories (see screenshot). It remains to be seen whether appropriate dashicons exist for the other categories which I've never seen displayed on any site I've run Site Health on.

Last edited 11 months ago by pbiron (previous) (diff)

@pbiron
11 months ago

use dashicons to indicate categories, instead of colored badges

#17 @xkon
11 months ago

I'm not that much drawn into at adding only icons to be honest. If that's the case then we should explain somewhere what each is and I think it makes it even harder than what it has to be.

--

Can I ask something that might be even more radical (haha) ?

If we're only using those as "categories" / "labels" or call them as you please, are they so much needed? Can't we just have a list with Failed / Passed "tests" as that's what they all are. Why do we have to distinguish what each is ?

For an easy explanation why I'm thinking about this:

Security - Inactive plugins should be removed. OK yes that's a common way of "keeping the site clean & safe" but it's not a "critical" issue that requires a security attention in my personal opinion. Those plugins might be inactive and used when needed while being fully updated to their latest so practically "safe".

#46789 is a good example ticket of "labels" that most likely need to be altered depending on the state of things as well that makes this an even more "complex" situation imho.

That being said maybe just a plain list of what needs to be looked after and what's already done, without labels, categories, colors, markings etc would be a simple & best solution? After all, less is more usually as they say!

Last edited 11 months ago by xkon (previous) (diff)

This ticket was mentioned in Slack in #core by pbiron. View the logs.


11 months ago

#19 follow-up: @Clorith
11 months ago

  • Keywords commit removed

It's way too late in the cycle to start re-coding things to group by category and such, if that's the route we're suddenly moving towards, we're more likely to pull the badges completely.

I'm also opposed to icons-only, this is a bad experience for all, for screen readers we can add descriptive texts, but that doesn't help me, a sighted person, understand the context of vague icon.

I think badges serve a purpose, and could serve a broader purpose (think for example HostPress being used to denote that this is a host specific test), I'm against them being color coded to denote if a test is passed or not, for various reasons covered previously.

As for only some tests having borders, I'm a bit confused, has there been any patches that removes the border-only code from non-passed tests, my latest patch here didn't differentiate, badges should be the same visually regardless of test states.

I'll leave this open for some more input, but if no clear direction can be made on this, I say we need to pull out badges for the initial release.

#20 in reply to: ↑ 19 @pbiron
11 months ago

Replying to Clorith:

I'm also opposed to icons-only, this is a bad experience for all, for screen readers we can add descriptive texts, but that doesn't help me, a sighted person, understand the context of vague icon.

It was just a suggestion...as a way to avoid the color-coding issue. I'm certainly not wedded to the idea.

I think badges serve a purpose, and could serve a broader purpose (think for example HostPress being used to denote that this is a host specific test), I'm against them being color coded to denote if a test is passed or not, for various reasons covered previously.

Where has that been "covered previously"?

As for only some tests having borders, I'm a bit confused, has there been any patches that removes the border-only code from non-passed tests, my latest patch here didn't differentiate, badges should be the same visually regardless of test states.

As mentioned in comment 16, when the outline suggestion came up during the initial slack discussion, it was in the context of "lessening the shock" of passed tests being red...and I thought the suggestion applied only to "Passed" tests, so I added 46623.2.diff.

I'll leave this open for some more input, but if no clear direction can be made on this, I say we need to pull out badges for the initial release.

I wouldn't be opposed to that.

#21 @mdwolinski
11 months ago

Two comments, when looking at the screen, I'm getting the "We recommend you update your PHP" but I'm running 7.2.0, granted it's not 7.3, but at what level does the recommendation kick in until?

Regarding the badges, I'm not a big fan of the colors. What about using the area to provide a quick glance of the info needed for that issue.

Last edited 11 months ago by mdwolinski (previous) (diff)

#22 follow-up: @hedgefield
11 months ago

I feel like we are getting off track here. This issue is to address the severity of using red and orange. Using borders instead of fills was one of the suggestions, liked by the person reporting the issue and the designers participating, picked and implemented. As far as I'm concerned that solves this issue, would you agree @pbiron?

The rest of the discussion is valuable, but is also blocking the process. This feature and its implementation were OK-ed for merge, so let's carry on with it and iterate afterwards.

#23 @mdwolinski
11 months ago

My apologizes, @hedgefield I'll restrict my comments to the colors.

The use of colors here is inconsistent with the expectations of the average user. Whether full color or just border, when a user scans the list of issues, they are going to inherently feel the red ones, security are bad and the yellow ones are just warnings. Why? Because the use of three colors, Red/Yellow/Green, have a consistent meaning pretty much anywhere in the world. I have three uses of that color scheme on my screen as I type this to indicate what we expect them to.

The colors on the badges matches the % indicator at the top, which creates an inconsistency in visual messaging to the user between what the colors stand for.

So what is the purpose of the colors? From the initial post, it's to indicate a difference in category, if that's the case, then they should be shown in the Passed Tests section as well. And why is the color selection Red/Orange? Sure, Security issues are more important than Performance ones, but they're grouped under Critical.

If the purpose is to indicate Danger/Warning/Good, then they should be consistent across categories per grouping (ie Critical should be all red, etc). I'm not suggesting this as I believe most people are against using colors as indicators of status.

Does the category need colors? I'd argue they do not and look good when they're right aligned without colors. There are two categories, not a large number that I need colors to pull them out of a long list. Future iterations, where more categories are used can reintroduce colors to the categories where color choices make more sense to their use.

At the end of the day, I should be concerned with all issues under Critical. On a mostly white screen, the user's eyes are drawn to the colors and Red/Orange imply status of issue from them.

@mdwolinski
11 months ago

For reference to how it would look without category colors.

#24 follow-up: @hedgefield
11 months ago

Thanks @mdwolinski, it's a fair point that we currently have too few categories to really merit colors. In the future we intend to add accessibility, speed etc, so then let's then postpone the color discussion to that moment. I do like having the border around the category labels just to indicate they are something different, similar to tags on regular posts, so let's keep that, but make them all one color, regardless of which category it is or whether a check is passed or not. I think a soft blue or grey should be fine, I'll leave that up to @Clorith to finetune and implement, and we can put this matter to rest then. Thanks all for your input.

#25 in reply to: ↑ 22 @pbiron
11 months ago

Replying to hedgefield:

I feel like we are getting off track here. This issue is to address the severity of using red and orange. Using borders instead of fills was one of the suggestions, liked by the person reporting the issue and the designers participating, picked and implemented. As far as I'm concerned that solves this issue, would you agree @pbiron?

Since I'm the person who reported the issue and I've said several times that I prefer having green backgrounds for all badges in "Passed" section (if colors are going to be used at all) I don't think it is correct to say that using outlines is "liked by the person reporting the issue". I find using outlines for the passed tests is better than solid backgrounds if the red/orange color is still going to be used, but it is certainly not my preferred solution.

Also, @mdwolinski was the one who original suggested in the Slack discussion using outlines, but only to "softened up if there are no issues", I don't find his contributions to this ticket off track.

#26 in reply to: ↑ 24 @pbiron
11 months ago

Replying to hedgefield:

Thanks @mdwolinski, it's a fair point that we currently have too few categories to really merit colors. In the future we intend to add accessibility, speed etc, so then let's then postpone the color discussion to that moment. I do like having the border around the category labels just to indicate they are something different, similar to tags on regular posts, so let's keep that, but make them all one color, regardless of which category it is or whether a check is passed or not. I think a soft blue or grey should be fine, I'll leave that up to @Clorith to finetune and implement, and we can put this matter to rest then. Thanks all for your input.

Now that is something that I do agree with:

  • keep the badges
  • right align the badges
  • no colors on badges for both "failed" and passed tests
  • 1px border on badges for both "failed" and passed tests

#27 @mdwolinski
11 months ago

Thanks @pbiron for the comment. @hedgefield was correct that my initial comment on this issue was functional related and not necessarily the point of the ticket, which I agree with. I'd much rather see the Site Health merged in then held up to change functionality when it works as is. Discussions on that can be held for future updates.

I'm not a big fan of the one pixel border when I look at a quick mock-up of it, but I can live with it and good with the other points.

@mdwolinski
11 months ago

Quick, not perfect, one pixel border mock-up

@pbiron
11 months ago

all badges with no colors but a 1px soft grey border

@melchoyce
11 months ago

@melchoyce
11 months ago

#28 @mdwolinski
11 months ago

If I had my choice, I'd go with no color/border, per my mock-up #comment:23

If you want "something," I like @melchoyce solid option.

#29 @melchoyce
11 months ago

Added two ideas for monochromatic badges. First one is solid (background is #EDEFF0, text is #606A73), second one outlined (border is #8F98A1, text is #6C7781). (Sorry, meant to post this earlier but had to hop into a meeting)

@Clorith
11 months ago

#30 @Clorith
11 months ago

  • Keywords commit added

46623.2.patch Implements the thin outline only as discussed, and uses the same color for all the core provided tests at this time. We're still retaining the other color options, but they'll still be outlines like everything else. This is so that plugins or themes utilizing it can still make use of them.

It right aligns as discussed, and uses the blue color on the outline (for a small, barely noticeable, dash of color)

This is it, the one we're using.

#31 @Clorith
11 months ago

#46622 was marked as a duplicate.

#32 @pento
11 months ago

  • Keywords needs-refresh added; commit removed

46623.2.patch no longer applies cleanly. @Clorith, could you refresh it, please?

@xkon
11 months ago

refresh of 46623.2.patch

#33 @xkon
11 months ago

  • Keywords needs-refresh removed

46623.3.diff is a refresh of 46623.2.patch keeping the same css and adding the blue outline on existing tests.

#34 @ianbelanger
11 months ago

  • Keywords commit added

Patch applies cleanly to trunk and works as intended. Marking for commit

#35 @melchoyce
11 months ago

... and adding the blue outline on existing tests.

What's this mean? Can you add a screenshot?

@ianbelanger
11 months ago

Blue outline after patch

#36 @mdwolinski
11 months ago

Just wondering that since the Passed Tests is a button, I don't think it should have a blue outline around it.

#37 @ianbelanger
11 months ago

That blue outline is only on Passed Tests onfocus @mdwolinski

#38 @mdwolinski
11 months ago

@ianbelanger Gotcha, thanks.

#39 follow-up: @melchoyce
11 months ago

Thanks @ianbelanger.

Some notes:

  • Where did this particular shade of blue come from? I don't see it in https://codepen.io/hugobaeta/full/RNOzoV/. (We'll want to make sure all colors we're using for badges are coming from this color guide.)
  • The badges should retain the 3px border radius. Border-radius is a common pattern for badge styling.
  • We try to avoid using #000 for text colors in the admin, unless it's necessitated by contrast. Instead, I'd recommend using #32373C or #555D66.

FWIW, I still think going grey is the better direction.

@hedgefield — want to make sure to get your thoughts and sign-off on the design direction ↑

#40 in reply to: ↑ 39 @pbiron
11 months ago

Replying to melchoyce:

Some notes:

  • Where did this particular shade of blue come from?

That is the color used for the background of .badge.blue that is currently committed to core in /wp-admin/css/site-health.css. All this patch does is change to using it as a border instead of background.

  • The badges should retain the 3px border radius. Border-radius is a common pattern for badge styling.

see comment #5, where @hedgefield suggested using square corners so the badges aren't mistaken for buttons.

#41 @melchoyce
11 months ago

That is the color used for the background of .badge.blue that is currently committed to core in /wp-admin/css/site-health.css. All this patch does is change to using it as a border instead of background.

Where were all the originally committed colors drawn from? I want to make sure all of the colors we're using are following the established color palette.

Last edited 11 months ago by melchoyce (previous) (diff)

#42 @ianbelanger
11 months ago

  • Keywords commit removed

#43 @hedgefield
11 months ago

Thanks for the ping @melchoyce. The originally committed colors were assembled to form a diverse set of colors that could be used for a variety of categories to come. They may not all map to existing colors in the WordPress space - where possible, please go ahead and correct that.

About text color I agree, most WP text is off-black, so let's fix that.

I favor square corners for the labels for the reason @pbiron mentioned, they look too much like ghost buttons otherwise.

As for the label styling itself, I prefer retaining some color in this otherwise dreadfully dull grey page. The blue in the patch draws a bit too much attention, I'd prefer something from the WP color scheme https://codepen.io/hugobaeta/pen/RNOzoV that gets close to @mdwolinski's mockup, like #BFE7F3 or even #E5F5FA. While I do really like your solid background option, let's first continue trying it as a border, as that will future-proof the use of colors on these categories.

#44 follow-up: @melchoyce
11 months ago

Thanks @hedgefield! Let me try spinning up a patch using either #BFE7F3 or #E5F5FA, and compliant alternatives for the other badge colors.

To clarify — should all of the badges be outlines, or just the ones in "Passed tests?"

@melchoyce
11 months ago

E5F5FA and 555D66

@melchoyce
11 months ago

BFE7F3 and 32373C

#45 @melchoyce
11 months ago

Based on the two above versions, #E5F5FA is too light to use as a border, IMO.

#46 in reply to: ↑ 44 @mdwolinski
11 months ago

Replying to melchoyce:

Thanks @hedgefield! Let me try spinning up a patch using either #BFE7F3 or #E5F5FA, and compliant alternatives for the other badge colors.

To clarify — should all of the badges be outlines, or just the ones in "Passed tests?"

I agree the #BFE7F3 is the better choice that the other one is too subtle.

I would imagine this would be on all issues. I don't see the value of just having this as an indicator of Passed issues when the user has to click the Passed Issues button to see them.

#47 follow-up: @melchoyce
11 months ago

Are we ditching all the other colors? I'm seeing blue outlines for every badge in 46623.3.diff.

#48 in reply to: ↑ 47 ; follow-up: @pbiron
11 months ago

Replying to melchoyce:

Are we ditching all the other colors? I'm seeing blue outlines for every badge in 46623.3.diff.

The same color border no matter where the badge is show (failed and passed tests), but keeping the other colors in the stylesheet for possible future use.

#49 in reply to: ↑ 48 @melchoyce
11 months ago

Replying to pbiron:

Replying to melchoyce:

Are we ditching all the other colors? I'm seeing blue outlines for every badge in 46623.3.diff.

The same color border no matter where the badge is show (failed and passed tests), but keeping the other colors in the stylesheet for possible future use.

Okay — I'll update the unused colors as well so they match their closest on-scheme variant 👍

@melchoyce
11 months ago

Swaps out badge border and text colors for core equivalents

#50 @hedgefield
11 months ago

Thumbs up!

#51 @Clorith
11 months ago

  • Keywords commit added

Let's do it, also throw in a prop for @alexdenning with the commit, as he was missed in the big bulk-prop.

#52 @desrosj
11 months ago

  • Owner set to desrosj
  • Status changed from new to assigned

#53 @desrosj
11 months ago

  • Keywords commit removed

Can we tweak the shade of blue being used? #BFE7F3 on white does not pass the a11y requirements for contrast.

#54 @melchoyce
11 months ago

The border is decorative, so it shouldn't need to pass contrast. The text passes, which is what's important.

#55 @desrosj
11 months ago

  • Keywords commit added

Thanks for clarifying, @melchoyce

This ticket was mentioned in Slack in #meta by afercia. View the logs.


11 months ago

#57 @afercia
11 months ago

Correct, in this case the border doesn't identify an UI control or a state, thus it doesn't need to pass contrast. Reference (for non-text contrast): https://www.w3.org/TR/WCAG21/#non-text-contrast

#58 @desrosj
11 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 45169:

Site Health: Improve the test badge implementation.

Label badges for each Site Health test currently display in either red, orange, or green, regardless of if the test passed or failed. This is confusing, as seeing red labels in the “Passed Test” section could alarm users (when really everything is OK and no action is required), and seeing green labels in the “Failed Tests” section would not appropriately encourage the user to take appropriate action.

This change makes several improvements to the label badges:

  • Always right align the badges for consistent display.
  • Remove background fill for badges. Instead, use a border.
  • Use a consistent styling for all tests (passed and failed).
  • The text color no longer uses true black (#000000).
  • The .badge.pink CSS definition has been switched to .badge.purple, and the definitions for blue, gray, and green have also been updated to more closely follow the official WordPress color palette.

Props: pbiron, garrett-eclipse, hedgefield, Clorith, xkon, melchoyce, mdwolinski, alexdenning.
Fixes #46623.

#59 @spacedmonkey
8 months ago

  • Component changed from Administration to Site Health
Note: See TracTickets for help on using tickets.