Opened 4 months ago

Last modified 8 days ago

#25693 assigned defect

Activity 1.2: Make sure Firefox Photon UI works with our style guidelines

Reported by: isabela Owned by: antonela
Priority: Very High Milestone:
Component: Applications/Tor Browser Version:
Severity: Normal Keywords: ux-team, ff60-esr, TorBrowserTeam201807
Cc: tbb-team, steph Actual Points:
Parent ID: Points:
Reviewer: Sponsor: Sponsor17

Description

Firefox Photon UI is part of upcoming changes to the Firefox ESR Browser, upon which Tor Browser is based.  This activity will make sure that we review it to make sure it follows our design guidelines.

https://design.firefox.com/photon/welcome.html

Child Tickets

Attachments (11)

25693-TorBrowser Icon.png (2.2 MB) - added by antonela 6 weeks ago.
25693-TorBrowser UI.png (284.2 KB) - added by antonela 6 weeks ago.
25693-TorBrowser Installer.png (281.3 KB) - added by antonela 6 weeks ago.
torbrowser-esr60-with.png (63.8 KB) - added by cypherpunks 6 weeks ago.
torbrowser-esr60-without.png (78.3 KB) - added by cypherpunks 6 weeks ago.
TBB8-UI.png (252.8 KB) - added by antonela 6 weeks ago.
0.2-25693-TorBrowser UI.png (94.7 KB) - added by antonela 4 weeks ago.
Tor|Browser.zip (55.2 KB) - added by antonela 4 weeks ago.
0.2-25693-TorBrowser Installer.png (231.1 KB) - added by antonela 4 weeks ago.
Tor Button Icon.zip (18.4 KB) - added by antonela 4 weeks ago.
pbm.png (19.7 KB) - added by arthuredelstein 8 days ago.

Change History (38)

comment:1 Changed 4 months ago by isabela

Keywords: ux-team added

comment:2 Changed 4 months ago by gk

Cc: tbb-team added

Ccing the tbb-team.

comment:3 Changed 2 months ago by gk

Priority: MediumHigh

comment:4 Changed 6 weeks ago by antonela

This activity scope includes this related tickets:

#25151 - Update installation brand
#21183 - Making toolbar icons visible
#25697 - Onion icon for Tor Button
#25023 - Different icon from Stable and Alpha, Nigthly versions
#23547 - Toolbar UI update
#25649 - UI update
#23151 - UI Toolbar update

Last edited 6 weeks ago by antonela (previous) (diff)

Changed 6 weeks ago by antonela

Attachment: 25693-TorBrowser Icon.png added

Changed 6 weeks ago by antonela

Attachment: 25693-TorBrowser UI.png added

comment:5 Changed 6 weeks ago by cypherpunks

Antonela, please consider #23547 as well for the Tor Browser UI. Thanks!

Changed 6 weeks ago by antonela

comment:6 Changed 6 weeks ago by antonela

Hi! I have been working on this activity. The comment above includes some different deliverables which I'm trying to achieve here:

  • Tor Browser Icon - Brand Update

