Avoid double colouring in privacy request rows w/ notices

[garrett-eclipse]

As initially raised here - https://core.trac.wordpress.org/ticket/44135#comment:16

@karmatosed;

I would note a caution in double colouring as seen with blue and green combined in messages. I have to ask why are we showing blue and green together? I would say the following works:

• No color around the actual email itself.
• If successful green
• If no personal data found blue

Grey doesn't really mean anything in terms of this UI so I think lets just not have a double notice color combination and we're set. It after all should only have a notice for information about the state change, not wrap everything.

Branching this ticket to keep trac of the issue here.

[garrett-eclipse]

Example of double colouring - Green notice ontop of blue 'Confirmed' row.

[afercia]

Discussed during today's accessibility bug scrub and agreed this seems a mix of accessibility, usability, and UI consistency issues. Comments from the discussion we'd like to propose for consideration:

• Why the notice is displayed within the table row in the first place? Seems that’s unprecedented in WordPress.
• That shade of green and that shade of blue are too similar.
• Blue is for 'information' it's saying 'something happened'. Which isn't great.
• Why are two actions happening simultaneously? Maybe that's the issue?
• Color shouldn't be the only signifier of state...
• There is a lot of unexpected here:
  • Double status colors
  • Embedded messages

[garrett-eclipse]

Replying to afercia:

Discussed during today's accessibility bug scrub and agreed this seems a mix of accessibility, usability, and UI consistency issues.

Thanks @afercia I appreciate you and the rest of the Design team discussing that today.

To answer some of the questions raised;

• Why the notice is displayed within the table row in the first place? Seems that’s unprecedented in WordPress.

Yes I believe this is unprecedented and was placed there to tie the notice to the specific row that the ajax erase action was done on. Looking at the process I almost feel a reload would make sense as currently after doing the erase the button persists until a reload when it becomes 'Remove request'. And moving the notice to it's normal position seems appropriate but would want to have the Requester email/username added to it for reference.

• That shade of green and that shade of blue are too similar.
• Blue is for 'information' it's saying 'something happened'. Which isn't great.
• Why are two actions happening simultaneously? Maybe that's the issue?
• Color shouldn't be the only signifier of state...
• There is a lot of unexpected here:
  • Double status colors
  • Embedded messages

Probably best to indicate why the row is blue here and get thoughts on that. The row only become blue when a user confirms their request as a way to indicate to the admin this row requires an action (The erasure). The row already has the 'Confirmed' status indicated on it and the 'Confirmed' list filter has the count on it. I'm not against just dropping the blue as the admin will see the status as well as the Next Steps erasure button and they received an email that the requester confirmed so they should be aware.

With that in mind going to move this back to design review with the suggested actions to be discussed being;

1. Removing the blue on confirmed request rows.
2. Moving the notice to it's normal position and adding the requestor username/email to it. So it would be 'No personal data was found for john@…'

*I didn't bother mocking up as it would just use the standard notice design and position.

Thoughts?

[afercia]

Moving to Future Release, as there's an initial review and agreement this should be improved.

[ibdz]

From the ​Design triage today, I've reviewed this issue and feel a bit confusing that the green notice saying "No personal data was found for this user." after clicking the "Erase Personal Data". The expected response of action should be "completed" or "an error occurred" that relate to "Erase Personal Data" action.

I suggest moving the green notice bar to the top above "Add Data Erasure Request" (same as remove-request.gif) and change the wording to something like "Erasure data for john@... completed."

An ideal solution is updating the status from 'Confirmed' to 'Completed', and change the row colour from blue to white.