Page History

...

Due to the limited screen real-estate on the iPad, we wanted to use the entire screen to display a single photo; the user should be able to view the photo as large as he or she would like. Thus, the natural design is to present the photo such that it fills the screen, and provide minimal information that appears when tapped, and disappears automatically. Thus, aside from minor layout details regarding how the additional information is positioned, little can be changed in the Photo view design. Thus, we chose to only present one design for the Photo view, and focus our work on alternate designs for the album, photo list, and sharing views, which are presented in the sections below.

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

...

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

Albums View

This view displays albums as a grid, with a thumbnail of a photo within the album and the name of the album. Tapping or pinching an album displays it in the Photo Grid view. Different albums are shown depending on the selected tab; currently the “All Albums” tab is selected, which displays both the albums the user has uploaded, and the albums all of the users’ friends have uploaded. The “My Albums” tab displays only albums the user has uploaded, and the “Friends” tab displays an album for each friend, containing only photos in which the friend is tagged.

Search

Tapping the “Search” field at the top right brings up the keyboard and a filter bar. The albums view does not change, but albums not matching the search terms are hidden as the user types. The filter bar presents four ways to search: by the name of the album, by the creator of the album (the friend who uploaded it), by the people tagged in the album (in which case the filter field autocompletes the names of friends, and multiple friends can be entered), and by all of the above properties at the same time. Note that searching for people tagged in the album displays albums with at least one photo with the entered people tagged; the user has to open the album and either scroll through the photos or re-enter the search to see just the photos of the chosen people. Also note that Search in the Photo Grid view behaves in the same manner as Search in the Albums view.

Photo Grid View

This view displays photos in a particular album as a grid, with a thumbnail of each photo and its caption (if available). Tapping or pinching on a photo displays that photo in Photo view. The user can search in this view just as in Albums view, and the user can choose to share the entire album via a button in the toolbar (tapping the button pops up the menu shown in this sketch). The user can go back to the Albums view by either tapping the “Back” button, or choosing a new tab at the bottom.

Storyboard

Advantages

Learnability: Overall, this design presents a very learnable interface. First, it follows the metaphor of the physical album quite closely; PhotoBook initially displays many albums. Then, the user can tap or pinch on an album to open it. Finally, the user can tap or pinch on a photo to pull it out of the album to take a closer look. It is also externally consistent; it is similar to the interfaces of many other photo organizing applications with which users are likely familiar, including iPhoto, the iPad’s “Photos” app, and Facebook’s website. Additionally, it uses standard interface widgets found throughout other iPad applications. Finally, although the photo browsing and searching experience is divided into two views - Album view and Photo List view - these views behave in the same a similar manner. Specifically, the user can tap and pinch on thumbnails to open them in either view, and the user can filter the displayed thumbnails using the same filter interface.

...

Error prevention and correction: Since PhotoBook focuses on content consumption, rather than content creation, many classes of errors found in other applications are not applicable in our designs. It is, for example, impossible to accidentally delete a photo or tag the wrong person in a photo, since deleting and tagging are not supported features. Thus, this design prevents users from making serious errors. There are, however, several minor errors that can occur. For example, if the user enters the wrong search term in the filter field, she can simply use the standard backspace key to correct the error and observe the new results appear live, confirming that she has entered the correct terms. Additionally, in this design, if the user is searching for a particular photo, she has to open albums that she thinks might contain that photo. However, if she chooses the wrong album, then this interface offers a “Back” button to return to the Album view, with her scroll position maintained, so she can try another album.

Disadvantages

Learnability: This design’s greatest strength lies in its learnability. However, as expected, the primary instances where the design’s learnability breaks down is where the design breaks the physical album metaphor. For example, the “Friends” tab displays an album for each friend containing the photos that friend is in. This provides a powerful organizational and searching tool, but most people would not copy all of their photos and make an album for each of their friends. Thus it may be unclear what these albums actually contain.

...

Error prevention and correction: As noted above, it is rare for users to be able to make a serious error in PhotoBook. Navigation errors, however, may be common when the user is searching for a particular photo and has to look through several albums. While it is easy to correct this error by using the “Back” button, the other designs mentioned below make the error less likely to occur and faster to recover from. Specifically, the user does not need to “open” albums in the Side-scroll design (Design 2), and thus will not open the wrong album by mistake. In dDesign 3, opening an album is less of a commitment than in this design, since instead of being moved to an entirely separate page, some other albums remain visible when an album is opened, and an album can be closed by simply tapping anywhere outside the album.

...

Design 2 - Side-scroll View

The basic feature of this design is that the photos are displayed horizontally by groups, and the user can scroll horizontally to view the pictures in that group. There are four main views for this design: albums view, friends view, search view, and search result view. The user uses the tabs at the top of the window to switch between the various views.

Albums View

Albums view is reached by pressing the “Albums” button in the tabs. In this view, the photos are displayed by albums. For example, in the sketch below, there is an album called MIT Fall 2010, that was uploaded by Andrew Smith, on the 01/10/2011. Four photos from that album are displayed, and the other ones can be seen be scrolling horizontally. The user can enter the full screen mode by tapping a picture.

Friends View 

Friend's view is reached by pressing the “Friends” button in the tabs. The photos are displayed by friends, meaning that for each Facebook friend, we show the pictures in which he/she is tagged. For example, we can see someone called Itai Turban, and four pictures in which he is tagged. Similarly to the Albums view, the user can scroll horizontally to see more pictures.

Search View

Search view is reached by tapping the “Search” button and consists of a search page in which the user can search by people tagged in the album, name of the album, creator of the album, or all of the above, as described earlier. In the sketch below, the user would be searching for all pictures in which Jennifer and Brian are tagged (not all search possibilities are shown in the sketch below)

Search Results View

Search Results view is reached after entering the desired search. The results are displayed by album. For example, if the user searches for photos in which X and Y are tagged, then it will display all the albums that contain at least one picture in which they are both tagged, and it will display all such pictures in that album (which again can be viewed by scrolling horizontally).

...