...
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).
...
| 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. |
Advantages
Learnability:
This design is very learnable. The idea of scrolling horizontally follows the metaphor of a photo book in which you would turn pages to see more pictures.
Also, in this design, searching is done in a separate page. The user clicks the Search tab, which opens up a search page. This makes it easier for the user to understand how to search, compared to Design 1.
Visibility:
The state of the model is clear to the user. The tabs at the top of the window clearly show in which view the user currently is. The arrows at the start and end of each row are shown if there are more pictures to view in the respective direction, which allows the user to know if it is possible to scroll to view more pictures. Furthermore, this design does not have the visibility issue of Design 1 of not being able to see other albums while browsing through photos in a particular album.
Efficiency:
The use of a separate page allows more flexibility for the search, so that a user could fill out multiple criteria for the search. For example, he could look for friends X and Y being tagged and albums with the name “MIT”. This would make it more powerful and faster for the user to find the picture he/she is looking for.
This design would also be very efficient for going through pictures after a search result looking for multiple tagged friends since, on average, there would be relatively few albums to scroll down through, and few pictures in each album that contain all the friends. Hence, the user would have to do very little scrolling, and would be able to find a specific picture very quickly.
Error prevention and correction:
Overall, the interface is not prone to errors. The horizontal scrolling would feel very natural to the user and make it simple for him/her to navigate back and forth between albums in pictures.
*Learnability: *This design is very learnable. The idea of scrolling horizontally follows the metaphor of a photo book in which you would turn pages to see more pictures. Also, in this design, searching is done in a separate page. The user clicks the Search tab, which opens up a search page. This makes it easier for the user to understand how to search, compared to Design 1.
Visibility: The state of the model is clear to the user. The tabs at the top of the window clearly show in which view the user currently is. The arrows at the start and end of each row are shown if there are more pictures to view in the respective direction, which allows the user to know if it is possible to scroll to view more pictures. Furthermore, this design does not have the visibility issue of Design 1 of not being able to see other albums while browsing through photos in a particular album.
Efficiency: The use of a separate page allows more flexibility for the search, so that a user could fill out multiple criteria for the search. For example, he could look for friends X and Y being tagged and albums with the name “MIT”. This would make it more powerful and faster for the user to find the picture he/she is looking for.
This design would also be very efficient for going through pictures after a search result looking for multiple tagged friends since, on average, there would be relatively few albums to scroll down through, and few pictures in each album that contain all the friends. Hence, the user would have to do very little scrolling, and would be able to find a specific picture very quickly.
Error prevention and correction: Overall, the interface is not prone to errors. The horizontal scrolling would feel very natural to the user and make it simple for him/her to navigate back and forth between albums in pictures.
Disadvantages
Learnability: This design is not externally consistent as, through our research, we have not found a single app that displays photos in such a manner. Hence, although it’s a natural interface, it might feel unfamiliar and take a little time to learn how to use it.
Visibility: As in Design 1, there is the problem that viewing a single picture in full screen hides all the other photos in that album, and all the albums in other rows.
Efficiency: We have discussed above that this design has an efficient Search Result View, but the efficiency of exploring photos and albums is terrible. Assuming that the user has the average of 300 friends, each with the average 20 photo albums, he would have to scroll through 6000 albums in the Album view. Assuming that the window would have at most 5 rows, that means that he would have to scroll through 1200 pages! This would make the album view rather useless.
The Friends view would contain an average of 300 rows (one row for each friend), which is very reasonable. However, on average, a Facebook user is tagged in 400 photos, so displaying about 5 in each row would mean that the user would have to scroll horizontally through 80 pages. This would be slow compared to Design 3.
Having search in a separate page makes it slower than search in Design 1. The user would have to tap the Search tab, then move his finger through the various fields and enter the information. Furthermore, having an extra page makes the search process more tedious and less smooth, and gives a immediate feeling to the user that it would take longer.
Error prevention and correction: Let’s say that a user is scrolling through friends in the Friends View. It would be relatively easy for a user to scroll too quickly while going though rows, and lose the previous position. The only way for him/her to find it again would be to scroll back and read the descriptions or be caught by a picture that he/she has just seen. The same could happen when scrolling horizontally through pictures, and in this case, the only way to recover would be to remember the last few pictures seen. This could be very frustrating for the user.
...
Design 3 - Folders + Combination
...