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.
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
!Traditional_All_Albums_Search.png|border=1,width=300!
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
After logging into PhotoBook, Charles clicks on the “Friends” tab and scrolls through the list. He comes across Jennifer’s name and nervously decides to tap on the gorgeous thumbnail of her to see her photos. 
Charles scrolls through the photos Jennifer is in and comes across a photo with a very worrisome caption, so he pinches on the photo to take a closer look
Charles scrolls through the photos Jennifer is in and comes across a photo with a very worrisome caption, so he pinches on the photo to take a closer look. 
He sees Brian with Jennifer and gets very worried. He confirms that it is really Brian noticing that Brian’s name in the “In this photo” section.
Charles wants to see all photos of Jennifer and Brian together so he can confirm his horrifying suspicions, so he first clicks Back to see photos of Jennifer.
Then he taps on “All Albums” and taps on the search field. He then taps on the “Tagged” filter. Finally, he enters Jennifer and Brian (which are helpfully autocompleted). He finds 13 albums that contain photos of Jennifer and Brian (note that only certain photos in each displayed album contain Jennifer and Brian, and perhaps only a subset of those photos contain them together).
Charles notices an album called “Mountain Trip” and recalls that Brian had recently gone to ski and sled without telling Charles. Charles suspiciously taps on the album to open it.
Charles scrolls through the photos to find photos that might contain Brian and Jennifer together. (Note that, instead of visually looking through the thumbnails, he could have also chosen to search within the album.) He finds a worrisome photo with the caption “Sledding” and taps to take a closer look.
Charles sees Brian and Jennifer together and is outraged. He opens the share menu and chooses “Email.”
The email composition box appears over the photo, and Charles types an angry email to his friend Donovan to try to get some answers. The incriminating photo is automatically attached.
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 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 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.
Visibility: The state of the interface is generally quite visible. Almost the entire screen is occupied by content, namely thumbnails of photos, and thus there is little “chrome” that gets in the users way. Every thumbnail is tappable or pinchable, and is thus directly manipulable. Additionally, every view has a title that indicates what is being displayed.
Efficiency: The grid design of this interface allows many thumbnails (about 9-12) to be displayed on the screen at a time. Thus, the user can quickly scan the screen to find interesting albums and photos, without excessive scrolling.
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 accidental 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.
Visibility: The paginated nature of this design poses visibility issues. Tapping on an album completely hides the rest of the albums, and tapping on a photo completely hides the rest of the photos. Thus, the interface introduces a “Back” button to restore the previous state, but the user must recall the last thing they were doing to know what to expect when she hits the back button.
Efficiency: Although this design allows a maximal amount of content to be displayed on the screen at a time, it exhibits poor efficiency for many tasks. First, when exploring many albums, the user must close the album they are currently viewing before she can open another one. This involves hitting the back button (which provides a small target area that may be distant from the user’s finger if she is scrolling through photos), then visually searching through the album thumbnails to find the next interesting album.
Second, this interface makes some searches difficult. It is easy to search for an album by its name simply by typing the name in the filter field in “All Albums” view, and it is easy to find, for example, photos in a particular album in which a friend is tagged by opening the album then using the filter field. But, as the scenario made apparent, it is much more difficult to find all photos containing two or more people together. The user must search for those two people in “All Albums” view (since “Friends” view will only contains albums only for a single friend), then open each resulting album to see the photos in that album, then find the specific photos that contain the two desired people. Since the interface for exploring and searching is the same in this design, other types of complex searches are difficult and time consuming.
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 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 design 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 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.