...
Ben Bitdiddle is taking notes for 6.006 on his laptop. He has to keep up with the professor and write down all of the important points. The professor begins to draw a very complex diagram on the board, and warns the class that if they don't understand all of the details of the diagram, they will fail the next exam! Ben must be able to insert the diagram into his notes without losing any of the details, and without falling behind taking notes on the rest of the lecture. As the lecture continues, Ben must be able to easily copy down both the textual description of the algorithms along with the accompanying diagrams of binary trees, heap sorts, and linked lists. When Ben used to take notes on paper, he was always frustrated when professors "animated" the diagrams on the board by adding new components and removing existing components while describing the steps of an algorithm - he would have to completely redraw the entire diagram multiple times so that his notes could show the progression! He's hopeful that a new computer-based system will make it easier to do this so he can focus more on what the professor is saying.
Later, in preparation for the upcoming test, Ben decides to do the assigned reading from his textbook. He wants to insert additional clarifications into his lecture notes on the same material, so Ben opens his notes to modify them. He goes over the notes, and inserts a few new facts that he forgot when he was taking the notes originally. Of course, being a typical MIT student, Ben waits until the night before the test to actually read through the notes he took, which means he only has a few short hours to refresh his memory on the most difficult aspects of the material. Therefore, it's crucial that he can find the appropriate notes quickly and easily - flipping back and forth through pages and pages of notes was always such an inefficient use of timeLater, while studying for the test, Ben decides to do the assigned reading from his textbook. He wants to insert additional notes into his lecture notes on the same material, so Ben opens his notes to modify them. He goes over the notes, and inserts a few new facts that he forgot when he was taking the notes originally.
Design 1
In this design, Ben's notes are stored in a strict hierarchy corresponding to school years and classes. Inserting images is done by taking the pictures on a smartphone and uploading them into your notesDiagrams are captured by taking pictures of the chalkboard on a smartphone and seamlessly integrating them into the notes. Everything's automatic and stored in the cloud, so the user doesn't even need to plug his phone into his computer or initiate a transfer over bluetooth.
Storyboard
The first time Ben uses SETENTS (which is primarily a web-app) to take notes, he is presented with a standard account creation/login page. Once Ben creates his account, he sees the note storagemanagement page, which is organized into sections with years and classes.
On initial login Ben The first time Ben logs in, he must either select the pre-populated school year or create a new one. pre-populated school year or create a new one. The interface is mostly empty, along with a small note (and helpful arrow) to point a new user in the right direction. Once the year is selected, he can create a class, and then create notes for that class. This is not analogous to a standard file-system hierarchy in that Ben cannot create loose notes: they must be associated with a class, and classes must be associated with years. A search bar at the top of the page allows users to look for notes without browsing through the hierarchyof the page allows users to quickly find notes (by typing a note name, date, or content to search for) without browsing through the hierarchy. The search can also help a user find notes on a topic that has been covered in multiple classes in order to reinforce his learning. Right-clicking notes, classes, or semesters brings up a menu with delete and rename options. Selecting an item and hitting the delete/backspace key will also delete it. A prompt comes up to confirm deletes.
...
Ben creates classes for the different courses that he's taking. Clicking the buttons to add a year or a class has a text box textbox pop into the list, with a default name highlighted for pending delete. Clicking the button to add new notes for a class, though, takes Ben into the text editor.
...
On the right side of the view is a toolbar for managing the video recording. There is also a button to allow the user to take a screenshot snapshot that can be inserted into the notes. When the screenshot snapshot is taken, a new window will appear to so the user can crop the photo to the correct size.
...
Once the smartphone app is open, Ben can draw the diagram using the touchscreen on his phone. The canvas in his notes will show a live view of his diagram. Ben can choose from a limited selection of colors, draw lines with a single finger, and do bitmap erase with a single finger. He can also zoom in by using standard pinch to zoom, and navigate around the zoomed in image by either using the grabby hand or dragging with two fingersthe grabby hand or dragging with two fingers. However, adding text on a small phone screen would be slow, so instead the user can take advantage of his computer's keyboard to add text as necessary.
By clicking on the image in the notes webapp, Ben brings up a pane that lets him add text labels to his diagram, and drag those around. The controls on the side of this pane allow Ben to insert labels, move them around, navigate around the diagram, and undo or redo actions. If Ben finishes editing the image and wants to come back to it later, clicking the image in the webapp will bring it back up for editing in a smartphone.
Bringing up If Ben opens the app on your his phone, it will pop a canvas into any notes that Ben has open even if he didn't click the drawing icon first.
...
Safety: Once again, the design is fairly safe: It's easy to correct errors in creating or naming notes and categories, and deletion of notes requires a confirmation. You can rely on the undo/redo stream to correct errors within a single editing session. The least safe part of the process is in the diagramming app, since there is no undo/redo in the smartphone drawing part of it. For this, users will have to rely on using the eraser tool within the app. There is also a potential for mode errors, since touching the phone screen can either draw or erase depending which tool is selected, and unlike a computer there is no cursor to make the mode very visible.