SETENTS GR 2 - Designs

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.  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 time.

Design 1

In this design, Ben's notes are stored in a strict hierarchy corresponding to school years and classes. Diagrams 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 management page, which is organized into sections with years and classes.

The first time Ben logs in, he must either select the 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 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 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.

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 lists; 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. Pictures can also be dragged to a trash can that appears during picture dragging, removing them from the camera roll.  Since Ben is new to our app, the camera roll does not open yet.

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.

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.

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 webapp.

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

Learnability:  The notes management portion of our interface in this design shares some external consistency with interfaces such as the Mac OS X finder, but learnability is hampered by the fact that it does not allow as much freedom as a normal file system hierarchy; it might take a while for a user to realize that they must create a class before they can create notes for that class.  The text editing portion of our interface maintains external consistency with many other text editors, and as such is very learnable.  The fact that we limit the types of formatting users can do to things that are useful for notetaking (for instance no font selections, no text color) also makes the interface simpler and easier to learn.  The most novel part of our interface is the integration with a smartphone.  The initial QR code app download might be confusing, but we hope that most smartphone owners will be familiar with using QR codes to download apps.  Usability testing might be required to see if that is true.  We hope that we can get response times fast enough between saving an image a user has taken and it appearing in their camera roll that users will not be confused about where their picture has gone, otherwise that might also be a learnability barrier. 

Efficiency:  Creation of new notes is not very efficient in this design, since on first launch the user must create a class to categorize the notes in first.  Even after that, users can't just create notes and decide where to save them later, like they might if they were saving a file on their computer.  Instead, they have to decide where the notes are categorized first.  However, the efficiency sacrificed in the creation of notes is gained when reviewing the notes, since imposing an organizational system saves users the trouble of inventing one later.  This gets in the way of users who would rather create their own organizational system though, and it also limits the functionality of our program for people who are not students.  The paned display that allows you to view the entire hierarchy at once makes it easier to see where you might have put notes that you want to review.  The search bar also allows for efficient locating of notes. 

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 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.

Design 2

In this design, notes are stored in a hierarchy that mimics a 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

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 snapshot that can be inserted into the notes. When the snapshot 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 snapshot" 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.

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.

Efficiency: The key increase in efficiency in this design is that to take a picture and insert it into the notes, the user is not required to pull out his or her smartphone and take a picture with it (or even own one). The screenshot feature allows for quick transitions between note taking and picture inserting. The ability to seek through the recorded video by clicking on a certain section of the notes is also a huge boost in efficiency, because the user is not required to slowly seek through the video to find the relevant material. While it is faster to take a picture and integrate it into the notes in this design, it may be more difficult to get a high-quality picture of the diagram that the user wishes to insert. With a different design that allows pictures to be taken with an external device, it could be easier to get a better picture of exactly the right parts of the chalkboard or presentation. 

Safety: Video editing is not going to be a focus in the development of our application, so if there is something wrong with the video or if the user wants to cut parts of it out, they might encounter difficulty. However, pictures will be easily delete-able, so an incorrect screenshot will not be hard to recover from. The notes themselves will always be editable afterwards, so any typing mistakes can be easily corrected. With the ability to watch the entire lecture again, these mistakes will be easy to spot and can be corrected more accurately than in a design that didn't include video of the entire lecture. Deleting a note or a folder will be easy to accomplish from the not management view, so removing unneeded or accidentally created notes will not be an issue.

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, which will be inserted into notes taken using a webapp on a laptop.

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.

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). Categories and notes can be deleted or renamed via the right-click menu, or deleted by highlighting items and pressing delete/backspace.  A dialog box comes up to confirm deletion.  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.

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.  The pane can be deleted like any image could be, by backspacing or using undo.

Left: webapp label adding mode.  Right: smartphone drawing mode.

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.  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. 

If Ben opens the app on his phone, it will pop a canvas into any notes that Ben has open even if he didn't click the drawing icon first.

Reviewing notes is less interesting than in our second design, since it is the same as editing. Ben can browse through the navigation pane and locate notes by title, or use the search bar, which functions as in the previous two designs.

Analysis

Learnability: The fact that all aspects of the web interface are visible on one page (in the navigation pane and the editing pane) make this interface more learnable than the other ones.  The navigation pane and editing pane also maintain external consistency with similar apps.  The fact that this design involves multiple pieces of hardware hampers learnability, although the QR code smartphone app installation process is a large hint to the users.  It might be difficult for users to realize that they can edit the images after they are completed, as well.

Efficiency: This is the most efficient design in terms of being able to start taking notes quickly, since the interface starts you on an empty notes page.  The behavior after first launch, returning you to the most recent notes, is somewhat less efficient since we expect that most of the time users will be opening the application to start new notes.  However, creating new notes here is no less efficient than in our other designs, and in the cases where you do want the most recent notes it saves time.  The way the design combines touchscreen functionality in a smartphone with the full-sized keyboard of a laptop to let you draw diagrams and label them lets you make the most efficient possible use of the hardware available.  

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.