You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 44 Next »

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
            

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.

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

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

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

Cons:
View/Edit screen:


In edit mode

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, and 

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

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

 - 

 - Accidental deletions will be addressed
using an undo system.

Design 2

Prototype

Storyboard

Learnability

Efficiency

Safety

 

 

 

 

Design 3

Prototype

Storyboard

Learnability

Efficiency

Safety

Timeline Screen                                 View Screen
                     

Edit - Text Tab               Edit - Photos Tab            Edit - Contacts Tab                                   

                                                                                                                                               

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

  • No labels