UI/UX Mockups and General Notes

[critzo]

Summary The general theme for the browser extension UI is to have it take the look, feel and interaction of a "lab notebook" where people have the opportunity to be a part of a science experiment. The visual look and feel is intended to have a very notes/sketchbook feel, but allows people to share their results, categorize and add metadata which they could then potentially share with MLab if they choose. The other use cases we definitely want to think about are researcher and journalist use cases. So the intent of this was to think about what we might be able to improve prior and thinking a little about longer term design plan for the browser and the observatory to some extent.

Notes:

• Add MLab high level settings to the browser extension settings area.

Preferences for the Extension:

• Where to store data
• location categories for annotating tests
• ability to run in the background --> if so, frequency
• Always send to MLab? or frequency for pushing data to MLab public store (for low connectivity or censored locations? maybe?)
• Expand the side bar menu to have the ability to pick a test & run that test or see past results (see updated mockups)

visual design

• local/sketch book feel
• give the user a sense of ownership over their data
• compare my data with data from the public data set
• share & tell a story on social media
• share & tell people about the extension itself and to join you as an "internet tester" (just thinking about this today, need to have a fun user role that makes people want to be a part of the people contributing data)
• add the ability to add notes about the conditions, such as -- location, experience data that's subjective, public/private wifi connections, wired/wireless, etc
• add the ability to download/export the data to work with it in a data program
• maybe show a table of results below the chart / or a log of the test that have been run in a feed view

landing page view ideas:

• overview of mlab & the extension w/ test log or a prompt to run a test if the browser ext hasn't been used yet
• overview of mlab & the extension w/ small multiples of charts to explore - way to show all of the data in coordinated views (would be a cool thing to try eventually)

[critzo]

Comments summary from our email thread is below, with reference to individual issues where appropriate:

@cda :

• How would the user interact with the test scheduling in the interface -- whether it is opt-in or opt-out, we should probably have some interaction with the user, and text explaining why they should allow us to collect data frequently.
• How were we imagining the test result sharing would look like?

@mtlynch :

Questions:

• What do the share buttons on the upper right do? Do they lead to new UI pages? (basically a +1 to @cda 's question) --- See Issue #25
• What tests do we plan to offer aside from NDT?
• How does the user switch between the big charts view, the multi-charts view, and the "results feed" view?
• Can a user choose invalid settings and, if so, how do we tell them what was invalid?
• Is that little star/gear thing next to the M-Lab logo a settings button or is it just decoration?
• In the chart with results table, what goes in the results table?

Suggestions:

• The "Previous Results" button is currently in a place where I would expect a "Reset" button to go (though I could easily live without a reset button here). I suggest moving it to some other place that makes it clear that it's a view change and not an action because making it a button and putting it next to another button that causes an action suggests that pushing the button will cause an action. (related to my previous whining about the NDT flash client - https://code.google.com/p/ndt/issues/detail?id=159)

Feature requests:

• Offer different graph types (aggregated by day of month, by day of week, by hour of day)
• Offer a detailed view of previous test runs (including the full output of NDT). Stretch goal: Give explanations of how to interpret the less obvious parts of the output.
• Run on a schedule (maybe for v2) - It'd be really nice to say "run [x] times per [day/week/month] at [explicit time / random time]" so the user gets more dense results and so do we.

Other observations:

• I like the recent test feed. I'm assuming it would be short text / small graphical representations of the test results? Like "NDT: 15 Mbps download / 1.2 Mbps upload / 25 ms RTT."? I'd like to see this fleshed out a bit more so we're in agreement on what we'd show here.
• I love the sharing feature. Ookla makes it really easy for users to share their bandwidth results on social media and it reinforces their position as the default place to do bandwidth tests. It would be really great if we could compete with them in this arena.