Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: closed
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution: fixed
Keywords: ux-team, TorBrowserTeam201808 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Changes (by gk):
* status: needs_information => closed
* resolution: => fixed
Comment:
Okay, unparented the remaining child tickets. This got implemented and the
remaining tickets are bugs/enhancements not need to be tracked here (as
trac does not let someone close a bug without all child bugs being
resolved).
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status:
| needs_information
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201808 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by antonela):
Oh, thanks for the heads up. Updated version here:
https://trac.torproject.org/projects/tor/attachment/ticket/25695/figure_welcome.zip
Replying to [comment:36 mcs]:
> This looks good, except `figure_welcome.png` appears to be clipped on
the bottom and right sides (e.g., part of the magnifying glass handle is
missing). Is that intentional?
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status:
| needs_information
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201808 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Changes (by antonela):
* Attachment "figure_welcome.zip" added.
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status:
| needs_information
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201808 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Changes (by mcs):
* status: new => needs_information
Comment:
Replying to [comment:35 antonela]:
> Illustrations for the onboarding attached here
> https://trac.torproject.org/projects/tor/attachment/ticket/25695
/onboarding-illos.zip
>
> Please, remove metadata and let me know if you need any different
format. Thanks!
This looks good, except `figure_welcome.png` appears to be clipped on the
bottom and right sides (e.g., part of the magnifying glass handle is
missing). Is that intentional?
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: new
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201808 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by antonela):
Illustrations for the onboarding attached here
https://trac.torproject.org/projects/tor/attachment/ticket/25695
/onboarding-illos.zip
Please, remove metadata and let me know if you need any different format.
Thanks!
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: new
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201808 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Changes (by antonela):
* Attachment "onboarding-illos.zip" added.
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: new
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201808 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by antonela):
> Marvel will work fine for the handoff. Kathy and I are getting better at
using it :)
Cool! Glad it is working :)
> Regarding the illustrations, you may already know this, but the
following folder contains the onboarding images that Firefox 60 uses:
> https://dxr.mozilla.org/mozilla-
esr60/source/browser/extensions/onboarding/content/img
Thanks for the link and the explainer! I'm going to have pretty much same
size and I'll provide the .svg and .png for each of them.
Thanks!
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: new
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201807 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by mcs):
Marvel will work fine for the handoff. Kathy and I are getting better at
using it :)
Regarding the illustrations, you may already know this, but the following
folder contains the onboarding images that Firefox 60 uses:
https://dxr.mozilla.org/mozilla-
esr60/source/browser/extensions/onboarding/content/img
The SVGs whose filenames begin with `icons_` contain the small icons that
are shown to the left of navigation titles (left column of the onboarding
overlay), and the filenames that begin with `figure_` contain the larger
illustrations that are displayed on the right side of each topic panel.
We don't have to include the small icons but we can.
I am not sure much flexibility we have with respect to image dimensions,
so please try to stay close to the sizes that Firefox uses. Looking at the
CSS rules, it looks like the icons are scaled to about 20 pixels high and
the large illustrations are scaled to 352 pixels wide. Mozilla uses SVGs
for everything, but we need to use to PNGs for now because of #25695.
Kathy and I can produce the PNGs which we need if you give us SVGs.
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: new
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201807 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Changes (by mcs):
* status: needs_information => new
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status:
| needs_information
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201807 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by antonela):
> Are the images and copy ready for the desktop new user onboarding? Where
can we find them?
You can grab the copy by clicking at the left side bottom button called
'handoff'. That option will allow you to explore the design file.
We are still working on illos, could you have a placeholder for now? They
are going to be ready, I hope, for this week.
> Does https://marvelapp.com/5981a4b/screen/44384314 reflect how things
should look?
Yes. Thanks!
I'm using Marvel for handing off just because is the tool we are using.
If there is a better way to do it for you, please let me know.
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status:
| needs_information
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201807 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Changes (by mcs):
* status: assigned => needs_information
Comment:
Kathy and I are trying to determine what needs to be done to implement the
new user onboarding.
Antonela:
* Are the images and copy ready for the desktop new user onboarding? Where
can we find them?
* Does https://marvelapp.com/5981a4b/screen/44384314 reflect how things
should look?
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201807 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by mcs):
I created some child tickets so we can handle the implementation in
phases:
* #26960 implement new about:tor start page
* #26961 implement new user onboarding
* #26962 implement new features onboarding
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201807 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by antonela):
Just in case do you prefer it, .css and .py for the circles' background
pattern.
https://trac.torproject.org/projects/tor/attachment/ticket/25696/onion_circles_pattern.html
https://trac.torproject.org/projects/tor/attachment/ticket/25696/onion_circles_pattern.py
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201807 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by ProTipGuyFWIWWeLoveARMA):
Replying to [comment:22 mcs]:
> * SVGs are blocked when the security slider is set to the Safest
setting. The easiest thing to do right now is to stick with PNGs.
PNG with the first iteration sounds good, but then please add the SVGs and
use SVG fallbacks to deal with the case you mentioned since it will look
much cleaner, see: https://css-tricks.com/svg-fallbacks/
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201807 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by antonela):
> The search "action" arrow that Mozilla uses on about:home is actually
16x16 pixels, so a similarly sized PNG would be great to have (see
https://dxr.mozilla.org/mozilla-
esr60/source/browser/themes/shared/icons/forward.svg; they use CSS magic
to change the fill color).
I included 1x, 2x and 3x versions to have a good quality support for
retina displays.
You can grab them here
https://trac.torproject.org/projects/tor/attachment/ticket/25695/forward.zip
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201807 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Changes (by antonela):
* Attachment "forward.zip" added.
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201807 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by antonela):
Thanks gk and mcs!
Assets are ready to be exported here. I included .png and .svg options.
https://marvelapp.com/5981a4b/screen/44384308/handoff
About fonts, I'll leave it up to you or Arthur. I'm fine moving forward
with system fonts :)
If Tor Browser is not connected, could users restart Tor Browser fix the
problem? Could we lead users to restart? With that scenario, I have a few
ideas about how to make it successful.
About check.tpo status, +1 with Geko. Steph already provided a copy for
the subhead.
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201807 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by gk):
Replying to [comment:21 mcs]:
> Replying to [comment:20 antonela]:
[snip]
> > The first time I thought about `about:tor` came to my mind the idea to
have check.torproject.org status just there. But then, the same question:
Which is the situation where Tor Browser loads and not connect to Tor?
Anyways, "You're connected to the Tor Network" string was inspired
directly by check.tpo. What would be wrong if we take it from there?
>
> Up until a few years ago, the Tor Browser home page was
https://check.torproject.org/ but connecting to that site was slow and put
load on the network (and that site). We switched to a local check in which
Torbutton checks that the browser's SOCKS proxy configuration matches what
the embedded tor daemon is using. This kind of check is very quick. I'd
rather not return to an automatic check that hits check.tpo over the
network. The reason we retained the link to check.tpo when we switched to
the local check is because it provides an "end to end" live network-based
check which some people want. But maybe its time of usefulness is past.
Georg, Arthur, or others -- any opinion on whether we need to provide an
easy and obvious way for people to load check.tpo?
I think we can get rid of it on our about:tor page, especially as it is
error-prone which caused confusion in the past.
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201807 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by mcs):
A couple of follow ups:
* SVGs are blocked when the security slider is set to the Safest setting.
The easiest thing to do right now is to stick with PNGs.
* The search "action" arrow that Mozilla uses on about:home is actually
16x16 pixels, so a similarly sized PNG would be great to have (see
https://dxr.mozilla.org/mozilla-
esr60/source/browser/themes/shared/icons/forward.svg; they use CSS magic
to change the fill color).
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201807 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by mcs):
Replying to [comment:20 antonela]:
> I think someone mentioned it before on another ticket; does exist a
situation where Tor Browser is not connected to Tor Network?
It is possible, if things are misconfigured, to have a situation where the
browser does not send traffic through a Tor proxy. That is why Torbutton
currently does a check at startup and the current about:tor has the
concept of "Something went wrong. Tor is not working in this browser."
> We are linking to the manual in a lot of cards at the onboarding. We can
have a link at `about:tor` too for sure.
OK. We will do something but you may have ideas about where to include
that link.
> The first time I thought about `about:tor` came to my mind the idea to
have check.torproject.org status just there. But then, the same question:
Which is the situation where Tor Browser loads and not connect to Tor?
Anyways, "You're connected to the Tor Network" string was inspired
directly by check.tpo. What would be wrong if we take it from there?
Up until a few years ago, the Tor Browser home page was
https://check.torproject.org/ but connecting to that site was slow and put
load on the network (and that site). We switched to a local check in which
Torbutton checks that the browser's SOCKS proxy configuration matches what
the embedded tor daemon is using. This kind of check is very quick. I'd
rather not return to an automatic check that hits check.tpo over the
network. The reason we retained the link to check.tpo when we switched to
the local check is because it provides an "end to end" live network-based
check which some people want. But maybe its time of usefulness is past.
Georg, Arthur, or others -- any opinion on whether we need to provide an
easy and obvious way for people to load check.tpo?
> Question for you now :)
>
> * Could we load our brand typography? or do you prefer to stick with
system fonts? https://styleguide.torproject.org/visuals/#typography
Using system fonts will keep things smaller, but we could bundle Source
Pro if it makes sense to do so. We should ask Arthur what he thinks about
bundling another font. Maybe we can make that change after making an
initial implementation using a system font.
> * is okay an SVG for the circle's pattern at the background? or do you
prefer a png/jpg?
SVG should be fine, although we will need to double-check that SVGs are
not disabled on about:tor when the security slider is set to the Safest
setting.
We will also need a DuckDuckGo icon for the search box (small-ish, maybe
34 x 34 pixels) and Kathy and I think we should add a right pointing
"action" arrow to the right side of the search box like Mozilla has on
Firefox's about:home (in case someone wants to use the mouse to start a
search). That icon should be similar in height to the DDG one.
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201807 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by antonela):
hey! happy to have you working on it :)
Replying to [comment:19 mcs]:
>Within this new design, how do we let users know that Tor is not working
correctly? In the old about:tor, the text near the top of the page is
changed to "Something Went Wrong! Tor is not working in this browser."
(with a red background).
I think someone mentioned it before on another ticket; does exist a
situation where Tor Browser is not connected to Tor Network?
>Should about:tor include a link to the Tor Browser manual? I think we
talked about this during one of our meetings, but I cannot remember our
conclusion.
We are linking to the manual in a lot of cards at the onboarding. We can
have a link at `about:tor` too for sure.
>Will there be a way for users to navigate to
https://check.torproject.org/ (the old "Test Tor Network Settings" link)?
The first time I thought about `about:tor` came to my mind the idea to
have check.torproject.org status just there. But then, the same question:
Which is the situation where Tor Browser loads and not connect to Tor?
Anyways, "You're connected to the Tor Network" string was inspired
directly by check.tpo. What would be wrong if we take it from there?
>Is it OK to completely remove everything related to update notifications
from about:tor? I think we decided to use something based on Firefox 60's
doorhanger-based update notifications, which means we no longer need
anything related to updates inside the about:tor page.
Yes, exactly. I'm going to back to Update Tor ticket I hope this week. So
far, we discussed to have everything running at the doorhanger. I
suggested having the red `about:tor` for old Tor Browser versions ->
https://trac.torproject.org/projects/tor/attachment/ticket/25694/1.0.2.png.
Both cases can work together and that `about:tor` status is an ongoing
discussion at #25694.
Question for you now :)
* Could we load our brand typography? or do you prefer to stick with
system fonts? https://styleguide.torproject.org/visuals/#typography
* is okay an SVG for the circle's pattern at the background? or do you
prefer a png/jpg?
Can't wait to see it live!
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201807 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by mcs):
Kathy and I are working on implementation of the startup page portion of
this ticket (that is, about:tor without new user or feature onboarding).
We have a few questions:
* Within this new design, how do we let users know that Tor is not working
correctly? In the old about:tor, the text near the top of the page is
changed to "Something Went Wrong! Tor is not working in this browser."
(with a red background).
* Should about:tor include a link to the Tor Browser manual? I think we
talked about this during one of our meetings, but I cannot remember our
conclusion.
* Will there be a way for users to navigate to
https://check.torproject.org/ (the old "Test Tor Network Settings" link)?
* Is it OK to completely remove everything related to update notifications
from about:tor? I think we decided to use something based on Firefox 60's
doorhanger-based update notifications, which means we no longer need
anything related to updates inside the about:tor page.
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201807 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by gk):
Looks great. I think I like the "Explore. Privately." one better than the
"Go Explore. Privately." But I feel not that strongly about it. I am not
sure whether the text is ready yet for review, so I skipped that part but
the general flow seems good to me.
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201807 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by antonela):
I updated the last prototype with the new content + the first round of
illustrations. Take a look and let me know what do you think!
https://marvelapp.com/5981a4b/screen/44384322
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201807 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by gk):
Resolved #23489 as duplicate.
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201806 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by gk):
I am not a huge fan of "ultimate" when describing .onions. Could we use
"enhanced" or something similar? Otherwise looks good to me. I guess we
can chat a bit about it (and how to move forward implementing it) in our
meeting today.
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: Very High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201806 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by antonela):
**Tor Browser 8 Onboarding**
Steph and I we have been working on having the content and the steps of
the onboarding ready.
You can grab the copy and the links from here
https://docs.google.com/document/d/1c2RZSwI44h5IT0_0HyurByWuzf5jhA1iCLUR6FBjIvY/edit?usp=sharing
and the prototype is living here
https://marvelapp.com/5981a4b/screen/44384308
let me know what else is needed to moving it forward
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201804 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by cypherpunks):
Sublime work really antonela, it looks all good :D
One note however: The update warning needs to be more scary :)
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201804 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Changes (by antonela):
* Attachment "25695-about.png" added.
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201804 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Changes (by antonela):
* Attachment "25695-about.2.png" added.
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201804 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by antonela):
Alo!
This ticket includes four related tasks:
a) redesign current about:tor
b) think about critical messages eg. "Update Tor Browser"
c) onboarding for new users
d) onboarding for new features
Check here
https://trac.torproject.org/projects/tor/attachment/ticket/25695/25695-about.png
All this components or flows are living or are triggered at about:tor
page. This is why we are thinking about them right now. On my last
delivery, I included a narrative and low-res mocks for onboarding new
users. Also, during our meeting, we talked about having a walkthrough like
onboarding for new features.
So, I'm including now
a) **About:tor** > We talked a lot about to have a dark theme here. Having
a purple background reminds users of safe private browsing mode in regular
browsers which is a feeling that we want to recall here.
b) **Critical Messages** > We have a separate task for the browser update
flow, but I'm just introducing it here. I'm going to work deeply on it at
their respective ticket.
c) **Onboarding New Users** > The F60-like onboarding for new users will
be triggered for first-time users. Also will be persistent at the left top
icon. Content is not defined yet, but I opened a pad to work with the
comms team on it https://pad.riseup.net/p/about-tor-copy
d) **Onboarding for New Features** > Based on Firefox's UX
[https://www.mozilla.org/en-US/firefox/59.0.2/tracking-protection/start/].
This flow must be used for onboarding new features. The walkthrough style
allows us to drive the user through each feature per time and also to show
them in their context.
Try the New Circuits Display here: https://marvelapp.com/3djhfhh
Also a static version here:
https://trac.torproject.org/projects/tor/attachment/ticket/25695/25695
-about-new-feature-walkthrough.png
New users on their onboarding can trigger the features that have walk-
through tutorials. So, the call to action we have at the user onboarding
popup will trigger the specific feature walkthrough.
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201804 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Changes (by antonela):
* Attachment "25695-about-new-feature-walkthrough.png" added.
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201804 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Changes (by antonela):
* Attachment "25695-about.png" added.
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201804 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Changes (by dmr):
* cc: dmr (added)
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201804 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by antonela):
Hi! I put together the first approach for this task. I'm trying to get
into consideration all the suggestions made by the previously mentioned
tickets.
https://trac.torproject.org/projects/tor/attachment/ticket/25695/25695.png
I'd like to be on the same page with devs about the different use cases.
Using F60 onboarding is a great idea! I think we can use it.
Copy is up to creation/review.
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201804 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Changes (by antonela):
* Attachment "25695.png" added.
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201804 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by antonela):
Replying to [comment:3 cypherpunks]:
> If you want to test it in its Mozilla form download nightly and enable
it using https://searchfox.org/mozilla-
central/source/browser/extensions/onboarding/README.md#how-to-show-the-
onboarding-tour
Thanks! So useful :)
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201804 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by cypherpunks):
Related ticket: #23489
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201804 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Comment (by cypherpunks):
You can modify the onboarding system extension to your needs
https://searchfox.org/mozilla-central/source/browser/extensions/onboarding
If you want to test it in its Mozilla form download nightly and enable it
using https://searchfox.org/mozilla-
central/source/browser/extensions/onboarding/README.md#how-to-show-the-
onboarding-tour
--
Ticket URL:
Tor Bug Tracker & Wiki
Re: [tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
---+---
Reporter: isabela| Owner: antonela
Type: defect | Status: assigned
Priority: High | Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal | Resolution:
Keywords: ux-team, TorBrowserTeam201804 | Actual Points:
Parent ID: | Points:
Reviewer: |Sponsor: Sponsor17
---+---
Changes (by gk):
* keywords: ux-team => ux-team, TorBrowserTeam201804
* priority: Medium => High
--
Ticket URL:
Tor Bug Tracker & Wiki
[tor-bugs] #25695 [Applications/Tor Browser]: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an user onboard
#25695: Activity 5.1: Redesign Tor Browser homepage ("about:tor") - create an
user
onboard
--+--
Reporter: isabela | Owner: antonela
Type: defect| Status: assigned
Priority: Medium| Milestone:
Component: Applications/Tor Browser |Version:
Severity: Normal| Keywords: ux-team
Actual Points:| Parent ID:
Points:| Reviewer:
Sponsor: Sponsor17 |
--+--
'''Redesign Tor Browser homepage ("!about:tor") to inform users about
various Tor features and settings they can use to customize their
experience.'''
We are not taking advantage of the best opportunity to educate users about
Tor’s features and settings. The “!about:tor” page is the first thing a
user sees once they successfully launch Tor Browser and connect to the Tor
network. At this moment, they are ready to start browsing; therefore, it
is a great opportunity for us to build an educational moment to teach them
about Tor Browser security features and how to use them.
--
Ticket URL:
Tor Bug Tracker & Wiki
