1353587 - Follow up on primary iteration of design of cross-site navigation based on brand refresh

Status: RESOLVED FIXED

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

Description

[Eric Renaud [:erenaud]]

Fixes and tweaks.  We'll need this to run a while to gather data, analyze that and then work on a veritable 2nd iteration.

Comment 1

[yuliya]

Attachment: close_button_1.pdf

Close button first appears without the 4 corners

Comment 2

[yuliya]

Attachment: close_button_2.pdf

close button 4 corners appear on hover

Comment 3

[yuliya]

Attachment: 01_mozilla.org_download_static.pdf

FF download button before roll over

Comment 4

[yuliya]

Attachment: 02_mozilla.org_download_hover.pdf

FF download button on rollover

Comment 5

[yuliya]

Close Button (see attached comps)

- Static state is only the diamond shape made up of middle part of the “X”

- On hover the 4 outer shapes grow out from center (in similar animation style to the arrow animation in top nav bar) and “X” appears 

- Remove the word “CLOSE” entirely. This will help with localization. 


Scrolling

- When drawer is open on left, main content area darkens and locks in place (no scrolling)

- Drawer must scroll independently of the main page content in order for this interaction to make sense to the user

- Please refer to shinola.com for an example of how this should look, feel, and function 

- This will not have any effect on the mobile navigation as it will be a full screen takeover 


Firefox Download Button (see attached comps)

- Firefox button is not part of Main Navigation but should not look out of place in top bar

- Should be some type of indication – such as download icon / arrow – that an immediate download will happen on click 

- On hover bright orange box will appear around button to indicate action will take place on click


Mobile:
- cut top padding by half
- update Mozilla logo to "m" bug (uploading asset)


Alex, let us know if it would be easier to jump on a QA call on Monday and work live.

Comment 6

[yuliya]

Attachment: moz-fav-bw_500x500.png

"m" bug

Comment 8

[Alex Gibson [:agibson]]

Thanks Yulia, please see comments inline:

(In reply to yuliya from comment #5)
> Close Button (see attached comps)
> 
> - Static state is only the diamond shape made up of middle part of the “X”
> 
> - On hover the 4 outer shapes grow out from center (in similar animation
> style to the arrow animation in top nav bar) and “X” appears 
> 
> - Remove the word “CLOSE” entirely. This will help with localization. 

I'm only going to do this for desktop (wide) viewports only, since the interaction relies on hover and a single dot doesn't really convey the purpose of the button well on touch devices. For tablets / mobile viewports, the user will just see the static "X" formation of the dots. I'll visually hide the word "CLOSE" too, although we need to keep this localized string around for users who rely on assistive technology and need to understand what the button does.

 
> Scrolling
> 
> - When drawer is open on left, main content area darkens and locks in place
> (no scrolling)
> 
> - Drawer must scroll independently of the main page content in order for
> this interaction to make sense to the user
> 
> - Please refer to shinola.com for an example of how this should look, feel,
> and function 
> 
> - This will not have any effect on the mobile navigation as it will be a
> full screen takeover 

I'm only going to lock scrolling the view-port this for wide (desktop) viewports, since overflow scrolling is poorly supported on many mobile devices (I've given this feedback several times in previous bugs).

> Firefox Download Button (see attached comps)
> 
> - Firefox button is not part of Main Navigation but should not look out of
> place in top bar
> 
> - Should be some type of indication – such as download icon / arrow – that
> an immediate download will happen on click 
> 
> - On hover bright orange box will appear around button to indicate action
> will take place on click

Will do - on a side-note I think we need to have some follow up discussions on download buttons in general, and overall consistency through the website. While I understand this change from the visual direction of the nav overall, from a UX perspective I think making this button different from every other button on the site is a little confusing for users.

> Mobile:
> - cut top padding by half
> - update Mozilla logo to "m" bug (uploading asset)

Will do, thanks

> Alex, let us know if it would be easier to jump on a QA call on Monday and
> work live.