Icon.png(https://trac.torproject.org/projects/tor/attachment/ticket/25693/25693-TorBrowser%20Icon.png)

I made some options for the new icon. This is the first idea and for sure could change based on your feedback. I used the same onion icon we have now. What do you think?

  • Tor Browser Installer + Launcher - Brand Update

UI.png(https://trac.torproject.org/projects/tor/attachment/ticket/25693/25693-TorBrowser%20UI.png)

Here I just updated the TorBrowser logos. Could we replace them? Which format do you need the assets? .svg/.png?

  • Tor Browser - Tor Button Icon

UI.png(https://trac.torproject.org/projects/tor/attachment/ticket/25693/25693-TorBrowser%20UI.png)

This is a proposal to update the outdated onion we have right now as a Tor Button.

I'm aware of the problem we have with the onion icon working pretty bad at small sizes. And how it looks like a bomb too. We don't want it. The Community and the UX team are working together to promote a design sprint during Mexico Dev Meeting, so we can have a reliable option for using in all the places Tor's icon should live!

Feel free to comment, I'd like to iterate this ticket this week and next. Thanks!

comment:7 in reply to:  5 ; Changed 6 weeks ago by antonela

Replying to cypherpunks:

Antonela, please consider #23547 as well for the Tor Browser UI. Thanks!

Is a great ticket! Thanks! We could keep the URL Bar centered and flexible, with a minimum width of 550px. It has room for a long certificate name and a V3.

comment:8 Changed 6 weeks ago by gk

Keywords: TorBrowserTeam201806 ff60-esr added
Priority: HighVery High

comment:9 in reply to:  7 ; Changed 6 weeks ago by cypherpunks

Replying to antonela:

Is a great ticket! Thanks! We could keep the URL Bar centered and flexible, with a minimum width of 550px. It has room for a long certificate name and a V3.

It's not just about the cert but also about subdomains and room for the rest. Here's my example test (using the default flexible space, the "compact" density, and placing HTTPS Everywhere near the menu in place of the SecuritySlider in your design, all using Menu>Customize): [By the way you forgot to add the reload button in the design ;-]



Changed 6 weeks ago by cypherpunks

Attachment: torbrowser-esr60-with.png added

Changed 6 weeks ago by cypherpunks

Changed 6 weeks ago by antonela

Attachment: TBB8-UI.png added

comment:10 in reply to:  9 ; Changed 6 weeks ago by antonela

We just briefly discussed how other icons should be placed at the top nav during Rome Dev Meeting. I didn't forget the reload icon; we have by FF60 default a bunch of other icons, and I didn't want to make noise discussing other topics at this ticket.

But, since you mentioned it, maybe now is a good time to talk about them. I made two mocks, A and B.

https://trac.torproject.org/projects/tor/attachment/ticket/25693/TBB8-UI.png

A moves all the menu icons to the right side, leaving the left side for browsing control icons. B keeps the Tor Button at the left side, while the security indicator and the hamburger menu keeps at the right side.

What do you think?

Replying to cypherpunks:

Replying to antonela:

Is a great ticket! Thanks! We could keep the URL Bar centered and flexible, with a minimum width of 550px. It has room for a long certificate name and a V3.

It's not just about the cert but also about subdomains and room for the rest. Here's my example test (using the default flexible space, the "compact" density, and placing HTTPS Everywhere near the menu in place of the SecuritySlider in your design, all using Menu>Customize): [By the way you forgot to add the reload button in the design ;-]

comment:11 in reply to:  10 ; Changed 6 weeks ago by gk

Replying to antonela:

We just briefly discussed how other icons should be placed at the top nav during Rome Dev Meeting. I didn't forget the reload icon; we have by FF60 default a bunch of other icons, and I didn't want to make noise discussing other topics at this ticket.

But, since you mentioned it, maybe now is a good time to talk about them. I made two mocks, A and B.

https://trac.torproject.org/projects/tor/attachment/ticket/25693/TBB8-UI.png

A moves all the menu icons to the right side, leaving the left side for browsing control icons. B keeps the Tor Button at the left side, while the security indicator and the hamburger menu keeps at the right side.

What do you think?

B) seems good to me. If we want to discourage users clicking on the onion button and change settings behind it we should do A), though. I am fine with either, I think.

comment:12 in reply to:  11 Changed 6 weeks ago by cypherpunks

Replying to gk:

B) seems good to me. If we want to discourage users clicking on the onion button and change settings behind it we should do A), though. I am fine with either, I think.

I agree as well.

comment:13 in reply to:  6 ; Changed 6 weeks ago by gk

Replying to antonela:

Hi! I have been working on this activity. The comment above includes some different deliverables which I'm trying to achieve here:

  • Tor Browser Icon - Brand Update

