[contrast] Badge in the main tree can be confused with the "contrast" button in toolbar

RESOLVED FIXED in Firefox 68

Status

enhancement
--
minor
RESOLVED FIXED
Last month
16 days ago

People

(Reporter: fvsch, Assigned: fvsch)

Tracking

unspecified
Firefox 68

Firefox Tracking Flags

(firefox68 fixed)

Details

Attachments

(3 attachments)

Assignee

Description

Last month

Small UX issue: the toolbar button and the "contrast" badge in the tree look similar, which can be confusing.

Especially in this scenario:

  1. Spot the "contrast" button in the toolbar.
  2. Click the button. Wait for results.
  3. Results seem to contain "contrast" buttons too, and it's unclear if they should be clicked.

Note: just my perception; haven't done any user testing.
We can close this bug if we think it's not an issue.

Assignee

Comment 1

Last month

One possible solution would be to show a "warning" icon in the tree badges to set them apart from the button.

Icon used is a 10x10px warning icon like we used to have in the console (current one is 12x12):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10">
  <path fill="context-fill" fill-rule="evenodd" d="M4 .6a1.13 1.13 0 0 1 2 0l3.88 7.8c.17.35.17.75-.04 1.07-.2.33-.58.53-.96.53H1.1c-.37 0-.74-.2-.94-.52-.2-.33-.2-.73-.04-1.07L4 .6zm1 6.2c.54 0 1 .46 1 1s-.46 1-1 1c-.55 0-1-.46-1-1s.45-1 1-1zm0-4.3c.54 0 1 .46 1 1V5c0 .54-.46 1-1 1-.55 0-1-.46-1-1V3.5c0-.54.45-1 1-1z"/>
</svg>
Assignee

Comment 3

Last month

I made an even smaller warning icon (9x9):
https://www.figma.com/file/eIiHpT9Eg6hIA54nz1RIT9xh/Tiny-warning-icon

See attachment for how it looks in context.

Attachment #9063549 - Flags: ui-review?(victoria)
Attachment #9063712 - Flags: ui-review?(victoria)

Comment 4

Last month
Pushed by florens@fvsch.com:
https://hg.mozilla.org/integration/autoland/rev/5df94e4b78cc
Add warning icon to contrast warning badge; r=yzen,mtigley
Assignee

Updated

Last month
Assignee: nobody → florens
Status: NEW → ASSIGNED
Assignee

Comment 5

Last month

Victoria, I forgot about the UI review and landed the patch. But we can always make a follow-up patch if we want to change the icon.

Assignee

Updated

Last month
Duplicate of this bug: 1550035
Status: ASSIGNED → RESOLVED
Closed: Last month
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68
Attachment #9063712 - Flags: ui-review?(victoria) → ui-review+
Attachment #9063549 - Flags: ui-review?(victoria) → ui-review+

Victoria, I forgot about the UI review and landed the patch. But we can always make a follow-up patch if we want to change the icon.

No problem - it looks great! Thanks for working on this!

You need to log in before you can comment on or make changes to this bug.