Changes between Version 26 and Version 27 of doc/UX/MetricsRedesign


Ignore:
Timestamp:
Dec 5, 2016, 11:57:13 PM (2 years ago)
Author:
lnl
Comment:

explain better

Legend:

Unmodified
Added
Removed
Modified
  • doc/UX/MetricsRedesign

    v26 v27  
    8282=== Metrics Team's Usability Report ===
    8383
    84 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 [https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/MetricsRedesign/metrics-usability-analysis-2016-09.pdf report] on the current usability of the metrics website, which states the following problems:
    85 
    86 * Issue 1.1: Little introduction of Tor and Tor Metrics
    87 * Issue 1.2: No links to related services
    88 * Issue 1.3: Links to metrics subpages should not be text
    89 * Issue 1.4: Links to technical reports are missing
    90 * Issue 1.5: Website seriously lacks web design
    91 * Issue 2.1: There are far too many graph subpages
    92 * Issue 2.2: There are no explanations of events in the data
    93 * Issue 2.3: Additional information is distributed all over
    94 * Issue 2.4: Graphs are not as interactive as they could be
    95 * Issue 3.1: Tables should be combined with graphs
    96 * Issue 4.1: Distinction to official graphs is unclear
    97 
    98 Their suggestions to the above problems (summarized from the [https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/MetricsRedesign/metrics-usability-analysis-2016-09.pdf report]):
    99 
    100 * Issue 1.1: give a brief overview on the start page and link to interesting things
    101 * Issue 1.2: link to CollecTor, Onionoo, ExonerTor, and other sources that metrics depends on
    102 * Issue 1.3: use thumbnails of graphs (rather than words) to indicate various subpages
    103 * Issue 1.4: add links to technical reports in a non-noisy way for researchers
    104 * Issue 1.5: make the website look more Tor-like
    105 * Issue 2.1: reduce the number of subpages; give users a 'dashboard' of with graphs they are interested in.
    106 * Issue 2.2: provide an interface to add explanations of events in the data
    107 * Issue 2.3: provide a high-level summary of important things
    108 * Issue 2.4: generate graphs on the client side for speed and add functionalities
    109 * Issue 3.1: put tables and graphs together
    110 * Issue 4.1: distinguish third-party visualizations from official metrics visualizations
    111 
     84The metrics team, or more precisely Karsten and iwakeh, have summarized the most pressing issues that he sees with the website.  They have written a [https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/MetricsRedesign/metrics-usability-analysis-2016-09.pdf report] on the current usability of the metrics website. Here are issues they found:
     85
     86  * Issue 1.1: Little introduction of Tor and Tor Metrics
     87  * Issue 1.2: No links to related services
     88  * Issue 1.3: Links to metrics subpages should not be text
     89  * Issue 1.4: Links to technical reports are missing
     90  * Issue 1.5: Website seriously lacks web design
     91  * Issue 2.1: There are far too many graph subpages
     92  * Issue 2.2: There are no explanations of events in the data
     93  * Issue 2.3: Additional information is distributed all over
     94  * Issue 2.4: Graphs are not as interactive as they could be
     95  * Issue 3.1: Tables should be combined with graphs
     96  * Issue 4.1: Distinction to official graphs is unclear
    11297
    11398=== Linda's Usability Inspection ===
    11499
    115 As a UX researcher, Linda inspected the usability of the website with respect to various users.
    116 
    117 The purpose of this inspection was to identity who would use the metrics website, for what reason, and if the metrics site is usable to that user for that purpose. If the user 1) knows what to do at the page to accomplish the task, 2) knows if they did the right thing to accomplish that task, and 3) can finish the task, then the metrics site will be considered usable for that type of user. 
    118 
    119 We identified seven types of users: casual visitors, curious outsiders, journalists, researchers, relay operators, Tor developers, and Tor authorities. The respective user types [https://en.wikipedia.org/wiki/User_story user stories], tasks, and [https://en.wikipedia.org/wiki/Cognitive_walkthrough cognitive walkthrough] are below.
     100Linda identified seven types of users: casual visitors, curious outsiders, journalists, researchers, relay operators, Tor developers, and Tor authorities. The respective user types [https://en.wikipedia.org/wiki/User_story user stories], tasks, and [https://en.wikipedia.org/wiki/Cognitive_walkthrough cognitive walkthrough] are below.
    120101
    121102User profiles:
     
    146127  * Tor authority: find system overview, any unusual events (spikes/dips, relays down)
    147128
    148 Ideas to help with user tasks:
     129=== Isabela's Industry Examination ===
     130
     131Isabela reviewed twitter's analytics tool to see how industry standard user interfaces were. Her comments are [https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/MetricsRedesign/how-others-analitics-tools-works.pdf here]. Here were some of her observations and suggestions.
     132
     133  * Observation 1: There is a dashboard-like feel to the interface, which gives a quick overview of the latest metrics over the last day, trending tweets, and other interesting information.
     134  * Suggestion 1: Give users a summary of the analytics that they are intersted in (''we tabled this for a later iteration. we want to make a dashboard-like feature, but not this time.'')
     135
     136  * Observation 2: Users can quickly jump between different information and manipulate the timeframe of the data.
     137  * Suggestion 2: Improve the flow for users to see different metrics on the metrics website.
     138
     139  * Observation 3: The analytics platform performs basic analyses for the user, such as sorting by popularity, converting to percents, and showing changes over time.
     140  * Suggestion 3:  Use visualizations such as sparklines, pie charts, bars, etc. to illustrate basic information visually.
     141
     142
     143----
     144
     145= Design =
     146
     147We made changes to improve the usability, but chose not to add any new metrics or new data manipulation related features until another time.
     148
     149=== Pain points ===
     150
     151__ Pain point 1: lots of text makes it hard to locate what you want to find. __
     152
     153  Currently, the metrics site is a single page with a list of all of the metrics that Tor metrics collect.
     154
     155  [[Image(current-metrics-page.png, 350px)]]
     156
     157  There are options to organize them in the lefthand side of the website, but this requires that the user read all of those things, choose what they want to see, click update, re-read the updated list, and choose their metric. This takes too long, and users literally need to read everything on the webpage.
     158
     159__ Pain point 2: having to go back and forth to click on different links is annoying.__
     160
     161  Once you click on a particular metric, you are redirected to a graph page where you can get a rough visualization of the metric. 
     162
     163  [[Image(current-metrics-page.png, 350px)]]
     164
     165  To go compare with similar metrics, you would need to hit the back button, go back, read the text again, find your other metric, and click on that.
     166
     167__ Pain point 3:  only one metrics is displayed at a time so you couldn't compare similar metrics __
     168
     169  There was no way to display multiple related metrics side by side to compare them. There are lots of metrics on that users would want to compare, such as the number of relays and the number of bridges. But to do that, you would need to open up two tabs.
     170
     171  [[Image(metric1.png, 200px)]] [[Image(metric2, 200px)]]
     172
     173  and since the tabs often had different-length descriptions at the top, the graphs wouldn't be at the same spot on the screen so shifting back and forth between tabs (which is inconvenient enough already) is not a good way to compare graphs unless users spend time adjusting the graphs to be at the same spot on their screens.
     174
     175=== Changes made ===
     176
     177Screenshots are from the prototype, which can be found [http://metrics.cc-ltd.net/ here]. We're still hacking away at it, so it may look a little different than the screencaptures we inserted below.
     178
     179__Change 1:  fixed user workflow__
     180
     181  [[Image(menu.png, 500px)]]
     182
     183  There is no long list of metrics for users to read. Users now choose from a simple menu about the specific topic that they are curious about.
     184
     185  [[Image(p-data.png, 500px)]]
     186
     187  Once the users are there, they can see the graph, can click to other related graphs with a single click, and compare these graphs by clicking back and forth these subtabs.
     188
     189  (We would eventually even want to plot multiple metrics at the same time, or allow multiple graphs on a single page, but we saved that for a later time)
     190
     191__Change 2: added new pages__
     192
     193  We added subpages to the metrics page.
     194
     195    * Home: A home page that greets users and explains subpages.
     196    * About: Metrics team methodology, philosophy, contact, faq, and glossary.
     197    * News: Recent events that were recorded with Tor metrics (such as a censorship event).
     198    * Data: A place to see, manipulate, and download metrics taken by the team.
     199    * Sources: How and with what software the metrics were measured with.
     200    * Tools: Other Tor-related tools that provide some other measurements.
     201    * Research: Research papers and references that are useful to know or use tor metrics.
     202
     203  [[Image(p-home.png, 500px)]]
     204
     205  [[Image(p-news-cropped.png, 500px)]]
     206
     207  [[Image(p-research.png, 500px)]]
     208
     209  Here are screenshots of some of the pages that did not exist before. We hope that these help the diverse group of users that visit the metrics website to find more of what they are curious about, provide transparency into the metrics, and encourage use of these metrics or other related tools for research.
     210
     211__Change 3: Interface Makeover__
     212
     213  We followed standard UX practices, to build a responsive, less text-heavy, visual website that looked modern. The prototype was styled with respect to this [https://trac.torproject.org/projects/tor/wiki/org/teams/UxTeam/StyleGuidelines style guide]. 
     214
     215----
     216
     217= Summary =
     218
     219''A tl;dr blurb about the project with select links to resources (a prototype that summarizes our work?).''
     220
     221=== Implementing changes ===
     222
     223''say when these changes will be in effect and when the site will launch '''
     224
     225=== For future projects ===
     226
     227''other things that we were going to do, such as making a dashboard, being able to see multiple screens, switching to a new graphing engine, etc.''
     228
     229----
     230
     231= Misc Notes and Logs =
     232
     233=== Brainstorming Changes ===
     234
     235Linda's ideas to help with user tasks:
    149236  * Splash page: a [http://www.kuvazu.com/wp-content/uploads/2013/03/Breath-splash-template-for-wordpress.jpg page] to give an overview of Tor and metrics.
    150237  * Navigation banner: redirect users to specific topics (overview, research tools, etc.)
     
    169256* About: about the project, full Schneier quote, FAQ, contribute
    170257
    171 === Isabela's Industry Examination ===
    172 
    173 As an ex-industry developer, Isabela provides recommendations based on industry best practices.
    174 
    175 Isabela's reviews:
    176 * twitter: ''[https://trac.torproject.org/projects/tor/attachment/wiki/doc/UX/MetricsRedesign/how-others-analitics-tools-works.pdf twitter analytics review]''
    177 
    178 ----
    179 
    180 = Discussion =
     258
     259=== Wireframes ===
     260
     261Using Balsamiq, we wireframed mockups that reflected our changes. This is what the web designer had to work with.  There are little thumbnails attached inline, but you can download these in full size from the attachments section of this wiki page. 
     262
     263[[Image(home-new.png, 100px)]]  [[Image(about-new.png, 100px)] [[Image(data_ user-country.png​, 100px)]] [[Image(sources-new.png, 100px)]] [[Image(tools.png, 100px)]] [[Image(research-new.png, 100px)]] [[Image(news-new.png, 100px)]]
    181264
    182265=== Berlin Meeting ===
     
    210293* November 17th, 2016: talk with the web designer, showing him our mockups ([http://meetbot.debian.net/tor-dev/2016/tor-dev.2016-11-17-14.59.html
    211294 minutes] [http://meetbot.debian.net/tor-dev/2016/tor-dev.2016-11-17-14.59.log.html log])
    212 ----
    213 
    214 = Design =
    215 
    216 We made changes to improve the usability, but chose not to add any additional functionalities (such as new metrics or new visualizations).
    217 
    218 === Design Changes ===
    219 
    220 What we're trying for:
    221 * help all user profiles mentioned above (casual visitor, curious outsider, journalist, researcher, relay operator, Tor developer, Tor authority) to complete some tasks
    222 * add any helpful information that does not require any additional backend work or a new graphing engine.
    223 * make it visually appealing!
    224 
    225 Specific changes:
    226 * add additional navigational pages to group information together (i.e. all the research-related resources in a page).
    227 * add sources, services, research, and news pages. 
    228 * add a summary of the most popular metrics on the homepage to give casual visitors an idea of Tor's status that day.
    229 * make the metrics about page more visible to get to, and add paragraphs introducing the team, what data is not collected, etc.
    230 * reducing information on a given page to prevent information overload.
    231 * rewording text on the metrics page.
    232 
    233 === Wireframes ===
    234 
    235 Using Balsamiq, we wireframed mockups that reflected our changes. This is what the web designer will have to work with. 
    236 
    237 [[Image(home-new.png, 250px)]]  [[Image(about-new.png, 250px)] [[Image(data_ user-country.png​, 250px)]] [[Image(sources-new.png, 250px)]]
    238 
    239 [[Image(tools.png, 250px)]] [[Image(research-new.png, 250px)]] [[Image(news-new.png, 250px)]]
    240 
    241 === Prototype ===
    242 
    243 The prototype was styled with respect to this [https://trac.torproject.org/projects/tor/wiki/org/teams/UxTeam/StyleGuidelines style guide].
    244 
    245 Check out the website in progress [http://metrics.cc-ltd.net/ here].
    246 
    247 Some screenshots (at some point during the dev process) are included down below.
    248 
    249 [[Image(p-home.png, 500px)]]
    250 
    251 The homepage will have a tiling icon of links to the subpages along with a short description.
    252 
    253 [[Image(p-data.png, 500px)]]
    254 
    255 The biggest change to the user flow is here. We grouped similar metrics together, allowed faster navigation between them, and allow comparisons between metrics that make sense (you can plot them on the same graph).
    256 
    257 [[Image(p-news.png, 500px)]]
    258 
    259 [[Image(p-research.png, 500px)]]
    260 
    261 There are pages that did not exist before.
    262 
    263 ----
    264 
    265 = Summary =
    266 
    267 ''A tl;dr blurb about the project with select links to resources (a prototype that summarizes our work?).''