1176256 - [UX] Create design spec for final onboarding assets for tracking protection in private browsing mode

Status: RESOLVED FIXED

(Firefox :: General, defect, P1)

Comment 1

[Ash Grigas]

Attachment: Tp Onboarding Spec v3.png

Comment 2

[Ash Grigas]

animated transition between step 1 and 2 is here: https://www.dropbox.com/s/jt44g08lc84k7pd/output_7w3s68.gif?dl=0

Comment 3

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Looks good in general!
The issue with showing the tour again and again persists of course. Especially screen #1B could get really annoying if this is the first thing the user sees every time they start a private session. You mentioned an explicit »Don't show this again« switch. I don't see that here yet though. Or did you mean the »Got it« button at the end of the tour?
Is »I have entered private browsing once and visited a website« really too much information to store locally?

My other question is about the visual design and how final that is. I'm listing the issues I'm seeing here, but that might be material for a different bug:
- We are using green as the dominant color here. Historically, private mode was associated with purple (and the indicator on top of the window is still purple). It might make sense to align that one way or the other.
- Screen 0 is using Fira as a font, which is still not bundled with Firefox
- The doorhangers are using Lucida while the OS in the screenshot behind it is Yosemite, which uses Helvetica (probably just something that sneaked in over the iterations)
- We probably don't want to use a greater than sign (>) as an arrow on the buttons...

Comment 4

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Leaving the review? until clarified

Comment 5

[Ash Grigas]