Icon.png(https://trac.torproject.org/projects/tor/attachment/ticket/25693/25693-TorBrowser%20Icon.png)

I made some options for the new icon. This is the first idea and for sure could change based on your feedback. I used the same onion icon we have now. What do you think?

  • Tor Browser Installer + Launcher - Brand Update

UI.png(https://trac.torproject.org/projects/tor/attachment/ticket/25693/25693-TorBrowser%20UI.png)

Here I just updated the TorBrowser logos. Could we replace them? Which format do you need the assets? .svg/.png?

I think .png works definitely but I have to check how it looks like with .svg. But my assumption would be that that's okay as well.

  • Tor Browser - Tor Button Icon

UI.png(https://trac.torproject.org/projects/tor/attachment/ticket/25693/25693-TorBrowser%20UI.png)

This is a proposal to update the outdated onion we have right now as a Tor Button.

I'm aware of the problem we have with the onion icon working pretty bad at small sizes. And how it looks like a bomb too. We don't want it. The Community and the UX team are working together to promote a design sprint during Mexico Dev Meeting, so we can have a reliable option for using in all the places Tor's icon should live!

Feel free to comment, I'd like to iterate this ticket this week and next. Thanks!

Could you explain how you arrived at the different colors for the nightly/alpha/stable? There is not much purple as we know it and no green as we know it anymore. What's e.g. the reasoning for that?

Last edited 6 weeks ago by gk (previous) (diff)

comment:14 Changed 6 weeks ago by antonela

Could you explain how you arrived at the different colors for the nightly/alpha/stable? There is not much purple as we know it and no green as we know it anymore. What's e.g. the reasoning for that?

Thanks, GeKo! I'm trying to start a conversation. The method we can use to build a new brand could take multiple ways. The process is very similar if we think about product icons. For example, Mozilla did their last rebrand with community's ideas[1]. But just one designer and an outsourced studio made it at Wikipedia[2]. I really believe that we should involve our community to work on it. To facilitate this collab, we are working to have a design sprint in Mexico to work on it. We are going to have a bunch of designers and will be useful and fun to outline the first ideas about it together. Our exploration has some time under the hoods; you can sneak peek at #25763.

That said and since we have to release before it, we could 1) keep the same icon we have right now; or 2) try to use the same onion shape everywhere, so the brand starts to take consistency.

Running for 2), I started to try some containers using the onion icon we already have. It works pretty bad on small sizes but at big sizes is quite recognizable. Also, this container idea is part of the current Brand Assets[3].

The violet color is becoming a default to talk about privacy and is our brand color [4]. I think we can explore different quality (hue/saturation) of purples and the gradients were an experiment for that. You mentioned the greens, do you think it worth to explore some options with the green color? I'd love to try it.

I hope it helps to get a better idea of the principal aim here and gets more people involved :)

[1] https://blog.mozilla.org/opendesign/progress-in-the-making/
[2] https://medium.com/freely-sharing-the-sum-of-all-knowledge/refining-logos-of-wikimedia-projects-a-brand-exercise-190ae689f6aa
[3] https://github.com/TheTorProject/tor-media/blob/master/Onion%20Icon/Onion_Negative_Black_Background_Icon.svg
[4] https://design.firefox.com/photon/visuals/color.html#purple

comment:15 in reply to:  13 Changed 5 weeks ago by gk

Replying to gk:

Replying to antonela:

Here I just updated the TorBrowser logos. Could we replace them? Which format do you need the assets? .svg/.png?

I think .png works definitely but I have to check how it looks like with .svg. But my assumption would be that that's okay as well.

If you look at https://dxr.mozilla.org/mozilla-central/source/browser/branding/official you'll see that the default* icons are all .png. We want to replace those. I think the easiest would be using .png in this case, too.

comment:16 in reply to:  14 Changed 5 weeks ago by gk

Replying to antonela:

Could you explain how you arrived at the different colors for the nightly/alpha/stable? There is not much purple as we know it and no green as we know it anymore. What's e.g. the reasoning for that?