Thanks for the offer, but I think these changes will take longer to code than the duration of a meeting. I'll push these changes to a demo server and you can give feedback async. Hope that works ok.

Comment 9

[Alex Gibson [:agibson]]

> I'm only going to lock scrolling the view-port this for wide (desktop) viewports

Sorry this should have read: 

I'm only going to lock scrolling the page for wide (desktop) viewports only.

Comment 10

[yuliya]

If I open the drawer once and close it. The "..." horizontal stack turns to grey, as if to show that I have already visited it. Can we please disable this function and keep it a full black.

Comment 11

[Alex Gibson [:agibson]]

(In reply to yuliya from comment #10)
> If I open the drawer once and close it. The "..." horizontal stack turns to
> grey, as if to show that I have already visited it. Can we please disable
> this function and keep it a full black.

The gray color is focus styling, and is there for keyboard users and users of assistive technology. When the drawer closes it is important to return focus back to the menu button. Focus styles can be anything we choose, however it needs to be something distinguishable from hover.

Comment 12

[Alex Gibson [:agibson]]

Yulia, thanks for the direction and feedback. These changes are now up on demo for your feedback/approval before going live: https://www-demo5.allizom.org/en-US/

Thanks

Comment 13

[yuliya]

Hey Alex, this is super close! Thanks for doing a great job.

1. When the drawer is open, let's cut the right padding on the scroll bar by half and move it closer to the edge.

2. On the scroll bar, let's remove the function where the scroll bar gets bigger on hover and shows the track. 

3. When we are with in a section, let's use that section's highlight color to signify where we are in the navigation. Blue for IH, Orange for FF, etc.

>>The gray color is focus styling, and is there for keyboard users and users of assistive technology. When the drawer closes it is important to return focus back to the menu button. Focus styles can be anything we choose, however it needs to be something distinguishable from hover.

As we have it now, it's very visually confusing, the color is too subtle for most to notice the change. How about we do something with the graphic instead. The 3 dots could instead point to the right for a couple of seconds > to focus the viewer's attention back on the navigation.

Comment 14

[Alex Gibson [:agibson]]

(In reply to yuliya from comment #13)
> Hey Alex, this is super close! Thanks for doing a great job.
> 
> 1. When the drawer is open, let's cut the right padding on the scroll bar by
> half and move it closer to the edge.

Will do

> 2. On the scroll bar, let's remove the function where the scroll bar gets
> bigger on hover and shows the track. 

This is the behaviour of the macOS, web pages have no control on this.

> 3. When we are with in a section, let's use that section's highlight color
> to signify where we are in the navigation. Blue for IH, Orange for FF, etc.

Will do

> >>The gray color is focus styling, and is there for keyboard users and users of assistive technology. When the drawer closes it is important to return focus back to the menu button. Focus styles can be anything we choose, however it needs to be something distinguishable from hover.
> 
> As we have it now, it's very visually confusing, the color is too subtle for
> most to notice the change. How about we do something with the graphic
> instead. The 3 dots could instead point to the right for a couple of seconds
> > to focus the viewer's attention back on the navigation.

Focus states generally need to be permanent, since if they only happen for a few seconds it's impossible to tell where focus is after the event, which can be confusing for users who need it. Focus states also fire on click, so it would need to be something that does not interfere with the animation for when the drawer is in the open state. I think animating the three dots on focus could also be more confusing than simply changing the color, since it suggests the drawer is open when focus is returned to the button after the drawer closes..

I'm going to leave this as-is currently and not going to block on it, as it seems like a more minor visual technicality.

Comment 15

[yuliya]

> 
> > 2. On the scroll bar, let's remove the function where the scroll bar gets
> > bigger on hover and shows the track. 
> 
> This is the behaviour of the macOS, web pages have no control on this.

Can we at least make it more subtle?

as is here:
https://www.good.is/

or here
https://www.shinola.com/

Comment 16

[yuliya]

^^^

Comment 17

[Alex Gibson [:agibson]]

Those sites use the same OS scroll bars. I'll see if there's anything we can do, but like I said web pages have little to no control here.

Comment 18

[yuliya]

One last thing.Forgot to check mobile.

1. let's move the 3 dots further left, 1/3 of the current padding. 

2. Move the "m" bug closer to the 3 dots. half of the padding that we have there. 

3. "Download FF" move right, 1/2 of the current padding. 

THANKS

Comment 19

[yuliya]

(In reply to Alex Gibson [:agibson] from comment #17)
> Those sites use the same OS scroll bars. I'll see if there's anything we can
> do, but like I said web pages have little to no control here.

Thanks, Alex!

Comment 20

[Alex Gibson [:agibson]]

(In reply to yuliya from comment #15)
> > 
> > > 2. On the scroll bar, let's remove the function where the scroll bar gets
> > > bigger on hover and shows the track. 
> > 
> > This is the behaviour of the macOS, web pages have no control on this.
> 
> Can we at least make it more subtle?
> 
> as is here:
> https://www.good.is/
> 
> or here
> https://www.shinola.com/

I can see the same thing happens on shinola.com (scroll bar gets bigger on hover). On good.is the page is not locked from scrolling, but if you hover over the scroll bar on the right side of the page, the same behavior also occurs.

If you want to read some fun history as to why Firefox offers no way to style scroll bars using CSS, bug 77790 is a whooping 16 years old :)

Comment 21

[Alex Gibson [:agibson]]

> 2. Move the "m" bug closer to the 3 dots. half of the padding that we have there. 

I'm a little concerned this is going to make these two clickable elements too close together for touch input. I'm going to move the dots closer to the edge of the viewport, but leave the "m" with the current spacing it has now.

Comment 22

[Alex Gibson [:agibson]]

Latest set of amends are now up on demo: https://www-demo5.allizom.org/en-US/

Comment 23

[pgerman]

Hi Alex,

If it is not too late, let's get this in.

Thanks,

Peter

Comment 24

[yuliya]

Three things:

Mobile. 

1. Let's move the 3 dots further to the left. half of the current padding. right now they are floating and are distracting to they eye.

2. When the side drawer opens, have it fill the full width of the screen. The sliver shown now looks like a mistake.


Desktop
3. When scrolling a section, is it possible to lock the title to the top, below the "X" icon, and scroll content underneath it?

Thanks!!

Comment 25

[Alex Gibson [:agibson]]

(In reply to yuliya from comment #24)
> Three things:
> 
> Mobile. 
> 
> 1. Let's move the 3 dots further to the left. half of the current padding.
> right now they are floating and are distracting to they eye.
> 
> 2. When the side drawer opens, have it fill the full width of the screen.
> The sliver shown now looks like a mistake.
> 
> 
> Desktop
> 3. When scrolling a section, is it possible to lock the title to the top,
> below the "X" icon, and scroll content underneath it?
> 
> Thanks!!

These weren't part of the original set of changes in this bug, so I'm going to hold on adding in more changes until we have more time to spend on this. We can add these items to our next iteration for the nav.

Comment 26

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/36765b722c0349f7e12bdb90cada2453da4f08ea
[fix bug 1353587] Global nav incremental impovements

https://github.com/mozilla/bedrock/commit/5b7f88eaf123e17762a32720ef7702df81b32cfb
Merge pull request #4752 from alexgibson/bug-1353291-global-nav-incremental-improvements

[fix bug 1353587] Global nav incremental improvements

Comment 27

[[github robot]]

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

https://github.com/mozilla/bedrock/commit/a3f7596ecc18d7b262c0cfaf6feac9c1b1b54541
[bug 1353587] Make global nav accommodate text wrapping

https://github.com/mozilla/bedrock/commit/dac4d78a869c3d0ceb000c929951bfb699a07c6a
Merge pull request #4855 from craigcook/global-nav-text-wrap

[bug 1353587] Make global nav accommodate text wrapping