1332403 - Primary iteration of design of cross-site navigation based on brand refresh (Master bug)

Status: RESOLVED FIXED

(www.mozilla.org :: Pages & Content, defect)

Comment 1

[Eric Renaud [:erenaud]]

User story - https://tree.taiga.io/project/malexis-mozillaorg-durable-team/us/914

Comment 2

[Michael Ham]

Attachment: Global Navigation Audit

An audit of global navigation across product and advocacy sites with key take aways for deploying complex navigation while maintaining consistent brand narrative.

Comment 3

[Michael Ham]

Attachment: Mozilla.org 2016_ Representing our brand as IA and navigation on Mozilla.org.pdf

Posting previous IA work for reference – "Representing Brand as IA and Navigation on Mozilla"

Comment 4

[Michael Ham]

Attachment: MozillaContentAuditQ42016-FindingsRecommendations.pdf

Q4 2016 Content Audit – Posting as reference for navigation work.

Comment 5

[Rachel Wong]

Attachment: Global Navigation + Home Page Audit Research

Hi team, attached is the combined deck of global navigation and homepage research findings. Please let me know if you have any questions or concerns about the work.

Comment 6

[Rachel Wong]

Attachment: moz_global nav + homepage_research_UXv2.pdf

Hi All! Here's an updated version of the deck with both the homepage and navigation options laid out similarly with comment annotations.

Comment 7

[Rachel Wong]

Attachment: moz.org_Card Sort Synthesis_022817.pdf

Hi all! Attached you'll find our final synthesis of our user sort sessions. Let me know if you have any questions or concerns. Cheers!

Comment 8

[Michael Ham]

Attachment: mozilla.org_globalnav_plc_031417.zip

Comment 9

[Michael Ham]

Attachment: mozilla.org_global-nav_visual-design_PDFs.zip

Comment 10

[Michael Ham]

Alex – Patrick has finished the visual design for the global nav (wide viewports). Mobile will be completed by end of day March 14.

The zip files attached include the original Illustrator file and PDF mock ups.

Comment 11

[Eric Renaud [:erenaud]]

Alex  - just setting the needinfo for you.  ^^

Comment 12

[Alex Gibson [:agibson]]

