Opened 5 weeks ago

Last modified 42 hours ago

#28329 new enhancement

Design TBA+Orbot configuration UI/UX

Reported by: sysrqb Owned by: tbb-team
Priority: Very High Milestone:
Component: Applications/Tor Browser Version:
Severity: Normal Keywords: tbb-mobile, ux-team, TBA-a3, TorBrowserTeam201812
Cc: antonela, igt0, tbb-team, gk Actual Points:
Parent ID: Points:
Reviewer: Sponsor: Sponsor8

Description

I now have TBA and Orbot glued together. They co-exist, but I'm not sure how they should look or interact together. Where in the TBA app/screen should we have a button that switches to the Orbot screen? Do we want Orbot's onboarding UX or do we want our own?

Please help :)

Child Tickets

Attachments (5)

28329.png (241.4 KB) - added by antonela 4 weeks ago.
userflow.png (203.6 KB) - added by antonela 3 weeks ago.
mockups-1.1.png (369.8 KB) - added by antonela 2 weeks ago.
userflow-1.1.png (214.2 KB) - added by antonela 2 weeks ago.
mockups-1.1.2.png (371.1 KB) - added by antonela 2 weeks ago.

Download all attachments as: .zip

Change History (18)

comment:1 Changed 5 weeks ago by antonela

Keywords: ux-team added

comment:2 Changed 5 weeks ago by sysrqb

Parent ID: #28051

Adding this as a dependency of #28051, too (we can delete it later, if needed).

comment:3 Changed 5 weeks ago by gk

Keywords: TBA-a2 added

Moving on TBA-a2 radar

comment:4 Changed 5 weeks ago by gk

Priority: MediumVery High

Changed 4 weeks ago by antonela

Attachment: 28329.png added

comment:5 Changed 4 weeks ago by antonela

hello! I made a first approach to this task:

I know that the current .apk is just a glued version, but is cool to have it as a reference to think about how to improve it.

The current First Time User flow looks like

  1. intro
  2. value proposition #1
  3. bridge suggestion - [Learn More]
  4. vpn mode
  5. start tor
  • browser opens
  1. welcome
  2. privacy
  3. tor network
  4. tips
  5. onions

I drafted a first version of an improved flow. On the big picture, it includes a bridge configuration step and removed the VPN settings. Also, I merged the privacy and tor network steps from the current onboarding into this bigger flow.

https://trac.torproject.org/projects/tor/raw-attachment/ticket/28329/28329.png

I have questions for the Tor Network Settings in TBA. I see four options for config bridges at orbot now:

  • Connect directly to Tor (recommended)
  • Connect through community servers
  • Connect throught cloud servers
  • Request New Bridges.... (If all else fails)

Modo Bridge

Website
Cancel
Email

What is the plan for them? Are we going to carry all of them? Will MOAT work in TBA? Do we want to have a similar Tor Launcher UX?

Don't worry about the UI for now, let's first define how we want the user flow to be, which are requirements, and then we can go deep with screens.

comment:6 in reply to:  5 Changed 4 weeks ago by sysrqb

Replying to antonela:

hello! I made a first approach to this task:

Thanks!

I know that the current .apk is just a glued version, but is cool to have it as a reference to think about how to improve it.

I have a new version available now :)

http://sbe5fi5cka5l3fqe.onion/~sysrqb/fennec-60.3.0.en-US.android-arm_28051_1.apk
https://people.torproject.org/~sysrqb/fennec-60.3.0.en-US.android-arm_28051_1.apk

Orbot now works (or it should work, let me know if it doesn't). I removed the onboarding screens due to some coding issues, but we'll have new onboarding screens in any case. After Tor starts, the user must tap the back button to return to the browser. If the user's device is not running the newest version of Android, then they should have a notification that says Tor Browser in the drop-down list, and they can return to Orbot using that. We have a problem on the newest version of Android, so the notification isn't created and there isn't a way for the user to re-open Orbot except for killing the app and restarting it.

The current First Time User flow looks like

[snip]

I drafted a first version of an improved flow. On the big picture, it includes a bridge configuration step and removed the VPN settings. Also, I merged the privacy and tor network steps from the current onboarding into this bigger flow.

Yes, that looks good! I don't think we should say anything about the VPN mode (and we'll probably remove that in the future).

