...
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 shows 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).
...
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.
...
| 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. |
| 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 types 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 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. |
...
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
It 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
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.
Friends 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.
...
Design 3 - Folders + Combination
...