1144134 - Refinements to icons in overhead indicators

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: General, enhancement)

Description

[Stephanie Hobson [:shobson]]

Attachment: unnamed.png

Now that we have the icons in the indicators we can refine them :)

Colour:
- either match the text or match the box border

Size:
- large and float left, for faster identification

I've attached a mockup from :teoli showing the larger icons.

Comment 1

[Stephanie Hobson [:shobson]]

Improvements outlined in a in-person discussion:

- larger icons
- collapse explanations?
- Standardize wording
- Larger heading
- Collapse multiple ones
- Add icon for note
- Add icon for draft
- Match box colour to icons, make icons text colour OR put icon over solid background colour (except non-standard, non-standard should be the scary red still)

Comment 2

[Stephanie Hobson [:shobson]]

- don't italicize code or pre blocks
- also add icons when it's just a class (example: note on /learn)

Comment 3

[Eric Shepherd [:sheppy]]

Stephanie -- let me know if you want any input/sketches/whatever hashing this thing out. These boxes are something I created most of way back when, so I've been using them for a while. :)

Comment 4

[Stephanie Hobson [:shobson]]

Attachment: indicators.png

I started by removing all the styles and slowly added things back. If I've stripped something important away please let me know. Also, let me know if I missed a relevant macro. The test page itself is here if you want to trace any of them: https://developer.mozilla.org/en-US/docs/User%3Astephaniehobson%3Aindicators

Specific focus for feedback:

1) Colour
I want to make our colour usage more meaningful, so I mapped the colours to the classes I thought corresponded roughly to:
- red = don't use/stay away
- yellow = info you need to know to make it work
- blue = version information
- orange = mozilla specific version information
- grey = this is slightly more important than the information around it
- blue/grey = code/syntax/technical details

To facilitate this the "summary boxes" that are currently coloured differently according to their technology would all need to match, I made them technical details blue/grey.

I used the colours we're currently using for the notifiers, I would like to contact someone with design skills to check that these are okay colours.

Kumascript errors, no script, read only, and ECMAScript really stand out and I was afraid of breaking people's brains by changing them, so I didn't. I would really like to change the ECMAScript ones but want to get a better idea of usage first. I'd also like suggestions for what catagories noscript and readonly should fall into.

2) Icons
The mozilla icon is just a place holder, if it is useful to treat these differently we can either a) match the brand "m" or b) make Firefox, Gecko, and Thunderbird specific icons.

Anything have an inappropriate icon? Anything missing icons you can think of good ones for?

3) Layout
Boxes that are part of the content only have a left border now. Boxes that are about the article but not content get an entire border.

4) General feedback :)

Comment 5

[Stephanie Hobson [:shobson]]

I'd like to do a first round of feedback on the bug but a change this big should go to the mdc list before we implement it.

Comment 6

[Stephanie Hobson [:shobson]]

:sheppy Did you know there were this many of them? If I've missed any or miss-classified any please let me know!

Comment 7

[Stephanie Hobson [:shobson]]

Attachment: Screen Shot 2015-07-15 at 17.28.47.png

Example of how they collapse when next to each other now (from https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mozNotification)

Comment 8

[Stephanie Hobson [:shobson]]

Some feedback for myself... I seem to have stripped out and failed to replace the smaller font size.

Comment 9

[Stephanie Hobson [:shobson]]

Attachment: indicators.png

Most recent iteration

Comment 10

[Eric Shepherd [:sheppy]]

(In reply to Stephanie Hobson [:shobson] from comment #6)
> :sheppy Did you know there were this many of them? If I've missed any or
> miss-classified any please let me know!

Yes, there are lots of them.

OK, let's see, comments will be listed only where I have concerns or you have direct questions. Otherwise, assume I'm a happy camper. :)

1. The background on the fx_minversion_* stuff is so very pale that I can only barely see it on my monitor. Is my monitor that badly calibrated or is it really that pale? :)

