...
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. 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 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.
...
Safety: Note and category creation could result in creating things that you don't need, or having the wrong names. However, this is undoable by renaming or deleting those items. A confirmation dialog is used before a delete to prevent accidental deletion. Photos in the camera roll can be deleted by selecting them and using delete/backspace, or by dragging them to the trashcan that appears at the bottom of the roll on dragging. Any mistakes that are made during text editing should be easily reversible by using the normal text editor functionality or using the undo/redo stream.
...
In this design, notes are stored in a hierarchy that mimics a hierarchy that mimics a traditional directory hierarchy. traditional directory hierarchy. Instead of using a smartphone to take photos which are then uploaded into our webapp, notes are associated with a video of the lecture that is recorded on a webcam as the notes are taken. Images can be inserted into the notes by cropping out relevant sections of video frames.
Storyboard
Account creation and login weren't really considered as significant in our designs, so they will likely just be standard forms for each of these designs. After logging in, the user will see the a hierarchy that will eventually contain folders and notes, organized however the user wishes(similar to a common file system window such as in Windows). Also similar to a familiar file system window, the folders and notes will be sortable by name and by the date of last modification. A search bar at the top will allow the user to quickly find a particular note or folder. Buttons at the bottom of the page will allow the user to create a new folder or a new note.
Ben Bitdiddle is beginning a new semester at college. At the beginning of his first lecture, he opens up SETENTS and creates a folder for his class, 6.123, and also creates a new note for the lecture.
Image of folder/note hierarchy
After creating a new note or selecting an existing note, the user will be taken to the text editor, which is central to the application's functionality. This provides the user with the ability to enter rich text into a document to take notes for the class. There are standard controls for formatting text, as would be seen in a normal text editor, but the interesting feature of this view is the ability to record video of the lecture that will be synced with the notes. (For the purposes of this design, we will assume that the user has a front-facing webcam of some sort to record the video)
During lecture, Ben takes notes on what the professor is saying and writing on the chalkboard and at the same time he is recording video of the whole lecture.
Image of text editor view view
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.
...
Before his big test, Ben reviews the notes he has taken during the semester. Since he put off studying until the last minute, he needs to quickly find the parts of the lecture that were the most confusing to him. Ben can easily accomplish the task by clicking on the parts of his notes that are related to the section of the lecture he wants to watch again. While watching one of these sections, Ben realizes there is a typo in his notes. He clicks the edit button, fixes his mistake, and returns to review mode to continue watching the video.
Image of review view
Analysis
Learnability: The note management portion of this design is familiar to users of most file system managers because of the organization of folders and notes. This consistency will probably allow new users to pick up on the organization of this view very quickly. The text editing portion of the interface is pretty standard as well, and users who are familiar with a text editor such as Microsoft Word will be comfortable taking notes in this view. The text editor itself is essentially the same as in the other designs, so the same analysis applies here. This design is probably the simplest to use from the editor view, because it is very natural to record a video of what is seen while the notes are being taken. The idea of taking a screenshot from a live video is also familiar to the user, although they might feel that since they're recording the video they might not also need to take notes. The biggest challenge for learnability in this design is probably the "review" feature of the application. The ability to click on a particular part of text and jump to the corresponding part of the video will not be familiar to the majority of the users, so it will likely take some time for them to become proficient at finding the correct spot in the material that they wish to review.
...
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.