GR2
Scenario
Max Power, 25, is an adventurous graduate student. He likes to record all of his traveling experiences, including the places he has been to, the friends he has made, and the different food he has tried.
He is currently at the top of the Eiffel Tower. Wanting to capture this breathtaking view, he takes out his smartphone and opens the Travel Book application. He creates a new post on his timeline, which then prompts him to add a photo. He takes a picture of the view, and adds it to his post. He then writes a small description: "Here is the beautiful view from the top of the Eiffel Tower. The weather is perfect- a clear blue sky with a couple of puffy clouds!" He saves the post, and views his timeline to see the changes.
This is when he realizes that the photo he has posted is not so great-- there was a stranger in a corner staring awkwardly toward the camera when the picture was taken. Max immediately edits the post, by taking and adding a new photo.
Finally, Max decides that the photo is worth sharing with friends, so he adds "Yes, envy me!" to his description and shares his post on Facebook, through the Travel Book application.
Satisfied, Max continues on with his adventure, and heads off to his next stop, the Arc de Triomphe.
Designs
Each of our three designs has two screens: the timeline screen and the view/edit screen. The view/edit screen has two modes, one for viewing a post and one for editing it, which may look more or less similar to each other depending on the design.
Design 1
Prototype | Storyboard | Learnability | Efficiency | Safety |
---|
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. |
Design 2
Prototype | Storyboard | Learnability | Efficiency | Safety |
---|
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 |
Design 3
Prototype | Storyboard | Learnability | Efficiency | Safety |
---|
Timeline Screen View Screen Image Added Image Added
Edit - Text Tab Edit - Photos Tab Edit - Contacts Tab Image Added Image Added Image Added
| The timeline screen in this design shows posts in chronological order along horizontal axis. Each post is represented by a thumbnail of the first photo in the post. Ideally, the display of the timeline will scale and adjust to the density of posts, so that there will not be large gaps between posts. Tapping any individual post will bring you to the view screen. To share this post, the user will tap his phone's menu button and select "share". To edit this post, the user will also tap his phone's menu button and select "edit." This will bring you to the edit screen. Tapping "New Post" on the timeline will also bring you to the edit screen.
The edit screen contains three tabs, for editing a text description, adding photos, and adding contacts.
The + sign in the photos tab will bring you to your phone's camera interface. The + sign in the contacts tab will bring you to your phone's contacts interface. Tapping SAVE on any tab will bring you back to your updated timeline.
| Pros: - The "New Post" box on the timeline screen indicates where the new post will be if you create it. It teaches the user that all his posts will be added to his timeline upon creation.
- Internal consistency- the left and right buttons in the timeline, view, and edit screens have the same appearance and functionality. The - and + signs are also consistent across screens.
- Design is simple - it has a small but efficient set of buttons, and the edit mode is neatly organized into three tabs. Cons - The "SAVE" button might cause the user to believe that you must save after every edit, instead of doing so only once at the very end. - It might not be easy for users to learn to use their phone's menu button for sharing and editing purposes.
| Pros: - You can quickly view a recent post by tapping on its thumbnail in the timeline.
- Saving a post immediately brings you back to the timeline.
- The - and + signs provide quick ways of adding/deleting entries.
Cons: - If your timeline is very long, it will be slow to find a specific post from long ago (you can only keep tapping the left arrow, or flicking the screen to the right). - Editing can take longer because you need to switch between tabs.
| Pros: - Every mistake that you might make in a post is easily corrected by going to the edit screen. - Every mistake is visible and easily detected on the timeline screen or view screen.
- 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.
- 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.
|