Opened 6 weeks ago

Last modified 4 days ago

#32324 new defect

Introduce Letterboxing to users

Reported by: antonela Owned by: tbb-team
Priority: Medium Milestone:
Component: Applications/Tor Browser Version:
Severity: Normal Keywords: ux-team, tbb-9.0-issues, TorBrowserTeam201912
Cc: tom Actual Points:
Parent ID: Points:
Reviewer: Sponsor:

Description

We enabled letterboxing by default in TB9.0, and some users were confused about it.

https://blog.torproject.org/comment/284569#comment-284569
https://blog.torproject.org/comment/284575#comment-284575

This ticket aims to collect the efforts to explain to users what this feature does and why it is relevant.

Child Tickets

TicketStatusOwnerSummaryComponent
#32325newtbb-teamAllow Letterboxing opt-in/outApplications/Tor Browser

Attachments (3)

tor-letterboxing.png (106.0 KB) - added by nah 3 weeks ago.
scrolling bar
32324.png (1.3 MB) - added by antonela 3 weeks ago.
Captura de Pantalla 2019-11-25 a la(s) 2.23.23 p. m..png (733.0 KB) - added by antonela 2 weeks ago.

Change History (18)

comment:1 Changed 6 weeks ago by antonela

Cc: ux-team removed
Keywords: ux-team added

comment:2 Changed 6 weeks ago by tom

Cc: tom added

comment:3 Changed 6 weeks ago by antonela

Keywords: tbb-9.0-issues added

comment:4 Changed 5 weeks ago by sysrqb

Keywords: TorBrowserTeam201912 added

comment:5 Changed 3 weeks ago by nah

I just made step-by-step on the Letterboxing (with the current and alpha Tor version) and when I was browsing, I got as confused as the other users. When I went to #32325 and I was relief to see I could disable Letterboxing. TBH, even though I understand the security reasons to use it, it's kinda annoying to have a scrolling bar during the whole browsing (I'm attaching a printscreen).

However, I think having an onboarding (or a Gif /me loves gif) explaining the screen fingerprint and how Letterboxing avoids it, would make a difference.

Example:::

WHAT DOES YOUR SCREEN TELL ABOUT YOU?

FINGERPRINT
measure - model number - review specifications of your screen
--
Now you don't have to resize your screen, with the Letterboxing every screen has the same specifications
--
We don't recommend, but you can disable Letterboxing on your config.

Changed 3 weeks ago by nah

Attachment: tor-letterboxing.png added

scrolling bar

comment:6 Changed 3 weeks ago by sajolida

Maybe it would be possible to have some just-in-time help here and make this information available right from the letter boxing gray area? Maybe making the whole gray area clickable and pointing to some doc or having a (?) icon somewhere in it, etc.

comment:7 Changed 3 weeks ago by pospeselr

So having the whole grey area clickable would probably suck from a UX standpoint (think miss-clicks when trying to use the scrollbar launching new tabs). However, an unobtrusive but visible hep link that says something like '<HELP ICON> What is Letterboxing?' in the bottom left/right of the gutter could be good?

What do you think ux-team?

comment:8 Changed 3 weeks ago by antonela

thanks y'all for the useful comments!

Yes, i agree. Having the grey area clickable is confusing, and we want to make sure that the grey area is not more annoying than what already it is.

I think the (?) icon idea is our best option now. I've made some mocks. We can discuss them during our next meeting with the entire team.

I'm using the default Help Photon icon. Our best explainer now lives at https://support.torproject.org/tbb/maximized-torbrowser-window/. Let's link there.

For the implementation, let's make sure that we are using a context-fill icon so we have a proper light filling when dark themes are enabled and vice-versa.

Should we show this icon forever? Perhaps, we can remove it after the first click.

Changed 3 weeks ago by antonela

Attachment: 32324.png added

comment:9 Changed 2 weeks ago by arma

I just closed #32587 as a duplicate of this ticket (another confused and concerned user).

comment:10 in reply to:  8 ; Changed 2 weeks ago by tom

Replying to antonela:

