Opened 4 years ago

Closed 4 years ago

#17108 closed enhancement (fixed)

about:tor UI design improvements

Reported by: 1941211 Owned by: tbb-team
Priority: Medium Milestone:
Component: Applications/Tor Browser Version: Tor: unspecified
Severity: Normal Keywords: UI, tbb-usability, TorBrowserTeam201512R
Cc: brade, mcs, isabela Actual Points:
Parent ID: Points:
Reviewer: Sponsor:

Description

Hello,
I've been thinking about making the about:tor page more modern. The main idea was to make small but efficient improvements. Thus, only the css style-sheet has changes. Here are the suggestions :

  • #middle div.container :

Add an inner shadow (box-shadow: inset 0px 0px 3px rgba(0,0,0,0.3);) and delete the border. This makes the implantation of the divs smoother without emphasizing them. To give the impression of a band, space between the two divs needed to be reduced. I suggest to pull the inner borders to the center (changing width to 300px, padding from 10px 10px to 10px 20px and moving div.three to left: 480px). Also, align the bottom of the divs (min-height: 13.5em) for the band illusion.

  • Search bar (#sxw) :

Same idea as the middle divs of using shadow to delete the border in order to make the page smoother. But in this case, I think the search bar should be emphasized because it's one of the most important piece of the page. So I thought about deleting border-top/left/right/bottom to erase the border line, add a padding of 3px (and wider the .searchbox form to 402px to make it fits) and put a white background to the #sxw.

A screenshot of what it would looks like is attached to this ticket.

What do you think about it ?
I look forward to hearing from your reactions.

Child Tickets

Attachments (6)

aboutTor-1941211.png (77.7 KB) - added by 1941211 4 years ago.
about:tor page with the suggestions of modification applied.
Bildschirmfoto 2015-11-12 um 11.52.56 AM.png (254.2 KB) - added by arthuredelstein 4 years ago.
Bildschirmfoto 2015-11-12 um 11.55.30 AM.png (274.5 KB) - added by arthuredelstein 4 years ago.
Bildschirmfoto 2015-11-12 um 11.54.30 AM.png (251.2 KB) - added by arthuredelstein 4 years ago.
Bildschirmfoto 2015-11-12 um 11.55.06 AM.png (267.4 KB) - added by arthuredelstein 4 years ago.
about-tor-whole-new.png (47.8 KB) - added by 1941211 4 years ago.
Attatchment of comment 9 (whole new about:tor design)

Download all attachments as: .zip

Change History (17)

Changed 4 years ago by 1941211

Attachment: aboutTor-1941211.png added

about:tor page with the suggestions of modification applied.

comment:1 Changed 4 years ago by mcs

Cc: brade mcs added; tbb-team removed
Summary: UI design improvementsabout:tor UI design improvements

I will need to think about your proposed design, but please note that recently we made some changes to the HTML and CSS in ticket #16735 (those changes will be in Tor Browser 5.5a3, which will be released next week).

comment:2 Changed 4 years ago by arthuredelstein

Keywords: TorBrowserTeam201511R added
Severity: Normal
Status: newneeds_review

I had some similar thoughts about making some small tweaks to the design. Here's a patch I came up with:

https://github.com/arthuredelstein/torbutton/commit/17108

Changed 4 years ago by arthuredelstein

Changed 4 years ago by arthuredelstein

Changed 4 years ago by arthuredelstein

Changed 4 years ago by arthuredelstein

comment:3 in reply to:  2 Changed 4 years ago by arthuredelstein

Keywords: tbb-usability added

Replying to arthuredelstein:

I had some similar thoughts about making some small tweaks to the design. Here's a patch I came up with:

https://github.com/arthuredelstein/torbutton/commit/17108

(Attached images to show the results.)

comment:4 Changed 4 years ago by isabela

Cc: isabela added

comment:5 Changed 4 years ago by mcs

Status: needs_reviewneeds_revision

Kathy and I reviewed these changes. Overall, we both like the new look (cleaner, more modern). Of course someone else will have a different opinion. Here is our feedback:

  • We suggest removing the remaining font-family CSS rules that are not on the body element (there is one in the '.searchbox h4' rules and one in the #sx rules).
  • Do you think it would look better to have a thin, light border around the bubbles. Maybe 1px lightgray?
  • These four CSS rules can be removed: 'body[toron] .top h2', '.top #success2', '#middle h2', and '#middle h6'.
  • Where you have 'text-align: initial' do you mean 'text-align: start'? Or does 'initial' always mean 'start' anyway?
  • Instead of using <span style="margin-top: 20px;"> to enclose the testTorSettings <a>, can you use a <div>? Kathy and I are worried that in the future someone might remove the CSS rule that makes that <span> use display: inline-block and they might not notice that the margin-top stops working.

comment:6 Changed 4 years ago by mikeperry

Keywords: TorBrowserTeam201512R added; TorBrowserTeam201511R removed

comment:7 in reply to:  5 Changed 4 years ago by arthuredelstein

Status: needs_revisionneeds_review

Replying to mcs:

Kathy and I reviewed these changes. Overall, we both like the new look (cleaner, more modern). Of course someone else will have a different opinion. Here is our feedback:

Thanks for the review!

  • Do you think it would look better to have a thin, light border around the bubbles. Maybe 1px lightgray?

After some experimenting with this idea, I think I still like the bubbles better without a border. But if others feel strongly that they need borders I am flexible. :)

Otherwise I've taken all of your other suggestions. Here's my new version:
https://github.com/arthuredelstein/torbutton/commit/17108+1

comment:8 Changed 4 years ago by mcs

Looks good to us.
r=mcs, r=brade

comment:9 in reply to:  5 ; Changed 4 years ago by 1941211

Replying to mcs:

  • We suggest removing the remaining font-family CSS rules that are not on the body element (there is one in the '.searchbox h4' rules and one in the #sx rules).
  • These four CSS rules can be removed: 'body[toron] .top h2', '.top #success2', '#middle h2', and '#middle h6'.

I agree it is a good idea because these were not really useful.

  • Do you think it would look better to have a thin, light border around the bubbles. Maybe 1px lightgray?

I agree with arthuredelstein that the bubbles are better without a border. The contrast between the green of the page and the white background of the bubble makes the border useless.

Also, I thought about a radical different design. This one gets rid of the most informations possible to keep only what's the most important. I look forward hearing from your feedback about this whole new design (screenshot in attachment).

Changed 4 years ago by 1941211

Attachment: about-tor-whole-new.png added

Attatchment of comment 9 (whole new about:tor design)

comment:10 in reply to:  9 Changed 4 years ago by mcs

Replying to 1941211:

Also, I thought about a radical different design. This one gets rid of the most informations possible to keep only what's the most important. I look forward hearing from your feedback about this whole new design (screenshot in attachment).

The minimalist design is interesting, but it may be too minimal (at least as something people see the first time they start Tor Browser). We would also need to figure out how to present the "This browser is out of date" message as well as what the page should look like if the browser is not correctly configured for Tor. My instinct right now is to adopt the less radical changes that Arthur made and see what feedback we get.

comment:11 Changed 4 years ago by gk

Resolution: fixed
Status: needs_reviewclosed

This is commit 05c8befab9446cdd6a0bfe7a60a75849a09321da on torbutton master. Let's see how it goes in our alphas.

Note: See TracTickets for help on using tickets.