Note Taking App - Edit and Review Mode UI Design

In the last post I showed two different designs and approaches for taking notes in lectures. They both have their advantages and drawbacks. It was important to also consider that Andrew's needs are different in lectures and out of lectures. In lectures times are constrained and it is possible for important information to be conveyed while Andrew is trying to do something else. While he is trying to get a photo of a worked example on the board the lecturer may be talking about a related but different concept that also should be included in the notes. This makes it important that actions are not atomic, that a task can be temporarily paused whilst a higher priority task is addressed.

This is not true when reviewing and editing notes outside of a lecture, here Andrew has considerably more time to complete tasks and it probably is best not to encourage him to jump around too much.

Outliner

The outliner approach does not really need any adjustment from inside to outside of lectures, the non-text elements (images and sound bites) can easily be covered in surrounding text. The only obvious visual difference is that the Outliner does not need the sidebar in this mode.

If I choose to go with the outliner process, it is probably not really worth differentiating between the two different modes of lecture creation. The only consideration is whether or not it is worth removing the sidebar to provide more screen real estate.

PDF Annotator

The annotator is a lot more hungry for screen space. In the lecture, new notes are created by tapping the screen, creating those yellow dots. Only the note that is currently being created/edited is expanded.

Outside of the lecture, the default is for all notes to be expanded, this also means the app automatically rearranges the notes to remove any overlaps. When the notes are expanded they should not obscure any elements in the original notes nor should they obscure other expanded notes. The idea here is that the yellow dots remain but an arrow is automatically generated pointing to the expanded note. Expanded notes are automatically sized based on the amount of information contained.

A short tap will hide the expanded note. Which allows Andrew to hide information he is not currently trying to revise this will also cause nearby notes to try to automatically rearrange themselves.

A long tap brings up the note into a much larger mode for further editing. It is here where the editing tools are found, primarily based around adding and formatting further text. The plan is to use pretty standard text editing settings, the ability to change font size, bold

There aren't any plans to include picture or audio editing tools here. A further long press on the non-text element in a note should allow Andrew to open the image/sound in another application on the device that has told Android that it is an app that can handle pictures or sound. Ideally he will then actually choose an image editing app rather than a gallery or music playing program.

Again, I would be very interested in hearing feedback on this design.

In order to try to encourage comments on this series, the best comment on any post on my blog with the design tag made before 11:59PM on 12/07 will get their choice of The Orange Box, The Ship or Cthulhu Saves the World and Breath of Death. Provided they also provide me with contact details.

Note Taking App Note Lecture-mode UI Design

Given the feedback I have received regarding the purpose of notes, I have formulated 2 designs based around two different approaches. I am going to focus on the Lecture Mode note taking UI for this post. I was reminded by a friend at lunch that I don't need to use the same UI for both lecture mode and (re)viewing.

The Lecture Mode Sidebar

The Lecture Mode sidebar is meant to allow for easier and faster photo and audio integration into notes. The key idea is that taking a  photo or performing audio recording should not be atomic tasks (i.e. a task that has to be both started and completed before other actions are taken). The standard android conventions for photography involve literally moving the user into a photo taking application (which occupies the entire screen) and only returning once the photo has been taken.

The camera pane in this sidebar will show a live thumbnail of whatever the rear facing camera is showing. A single tap will take a photo and add it into the notes, pinching will zoom the camera in and out, and a long press will bring up a menu with basic camera controls (most importantly a control to swap between multiple cameras in case the app accidentally picks the front facing camera).

The Audio recording controls consist of "Record", "Stop" and "Oh Shit That Sounded Important". There is no playback button there, because once the audio is saved into the notes the playback controls are attached to the audio snippet.

The Oh Shit button is a little more complicated. The app will automatically record whilst it is running, keeping the last say 90s of audio. The idea is that if Andrew loses focus and stops paying attention then realises that what is being discussed was probably important, he can press the big red button and the last 90 seconds is automatically saved and audio will continue to be recorded until the stop button is pressed. I have to give Kaz the credit for this idea, it seems like a great way to deal with lapses in concentration.

I am not actually sure what I would do with the rest of the sidebar space, it could be used for some of the menu functions like save and load, or it could be eliminated and some of the other elements enlarged. The sidebar can also be swapped from one side of the screen to the other though a settings menu.

Outlining
This is the first of the two note taking ideas I have had. In this approach Andrew makes his own notes during the lecture and these notes are assembled into a tree structure. Sections of the tree can be dynamically expanded and collapsed and the notes can be easily rearranged by moving one branch to another section of the trunk.

This approach leads to a natural summarisation process and allows easy skimming of notes to find terms associated with particular topics. Information can be hidden when trying to test knowledge and Andrew only needs to go into detail in sections where he is less confident of his own knowledge.

The obvious downside of this approach is that the lecture slides that are typically provided are can't really be utilised. They could be added via photos or added as pictures but the bulk of the notes must be created by Andrew during the lectures. This approach emphasises the note principles 2 and 4. Notes are summaries of what is covered in lectures and notes are easily skimmed.

PDF Annotation
The other approach is to use the slides provided. Assuming that either they will already be PDFs or can easily be converted into PDFs, this approach then creates a layer that is placed over the top. In Lecture Mode you simply tap a spot on the slides and start typing and this becomes an annotation. Andrew doesn't need to write down everything, he simply needs to add any particular detail that is missing from the slides. When a given note loses focus it immediately collapses into a small dot to avoid taking up too much space. It can be reselected and modified but the focus is around creating new annotations.

It is this approach that really emphasises different UIs for note taking and note (re)viewing. In a later post I will talk about my ideas for how the annotated notes would look in a non-lecture mode.

I would really appreciate feedback and thoughts on these designs and how you think they could be improved.