Thanks, GeKo! I'm trying to start a conversation. The method we can use to build a new brand could take multiple ways. The process is very similar if we think about product icons. For example, Mozilla did their last rebrand with community's ideas[1]. But just one designer and an outsourced studio made it at Wikipedia[2]. I really believe that we should involve our community to work on it. To facilitate this collab, we are working to have a design sprint in Mexico to work on it. We are going to have a bunch of designers and will be useful and fun to outline the first ideas about it together. Our exploration has some time under the hoods; you can sneak peek at #25763.

That said and since we have to release before it, we could 1) keep the same icon we have right now; or 2) try to use the same onion shape everywhere, so the brand starts to take consistency.

Running for 2), I started to try some containers using the onion icon we already have. It works pretty bad on small sizes but at big sizes is quite recognizable. Also, this container idea is part of the current Brand Assets[3].

The violet color is becoming a default to talk about privacy and is our brand color [4]. I think we can explore different quality (hue/saturation) of purples and the gradients were an experiment for that. You mentioned the greens, do you think it worth to explore some options with the green color? I'd love to try it.

I hope it helps to get a better idea of the principal aim here and gets more people involved :)

It does, thanks, and thanks for the links. I have long known and felt that purple is the color for privacy. :) If we could get the new purple close to the purple we have right now (or that we plan to have in the future assuming it won't go away) that seems to me a good thing. And getting the impression that we are "moving" towards it from the nightly over the alpha is another thing I like.

comment:17 Changed 5 weeks ago by steph

Cc: steph added

Changed 4 weeks ago by antonela

Attachment: 0.2-25693-TorBrowser UI.png added

Changed 4 weeks ago by antonela

Attachment: Tor|Browser.zip added

comment:19 Changed 4 weeks ago by antonela

For Installer and Launcher windows, could we update the Tor|Browser icon?

Assets attached here, please clean metadata of images and let me know if is needed in another format.

https://trac.torproject.org/projects/tor/attachment/ticket/25693/0.2-25693-TorBrowser%20Installer.png

https://trac.torproject.org/projects/tor/attachment/ticket/25693/Tor%7CBrowser.zip

Last edited 4 weeks ago by antonela (previous) (diff)

Changed 4 weeks ago by antonela

Changed 4 weeks ago by antonela

Attachment: Tor Button Icon.zip added

comment:20 Changed 2 weeks ago by gk

Some feedback for the new Torbutton icon:

1) https://blog.torproject.org/comment/275968#comment-275968 (icon looks tiny and slightly pixelated on Windows)

2) https://blog.torproject.org/comment/275914#comment-275914 (grey icon disappears in peripheral vision, can we get some color?)

comment:21 Changed 2 weeks ago by gk

Keywords: TorBrowserTeam201807 added; TorBrowserTeam201806 removed

Moving first batch of tickets to July 2018

comment:22 Changed 2 weeks ago by gk

Resolved #23649 as duplicate.

comment:23 in reply to:  20 Changed 2 weeks ago by Dbryrtfbcbhgf

2) https://blog.torproject.org/comment/275914#comment-275914 (grey icon disappears in peripheral vision, can we get some color?)

Changing the middle of the Onion's color may solve this issue.
https://s22.postimg.cc/tsv5lenu9/Screen_Shot_2018-07-05_at_8.41.04_PM.png

comment:24 in reply to:  20 ; Changed 10 days ago by antonela

1) I think it got solved with SVG assets.

2) Let's think together about this comment/feedback before deciding what we need to improve based on that:

"I miss my green onions!" - This is emotional and personal. In general, we the users are resistant to change. And is okey. We could improve the way we present those changes to be clear about the benefits it carries for them. The onboarding seems the right moment in the user flow to do it. We are working on it.

"Panicking all the time that my browser has slipped out of TOR." - Interesting, Do exist any particular case where Tor Browser get 'disconnected' to Tor and continue working?

