[tbb-bugs] #28329 [Applications/Tor Browser]: Design TBA+Orbot configuration UI/UX

[Tor Bug Tracker & Wiki]

#28329: Design TBA+Orbot configuration UI/UX
-------------------------------------------------+-------------------------
 Reporter:  sysrqb                               |          Owner:  tbb-
                                                 |  team
     Type:  enhancement                          |         Status:  new
 Priority:  Very High                            |      Milestone:
Component:  Applications/Tor Browser             |        Version:
 Severity:  Normal                               |     Resolution:
 Keywords:  tbb-mobile, ux-team, TBA-a3,         |  Actual Points:
  TorBrowserTeam201812                           |
Parent ID:                                       |         Points:
 Reviewer:                                       |        Sponsor:
                                                 |  Sponsor8
-------------------------------------------------+-------------------------

Comment (by antonela):

 Hi folks,

 I have been working on the Connecting flow and also on Network Settings.

 As we signed, this version will follow this user flow
 https://trac.torproject.org/projects/tor/raw-
 attachment/ticket/28329/userflow-1.1.png

 Essentially, we will still have a Connect button.


 [[Image(https://trac.torproject.org/projects/tor/raw-
 attachment/ticket/28329/mockups-3.png, 700px)]]

 `1.0`
 It is the first screen when TBA start. The Connect button will start the
 bootstrapping. Users need to trigger it manually. The settings icon at the
 top right will go to Network Settings.

 `2.0`
 Once the user taps to connect, the icon will get animated and we will show
 the bootstrapping messages. We want advanced users to be able to see/copy
 tor logs. We will expose it by swiping to the left. If Tor fails, we will
 move users to the Settings Network screen.

 For the unsuccessful scenario, we can take different paths:
      a - Have a retry button
      b - Suggest users to move to the Network Setting screen to config a
 Bridge
      c - Move the user to the Network Setting screen with a message about
 what failed and some encouragement on how to fix it.

 Do we have data about why bootstrapping fail in mobiles? Which are the
 most common failing cases?


 `3.0`
 If users arrive here after a failed connection, the copy at the top will
 change to encourage users to take action to fix it. I made the first
 approach on this screen. My idea is to divide this section into two:
 Bridges and Advanced Settings. With this split, users are lead to tap the
 first option instead of start exploring options that they don't know what
 are.

 ---------

 **Network Settings**

 Since we want to have a balanced experience compared with desktop, I
 include the same options we have on the desktop. We'll not have moat for
 this version, so I skipped it.

 The user flow is the same for each option. Users can switch on/off each
 setting, and then we move them to a second screen where the configuration
 is made.

 When the user returns to the main network setting screen, they can see in
 the description an status of the changes they made. If users want to
 change it, they can tap the entire row.

 The copy is up to review. Material Design has excellent suggestions about
 how to approach this copy https://material.io/design/platform-guidance
 /android-settings.html

 [[Image(https://trac.torproject.org/projects/tor/raw-
 attachment/ticket/28329/network-settings.png, 700px)]]

--
Ticket URL: <https://trac.torproject.org/projects/tor/ticket/28329#comment:16>
Tor Bug Tracker & Wiki <https://trac.torproject.org/>
The Tor Project: anonymity online