2. Yeah, that Mozilla icon isn't great. I'd be inclined to use either the dino head or, I dunno... hm.

3. We do have cases where we need to distinguish Firefox rather than Gecko, so having a separation is necessary, although less so than a few years ago.

4. The gecko_callout_heading and geckoVersionNote macros were created to create more complicated gecko-version-specific information boxes; this is actually material that in reality belongs in a compatibility table note or a separate article ("Technology X in Firefox Y.Z" or something). Not sure whether to keep them for now or make rooting them out a thing we're actively doing.

5. We currently have no method for locking pages, so the lockedPage style is not used. Unless you guys know something we don't

6. MobileOnlyHeader -- I wonder... is this actually "FirefoxMobileOnlyHeader" or generically "mobile only"? Not sure which way that goes.

7. Are you asking us to find icons for CertifiedBadge, InstalledBadge, and PrivilegedBadge, or are you getting creative to pick them?

Generally I'm really pleased. Lots of progress here!

I still kind of think these boxes would look better with the icons larger and the text left-justified in a box to the right of the icon, but that may just be me. :)

Comment 11

[Stephanie Hobson [:shobson]]

(In reply to Eric Shepherd [:sheppy] from comment #10)
> (In reply to Stephanie Hobson [:shobson] from comment #6)

> 1. The background on the fx_minversion_* stuff is so very pale that I can
> only barely see it on my monitor. Is my monitor that badly calibrated or is
> it really that pale? :)

You should be seeing the same orange as all the other things with the "m" icon on them. It's darker than the yellow. I would suggest your monitor is badly calibrated :P

> 2. Yeah, that Mozilla icon isn't great. I'd be inclined to use either the
> dino head or, I dunno... hm.

It's not a Mozilla icon ;) I'll make a proper mozilla "m" if we think it's useful.

> 3. We do have cases where we need to distinguish Firefox rather than Gecko,
> so having a separation is necessary, although less so than a few years ago.

But is it useful to distinguish mozilla version information by making it orange or should we just make it blue to match all the other version information?

> 6. MobileOnlyHeader -- I wonder... is this actually
> "FirefoxMobileOnlyHeader" or generically "mobile only"? Not sure which way
> that goes.

The macro has "gecko" build into the output, so it's really GeckoMobileOnlyHeader, I guess?

> 7. Are you asking us to find icons for CertifiedBadge, InstalledBadge, and
> PrivilegedBadge, or are you getting creative to pick them?

Those are what I would pick unless anyone objects.

> Generally I'm really pleased. Lots of progress here!

Yay!
 
> I still kind of think these boxes would look better with the icons larger
> and the text left-justified in a box to the right of the icon, but that may
> just be me. :)

The icons are bigger! Not bigger enough I guess. I'll see what I can do. This is a huge PITA and the CSS supporting them is ridiculously long. (This is no one's fault this just happens to websites overtime.) If I could make changes to the macros and see those changes populated around the site I would try to standardize the markup.

Comment 12

[Stephanie Hobson [:shobson]]

That's some questions in there, I should have needs infoed sheppy, I shall do so now.

Comment 13

[Stephanie Hobson [:shobson]]

Attachment: indicators.png

Latest improvements.

This screen shot is sorted by threat level instead of alphabetically.

Now with left padding if there's an icon.

Comment 14

[Eric Shepherd [:sheppy]]

Attachment: Screen shot of the pale backgrounds I mentioned

