Designs for SETENTS
Scenario
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.
Later, 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 notes.
Storyboard
The first time Ben uses SETENTS to take notes, he is presented with a standard account creation/login page. Once Ben creates his account, he sees the note storage, which is organized into sections with years and classes.
Image of hierarchy with nothing created yet
On initial login Ben must either select the pre-populated school year or create a new one. 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 hierarchy.
Image of populated hierarchy
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 pop into the list, with a default name highlighted for pending delete. Clicking the button to add new notes for a class, though, takes you into the text editor.
Image of the text editor
The title of the notes is presented in an editable text box in the tool bar, which on first open is called "Untitled N," again highlighted for pending delete, and with the focus given to it. On future opens focus will be given to the body of the notes. The text editing parts of the interface are standard: there's a large text area that Ben can type in. We allow limited rich text functionality tailored to note taking, with bold/italic/underline, different font sizes, and the ability to easily make bulleted or numbered list; all of this functionality is accessible through the tool bar or, in some cases, through keyboard shortcuts. The home button on the left returns to the notes hierarchy. The camera button on the right leads to our most interesting functionality: the ability to easily insert a picture using a smartphone. If a phone is already associated with the account, the camera button launches the app on the phone. Pictures taken on the phone are added to the camera roll on to the right of the editor. Clicking a picture inserts it at the current cursor position, or the images can be dragged to any location on the page, displacing text as needed. Since Ben is new to our app, the camera roll does not open yet.
Image of the QR code download screen
The first time Ben clicks the camera icon in his account, a window opens containing a QR code that he can use to download our app on his smartphone.
Image of the smartphone app: picture taking mode
Ben can point his cellphone camera at the subject he wants to insert into his notes, and takes the photo. Once a photo is taken, the app will go into crop and upload mode.
Image of the smartphone app: picture cropping mode
Ben can crop out the area of interest on the image (in this case, the diagram on the blackboard behind the Professor), and choose to save or delete it. When he presses save, the photo will appear in the camera roll on the app.
All changes to Ben's notes are auto-saved by our webapp. In this design, there isn't any difference between creating notes for the first time and reviewing them later, so when Ben comes back to the notes to insert new facts from the course readings, and when he comes back again to review for a test, he just opens the notes in the organization hierarchy and views them in the editor.
To find the notes he wants, he can use the search bar at the top of the home page, which will search both the titles and the contents of notes and display hits in the title first in the results.
Analysis
Design 2
In this design, notes are stored in a hierarchy that mimics a traditional directory hierarchy.
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
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 that can be inserted into the notes. When the screenshot is taken, a new window will appear to so the user can crop the photo to the correct size.
Several times, the professor draws important figures on the board that Ben wishes to include in his notes. He clicks the "take screenshot" button to crop the image and insert it with the text.
Image of screenshot cropping view
After a class is over, the user will likely wish to review the notes that were taken during class. In the text editor view, there is a "Review" button in the top right corner. This takes the user to another view that shows the same notes and video that the user created with the edit window, but they are not editable. One half of the screen shows the recorded video, and the other shows the notes that were typed. While the video is playing, the corresponding section of notes is highlighted to show how the video and the notes match up. Additionally, by clicking on a word in the notes, the user can jump to the part of the video that was happening while that word was written in the notes. This allows the user to find certain parts that they wish to review without having to seek through lots of video time. The top right of this view contains an "Edit" button, taking the user back to the edit window to make any necessary changes.
Image of review view
Analysis
Design 3
In this design, we allow a single level hierarchy that lets you put notes into different categories, and the list of notes is displayed on the same page as the editor. Rather than inserting pictures from a camera, this design allows us to harness the ease of typing things on a laptop and the ease of drawing things with a touchscreen by using a smartphone to create hand-drawn diagrams.
Storyboard
The first time Ben uses SETENTS to take notes, he is presented with a standard account creation/login page. Once Ben creates his account, he sees the combined browsing / editing window. The first launch has an uncategorized, untitled notes document already open.
Image of app with navigation pane populated with stuff
Ben can create a category for 6.006 or any other classes, and have notes inside of the categories or in the root of the hierarchy. He can drag notes into new categories to organize things. Categories can be created by clicking the new category button at the bottom of the navigation pane. Notes are created by clicking the new notes button within the category you want them to go in (or in the root of the hierarchy). Dragging the bar between the editing pane and navigation pane allows Ben to allot as much screen real estate as he wants to either.
Once Ben is satisfied with how his notes are organized, he can use the rich text editing pane to take notes as in our previous designs. When the time comes to insert the crucial diagram, he clicks the drawing button at the right of the toolbar.
Image of QR code screen
As in design 1, the first time he clicks the button he must associate a smartphone with his account by downloading our app and signing in. He can scan the QR code that pops up to download our app onto his phone. Once Ben has associated a phone with his account, clicking the drawing button will bring up a canvas where his cursor is in the notes. If he doesn't already have the app open on his phone, the canvas will contain a text prompt to open it. Ideally we would The pane can be deleted like any image could be, by backspacing or using undo.
Images of phone app and web app with the synchronized canvasses
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 fingers.
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 you to insert labels, move them around, navigate around the diagram, and undo or redo actions.
Bringing up the app on your phone will pop a canvas into any notes that you have open even if you didn't click the drawing icon first.
Reviewing notes is less interesting than in our second design, since it is the same as editing. You can browse through the navigation pane and locate notes by title, or use the search bar, which functions as in the previous two designs.