Page History

Timeline Screen                                View/Edit Screen
Image Added             Image Added

Timeline Screen:
The timeline shows a scrollable
list of journal entries. The list
grows downward in chronological
order as new entries are added
using the "new entry" button,
which is always after the last entry
in the journal. The screen always
opens to the end of the journal.

A divider is inserted each time the
entries on screen belong to different
months/years. An identical divider
is always at the top of the screen
showing the month and year of the
first entry on the screen.

The list scrolls slightly past the
last entry so that the "new entry"
button is near the center of the
screen when at the end.

Each entry shows a time and
abbreviated date, as well as a
snippet of the actual entry (first
few words of the text, a photo
thumbnail).

Clicking on an entry takes the
user to the view screen.
The context menu (press and
hold on the touch screen) allows
the user to share the post.
Clicking on the "new entry" button
takes you to the edit screen for a
new entry.

View/Edit Screen:
The app uses the same screen
for both view and edit functions by
employing "view" and "edit" modes.

In view mode, the time and rough
location of the post are shown at the
top of the scrollable pane, and the
journal entry is shown as series of
paragraphs of text (with embedded
contact links) and pictures.

The context menu allows the user
to take a new photo, import a picture
from the SD card, or add a contact
link. Normal copy-paste functionality
also works, as with standard android
apps.

In edit mode, the entry is editable
like a text box (with flashing cursor),
and a "save" button appears in the
lower right corner at all times.

The app comes with a "welcome"
journal entry that shows the kinds
of content users can add to a
journal entry.

Each new journal entry defaults to
the current time and location, lets
the user alter these manually by
entering a different time&date, and
selecting a location on the map.

Pros: 
Timeline screen:
- The new entry button appears as
a placeholder in the list of journal
entries, showing the user where
new entries will appear.

- The new uses a "+" icon affordance
for adding content.

- The journal entries are stacked in
chronological order, with the month
and year always on-screen. This is
consistent with a paper journal or
organizer with dated pages. This is
also consistent with many computer
visualizations of timeline data.

View/Edit screen:
 - The WYSIWYG editor/view screen
helps learnability by letting the user
dynamically preview the journal post
as the user enters content.

 - Editable fields are consistent with
other android apps.

Cons:
 - The timeline looks more like a list
than a timeline, making it difficult to
visualize passage of time between
journal entries.

 - The edit screen does not have
on-screen affordances for adding
pictures or contact links (uses a
context menu instead), making it
harder for the user to learn how to
embed photos and contacts.

Pros:
- The sticky month/year dividers help the user to
quickly navigate the journal by flicking up/down,
and stopping at the right month before searching
for a particular entry.

- The WYSIWYG viewer/editor maximizes
the screen area given to the journal entry,
which helps the user keep more of the entry
on-screen.

 - The save button in the edit view is sticky to the
lower right corner, and is always on screen, so 
the user does not have to scroll after entering
content.

Cons:
 - The timeline screen must be at the end of the
list in order to add new journal entries. Although
the app opens to the end of the journal, a user
has to manually navigate to the end after viewing
prior posts in order to add content.

 - The minimal editor forces the user to employ
a context menu (rather than an on-screen button)
to add photos to the journal.

Pros:
 - Accidentally creating a new post is easily
undone by not saving the newly created post.

 - Only a small number of functions affect the state
of the journal (delete, save, new entry), and each is
obvious, and reversible.

 - Accidental deletions will be addressed
using an undo system.

Cons:
 - Employing two modes for the view/edit screen
may lead to mode errors. A user may attempt to
make edits in the view screen, or accidentally
edits.

- A sticky "save" button in the edit screen can be
accidentally clicked, forcing the user to re-open
the post in edit mode to finish entering content.

Timeline Screen
Image Added
View Screen          Edit Screen
Image Added     Image Added

Timeline Screen
At the top of the timeline screen is a map
with dots at all of the locations of the visible
posts below. The map will automatically
resize to encompass them all with as much
detail as possible. There is an arrow across
the screen showing the direction of travel,
using the locations of the visible posts as
points to fit a curve for the arrow to follow.

At the bottom of the timeline screen is a list
of posts from the earliest at the top to the
latest at the bottom. Only a few (in the
drawing, four) posts are visible in the list at
a time. By default the list shows the most
recent posts.

Posts are separated by
headings with the month and year
corresponding to the posts under the
heading. The line for each post is
designated by a date and time, as well as
the first few words (if any) and a small icon
to indicate the presence of a picture (if any).

This bottom section is vertically scrollable
by swiping a finger up to see later entries
and down to see earlier ones. At the
bottom of the list is a button to create a
new entry. This will bring the user to the
edit screen with the current time and
location filled in by default.

The user may press and hold a finger on an
entry to see the options to share, edit, or
delete the entry. Just tapping once on an
entry will bring the user to the view screen
for that entry.

View/Edit Screen
The view screen shows the user first the
time and location of the post, then any
pictures, then any contacts, and finally any
text in the post. This screen is scrollable in
the same manner as the list in the timeline
screen. The user can get to the edit screen
by pressing and holding on the screen or
by using the phone's menu button.

The edit screen looks similar to the view
screen, with the addition of a few buttons
and visual cues which let the user know she
can edit the post. The time and location are
underlined, there are buttons to add photos
and contacts, and the textbox has a border
and a cursor.

In addition, there is a "save"
button in the lower right hand corner, which
will save any changes and bring the user
back to the timeline screen. To delete a
photo or contact from the post, the user
must press and hold over the item they
wish to remove and select "delete".

Pros:
Timeline Screen
- the "new entry" button is visible upon starting the app,
  so it is easy to understand how to create a new post

- the list of posts is in chronological order in the style of
  many calendars, so the order is quickly discernible

- the map moves as the list is scrolled, so it is easy to
  connect the points on the map with the visible posts

View/Edit Screen
- the buttons for adding, the underlining, and the cursor
  in the textbox are all strong visual cues for the user to
  edit those parts of the post in edit mode

Cons:
Timeline Screen
- the screen is more cluttered compared to the other
  designs - in particular, the map may be distracting

- the map may look like it's interactive when it is not

- the user may have trouble determining how to edit,
  share, or delete a post

View/Edit Screen
- the user may have trouble determining how to get
  to edit mode from view mode

- the user may have trouble determining how to delete
  items in a post in edit mode

Pros:
Timeline Screen
- the "new entry" button is visible upon starting the app,
  so it is one button tap to create a new post

- it takes only one tap to view a post

- the month and year headings make it easier to search
  through past entries

- the map moves as the user scrolls through past entries,
  also making it easier to find one in particular

View/Edit Screen
- adding items to a post in edit mode is just a tap away

- saving a post takes just a single tap

Cons:
Timeline Screen
- scrolling through the entries takes a bit of time since
  only the bottom half of the screen is scrollable

- because there is less information for each post (as
  compared to Design 1) in the list, it is more difficult to
  search for a specific post based on the information in
  the line of the post

Pros:
Timeline Screen
- any new entry accidentally created is easily deleted

- accidentally deleting a post can be undone with a
  temporary button that appears after a deletion occurs
 
View/Edit Screen
- any unintentional changes to posts can easily be
  seen in the view screen and changed back in the
  edit screen

Cons:
Timeline Screen
- the lines in the list of posts are thinner than in
  Design 1, so it may be easier to click on the wrong
  post