... | ... | @@ -2,11 +2,11 @@ |
|
|
|
|
|
= Designing OONI UI =
|
|
|
|
|
|
[https://ooni.torproject.org/ OONI] detects censorship, surveillance, and traffic manipulation on the internet.
|
|
|
[OONI](https://ooni.torproject.org/) detects censorship, surveillance, and traffic manipulation on the internet.
|
|
|
|
|
|
Mac OS and Linux users can run [https://github.com/TheTorProject/ooni-probe/ ooniprobe] via the command line or via OONI's web UI. Alternatively, users can run ooniprobe through its [https://ooni.torproject.org/install/lepidopter/ distribution for Raspberry Pis].
|
|
|
Mac OS and Linux users can run [ooniprobe](https://github.com/TheTorProject/ooni-probe/) via the command line or via OONI's web UI. Alternatively, users can run ooniprobe through its [distribution for Raspberry Pis](https://ooni.torproject.org/install/lepidopter/).
|
|
|
|
|
|
Installation instructions can be found [https://ooni.torproject.org/install/ here].
|
|
|
Installation instructions can be found [here](https://ooni.torproject.org/install/).
|
|
|
|
|
|
This project improves on web and mobile UI designs to ready them for launch.
|
|
|
|
... | ... | @@ -22,10 +22,10 @@ Timeline: |
|
|
* Dec 2016: usability audit, identifying user personas, designing features, interviewing users
|
|
|
* Jan 2016: deliver a web and mobile UI with appropriate changes
|
|
|
|
|
|
A more detailed timeline is kept and updated [https://docs.google.com/document/d/1KHsqVNSkyjKsRo-zdh7tYjnwWHsj7Xra4fndN98Y70k/edit?usp=sharing here].
|
|
|
A more detailed timeline is kept and updated [here](https://docs.google.com/document/d/1KHsqVNSkyjKsRo-zdh7tYjnwWHsj7Xra4fndN98Y70k/edit?usp=sharing).
|
|
|
|
|
|
|
|
|
=== Goals ===
|
|
|
### Goals
|
|
|
|
|
|
Having a good user interface that on one hand incentives users to run ooniprobe tests, but at the same time ensures they are not putting themselves at risk by not understanding what this entails.
|
|
|
We also want to make it easier to people to understand what OONI does and what they are contributing to by running measurements.
|
... | ... | @@ -55,18 +55,18 @@ in redesigning metrics (https://trac.torproject.org/projects/tor/wiki/doc/UX/Met |
|
|
|
|
|
=== Quick Links ===
|
|
|
|
|
|
* [http://demo.probe.ooni.io/client/ OONI web demo site]
|
|
|
* [https://github.com/TheTorProject/ooni-wui/issues/4#issuecomment-252314702 original web UI]
|
|
|
* [https://github.com/measurement-kit/ooniprobe-ios/issues/43 original mobile UI]
|
|
|
* [https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/OoniUiDesign/ooniprobe%20web%20audit.pdf web UI audit]
|
|
|
* [https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/OoniUiDesign/ooniprobe%20mobile%20audit.pdf mobile UI audit]
|
|
|
* [https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/OoniUiDesign/OONI%20Redesigned%20Web%20UI%20FINAL.pdf final web UI]
|
|
|
* [https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/OoniUiDesign/OONI%20Redesigned%20Mobile%20UI%20FINAL.pdf final mobile UI]
|
|
|
* [OONI web demo site](http://demo.probe.ooni.io/client/)
|
|
|
* [original web UI](https://github.com/TheTorProject/ooni-wui/issues/4#issuecomment-252314702)
|
|
|
* [original mobile UI](https://github.com/measurement-kit/ooniprobe-ios/issues/43)
|
|
|
* [web UI audit](https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/OoniUiDesign/ooniprobe%20web%20audit.pdf)
|
|
|
* [mobile UI audit](https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/OoniUiDesign/ooniprobe%20mobile%20audit.pdf)
|
|
|
* [final web UI](https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/OoniUiDesign/OONI%20Redesigned%20Web%20UI%20FINAL.pdf)
|
|
|
* [final mobile UI](https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/OoniUiDesign/OONI%20Redesigned%20Mobile%20UI%20FINAL.pdf)
|
|
|
|
|
|
----
|
|
|
= Background =
|
|
|
|
|
|
=== Communicating risks to users ===
|
|
|
### Communicating risks to users
|
|
|
|
|
|
OONI's software tests, called ooniprobe, serve as an investigatory tool for examining and uncovering internet censorship. As such, the use of ooniprobe can be associated with different types of risks, depending on the country that the tests are being run from.
|
|
|
|
... | ... | @@ -84,13 +84,13 @@ The main risks associated with the use of ooniprobe include: |
|
|
|
|
|
However, it's worth highlighting that, to our knowledge, no ooniprobe user has ever gotten into any trouble as a result of using this software or generally engaging with the OONI project.
|
|
|
|
|
|
While the risks outlined here are quite speculative, we have an ethical obligation to inform our users of potential risks. To this end, we have developed documentation, in consultation with lawyers, that explains in detail the risks associated to installing and running ooniprobe, and in regards to publishing measurements. This documentation is published on OONI's website and can be found [https://ooni.torproject.org/about/risks/ here].
|
|
|
While the risks outlined here are quite speculative, we have an ethical obligation to inform our users of potential risks. To this end, we have developed documentation, in consultation with lawyers, that explains in detail the risks associated to installing and running ooniprobe, and in regards to publishing measurements. This documentation is published on OONI's website and can be found [here](https://ooni.torproject.org/about/risks/).
|
|
|
|
|
|
Initially, this documentation was also included in OONI's desktop and mobile clients. However, as this documentation is far too long, there is the concern that users will likely not read it and feel dis-encouraged from using the clients.
|
|
|
|
|
|
To address this, we are revising the Risks documentation so that it conveys the information in a concise and "user friendly" way through the desktop and mobile clients. As part of this process, we are aiming to strike a balance between informing users adequately of potential risks, while not dis-encouraging them from using ooniprobe.
|
|
|
|
|
|
=== Quiz ===
|
|
|
### Quiz
|
|
|
|
|
|
To acquire consent from our users, we have created a quiz that they are required to answer correctly as a prerequisite to using ooniprobe.
|
|
|
|
... | ... | @@ -102,7 +102,7 @@ This quiz attempts to ensure that users understand that: |
|
|
|
|
|
As part of the review process, we aim to revise the quiz to improve upon consent acquisition.
|
|
|
|
|
|
=== History of the OONI UIs ===
|
|
|
### History of the OONI UIs
|
|
|
|
|
|
This is how the OONI desktop UI used to look like in it's first iteration: https://github.com/TheTorProject/ooni-wui/issues/4#issuecomment-252314702
|
|
|
|
... | ... | @@ -110,12 +110,12 @@ This is how the OONI mobile UIs used to look like in their first iteration: http |
|
|
|
|
|
----
|
|
|
|
|
|
= UX Audit =
|
|
|
# UX Audit
|
|
|
|
|
|
* [https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/OoniUiDesign/ooniprobe%20web%20audit.pdf web UI audit]
|
|
|
* [https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/OoniUiDesign/ooniprobe%20mobile%20audit.pdf mobile UI audit]
|
|
|
* [web UI audit](https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/OoniUiDesign/ooniprobe%20web%20audit.pdf)
|
|
|
* [mobile UI audit](https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/OoniUiDesign/ooniprobe%20mobile%20audit.pdf)
|
|
|
|
|
|
=== Overall ===
|
|
|
### Overall
|
|
|
|
|
|
* ooniprobe needs to do a better job of communicating its purpose, and showing users where and how using the platform adds value.
|
|
|
* The onboarding disclaimers are severe, and while OONI does have a responsibility to inform users, the disclaimer does not need to be as “scary” as it currently is.
|
... | ... | @@ -123,13 +123,13 @@ This is how the OONI mobile UIs used to look like in their first iteration: http |
|
|
* The defaults should be to the “safest” risk profile, and accepting more risk should be an opt-in process (as opposed to now where most configs seem to sway in the direction of maximizing usefulness of measurements).
|
|
|
* The “at risk, doesn’t understand ooni functionality and risk” persona (Persona 4) is the most important user type to design for, as they are the largest user group.
|
|
|
|
|
|
=== Web Recommendations ===
|
|
|
### Web Recommendations
|
|
|
|
|
|
1. Split up onboarding information
|
|
|
2. Convert current “Home” screen into a dashboard
|
|
|
3. Consolidate “Decks” + “nettests”
|
|
|
|
|
|
=== Mobile Recommendations ===
|
|
|
### Mobile Recommendations
|
|
|
|
|
|
1. Swipes for onboarding
|
|
|
2. Use design cues to make tests screen more user-friendly
|
... | ... | @@ -145,7 +145,7 @@ This is how the OONI mobile UIs used to look like in their first iteration: http |
|
|
* Show users the value they are adding by converting "Home" into a dashboard
|
|
|
* Implement micro-interactions and gestures as necessary to aid mobile usability
|
|
|
|
|
|
=== Design Timeline ===
|
|
|
### Design Timeline
|
|
|
|
|
|
1. New designs were submitted on Thursday, December 8th
|
|
|
2. Group meeting to discuss the designs on Friday, December 9th at 1600 UTC, @Arturo gave the green light for finalizing the web UI and beginning work with the mobile UIs
|
... | ... | @@ -155,9 +155,9 @@ This is how the OONI mobile UIs used to look like in their first iteration: http |
|
|
6. Spec was submitted on Thursday, December 22nd
|
|
|
7. Designs were discussed and locked in on Friday, December 23rd
|
|
|
|
|
|
=== User Interview ===
|
|
|
### User Interview
|
|
|
|
|
|
* [https://docs.google.com/document/d/1siNx6emEeAtrPhcQGMOqQ1S8HZ7GnkZuSZyOGOOXnHg/edit?usp=sharing personas and journeymaps]
|
|
|
* [personas and journeymaps](https://docs.google.com/document/d/1siNx6emEeAtrPhcQGMOqQ1S8HZ7GnkZuSZyOGOOXnHg/edit?usp=sharing)
|
|
|
|
|
|
8 stakeholders were interviewed:
|
|
|
|
... | ... | @@ -177,7 +177,7 @@ Top 3 Takeaways: |
|
|
|
|
|
= Iteration and Decision =
|
|
|
|
|
|
=== Web UI ===
|
|
|
### Web UI
|
|
|
|
|
|
* The first iteration of the Web UI captured the overall design aesthetic and established the design hierarchy.
|
|
|
a. Overall positive reaction to the screens
|
... | ... | @@ -185,14 +185,14 @@ Top 3 Takeaways: |
|
|
c. Measurements page was streamlined to present data more effectively
|
|
|
d. Quiz was re-introduced into the onboarding process. While this is not a strong design decision, questions had to be included to satisfy external organizations which monitor OONI
|
|
|
* The second iteration of the Web UI tweaked some of the processes, and focused on making minor adjustments to the UI elements. It also re-introduced the Quiz as a modal, and consolidated some functionalities into the footer.
|
|
|
* The [https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/OoniUiDesign/OONI%20Redesigned%20Web%20UI%20FINAL.pdf final iteration] introduced modals for running each test within a deck, smoothed some UI elements with the mobile UI for consistency, and cleaned up the overall layout.
|
|
|
* The [final iteration](https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/OoniUiDesign/OONI%20Redesigned%20Web%20UI%20FINAL.pdf) introduced modals for running each test within a deck, smoothed some UI elements with the mobile UI for consistency, and cleaned up the overall layout.
|
|
|
|
|
|
=== Mobile UI ===
|
|
|
|
|
|
* First iteration of the Mobile UI aimed to translate the Web UI onboarding experience, and update the existing Mobile UI to be more user friendly.
|
|
|
* The [https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/OoniUiDesign/OONI%20Redesigned%20Web%20UI%20FINAL.pdf second iteration] of the mobile UI cleaned up the dashboard, implemented more consistency in headers and other elements, and established a set of “green dot” cues to guide users towards the results of a freshly run test.
|
|
|
* The [second iteration](https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/OoniUiDesign/OONI%20Redesigned%20Web%20UI%20FINAL.pdf) of the mobile UI cleaned up the dashboard, implemented more consistency in headers and other elements, and established a set of “green dot” cues to guide users towards the results of a freshly run test.
|
|
|
|
|
|
= Project Retrospective =
|
|
|
# Project Retrospective
|
|
|
|
|
|
* I’m very happy with the onboarding experiences for both Web and Mobile
|
|
|
* I think that the Mobile “home” screen is stronger than the Web “home” screen, but that is also a function of the platform.
|
... | ... | @@ -202,7 +202,7 @@ Top 3 Takeaways: |
|
|
* In future iterations, I would suggest incorporating more of the brand identity. I have consolidated all brand assets for OONI, so I suggest publishing these on the main page for future designers to use.
|
|
|
* I’d really like to find a more UX-friendly way to collect proof of informed consent.
|
|
|
|
|
|
= Next Steps =
|
|
|
# Next Steps
|
|
|
|
|
|
* I will re-engage with the team in Q1 2017 to help test the Mobile and Web UIs once they have been implemented
|
|
|
* I will work with @Maria to finalize the copy and get that to the team. Part of my Q1 re-engagement will include making sure that the copy has been properly implemented
|
... | ... | |