...
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 It 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
...
It Search view is reached by pressing tapping 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” 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).
Storyboard
| Charles first logs into PhotoBook and then decides to go through pictures of his friends. He thus enters the “Friends” view and starts scrolling down through friends. |
| He decides to search for all pictures of Jennifer and Brian so he switches to "Search" view using the tabs at the top and types their names into the "Tagged" boxes, which auto-complete with the correct name. |
| He is then taking to the Search Results view, where he starts to scroll through all the albums and photos where they are together. |
| He sees a particularly surprising picture of Jennifer and Brian in the Christmas 2010 album, uploaded by Jennifer. |
| He displays the picture in the Full Screen Photo View and decides to email it to Donovan by tapping the “Share button” and selecting email. |
...
Design 3 - Folders + Combination
...
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, since tapping anywhere outside of the album closes the album.
Search View
Search is the other main mode of PhotoBook (besides browsing).
...
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.
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. |
