You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 6 Next »

User Testing

Design

Based on the response to the three design ideas that we tested on the first day of paper prototyping, (smartphone photo notes, smartphone diagram notes, and webcam video notes), we decided to implement webcam video notes with a fairly standard file browser.  We did not implement separate user accounts.

 
Figure 1.  SETENTS front page with fewer notes and folders than the length of the page.

If you click on figure 1, you can see the first page that users see.  Notice that the New Note and New Folder buttons stay close to the bottom of the short list, rather than being stuck to the bottom of the window.  This change was in response to critiques received during our heuristic evaluations, saying that it took too long to locate the buttons when they were far away from anything else of interest. 

 
Figure 2.  SETENTS file browser with enough files and folders that you have to scroll. 

Figure 2 shows a folder containing many more items.  In this case the New Note and New Folder button remain stuck to the bottom of the page while items scroll behind them.  We would have preferred to put the buttons near the top, where they would be more easily spotted.  However, between the search box, the bread crumbs, and the affordances to sort the files and folders by name or date modified, it would have made the top of the page too cluttered. 
Figure 3.  Hovering over an item reveals the delete and rename buttons.
In our computer prototype, we did not implement or mock up the ability to delete, rename, or move items within the file browser.  While we recognized that these abilities are very important from the perspective of flexibility and safety,

Implementation

After deciding on the webcam-based design, we had to choose which platform we were going to use for our implementation.  We all preferred a web app in terms of creating a user interface, but capturing webcam output from a web app proved challenging.  We hoped to be able to use the HTML5 getUserMedia API to capture webcam output.  However, this is a very new technology -- only in the latest version of Chrome, and only if you enable experimental features.  We eventually realized that chrome's implementation didn't have all of the features we needed yet: most importantly the ability to save video, but also the ability to differentiate between webcams plugged in to a laptop to access a front-facing webcam pointing at a lecturer.  In the end, we were not able to use getUserMedia to implement live webcam capture for SETENTS, and had to resort to using a pre-recorded video and pretending that the playing video corresponded to a camera live view.  This is the implementation limitation that has the single largest impact on the usability of our project, since it can be somewhat confusing having to pretend that a pre-recorded video corresponds to what you're seeing during a user test.  And of course, it means that the killer feature of our app is not useful in the real world. 

We used a Python flask backend with a sqlite server to power SETENTS.  The way we structured our database allowed for notes having the same title, but did not allow folders to share a title: internal consistency suffers some as a result. 

Evaluation

Reflection

  • No labels