737214 - Inbox notification improvement

Status: RESOLVED FIXED

(support.mozilla.org :: Users and Groups, task)

Description

[:ibai]

The actual Inbox notification is way to small.

Increase it's visibility with some color contrast (I.e. Add a Red background to the text) or other techniques (i.e. bubble).

Comment 1

[James Socol [:jsocol, :james]]

(In reply to Ibai from comment #0)
> (I.e. Add a Red background
> to the text) or other techniques (i.e. bubble).

We've been over red backgrounds before, they are a readability, A11y nightmare. Please avoid any text on red backgrounds.

Comment 2

[Andrew Truong [:feer56] [:andrewtruong] [:atruong]]

Ricky/ ibai, is this still a valid issue?

Comment 3

[Andrew Truong [:feer56] [:andrewtruong] [:atruong]]

Add: Platform also needs to be changed to all.

Comment 4

[Ricky Rosario [:rrosario, :r1cky]]

Bram, thoughts?

Comment 5

[Bram Pitoyo [:bram]]

Attachment: inbox notification (blue)

An idea we could try to give more contrast to the inbox notification area is by giving it a blue color.

On this mockup, I used the gradient with the values #0095dd (light blue) to #00539f (dark blue). These are the same values specified in the Sandstone style guide.

What do you think?

Comment 6

[Ricky Rosario [:rrosario, :r1cky]]

(In reply to Bram Pitoyo [:bram] from comment #5)
> What do you think?

Looks good to me! Thanks!

Comment 7

[Andrew Truong [:feer56] [:andrewtruong] [:atruong]]

Can we make the inbox box blue as well and then the # to be black or white?

Comment 8

[Bram Pitoyo [:bram]]

No. Coloring the “Inbox” text blue will require the rest of the header link to also be colored blue, stealing focus from the main navigation area that most of our users use.

Comment 9

[Andrew Truong [:feer56] [:andrewtruong] [:atruong]]

What you have done looks great but maybe we should open a discussion on the contributor forums to have more input on this?

Comment 10

[Ibai Garcia [:ibai]]

Andrew, feel free to start that conversation and lets wait until we hear back from the community. There's no rush on implementing this.

Comment 11

[Andrew Truong [:feer56] [:andrewtruong] [:atruong]]

Post made: https://support.mozilla.org/en-US/forums/contributors/709264

Comment 12

[Andrew Truong [:feer56] [:andrewtruong] [:atruong]]

A suggestion was made that we could try a black and lime green indicator. Bram, could you do a quick mockup for it?

Comment 13

[Bram Pitoyo [:bram]]

To align with the rest of Mozilla’s web properties, I suggest using colors taken from:

https://www.mozilla.org/en-US/styleguide/websites/sandstone/colors/
https://www.mozilla.org/en-US/styleguide/websites/sandstone/buttons/
https://www.mozilla.org/en-US/styleguide/identity/firefox/color/

Would you have any other color idea? I reckon that an orange-to-yellow gradient might be a good signal, for example.

Comment 14

[Andrew Truong [:feer56] [:andrewtruong] [:atruong]]

I think Firefox light blue back an white text would be good. 
Or a Orange back and while text

Comment 15

[Shuhao]

I'll take this if you guys settle on a color. Personally I think the original mockup looks pretty readable.

Comment 16

[Ibai Garcia [:ibai]]

Bram's mockup from comment 5 is definitively a step in the right direction. My vote goes for it! Let's do it!

Comment 17

[Shuhao]

Done: https://github.com/mozilla/kitsune/pull/1476

Comment 18

[Shuhao]

Forgot the throw this into the sprint

Comment 19

[Shuhao]

Landed in https://github.com/mozilla/kitsune/commit/ec2cf839a490292363197112fe47889802f1ed6e

Comment 20

[Ricky Rosario [:rrosario, :r1cky]]

This was deployed sometime in the past X weeeks.