(In reply to Stephanie Hobson [:shobson] from comment #11)
> (In reply to Eric Shepherd [:sheppy] from comment #10)
> > (In reply to Stephanie Hobson [:shobson] from comment #6)
> 
> > 1. The background on the fx_minversion_* stuff is so very pale that I can
> > only barely see it on my monitor. Is my monitor that badly calibrated or is
> > it really that pale? :)
> 
> You should be seeing the same orange as all the other things with the "m"
> icon on them. It's darker than the yellow. I would suggest your monitor is
> badly calibrated :P

See attached. However, they look right in the newer PNG. Weird.

> > 2. Yeah, that Mozilla icon isn't great. I'd be inclined to use either the
> > dino head or, I dunno... hm.
> 
> It's not a Mozilla icon ;) I'll make a proper mozilla "m" if we think it's
> useful.

I'd still rather go with a dino head. But I don't think we're supposed to. So a proper Mozilla "M" would be better.

> > 3. We do have cases where we need to distinguish Firefox rather than Gecko,
> > so having a separation is necessary, although less so than a few years ago.
> 
> But is it useful to distinguish mozilla version information by making it
> orange or should we just make it blue to match all the other version
> information?

Oh. Maybe use orange just for Firefox OS only stuff? Hm.

> > 6. MobileOnlyHeader -- I wonder... is this actually
> > "FirefoxMobileOnlyHeader" or generically "mobile only"? Not sure which way
> > that goes.
> 
> The macro has "gecko" build into the output, so it's really
> GeckoMobileOnlyHeader, I guess?

Yeah. I think so.

> > I still kind of think these boxes would look better with the icons larger
> > and the text left-justified in a box to the right of the icon, but that may
> > just be me. :)
> 
> The icons are bigger! Not bigger enough I guess. I'll see what I can do.
> This is a huge PITA and the CSS supporting them is ridiculously long. (This
> is no one's fault this just happens to websites overtime.) If I could make
> changes to the macros and see those changes populated around the site I
> would try to standardize the markup.

I had been imagining a look more akin to an icon the height of, perhaps, three lines of text in the corner, possibly in a circle, with the text justified as you have it now beside it. But again, that's just how I pictured it in my head and thought we'd all decided it would look. Could totally just be me.

Comment 15

[Stephanie Hobson [:shobson]]

Attachment: Screen Shot 2015-07-28 at 15.24.51.png

Not just you. A much larger icon is totally what :teoli proposed but it looks bad with just one line of text. I tried vertically centring but display:flex wreaks havoc on anything that has child items and this CSS file is 333 lines long already :S

Larger icons mockup is attached, let me know if you would rather have this without the vertical centering.

Comment 16

[Stephanie Hobson [:shobson]]

> See attached. However, they look right in the newer PNG. Weird.

Hm. That's the default colour if no colour is assigned, maybe there was a syntax error in that version of the style sheet. Apologize to your monitor for me, I maligned it unnecessarily.

> > But is it useful to distinguish mozilla version information by making it
> > orange or should we just make it blue to match all the other version
> > information?
> 
> Oh. Maybe use orange just for Firefox OS only stuff? Hm.

I'm going to take this question to the mailing list.

Comment 17

[Stephanie Hobson [:shobson]]

4 votes for Mozilla should just match other version information.

Comment 18

[Stephanie Hobson [:shobson]]

Attachment: indicators_3.png

Going live with this if I can. Debating whether or not to put it behind a waffle flag.

Comment 19

[Eric Shepherd [:sheppy]]

For what it's worth, I *love* how https://bug1144134.bmoattachments.org/attachment.cgi?id=8640195 looks. Very cool.

If we were to launch with that, we can see how it goes in real life and adjust the colors if we need to in a follow-up patch. That's my vote.

Comment 20

[Jean-Yves Perrier [:teoli]]

Gorgeous. I could bikeshed a couple ones (centered text) but as we are trying to phase out these very same cases, it is not worth and I would be happy to see this very soon ;-)

Comment 21

[MDN Team (:mdn-dev)]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/f497f7c2d38967d30686f3350d26ce4395800a00
Bug 1144134: Summary box border colour.

Summary box border colour was being over-ridden by .text-content table declarations so I gave it more specificity.

https://github.com/mozilla/kuma/commit/2c6e6129786c7e99c1666046488ab11c2169ac5c
Merge pull request #3456 from stephaniehobson/bug-1144134-indicators

Bug 1144134: Summary box border colour.

Comment 22

[Stephanie Hobson [:shobson]]

Has been live for a few months with no problems :)