Opened 4 years ago

Closed 4 years ago

#14838 closed enhancement (fixed)

Clearer OS X installation dialogues

Reported by: cypherpunks-duplicate Owned by: Sebastian
Priority: Medium Milestone:
Component: Webpages/Website Version:
Severity: Keywords: gatekeeper, tbb-usability-stoppoint-app, uxsprint2015, sebastian-0115-triaged, TorBrowserTeam201504, TorBrowserTeam201504R
Cc: dcf, brade, mcs Actual Points:
Parent ID: #6540 Points:
Reviewer: Sponsor:

Description

I think the screenshots would go great right under the download button
on https://www.torproject.org/download/download-easy.html.en. I am thinking of a dialogue similar to the picture attached.

think it would also be good to show how to override Gatekeeper the safe
way (Ctrl-click then Open). There are issues with people not being able to open the dmg when they first download Tor Browser since the default is a warning message which does not give the user an option to open the files.

Child Tickets

Attachments (19)

download screen.png (130.7 KB) - added by cypherpunks-duplicate 4 years ago.
Example of a download screen dialogue
tbb-install-osx-1.png (247.8 KB) - added by duncank 4 years ago.
tbb-install-osx-2.png (256.4 KB) - added by duncank 4 years ago.
tbb-install-osx-3.png (252.7 KB) - added by duncank 4 years ago.
tbb-install-osx-4.png (291.7 KB) - added by duncank 4 years ago.
tbb-install-osx-nobg-1.png (347.0 KB) - added by duncank 4 years ago.
tbb-install-osx-nobg-2.png (62.7 KB) - added by duncank 4 years ago.
tbb-install-osx-nobg-3.png (88.3 KB) - added by duncank 4 years ago.
tbb-install-osx-nobg-4.png (37.3 KB) - added by duncank 4 years ago.
0001-Add-screenshots-that-show-how-to-run-Tor-Browser-on-.patch (2.2 KB) - added by dcf 4 years ago.
tbb-macosx-step-1.png (20.3 KB) - added by dcf 4 years ago.
tbb-macosx-step-2.png (20.7 KB) - added by dcf 4 years ago.
tbb-macosx-step-3.png (14.2 KB) - added by dcf 4 years ago.
macosx-howto-1.png (200.1 KB) - added by dcf 4 years ago.
Screenshot using attachment:0001-Add-screenshots-that-show-how-to-run-Tor-Browser-on-.patch​.
0001-Add-screenshots-that-show-how-to-run-Tor-Browser-on-.2.patch (2.3 KB) - added by dcf 4 years ago.
tbb-macosx-step-1.2.png (20.8 KB) - added by dcf 4 years ago.
tbb-macosx-step-2.2.png (20.0 KB) - added by dcf 4 years ago.
tbb-macosx-step-3.2.png (13.5 KB) - added by dcf 4 years ago.
macosx-howto-2.png (211.0 KB) - added by dcf 4 years ago.

Change History (38)

Changed 4 years ago by cypherpunks-duplicate

Attachment: download screen.png added

Example of a download screen dialogue

comment:1 Changed 4 years ago by dcf

Example of a download screen dialogue

comment:2 Changed 4 years ago by dcf

Keywords: uxsprint2015 added
Summary: Clearer installation dialoguesClearer OS X installation dialogues

Changed 4 years ago by duncank

Attachment: tbb-install-osx-1.png added

Changed 4 years ago by duncank

Attachment: tbb-install-osx-2.png added

Changed 4 years ago by duncank

Attachment: tbb-install-osx-3.png added

Changed 4 years ago by duncank

Attachment: tbb-install-osx-4.png added

comment:3 Changed 4 years ago by duncank

Here is a set of screenshots from the install process. Number 3 could do with some accompanying text to explain the Ctrl-click.





comment:4 in reply to:  3 ; Changed 4 years ago by dcf

Replying to duncank:

Here is a set of screenshots from the install process. Number 3 could do with some accompanying text to explain the Ctrl-click.

Great! We can add accompanying text in the HTML.

I really like the /Applications one that shows the icon in alphabetical context.

Could you do the screenshots again without the background? Here is how to do it. Press ⌘-Shift-4, then press spacebar, then click in the window when you have a camera icon. Maybe it won't work for the one that shows the context menu. If not, then we can make it work with the backgrounds.

comment:5 Changed 4 years ago by dcf

Component: Tor BrowserWebsite
Owner: changed from tbb-team to Sebastian

I guess this belongs better in "Website" component.

comment:6 Changed 4 years ago by Sebastian

This is website, but the wording should ideally come from TB folks.

comment:7 in reply to:  6 Changed 4 years ago by dcf

Replying to Sebastian:

This is website, but the wording should ideally come from TB folks.

Yeah we'll mark it needs_review when there's a patch ready to apply to the website.

comment:8 Changed 4 years ago by Sebastian

Keywords: sebastian-0115-triaged added

great thanks

Changed 4 years ago by duncank

