Versions Compared

Old Version 20

changes.mady.by.user Jennifer L Wong

Saved on

compared with

New Version 21

changes.mady.by.user Ilia A Lebedev

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Overall, we finished our design and implementation since GR4.

Below is a brief design document expressed by way of annotated screenshots.

Screenshot

Description

Our journal view. Note the color correspondences between the
map markers and their entries. Arrow and markers adjust as The markers appear and disappear
you scroll through the entries in the list so that only the entries
visible in the list are shown on the map. The color of entries changes
as well: color corresponds to the list position of an entry on the screen.

We chose our colors according to aesthetics, good contrast, and to a 
lesser extent (but still considering) color blindness. The three main colors
used are a perfect triad of purple, green, and blue.

The map is animated when scrolling to keep the zoom and positioning of
the map consistent with the visible entries. The map is also interactive,
with the expected drag controls (zoom controls also appear when the
map is touched).

Shorthand icons highlight entries with photographs.

Swiping the list down causes the scrolling to build momentum and
continue for a short while after the finger is lifted. This causes a super cool
animation of the arrow 

An entry example in view mode. You can add multiple pictures
and textual descriptions. There is also a prediction for your
location.

All photographs taken in the simulator result in the android icon. When
testing on a real phone, real photographs are taken and inserted instead.

An entry example in edit mode. You can add/delete photos and
(via long press,
consistent with everything else in android) and change the text.

You can also add/delete contacts imported from the address book.

The text field automatically expands to accommodate multiple lines or
word-wrapped text.

To delete a photo, user can hold down on the photo to trigger
the displayed context menu.

(What is this supposed to show?)

The save button is accessible from the android context menu.

You can also hold down on any entry in the journal view to
trigger the context menu for sharing, viewing, editing, or
deleting the entry.

Pressing the menu button in view mode will open the menu
for editing, sharing, and deleting the entry.

This is the menu that shows up when you select "Share".
This is consistent with sharing functionality elsewhere in Android (for
example in the photo album).
All applications that can send messages of one form or another (facebook,
gmail, Goggles, etc) work with our app.

Overall, we decided to focus on presentation of the timeline. The view and edit functions are functional, but we have not innovated in that area.

We decided to disable selection of the map markers - It is a little practical because the touch screen has so many markers, and the arrow partially obscures them.

We chose to use a perfect triad of colors (leaf green - purple -blue) in our application for aesthetic reasons, but these colors also offer great contrast with the map and with each other. The colors perform fairly well from the point of view of color blindness, though this was not our main focus, and any triad will have diminished color blindness safety between one of the three pairs of color.

The arrow is shown tapered because it emphasizes its fluidity and direction, but mostly helps keep the map markers (which are more important) unclutteredTODO: talk about the color choices and arrow design (taper).

...

We made the following design changes in response to user feedback:

...

(We incorporated almost all suggestions and points of criticism, except the few explicitly stated at the end of this section).

Journal view (map) Map/Journal view mode:

  • Map is now interactive
  • Map icons are now positioned at the center of locations, not right above them
  • There is now a direct mapping between entries in the list and entries on the map, using colors
  • When creating multiple entries, the list automatically scrolls to the end to keep the add button and the most recent entries on screen.

Entry View Mode:

  • View now displays a location hint ("near <city>")
  • User can make swipe gestures to navigate between consecutive entries

Entry Edit Mode:

  • When exiting the edit mode with unsaved changes, user is asked to save or discard the entry. Entries are no longer automatically saved.

We also incorporated all other (and more minor) feedback into our final design EXCEPT:

  • We chose not to reverse the order of items in the list. The suggestion was made because the "add" button and the most recent entries disappeared from view when adding multiple entries. We remedied the problem by automatically scrolling to the end of the list to keep the add button and most recent items on screen by default.
  • We chose not to add individual delete buttons to photos in the edit mode. Doing this would be more consistent with iOS, but not with our target platform (Android).

Implementation

We have two main "Activities" in our code implementation. One is "JournalMapActivity", which corresponds to the journal/timeline screen. It is in charge of presenting the map, recalculating the arrow positions, and plotting the star markers. It also keeps track of the scrollable list of entries.

...