"Can you change the gray onion icon to a colored one? It disappears in my peripheral vision *if its the same as everything around it.*" - Well, consistency is a fundamental design principle for usable user interfaces. Having our Tor Button Icon following Photon Design's UI is the way to achieve this consistency. Here is a great article about it[0]. If we want for any reason to have the Tor Button Icon highlighted in the top Nav, then we can think about colors. AFAIK, we have plans to remove it soon.

[0] https://www.uxmatters.com/mt/archives/2010/07/achieving-and-balancing-consistency-in-user-interface-design.php

Replying to gk:

Some feedback for the new Torbutton icon:

1) https://blog.torproject.org/comment/275968#comment-275968 (icon looks tiny and slightly pixelated on Windows)

2) https://blog.torproject.org/comment/275914#comment-275914 (grey icon disappears in peripheral vision, can we get some color?)

Changed 8 days ago by arthuredelstein

Attachment: pbm.png added

comment:25 in reply to:  24 ; Changed 8 days ago by arthuredelstein

Replying to antonela:

Hi Antonela -- thanks for clarifying the Photo UI principles! I'm so excited that we are giving Tor Browser a much sleeker look.

"I miss my green onions!"
"Panicking all the time that my browser has slipped out of TOR."
"Can you change the gray onion icon to a colored one? It disappears in my peripheral vision *if its the same as everything around it.*"

I think part of the concern expressed in these comments has to do with users' need to quickly visually identify Tor Browser windows. Tor Browser looks a lot like other browsers (especially Firefox!). Users who are using both Tor Browser (for private browsing) and another browser (for non-private browsing) need to know which browser they are using at all times. So a strong, colorful visual indicator (like the previous green onion button) is very helpful.

Firefox itself uses a similar visual indicator to distinguish normal windows and Private Browsing Windows:


So it would be good if we had some kind of easy-to-see indicator also, even after the onion button is completely removed. I can think of a couple of approaches:

  1. An onion in a circle where the Private Browsing mode eyemask icon appears in Firefox PB windows.
  2. A Tor-Browser specific theme that would make Tor Browser visually distinct.

We could probably implement the first approach quickly. The second approach could be more fun and also provide brand differentiation -- we could implement that over the longer term. What do you think?

comment:26 in reply to:  25 ; Changed 8 days ago by antonela

Replying to arthuredelstein:

I think part of the concern expressed in these comments has to do with users' need to quickly visually identify Tor Browser windows. Tor Browser looks a lot like other browsers (especially Firefox!). Users who are using both Tor Browser (for private browsing) and another browser (for non-private browsing) need to know which browser they are using at all times. So a strong, colorful visual indicator (like the previous green onion button) is very helpful.

YES! 100% agreed.

  1. An onion in a circle where the Private Browsing mode eyemask icon appears in Firefox PB windows.
  2. A Tor-Browser specific theme that would make Tor Browser visually distinct.

I like both. It is plausible doing 1 first and 2 after. I'd love to work in a specific Tor theme!. I don't think this fit for our current sponsor scope tho. But I see it doable.

comment:27 in reply to:  26 Changed 8 days ago by arthuredelstein

Replying to antonela:

Replying to arthuredelstein:

I think part of the concern expressed in these comments has to do with users' need to quickly visually identify Tor Browser windows. Tor Browser looks a lot like other browsers (especially Firefox!). Users who are using both Tor Browser (for private browsing) and another browser (for non-private browsing) need to know which browser they are using at all times. So a strong, colorful visual indicator (like the previous green onion button) is very helpful.

YES! 100% agreed.

  1. An onion in a circle where the Private Browsing mode eyemask icon appears in Firefox PB windows.
  2. A Tor-Browser specific theme that would make Tor Browser visually distinct.

I like both. It is plausible doing 1 first and 2 after.

Great idea! I opened #26765 for approach 1.

I'd love to work in a specific Tor theme!. I don't think this fit for our current sponsor scope tho. But I see it doable.

Yay! There's an old ticket here with an interesting discussion: #10399. But we can open a new ticket as needed.

Note: See TracTickets for help on using tickets.