(In reply to Michael Ham from comment #8)
> Created attachment 8847339 [details]
> mozilla.org_globalnav_plc_031417.zip

Michael, I don't have Illustrator so can't open this file. Would you be able to export the assets? There don't seem to be many, just the menu/button icons. Thanks.

Comment 13

[Michael Ham]

(In reply to Alex Gibson [:agibson] from comment #12)
> (In reply to Michael Ham from comment #8)
> > Created attachment 8847339 [details]
> > mozilla.org_globalnav_plc_031417.zip
> 
> Michael, I don't have Illustrator so can't open this file. Would you be able
> to export the assets? There don't seem to be many, just the menu/button
> icons. Thanks.

Sure thing! I'll parse these out from AI file and post them here this morning.

Comment 14

[Alex Gibson [:agibson]]

(In reply to Michael Ham from comment #13)
> (In reply to Alex Gibson [:agibson] from comment #12)
> > (In reply to Michael Ham from comment #8)
> > > Created attachment 8847339 [details]
> > > mozilla.org_globalnav_plc_031417.zip
> > 
> > Michael, I don't have Illustrator so can't open this file. Would you be able
> > to export the assets? There don't seem to be many, just the menu/button
> > icons. Thanks.
> 
> Sure thing! I'll parse these out from AI file and post them here this
> morning.

Actually it's ok, Christa managed to get these for me earlier this morning (sorry I forgot to clear the request here) :)

Comment 15

[Michael Ham]

Alex:

Posting on behalf of Peter Crawford with his feedback on visual design for the first pass:

"I realize this is very much in progress and things like the styling of UI elements such as the Menu & Close buttons and animation are forthcoming, but here is my initial feedback on build. Please let me know if I missed anything. 

HOME
1. NAV typeface should be Open San Bold not Fira Sans
2. Mozilla logo size and spacing relative to other NAV elements
3. NAV size and spacing 
4. Custom styling of localization dropdown possible?

DRAWER
1. Type is Open Sans Bold, Italic, Regular
2. Alignment of "CLOSE" button, alignment and spacing of drawer elements

FIREFOX
1. Button should be Zilla Bold
2. Can we adjust colors to make Firefox Orange? 

Last note on the shinola.com example: 
- dimming of main content area 
- when drawer is open scroll locks on main content area
- drawer scrolls independently of main content"

Comment 16

[Alex Gibson [:agibson]]

(In reply to Michael Ham from comment #15)
> Alex:
> 
> Posting on behalf of Peter Crawford with his feedback on visual design for
> the first pass:
> 
> "I realize this is very much in progress and things like the styling of UI
> elements such as the Menu & Close buttons and animation are forthcoming, but
> here is my initial feedback on build. Please let me know if I missed
> anything. 
> 
> HOME
> 1. NAV typeface should be Open San Bold not Fira Sans

Ok

> 2. Mozilla logo size and spacing relative to other NAV elements
> 3. NAV size and spacing 

Still working on this.

> 4. Custom styling of localization dropdown possible?

We can do a little basic styling, but there are limits to what browsers let web developers do here.

> DRAWER
> 1. Type is Open Sans Bold, Italic, Regular

We don't mix both Open Sans and Fira on the same page normally. Doing so requires our users download both font families, which is just too much to ask. We don't do this for any other pages/components on the site, so I'm going to say no to this. It will use Fira like the rest of the nav.

> 2. Alignment of "CLOSE" button, alignment and spacing of drawer elements

Thanks, still working on this.

> FIREFOX
> 1. Button should be Zilla Bold

We don't yet have the Zilla font available on mozorg. I'm also going to say no to requiring yet another font weight just for a single string. It will use Fira like the rest of the nav copy.

> 2. Can we adjust colors to make Firefox Orange? 

Do you mean the new orange in our brand guidelines, or the old Firefox orange? (is that still on-brand?). Let me know which and we can certainly use it.

> Last note on the shinola.com example: 
> - dimming of main content area 

I'm working on this to see how it plays out.

> - when drawer is open scroll locks on main content area
> - drawer scrolls independently of main content"

Unless we have a really compelling reason to do this, I'm going to push back against it for usability reasons. Because our drawer is very tall content wise, positioning the draw as a fixed element would require use of "overflow:scroll" on the nav area. "overflow:scroll" is not well supported outside of desktop browsers. Many older mobile and tablet browsers (of which there are many) have limited to no support at all for "overflow: scroll", rendering navigation inaccessible at worst, or difficult to interact with at best (even the iPhone struggles in this area). This is a real problem I see day to day on many websites. I think we can do better here by not following the same trap - it comes with far too many bugs.

Comment 17

[Alex Gibson [:agibson]]

> 1. NAV typeface should be Open San Bold not Fira Sans

Sorry correction here - the typeface will remain Fira sans (since this is what pages also use by default now).

Comment 18

[yuliya]

Hey Alex, we are transitioning the design from Fira to Open Sans and Zilla. For this initial reiteration we would like to add 2 weights of Open Sans.

Comment 19

[Alex Gibson [:agibson]]

(In reply to yuliya from comment #18)
> Hey Alex, we are transitioning the design from Fira to Open Sans and Zilla.
> For this initial reiteration we would like to add 2 weights of Open Sans.

Well then we have a bit of a problem. As I explained above, all new pages are using Fira. I don't think it's acceptable to make users download both Fira and Open Sans and Zilla. This is a much larger discussion than just something related to the global nav. It effects all of our pages.

We can certainly move to what you want long term, but short term things will have to stay as-is. Happy to discuss more in person if needed.

Comment 20

[yuliya]

We can omit Zilla for now and introduce it the next reiterations. If we know that we will transition to Open Sans down the road my recommendation is that we start here and phase out Fira. This initial launch is US only, and the thought was that downloading two additional weights would not put a ton of constraint on folks. This will make a pretty big difference to the design as it's mostly typography. Happy to jump on a call to discuss.

Comment 21

[Alex Gibson [:agibson]]

(In reply to yuliya from comment #20)
> We can omit Zilla for now and introduce it the next reiterations. If we know
> that we will transition to Open Sans down the road my recommendation is that
> we start here and phase out Fira. This initial launch is US only, and the
> thought was that downloading two additional weights would not put a ton of
> constraint on folks. This will make a pretty big difference to the design as
> it's mostly typography. Happy to jump on a call to discuss.

This really needs to be handled in a separate bug - performance changes apply to all pages, and ultimately effect downloads.

We can do what you want, but it just needs to be done properly (i.e. phasing our Fira from all pages in a single change). Doing this requires some amount of co-ordination, and careful review. Even for en-US only, this is a change I'm not prepared to do in this bug, sorry.

Comment 22

[yuliya]

(In reply to Alex Gibson [:agibson] from comment #16)
> (In reply to Michael Ham from comment #15)
> > Alex:
> > 
> > Posting on behalf of Peter Crawford with his feedback on visual design for
> > the first pass:
> > 
> > "I realize this is very much in progress and things like the styling of UI
> > elements such as the Menu & Close buttons and animation are forthcoming, but
> > here is my initial feedback on build. Please let me know if I missed
> > anything. 
> > 
> > HOME
> > 1. NAV typeface should be Open San Bold not Fira Sans
> 
> Ok
> 
> > 2. Mozilla logo size and spacing relative to other NAV elements
> > 3. NAV size and spacing 
> 
> Still working on this.
> 
> > 4. Custom styling of localization dropdown possible?
> 
> We can do a little basic styling, but there are limits to what browsers let
> web developers do here.

Is it possible to have it just say "English" or "En" with a carrot. No drop down container.

> 
> > DRAWER
> > 1. Type is Open Sans Bold, Italic, Regular
> 
> We don't mix both Open Sans and Fira on the same page normally. Doing so
> requires our users download both font families, which is just too much to
> ask. We don't do this for any other pages/components on the site, so I'm
> going to say no to this. It will use Fira like the rest of the nav.
> 
> > 2. Alignment of "CLOSE" button, alignment and spacing of drawer elements
> 
> Thanks, still working on this.
> 
> > FIREFOX
> > 1. Button should be Zilla Bold
> 
> We don't yet have the Zilla font available on mozorg. I'm also going to say
> no to requiring yet another font weight just for a single string. It will
> use Fira like the rest of the nav copy.
> 
> > 2. Can we adjust colors to make Firefox Orange? 
> 
> Do you mean the new orange in our brand guidelines, or the old Firefox
> orange? (is that still on-brand?). Let me know which and we can certainly
> use it.

Let's use the FF orange.

> 
> > Last note on the shinola.com example: 
> > - dimming of main content area 
> 
> I'm working on this to see how it plays out.
> 
> > - when drawer is open scroll locks on main content area
> > - drawer scrolls independently of main content"
> 
> Unless we have a really compelling reason to do this, I'm going to push back
> against it for usability reasons. Because our drawer is very tall content
> wise, positioning the draw as a fixed element would require use of
> "overflow:scroll" on the nav area. "overflow:scroll" is not well supported
> outside of desktop browsers. Many older mobile and tablet browsers (of which
> there are many) have limited to no support at all for "overflow: scroll",
> rendering navigation inaccessible at worst, or difficult to interact with at
> best (even the iPhone struggles in this area). This is a real problem I see
> day to day on many websites. I think we can do better here by not following
> the same trap - it comes with far too many bugs.

Keeping the rest of the content locked while scrolling just the drawer helps the user keep their place in the main content. Otherwise we create confusion over the relationship of the drawer to the main area. Happy to jump on a call to discuss.

Comment 23

[Alex Gibson [:agibson]]

(In reply to yuliya from comment #22) 
> Is it possible to have it just say "English" or "En" with a carrot. No drop
> down container.

We don't have enough room to do this for l10n, it will need to stay the abbreviated version.

> Let's use the FF orange.

Ok, thanks.

> Keeping the rest of the content locked while scrolling just the drawer helps
> the user keep their place in the main content. Otherwise we create confusion
> over the relationship of the drawer to the main area. Happy to jump on a
> call to discuss.

I think this is still better than making the nav unusable for certain sections of visitors, happy to discuss more.

Comment 24

[Eric Renaud [:erenaud]]

Alex - copy and URLs are final here - https://docs.google.com/a/mozilla.com/document/d/1zzUkX80-aoY3Zb_YJ-PDUdd8r1XCkUx2k1wZPNJAUXI/edit?usp=sharing

Comment 25

[yuliya]

Last bits of QA

1. Section titles in the header and the drawer should match in size. make all 16px. Right now the drawer section headers are 18px.
2. The sub section titles should also be 16px.
3. Make the "X" icon 80% of current size.

Is it possible to update header to Open Sans or are we still in the process of transitioning from Fira to Open Sans?

Thanks!

Comment 26

[Alex Gibson [:agibson]]

(In reply to yuliya from comment #25)
> Last bits of QA
> 
> 1. Section titles in the header and the drawer should match in size. make
> all 16px. Right now the drawer section headers are 18px.
> 2. The sub section titles should also be 16px.
> 3. Make the "X" icon 80% of current size.

Sure.


> Is it possible to update header to Open Sans or are we still in the process
> of transitioning from Fira to Open Sans?

The switch to Open Sans is being handled in Bug 1351143.

Comment 27

[Eric Renaud [:erenaud]]

Closing this bug for the primary iteration. We're on to next (iterations).