Attachment: tbb-install-osx-nobg-1.png added

Changed 4 years ago by duncank

Attachment: tbb-install-osx-nobg-2.png added

Changed 4 years ago by duncank

Attachment: tbb-install-osx-nobg-3.png added

Changed 4 years ago by duncank

Attachment: tbb-install-osx-nobg-4.png added

comment:9 in reply to:  4 Changed 4 years ago by duncank

Another set, uncropped and with transparent backgrounds. You were right about ⌘-Shift-4 not working on the context menu, but it was possible to stitch together a few different screenshots to get the same result.





Changed 4 years ago by dcf

Attachment: tbb-macosx-step-1.png added

Changed 4 years ago by dcf

Attachment: tbb-macosx-step-2.png added

Changed 4 years ago by dcf

Attachment: tbb-macosx-step-3.png added

comment:10 Changed 4 years ago by dcf

Here's a patch and a look at what the screenshots look like on the download page.

I scaled the screenshots down by 50% for two reasons: to make three of them fit in a row, and to reduce confusion with the real windows the user has on their screen. I think 50% is too small, though. What do we think of this look, can we improve it?

Screenshot using attachment:0001-Add-screenshots-that-show-how-to-run-Tor-Browser-on-.patch​.

comment:11 Changed 4 years ago by dcf

Keywords: TorBrowserTeam201502R added

Dear tbb-team, what do you think about adding screenshots like this to the download-easy page? What would you change about the presentation?

comment:12 Changed 4 years ago by mikeperry

This is likely a helpful improvement. But I have some comments:

  1. We need to make this more clear that these steps are ordered left-to-right. The Mendeley example clearly ordered the steps with numbered text above the graphics. We should probably do that too.
  2. If we do make this left-to-right, will it confuse Arabic and other RTL users? Can those localizations of the website reverse this order? (Do we even have any localizations of the website in RTL? the language dropdown doesn't seem to work for me)
  3. I think we should vertically center the images, if possible. The screenshot looks janky and disorienting with lots of unaligned buttons, links, graphics, and widgets all strewn about.
  4. The text "This package requires no installation. Just extract it and run" is no longer correct. Perhaps this text is why we saw some users trying to run the App directly from the DMG? We should remove this text.
  5. We should probably also remove "Read the release announcements!" string.

Changed 4 years ago by dcf

Attachment: tbb-macosx-step-1.2.png added

Changed 4 years ago by dcf

Attachment: tbb-macosx-step-2.2.png added

Changed 4 years ago by dcf

Attachment: tbb-macosx-step-3.2.png added

comment:13 in reply to:  12 Changed 4 years ago by dcf

Here is a new patch that adds numbered steps and centers the graphics.


Replying to mikeperry:

This is likely a helpful improvement. But I have some comments:

  1. We need to make this more clear that these steps are ordered left-to-right. The Mendeley example clearly ordered the steps with numbered text above the graphics. We should probably do that too.
  2. If we do make this left-to-right, will it confuse Arabic and other RTL users? Can those localizations of the website reverse this order? (Do we even have any localizations of the website in RTL? the language dropdown doesn't seem to work for me)

The web site is not localized at all, as far as I understand. For that reason I didn't worry about RTL. The language dropdown is not for the page language, it's for the bundle language.

  1. I think we should vertically center the images, if possible. The screenshot looks janky and disorienting with lots of unaligned buttons, links, graphics, and widgets all strewn about.
  2. The text "This package requires no installation. Just extract it and run" is no longer correct. Perhaps this text is why we saw some users trying to run the App directly from the DMG? We should remove this text.

I agree we should remove that text if it's misleading. I'll bet few people even notice it, though. One of the UX sprint participants even said something like, "Here's a big obvious button, there's a whole bunch of small text that I'm not going to pay attention to."

  1. We should probably also remove "Read the release announcements!" string.

I think that's outside the scope of this ticket. That string was added in a recent commit (3 days ago).
https://gitweb.torproject.org/project/web/webwml.git/commit/?id=706bc301671ea8288d205ee50b928d0d451ac982

Changed 4 years ago by dcf

Attachment: macosx-howto-2.png added

comment:14 Changed 4 years ago by mcs

Cc: brade mcs added

comment:15 Changed 4 years ago by dcf

I note that there is a similar mini-howto already at https://www.torproject.org/projects/torbrowser.html.en#macosx.

comment:16 Changed 4 years ago by mikeperry

Keywords: TorBrowserTeam201503R added; TorBrowserTeam201502R removed

comment:17 Changed 4 years ago by mikeperry

Keywords: TorBrowserTeam201504 added

comment:18 Changed 4 years ago by mikeperry

Keywords: TorBrowserTeam201504R added; TorBrowserTeam201503R removed

comment:19 Changed 4 years ago by mikeperry

Resolution: fixed
Status: newclosed

Ok, I merged this to the main download-easy page for MacOS. I also removed the text "This package requires no installation. Just extract it and run". Thanks dcf!

Note: See TracTickets for help on using tickets.