GR2 - Designs

Scenario

Charles has downloaded PhotoBook and wants to browse through Facebook photos. He opens the app, and logs into his Facebook account. After browsing around a bit, he sees his friend Jennifer. Charles has a crush on Jennifer. He opens photos of her to see what she has been up to. He finds a romantic photo of Jennifer and Brian. Charles is shocked. Brian used to be Charles’ best friend. Is this why they haven’t talked lately? Charles opens the search page on PhotoBook, to investigate this betrayal. Sure enough, he finds plenty of photos with Brian and Jennifer. Charles finds a particularly incriminating sledding photo, and emails it to Donovan, to see if he has any explanation.

Designs

Design 1 - Traditional

This design closely follows the traditional “album” metaphor to explore, find, and share photos. The user first sees a grid of albums with a chosen photo on the cover. Then, the user can open an album, which hides the other albums and shows only the photos in the chosen album, laid out as a grid. The user can choose a photo to pull it out of the album and view it closely (at a size that fills the screen).

Thus, there are three main views in this design: an Album view that shows all the albums the user and her friends’ have posted, a Photo Grid view that shows thumbnails of the photos in a particular album, and a Photo view that shows a particular photo at full screen. The photo view is the same across all three designs, so it is shown above. A standard paged navigation interface is used to move through these views; a “Back” button is placed at the top left corner of the Photo Grid and Photo views to move back to the last view the user saw. Additionally, there are tabs to switch among viewing all albums, the user’s albums, and albums containing photos of each of the user’s friends.

Overall, this design follows the approach used by most photo organizing applications, including iPhoto, the iPad’s “Photos” app, and Facebook’s website.

Storyboard

Design 3

Storyboard

Charles has downloaded Photobook, and wants to browse photos. He opens the app and the Facebook login page opens. Charles already has a Facebook account, and enters his login details.

After loading, the interface displays all albums by date. Charles doesn't want to see all albums though, he wants to see the photos of Jennifer, his crush. He taps on the "Friends" tab.

The friends page shows the name and profile picture of his Facebook friends. He scrolls to Jennifer's photo, and taps it. The photo is selected, and below it opens up all photos that Jennifer has been tagged in. It opens in a style similar to folders on the home screen of the iPad. He scrolls through these photos, and notices one where Jennifer and his friend Brian seem to be very close in. Intrigued, Charles taps the photo.

The photo viewing interface comes up. Sure enough, it is Jennifer and Brian, and there is definitely something more than just a friendship! Brian was one of Charles' best friends, but they haven't talked in a while. Could this be the reason that Brian has been avoiding him? Charles must find out. He taps the "Back" button to find out more.

Charles will search to find photos that contain both Jennifer and Brian. He taps the search box and it expands and opens the search mode.

Charles notes that "Tags" is selected as the search mode above the keyboard. This is what he wants, so he begins to type Jennifer and Brian's names. As he types, a popover appears with possible friend matches from Charle's friends list. As he types, search results begin to appear. He dismisses the keyboard to see the search results better.

Charles can quickly see all matching photos, sorted by date and album. If an album contains many matching photos, the interface scrolls horizontally within the album. Charles sees that their relationship must have started over Christmas break (of course! They are both from Chicago). Charles sees that Jennifer and Brian went on a steamy sledding date, and opens a particularly incriminating photo.

Charles can't believe what he is seeing. He wants to show the photo to Donovan, so he taps "Share" and then taps "Email."

A compose-email window appears, where Charles types his message. Maybe Donovan knows what's up.

Albums/Friends Page

On this interface, a grid of albums (or friends) is shown. Clicking on a photoset opens it in the same style that the iPad uses for folders on the home screen. Close the photoset by tapping outside of the opened portion.
This interface should be easily learned, because it uses metaphors the user is already familiar with.
It is efficient for browsing through large sets of albums, which each contains a large set of photos. The grid formation allows as many photosets or photos to be displayed as possible. You can quickly open and close a photoset without navigating screens.
Because the user is not creating data, there aren’t many errors they can make. If the user accidentally taps on a photoset or photo that they don’t want to browse, they can quickly go back.
Search
Search is the other main mode of PhotoBook (besides browsing). Switching to search is highly visible. The familiar search field is at the top of every page. Tapping it opens the search field, with three search modes shown above the keyboard.
The three search modes are “Tags”, “Title”, and “Uploader”. They can only search by one term at a time. This is a feature limitation, but makes the interface less complicated and easier to learn.

Search

Search is the other main mode of PhotoBook (besides browsing). Switching to search is highly visible. The familiar search field is at the top of every page. Tapping it opens the search field, with three search modes shown above the keyboard.
The three search modes are “Tags”, “Title”, and “Uploader”. They can only search by one term at a time. This is a feature limitation, but makes the interface less complicated and easier to learn. When "Tags" or "Uploader" are selected, the user is searching for a friend's name. A popover appears that shows possible matches from the friends list, to make the interface more efficient.

Photo Viewer

The PhotoViewer appears and covers the rest of the interface. This is so that the image gets as much screen real estate as possible. There are also translucent overlays for accessing features and displaying photo information. Tapping the photo makes the overlays appear and disappear, as is common in many iPad apps. The photo information is displayed at the bottom (an optional caption, who is tagged, the uploader, and the upload date). At the top is a button to exit the photo viewer. There is also a button to share the photo. A popover appears to show the sharing options (either download, email, or post the photo to Twitter). Otherwise, each option couldn't fit on the interface and symbols would be used instead (which are harder to learn). The popover adds another tap to each share, which sacrifices efficiency. If a user wants to download all photos in an album, they can do that from the album view.