...
We tested three different options for a file browser with our paper prototypes, and settled on the most traditional. This isn't really surprising since a file browser is an interface we expect all of our user population to be familiar with, so external consistency is a big advantage here. We did sacrifice some potential gains in efficiency to be had in our other two designs, but the learnability tradeoff was not worth it.
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. Folders and notes are displayed, with folders on top. Notes are sorted so that the most recently modified notes are on top. Modification time has no meaning for folders in our system, so folders can only be sorted alphabetically or reverse alphabetically. When sorting Notes by modification time, folders are always displayed alphabetically. Sorting alphabetically or reverse alphabetically results in sorting both folders and notes, although the two categories still remain segregated. 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. New folder creation.
...
Any file or folder can be moved into any other folder or up a level by dragging the item and dropping it on top of the destination. The interface for this can be seen in Figure 5. The dragged item has its opacity reduced, and valid targets turn blue underneath it. If the item is dropped somewhere that is not a valid destination, it reverts back into its original position. If a folder is dropped somewhere that already has a folder with the same name, the move is cancelled and the user is alerted.
Figure 6. Document search with autocomplete.
...
In our initial paper prototype for our webcam recording design, we had two separate modes for editing notes and reviewing notes. This was very unpopular with our test users, who wanted the ability to change something in their notes while watching playback of the video. Although this made our time-stamping implementation more complex, we changed our design to have a single Edit and Review interface, allowing users to edit notes while recording video or while playing it back.
Figure 7. The Edit and Review Interface immediately after creating a new file.
...
After pressing stop, instead of the black box / intended live view, a frame from the video that has just been recorded is shown. The standard record icon changes to an Append Recording icon with a plus sign, to hint to the user that it will add more video rather than overwriting existing video. This change was made in response to feedback we got from our heuristic evaluations. Playback controls are shown and enabled for the existing video. This can be seen in Figure 9.
Figure 10. Pressing the "Take Snapshot" button will cause the current frame of video to be inserted at the location of the cursor, at full resolution.
...
To insert an image from the video into the lecture, users can press the "Take Snapshot" button, which will insert the current frame of video (whether being played back or recorded live) into the notes, fully sized. This can be seen in Figure 10. Users can drag the video (oh hover, the icon changes to the "move" cursor with the tool-tip "Drag Me!"). Hovering over the inserted image also reveals the delete/crop buttons, which can be seen in Figure 11.
Figure 12. Crop window allows you to crop out a portion of the image. Crop box is resizeable by dragging the corners, and can be moved. Again the grabby hand cursor disappears from screenshots.
Clicking the crop icon brings up a crop window that lets you crop the image using standard controls. After cropping an image, if you click to crop it again you get the whole frame back, which is good from a safety perspective in case users accidentally crop out data they need. In our paper prototype, we had this crop window popping up immediately after you pressed the take snapshot button, and the image was not inserted until you cropped it. Our paper prototype testers complained about the drag on efficiency that this caused, though. Therefore we revised our design to insert the frame directly, and allow users to come back and crop it after they were done taking crucial notes.
Figure 13. Green highlighting of notes corresponds highlights notes that were taken at the point you're at in the video.
...