(In reply to Philipp Sackl [:phlsa] please use needinfo from comment #3)
> Looks good in general!
> The issue with showing the tour again and again persists of course.
> Especially screen #1B could get really annoying if this is the first thing
> the user sees every time they start a private session. You mentioned an
> explicit »Don't show this again« switch. I don't see that here yet though.
> Or did you mean the »Got it« button at the end of the tour?
> Is »I have entered private browsing once and visited a website« really too
> much information to store locally?
> 
> My other question is about the visual design and how final that is. I'm
> listing the issues I'm seeing here, but that might be material for a
> different bug:
> - We are using green as the dominant color here. Historically, private mode
> was associated with purple (and the indicator on top of the window is still
> purple). It might make sense to align that one way or the other.
> - Screen 0 is using Fira as a font, which is still not bundled with Firefox
> - The doorhangers are using Lucida while the OS in the screenshot behind it
> is Yosemite, which uses Helvetica (probably just something that sneaked in
> over the iterations)
> - We probably don't want to use a greater than sign (>) as an arrow on the
> buttons...

The visual design questions:
-all font (despite what shows in mock) will be system fonts so lucida in this case
-arrows are removed, its just text buttons
-as to color - that color was proposed by both Stephen and Michael Maslaney - Stephen is out so can't get his thoughts but I think it shouldn't be too hard to change later on if needed... We do plan for 43 to try to bring back Stephen's design for the window that is darker and remove the mask to communicate you're in PBM.

Show the tour questions:
-apparently storing anything locally gives away the user used private browsing mode if someone uses their computer next - if you can think of any rationale of how we can get around this, please let us know!
-i didn't include a don't show again button as it was originally having completed the tour (got it) but we've been talking about the need to put an explicit 'Don't show tour again' button somewhere in the flow. If we did that - I've been told it would need to have legalese text saying you're aware that that could expose that you used private browsing mode to others...

Comment 6

[Ash Grigas]

(In reply to agrigas from comment #5)
> (In reply to Philipp Sackl [:phlsa] please use needinfo from comment #3)
> > Looks good in general!
> > The issue with showing the tour again and again persists of course.
> > Especially screen #1B could get really annoying if this is the first thing
> > the user sees every time they start a private session. You mentioned an
> > explicit »Don't show this again« switch. I don't see that here yet though.
> > Or did you mean the »Got it« button at the end of the tour?
> > Is »I have entered private browsing once and visited a website« really too
> > much information to store locally?
> > 
> > My other question is about the visual design and how final that is. I'm
> > listing the issues I'm seeing here, but that might be material for a
> > different bug:
> > - We are using green as the dominant color here. Historically, private mode
> > was associated with purple (and the indicator on top of the window is still
> > purple). It might make sense to align that one way or the other.
> > - Screen 0 is using Fira as a font, which is still not bundled with Firefox
> > - The doorhangers are using Lucida while the OS in the screenshot behind it
> > is Yosemite, which uses Helvetica (probably just something that sneaked in
> > over the iterations)
> > - We probably don't want to use a greater than sign (>) as an arrow on the
> > buttons...
> 
> The visual design questions:
> -all font (despite what shows in mock) will be system fonts so lucida in
> this case
> -arrows are removed, its just text buttons
> -as to color - that color was proposed by both Stephen and Michael Maslaney
> - Stephen is out so can't get his thoughts but I think it shouldn't be too
> hard to change later on if needed... We do plan for 43 to try to bring back
> Stephen's design for the window that is darker and remove the mask to
> communicate you're in PBM.
> 
> Show the tour questions:
> -apparently storing anything locally gives away the user used private
> browsing mode if someone uses their computer next - if you can think of any
> rationale of how we can get around this, please let us know!
> -i didn't include a don't show again button as it was originally having
> completed the tour (got it) but we've been talking about the need to put an
> explicit 'Don't show tour again' button somewhere in the flow. If we did
> that - I've been told it would need to have legalese text saying you're
> aware that that could expose that you used private browsing mode to others...

one additional note - i reviewed all the visuals with Stephen last week and he was ok with everything.

Comment 7

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Comment on attachment 8633022 [details]
Tp Onboarding Spec v3.png

Alrighty! Thanks for the clarifications!
FWIW, we can still tweak details in Aurora and Beta as long as the strings don't change (also t react to feedback from our pre-release audience)

Comment 8

[Matthew N. [:MattN]]

Comment on attachment 8633022 [details]
Tp Onboarding Spec v3.png

* Step 1 and step 3 are using different info panel anchors in the identity block. Is that intentional? If not, which is correct?

* "X refreshes page back to new private window state" is new scope as it's not possible for www.mozilla.org to do that (for step 1A, step 2 & step 3). An older version of the design had step 1A opening in a new tab and then the user can simply close the tour tab like they do with whatsnew tabs which is what was broken down. What was the reason for the change?

* It would be clearer if the address bars and tab titles for steps 1A, 2 & 3 were for www.mozilla.org instead of implying about:privatebrowsing to avoid confusion.

Comment 9

[Matthew N. [:MattN]]

Javaun, since I don't want any more surprises… can I get you to confirm what was already resolved in the tour Google Doc as I'm not confident that it was run by Ehsan or others who care about privacy in PB:

Is it fine that we aren't making it clear that the button on about:privatebrowsing will load a www.mozilla.org URL for step 1A therefore leaking to our server logs that the user is in private browsing? We talked before about mentioning under the button that www.mozilla.org will load but this wasn't incorporated into the designs. Aislinn, apologies for bringing this up again but there wasn't clear confirmation in the GDoc and I don't want to have to scramble to adjust this in 2 months.

Comment 10

[Ash Grigas]

(In reply to Matthew N. [:MattN] from comment #8)
> Comment on attachment 8633022 [details]
> Tp Onboarding Spec v3.png
> 
> * Step 1 and step 3 are using different info panel anchors in the identity
> block. Is that intentional? If not, which is correct?
Yes intentional as step 1 is pointing to the shield specifically and step 3 isn't a tooltip from the tour, its the actual control center which always anchors centered between the lock and the shield.
> 
> * "X refreshes page back to new private window state" is new scope as it's
> not possible for www.mozilla.org to do that (for step 1A, step 2 & step 3).
> An older version of the design had step 1A opening in a new tab and then the
> user can simply close the tour tab like they do with whatsnew tabs which is
> what was broken down. What was the reason for the change?
Ok, I'm fine having the X close the tooltip only and requiring the user to close the tab themself. I'm also ok removing the X altogether since we're not using it to start them at a different part of the tour each time so the action of closing the tab would be the same... What do you think?
> 
> * It would be clearer if the address bars and tab titles for steps 1A, 2 & 3
> were for www.mozilla.org instead of implying about:privatebrowsing to avoid
> confusion.
Ok, makes sense. Can you just update that in your build or do you need me to update the spec?

Comment 11

[Javaun Moradi [:javaun]]

(In reply to Matthew N. [:MattN] from comment #9)
> Javaun, since I don't want any more surprises… can I get you to confirm what
> was already resolved in the tour Google Doc as I'm not confident that it was
> run by Ehsan or others who care about privacy in PB:

> Is it fine that we aren't making it clear that the button on
> about:privatebrowsing will load a www.mozilla.org URL for step 1A therefore
> leaking to our server logs that the user is in private browsing? 

Per Ehsan I think we're clear here. Clearing NI

We talked
> before about mentioning under the button that www.mozilla.org will load but
> this wasn't incorporated into the designs. Aislinn, apologies for bringing
> this up again but there wasn't clear confirmation in the GDoc and I don't
> want to have to scramble to adjust this in 2 months.

Comment 12

[Matthew N. [:MattN]]

(In reply to agrigas from comment #10)
> (In reply to Matthew N. [:MattN] from comment #8)
> > Comment on attachment 8633022 [details]
> > Tp Onboarding Spec v3.png
> > 
> > * Step 1 and step 3 are using different info panel anchors in the identity
> > block. Is that intentional? If not, which is correct?
> Yes intentional as step 1 is pointing to the shield specifically and step 3
> isn't a tooltip from the tour, its the actual control center which always
> anchors centered between the lock and the shield.

OK, that makes sense.

> > * "X refreshes page back to new private window state" is new scope as it's
> > not possible for www.mozilla.org to do that (for step 1A, step 2 & step 3).
> > An older version of the design had step 1A opening in a new tab and then the
> > user can simply close the tour tab like they do with whatsnew tabs which is
> > what was broken down. What was the reason for the change?
> Ok, I'm fine having the X close the tooltip only and requiring the user to
> close the tab themself. I'm also ok removing the X altogether since we're
> not using it to start them at a different part of the tour each time so the
> action of closing the tab would be the same... What do you think?

The API doesn't support removing the X so I'd rather leave it. I think the fact that they can be closed is why the existing tours put the tour navigation in the webpage instead of in the info panel.

> > * It would be clearer if the address bars and tab titles for steps 1A, 2 & 3
> > were for www.mozilla.org instead of implying about:privatebrowsing to avoid
> > confusion.
> Ok, makes sense. Can you just update that in your build or do you need me to
> update the spec?

I don't personally need the spec updated but think it would avoid confusion when sharing it with others. Maybe not important now.

Comment 13

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Attachment: Tp Onboarding Spec v3.png

Removal of Step 1B entry point.

Comment 14

[Alex Gibson [:agibson]]

Cory, can someone please provide the assets used for the mockup in Comment 13? I mainly need tings like the TP logo, shield icon, as well as references to font weights, sizes etc. Thanks

Comment 15

[Marco Mucci [:MarcoM]]

(In reply to Alex Gibson [:agibson] from comment #14)
> Cory, can someone please provide the assets used for the mockup in Comment
> 13? I mainly need tings like the TP logo, shield icon, as well as references
> to font weights, sizes etc. Thanks

Comment 16

[Ash Grigas]

(In reply to Alex Gibson [:agibson] from comment #14)
> Cory, can someone please provide the assets used for the mockup in Comment
> 13? I mainly need tings like the TP logo, shield icon, as well as references
> to font weights, sizes etc. Thanks

The new page is on this ticket. It was just re-designed and is being implemented now by Paolo. https://bugzilla.mozilla.org/show_bug.cgi?id=1190427

The assets you need should be there. If not - needinfo the visual designer Bryan Bell.

Comment 17

[Alex Gibson [:agibson]]

(In reply to agrigas from comment #16)
> (In reply to Alex Gibson [:agibson] from comment #14)
> > Cory, can someone please provide the assets used for the mockup in Comment
> > 13? I mainly need tings like the TP logo, shield icon, as well as references
> > to font weights, sizes etc. Thanks
> 
> The new page is on this ticket. It was just re-designed and is being
> implemented now by Paolo.
> https://bugzilla.mozilla.org/show_bug.cgi?id=1190427
> 
> The assets you need should be there. If not - needinfo the visual designer
> Bryan Bell.

Thanks, that link seems to only include mockups also. Does anyone know Bryan's nick so I can needsinfo him here? Auto suggest has several possibilities.

Comment 18

[Marco Mucci [:MarcoM]]

(In reply to Alex Gibson [:agibson] from comment #17)
> (In reply to agrigas from comment #16)
> > (In reply to Alex Gibson [:agibson] from comment #14)
> > > Cory, can someone please provide the assets used for the mockup in Comment
> > > 13? I mainly need tings like the TP logo, shield icon, as well as references
> > > to font weights, sizes etc. Thanks
> > 
> > The new page is on this ticket. It was just re-designed and is being
> > implemented now by Paolo.
> > https://bugzilla.mozilla.org/show_bug.cgi?id=1190427
> > 
> > The assets you need should be there. If not - needinfo the visual designer
> > Bryan Bell.
> 
> Thanks, that link seems to only include mockups also. Does anyone know
> Bryan's nick so I can needsinfo him here? Auto suggest has several
> possibilities.

[e-mail]

Comment 19

[Alex Gibson [:agibson]]

Bryan, could you please provide the assets in Comment14? Thanks

Comment 20

[Ash Grigas]

(In reply to Alex Gibson [:agibson] from comment #19)
> Bryan, could you please provide the assets in Comment14? Thanks

If its just the shield icon needed its in this folder:
https://www.dropbox.com/sh/b9k8vpir2tcllx2/AADcBOdgDEz3gSUSayWHIGMHa?dl=0

The font is the system font which for mac should default to Helvetica Neue and for Windows Tahoma.

Comment 21

[Alex Gibson [:agibson]]

(In reply to agrigas from comment #20)
> (In reply to Alex Gibson [:agibson] from comment #19)
> > Bryan, could you please provide the assets in Comment14? Thanks
> 
> If its just the shield icon needed its in this folder:
> https://www.dropbox.com/sh/b9k8vpir2tcllx2/AADcBOdgDEz3gSUSayWHIGMHa?dl=0
> 
> The font is the system font which for mac should default to Helvetica Neue
> and for Windows Tahoma.

The mockup in comment13 shows the shield and mask together as one graphic. Whatever was used to make this mockup would be ideal.

We may want to discuss further what font is best to use on mozilla.org pages. Typically we use Open Sans, although we could differentiate here if we decide it's needed. May need someone from creative to weigh in on this.

Comment 22

[Ash Grigas]

(In reply to Alex Gibson [:agibson] from comment #21)
> (In reply to agrigas from comment #20)
> > (In reply to Alex Gibson [:agibson] from comment #19)
> > > Bryan, could you please provide the assets in Comment14? Thanks
> > 
> > If its just the shield icon needed its in this folder:
> > https://www.dropbox.com/sh/b9k8vpir2tcllx2/AADcBOdgDEz3gSUSayWHIGMHa?dl=0
> > 
> > The font is the system font which for mac should default to Helvetica Neue
> > and for Windows Tahoma.
> 
> The mockup in comment13 shows the shield and mask together as one graphic.
> Whatever was used to make this mockup would be ideal.
> 
> We may want to discuss further what font is best to use on mozilla.org
> pages. Typically we use Open Sans, although we could differentiate here if
> we decide it's needed. May need someone from creative to weigh in on this.

Which screen exactly are you implementing? Step 2 of the tour? The icon you need is here:
https://www.dropbox.com/s/4m3guuu2x828q4s/mask-and-shield-icon.png?dl=0

For font, we were told not to use the typically mozilla hosted style since our font use is for a built in page for the entry point to the tour. We want the font to be consistent across the built in page, step 1,2 and 3 if possible and thought using the default font would be easiest since we can't specify a custom font for built-in pages. Paolo is implementing the built in page so you can ask him about any specifics.

Comment 23

[Alex Gibson [:agibson]]

(In reply to agrigas from comment #22)
> Which screen exactly are you implementing? Step 2 of the tour? The icon you
> need is here:
> https://www.dropbox.com/s/4m3guuu2x828q4s/mask-and-shield-icon.png?dl=0
> 
> For font, we were told not to use the typically mozilla hosted style since
> our font use is for a built in page for the entry point to the tour. We want
> the font to be consistent across the built in page, step 1,2 and 3 if
> possible and thought using the default font would be easiest since we can't
> specify a custom font for built-in pages. Paolo is implementing the built in
> page so you can ask him about any specifics.

Many thanks for the link, the mozorg steps are 1, 2 and 3,

If we need to use default system fonts for the mozorg pages, that should not be a problem technically.

Comment 24

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Attachment: TP Onboarding Final Spec - Aug 24th