[snip]

I have questions for the Tor Network Settings in TBA. I see four options for config bridges at orbot now:

  • Connect directly to Tor (recommended)
  • Connect through community servers
  • Connect throught cloud servers
  • Request New Bridges.... (If all else fails)

Bridge Mode

Website
Cancel
Email

What is the plan for them? Are we going to carry all of them? Will MOAT work in TBA?

Yes, I don't know a reason why we wouldn't want Moat available in TBA. In fact, I think Moat provides an even better experience on mobile than on desktop. But, considering Orbot doesn't currently have support for moat, I think we should add it as a follow-up ticket for this, and we can implement it soon (but later).

Do we want to have a similar Tor Launcher UX?

I think we should use the better UX :) (whatever that is)

I think using the Tor Launcher UX is the simplest answer and it provides a consistent experience across desktop and mobile, so that is a good option. On the other hand, (saying the obvious) mobile provides a different UX than desktop, so creating a new experience that is mobile-specific may be better. I'd be happy with choosing the easy/simple option now, and we can iterate on it over the next few months.

comment:7 Changed 3 weeks ago by n8fr8

Are you just hard forking Orbot code and merging it directly into the Tor Browser repo? I thought you were going to a bit more modular approach?

This library: https://github.com/guardianproject/Tor_Onion_Proxy_Library is probably a better starting point, and something we could both collaborate on improving together. I see how using the Orbot code gives you a lot of config UI, PT's, etc quickly, but it isn't a library.

As for MOAT it is something I'm already looking into tackling with Orbot, and again, seems like it would be best implemented as a library so that other apps can utilize it.

Changed 3 weeks ago by antonela

Attachment: userflow.png added

comment:8 in reply to:  7 Changed 3 weeks ago by sysrqb

Replying to n8fr8:

Are you just hard forking Orbot code and merging it directly into the Tor Browser repo? I thought you were going to a bit more modular approach?

No, we're handling this gentler than that - see #28051. In the short term, we'll maintain a patch that we'll apply on top of the official Orbot repo. We don't want to hard-fork Orbot, but using Orbot is the fastest and "easiest" solution given the timeline we set.

This library: https://github.com/guardianproject/Tor_Onion_Proxy_Library is probably a better starting point, and something we could both collaborate on improving together. I see how using the Orbot code gives you a lot of config UI, PT's, etc quickly, but it isn't a library.

We'll most likely use Tor Onion Proxy Library in the future, but that depends on #27609 - and we didn't have time for that within the last two months. I believe we all agree that Orbot (as it is today), is not the long-term answer to our problem of bundling Tor with Tor Browser for Android.

As for MOAT it is something I'm already looking into tackling with Orbot, and again, seems like it would be best implemented as a library so that other apps can utilize it.

Yes, that'd be great. I was thinking we can coordinate this and collaborate, and make sure we're not duplicating effort in this area - but the last month has been focused on building a working MVP where the result isn't worse than TBA and Orbot (separately). After this release, we'll start looking at #27609 and work toward using that instead of Orbot.

Changed 2 weeks ago by antonela

Attachment: mockups-1.1.png added

comment:9 Changed 2 weeks ago by antonela

By aiming for the most minimal orbot integration for this release, I:

  • updated the userflow. We are not interacting with Bridges/PT yet.

https://trac.torproject.org/projects/tor/raw-attachment/ticket/28329/userflow-1.1.png

  • made an approach for the Connecting... screen
  • suggested a layout for Tor Network Settings

https://trac.torproject.org/projects/tor/raw-attachment/ticket/28329/mockups-1.1.2.png

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

Changed 2 weeks ago by antonela

Attachment: userflow-1.1.png added

Changed 2 weeks ago by antonela

Attachment: mockups-1.1.2.png added

comment:10 Changed 13 days ago by gk

Parent ID: #28051

Unparenting so we can close #28051.

comment:11 Changed 6 days ago by gk

Keywords: TorBrowserTeam201812 added

comment:12 Changed 44 hours ago by gk

Keywords: TBA-a3 added; TBA-a2 removed

comment:13 Changed 42 hours ago by gk

Sponsor: Sponsor8

Adding Sponsor8 tag.

Note: See TracTickets for help on using tickets.