I think the (?) icon idea is our best option now. I've made some mocks. We can discuss them during our next meeting with the entire team.

One problem is that if the letterboxing width is not very large, there won't be room for the icon to show up. Users with that size would never see it.

It could move to the bottom (eg. under the web content in the letterboxed area) if there isn't width, but same problem: what if there isn't width *or* height? (Although since the content is now stuck to the top instead of floating, there will always be more width than height.)

comment:11 in reply to:  10 ; Changed 2 weeks ago by antonela

Replying to tom:

what if there isn't width *or* height?

Are you referring to the situations where the letterboxing area is less than the width of the icon? I've thought that it is just fine to don't show an icon if the letterboxing area is not shown, even if it is enabled.

Still, we need to decide what to do in margins smaller than 14px(?), which is the size of the small icon.

comment:12 in reply to:  11 Changed 2 weeks ago by tom

Replying to antonela:

Replying to tom:

what if there isn't width *or* height?

Are you referring to the situations where the letterboxing area is less than the width of the icon?

Yup

I've thought that it is just fine to don't show an icon if the letterboxing area is not shown, even if it is enabled.

The area might be shown, it might just be small. Like 5 or 6 pixels is too small an area for the icon; but thick enough that someone might wonder what the heck that is. But you're right that the smaller the area, the less likely it is that someone would notice...

comment:13 Changed 2 weeks ago by antonela

Yep. I attached a screenshot of this scenario.

The easy-peasy solution is setting up letterboxing to don't go smaller than x px. But I'm sure missing something :)

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

comment:14 in reply to:  13 Changed 2 weeks ago by tom

Replying to antonela:

The easy-peasy solution is setting up letterboxing to don't go smaller than x px. But I'm sure missing something :)

That wouldn't really be possible unless I'm not thinking of something... You have to support the full range of sizes so letterboxing works effectively....

comment:15 Changed 4 days ago by Thorin

Just throwing an idea out there which could cover a few items, including this one.

If you look at https://ghacksuserjs.github.io/TorZillaPrint/TorZillaPrint.html, I added notation to the inner window measurement (which updates in real time) which provides red or green [LB] and [RFP New Window] notation

  • i.e if the window is at 200's width and 100`s height capped at 1000, then RFP New Window is green, and same for LB based on the 50, 100, 200 pixel stepping. Note: if zoom is not 100%, I change to an orange notation.

What if we use a toolbar button. I realize we don't want to waste real estate (we're capped at 1000px wide) and we already have the slider and new identity (but we did take away the No Script and HTTPS-Everywhere icons, by default).

The button could present three states: for lack of better words red, amber, grey/neutral

  • [a] red: new window is out, LB is off (just check the pref)
  • [b] amber: new window is out, LB is on
  • [c] neutral: new window is good (LB doesn't apply since LB's steps fit new windows)

When clicking the button, it's panel would always provide a very short description and a learn more link. And based on the state below, it could provide extra info

  • in [a] we can recommend that letterboxing be used and link to the letterboxing UI
  • in [a] and [b] we could provide an action to resize to the a default new window (see #16364)

In onboarding we could can point at the button

Three possible issues, not insurmountable

  • 1. Users who opt in to turn off letterboxing via the UI (when it lands) might also want to "never remind me about this again" i.e not be "annoyed/distracted" by the situation in [a]
  • 2. handling zooming, which is per tab. Switching between a zoomed and non-zoomed tabs would need to be taken into account. I assume core code can easily still get the non-zoomed measurements
  • 3. in a default TB, it would be grey (unless resized) and not actually highlight LBing to new users or new installs. We can do that in onboarding (but that wouldn't be there forever), so we can also track if the button has ever be clicked, and when in mode [c], if never clicked then apply something like an overlay of a bouncing green dot.

This could not only be used to highlight/introduce LBing, but also educate users not to deviate from new window sizes (depending on their threat model in the learn more link), and be used for dual purposes such as #16364.

Last edited 4 days ago by Thorin (previous) (diff)
Note: See TracTickets for help on using tickets.