Conduct a usability analysis of the current Tor Metrics website to identify the most pressing usability issues (deliverable 6.1)

Improve usability of the most pressing issues identified in the earlier usability analysis as long as they are within scope to make it easier for users to find, compare, and interpret Tor usage and performance metrics (deliverable 6.2)

The scope of the project was to make design changes. We would like to add any new metrics or new data manipulation features, but reserve that for future work.

Pain points

Lots of text

Currently, the metrics site is a single page with a list of all of the metrics that Tor metrics collect. Users need to read through each metric to locate what you want to find.

There are options to filter and sort them in the lefthand side, but this requires that the user read all of those options, choose, update, and re-read an updated list.

Bad navigation

Having to go back and forth to click on different links to see different metrics is annoying.

Once you click on a particular metric, you are redirected to its graph page.

To go to another metric, you would need to hit the back button, go back, read the whole list of all the metrics (lots of text, again..), find your other metric, and click on that.

Single graph page

Currently, there is only one metric is displayed at a time. To compare them, users open up two tabs.

But each subpage often had different-length descriptions at the top, so it is annoying to switch back and forth to compare the two.

UI makeover

Appendix

Background

Tor metrics collects information about Tor in a safe manner and displays the results.

The metrics website is started out as static website with pre-selected graphs which were updated in a background process and displayed. Graphs were generated with user inputs from HTML forms (i.e. as date, country). Later, data tables were introduced to people could see the raw data.

Later, the metrics page had a start page with a side bar that allowed users to select which metrics they wanted to see. Graphs were separated into individual pages, graphs and tables that used the same data were linked together, and data had about pages that explained what they were. This still how the website is today.

A dump of past iterations of the metrics page that show its evolution:

Currently, the top 3 graphs for the metrics page according to ​webstats are:

Direct users by country (17.92%)

Bridge users by country (11.34%)

Relays and bridges in the network (4.56%)

We placed the things that were most viewed by the current users at the top in our new design.

Usability Inspections

Metrics Team's Usability Report

The metrics team, or more precisely Karsten and iwakeh, have summarized the most pressing issues that he sees with the website. They have written a report on the current usability of the metrics website. Here are issues they found:

We decided to only implement changes that improved the usability of the website. Specifically, this includes: page organization/redesign to help various users, visualizations that do not require another graphing engine. (notes)

We sketched out how we want the new metrics website to look like. (sketches)

Linda will create a content page to iterate through the text to be put on the new metrics page.

Linda will make a rough mock up of the tor metrics website for the web designer to see before the IRC meeting (Nov 17th, 2016).

Wireframes

Using Balsamiq, we wireframed mockups that reflected a bunch of the ideas that we came up with during brainstorming. This is what we gave the web designer had to work with, and you will notice that the prototype looks very similar to these wireframes.

Here are some thumbnails of the prototype. You can click on them to see the full sized version.