GR6 - User Testing

Design

The design we developed in GR2 was remarkably successful. Paper and computer prototypes demonstrated that our basic design framework worked very well for all the tasks we described in GR1. However, we still iterated our design after GR3 and GR4 to make minor adjustments that resolved the usability issues we discovered. Additionally, we spent a lot of time on graphic design in GR4 and GR5; we thought a beautiful visual design could greatly improve the usability and appeal of our product.

The following sections describe the major features of our interface.

Login


When the user launches PhotoBook for the first time, they are redirected to their web browser, where they are asked to log in on Facebook’s website. We did not have control over the login page itself, but we tried to make the experience as efficient as possible, as we know users dislike having to login. We achieved an efficient login experience by automatically directing users to Facebook’s login page, by automatically returning back to the application immediately after they login, and by saving login credentials for as long as the user desires so the user does not need to login again on future launces.

Albums View

Albums View displays a list of all albums the user’s friends have uploaded. Each album has a thumbnail of a photo from that album. We display the album’s name and the date it was uploaded below each album thumbnail. Facebook does not provide a chronological list of albums, but we found that users are very interested in being able to look through their friends’ recent photos from time to time. This view makes this possible, as it is designed for exploring; users can navigate through this view very quickly and easily, without a specific goal in mind, such as finding a particular album. In our user tests, we discovered that users have a lot of fun in this view. For example, one of our users discovered some very recent Senior Ball photos that they did not know were uploaded yet, and wanted to spend a lot of time looking through them.

Although this view represents a very traditional look for a photo application interface, we discovered several usability problems in GR3 and GR4 that we addressed in our implementation:

In GR3, users had trouble distinguishing between albums and photos. In GR4, we gave album thumbnails rounded corners to be externally consistent with many photo management applications, such as iPhoto.

In GR4, users were unclear how their albums were sorted. Indeed, we were unsure ourselves the best way to sort albums. In GR5, we added a relative date (e.g., “2 days ago” or “1 year ago”) below each album and sorted the albums by date, with the most recent albums at the top. We thought this was the most common desired sorting behavior, since Facebook users are most interested what their friends are doing now, not what they were doing a year ago.

Friends View

Friends view looks and works in the same manner as Albums view. We display all of the users’ friends with their profile picture and name. This list is sorted in alphabetical order. Like the Albums View, this view is designed for exploring; we want to allow users to scroll through this list, discover a friend they have not seen for a while, and be able to catch up on what that friend is up to.

In GR4 and GR5, users expressed a desire to have a more efficient way to jump through Friends view to get to, for example, a particular letter. We wanted to implement a control with letters on the side that allows users to scroll through quickly, as found in the iPhone Contacts application, but did not have enough time to implement this feature. [reword this]

Describe the final design of your interface. Illustrate with screenshots. Point out important design decisions and discuss the design alternatives that you considered. Particularly, discuss design decisions that were motivated by the three evaluations you did (paper prototyping, heuristic evaluation, and user testing).

Photo Grid View

This view appears when a user taps on any thumbnail in Albums or Friends view. For Albums view, it displays all of the photos in that album. For Friends view, it displays all the photos the selected friend is in, with the most recent photos at the top. 

We designed this view to promote explorable in Albums and Friends view. Traditionally, photo management applications take users to a completely separate page to view photos in an album. This requires users to make a significant commitment when they open an album; it may be difficult and inefficient for them to get back to their list of albums. Thus, users of these applications seem to only open an album once they are sure they are interested in it. Our design instead presents the photos in a “drawer” below Albums and Friends view. This drawer opens right below the selected album thumbnail, and leaves the top and bottom of the Albums and Friends view visible (yet dimmed to indicate that the album thumbnails are disabled). To close the friends view, the user just needs to tap outside the drawer. 

Additionally, we use an animation similar to that used to open folders on the iPhone home screen to display the drawer. This allows the process of opening an album appear gradual and continuous. This animation promotes learnability, as it makes it clear what the application is doing to open an album, rather than sending the user to an entirely separate page. It also makes it clear how to close the drawer; they just need to undo the action that opened it by tapping or dragging outside the drawer. Overall, we found that users jumped from album to album with confidence in PhotoBook; they did not think too much before opening an album, and felt like they were in control. This use control and freedom promotes our goal of explorability in these views.

In GR4, we put captions below the photo thumbnails. However, we received comments that, since most photos do not have captions, photos with captions unfairly stand out. Additionally, since many captions are long, they are clipped in Photo Grid view, and thus not very useful. In GR5, we removed captions from Photo Grid view, and only display them in the Full Screen Photo view.

Full-Screen Photo View

Once a user has tapped on a photo, it enters the full-screen photo view. The style of the photo view is similar to other photo viewers on the iPad. Controls are shown as overlays, with a black translucent style. Tapping on the photo shows and hides the overlays. Additionally, the overlays will also disappear automatically after a short period of time. 

Facebook photos have more information associated with them than other iPad photo viewers were designed to accommodate. The overlay needs to show the photo uploader, upload date, caption, and tags on the photo. The caption and tags can be of any length, or may not be present at all. The bottom overlay grows and shrinks to fit all of the content, without being larger than it needs to be on other photos.

Users can jump directly to the search view by tapping on a tag. This opens the search view, enters the selected person’s name, and begins the search automatically. To allow users to explore this feature, without accidentally activating it, tapping on a tag opens a popover which prompts: “Search for [Person’s Name]”. This both allows a user to learn what the button does, and allows the user to back out of an accidental click. Tags were drawn as rounded rectangles, to give them affordances for clicking.

Sharing


Photos can be shared from within the app. While viewing a photo, the standard icon for “Action” is shown in the navigation bar. Tapping it opens a popover with the available share actions. For now, we supported “Download” and “Email”. Tapping email opens the iOS standard email dialogue, with the photo already attached. This slides over PhotoBook, and the user is returned to PhotoBook once the email has been sent.


The search bar is displayed in the toolbar. As the user types, a popover appears with name suggestions from the user’s friend list. Tapping on a suggested friend inserts that friend’s name as a “token”, and begins the search for photos with that tag. Also in the suggestion popover is “Search album title [entered text]”. Tapping this inserts the text as a token, and begins a search for albums containing that string in the title. The “tokenization” allows the user to enter multiple search terms, as well as confirm that PhotoBook found the friend they want to search for. It also acts as a confirmation to begin a search. Searching is done continuously, for each new term that is entered, but does not begin until that term has been tokenized. This provides a reasonable real-time feedback to an expensive task.

Search Results View

While the other aspects of PhotoBook’s interface is tailored for casual browsing and discovery of photos, the search interface is for quickly finding a specific photo or set of photos. The search results will often only contain a few photos, so the technique of grouping photos and requiring the user to “drill down” is not as necessary. We wanted each photo to be easily visible. Instead of grouping photos into albums that had to be opened, only one album is displayed per line. Users can see new albums by scrolling vertically. The photos in the album are displayed horizontally, filling the entire line. If the photos exceed the width of the screen, the album can be scrolled horizontally. We found this mix of mix of horizontal and vertical scrolling was easy to use, but not very discoverable. We added a gradient at the end of the photos to indicate that there is more content and promote horizontal scrolling.

Implementation

Performance / Memory

One of the main challenges of the application was that the implementation had to handle a large amount of data in a low-memory environment. Additionally, this data had to be fetched from the network. We had several techniques to solve these problems.
One of the most important techniques was the use of “lazy loading.” When the app is launched we must download the metadata for all of the albums and friends. However, no photos are downloaded until they are visible on screen. We adapted a third party grid view to suite our needs. After a user scrolls, we figure which albums or photos are on screen, and start downloading them asynchronously. A placeholder image is shown until the download completes. PhotoBook also caches as much information as possible, but can release this cached data and download it again if memory is low.
Another area for concern with memory was the Facebook integration. Facebook queries were carefully written so that most of the processing would be done on the Facebook server, before the data is even received by PhotoBook. This improves responsiveness significantly for operations such as searching.

MVC

To keep the implementation well-encapsulated, our designed followed an MVC design pattern. Our data model included objects representing data types such as Photos, Albums, or Friends. We used a third party grid view for the display of photos and albums. Different view controllers customized the look of the grid view (for example, the difference between an album view and a grid of photos within the album). Protocols were defined to interface between different controllers. For example, the datasource protocol allowed is to write the view controllers as they would function in the mockup, and switch from cached data to live data from facebook without changing the view controllers.

Controls

We tried to use standard iOS controls as often as possible, to keep the look and feel consistent. Some controls had to be implemented ourselves. For example, the “drawer” animation is supposed to imitate the same animation from the iOS home screen folders. This is not a standard part of the framework, so it had to be implemented manually. Another example is the token search field. The idea of tokens is familiar from the iOS Mail app, but was not available as a standard control. Using standard controls, or closely mimicking other standard apps keeps PhotoBook consistent with other applications. This makes the interface easier to learn for new users.

Evaluation

As we had discussed in our project proposal and analysis, we have two main user classes. The first one is the facebook power-user, who uses facebook very often and knows most of its features very well. The second is the casual facebook user, who only uses it once in a while to keep in touch with friends. We conducted three user tests, one on a power user, and two on casual users. The power-user owns an iPad, and the other two are very comfortable using it, so they can all be considered iPad users. Also, the users often encountered the same problems but we will only show each problem once. Below is the briefing and tasks that we gave to the users, and the problems encountered by each user with possible solutions.

Briefing

PhotoBook is an iPad app that allows you to browse or search your friends’ Facebook photos.

We would like you to help us test the user interface of PhotoBook. We will give you a few tasks to accomplish in the app. As you complete these tasks, please talk out loud on what you are thinking. This will help us understand what could be improved in the app. We will try not to interfere and explain the user interface. If a task is unclear, you can skip it.

Testing PhotoBook includes logging into your Facebook account. This gives PhotoBook permission to access your photos. None of your information is stored, and PhotoBook will not post anything to your Facebook.

Tasks

  • (Before tasks are run, log out and kill PhotoBook completely).
  • Log into facebook.
  • Look around, find a few recent interesting photos.
  • Browse through all the photos in an album, full screen.
  • Look through your friends and find photos of them.
  • Once an interesting photo of a friend is found, find all photos of that friend.
  • Find all photos of that friend and yourself (or another friend) together.
  • Find all Christmas albums your friends have uploaded.
  • Email a particular photo to yourself.
  • Logout.

User Test 1: Facebook Power-user

  • Is confused by the Albums view because: (major)
    • he does not see that albums are organized by date
    • the name of the uploader is not shown
    • Suggestion: Add the name of the uploader and make the date of upload stand out more by making it bigger/change font and color.
  • Did not see that could search for multiple people at the same time (major)
    • Suggestion: add a placeholder in the search field saying “add more people/albums”
  • Did not see that you could scroll horizontally on search result view (major)
    • Suggestion: We simply need to increase the gradient shown on the side of the pictures to give greater scrolling affordance.
  • He complained that it took too long to scroll down to people listed at the end of the Friend’s view (major)
    • Suggestion: Add an alphabet index bar - a vertical bar filled with the alphabet that takes you to names starting with that letter when pressed.
  • Did not see the “search for album” suggestion in the pop-over (minor)
    • Suggestion: Add a little arrow at the end of the suggestion to show that it is clickable and will lead to a “new page”
  • The position of the logout button was inconsistent with other apps/facebook. (minor)
    • Suggestion: Position it in the bottom right corner of the app. Also makes the menu bar less clustered.
  • He found it very easy to find how to email a photo - he admitted that it was because it was consistent with other iPhone and iPad apps (good)

User Test 2: Casual Facebook user

  • No indication that no photos of a friend are available so thought that it was not loading the photos and kept on trying to reopen friend’s photos to load them (major)
    • Suggestion: need a “No photos” indicator.
  • Tried to tap “return” on keyboard - nothing happened. Didn’t realize he should tap “Search album titles...” (minor)
    • Suggestion:  Change “return” to “search” and have it default to searching album titles.
  • Took a few seconds to understand how to close an album (cosmetic)
  • App didn’t properly logout on launch - bug
  • Keyboard appeared in tags view - bug

User Test 3: Casual Facebook user

  • Trouble finding the “logout” button (minor)
    • Suggestion: Pick a different button for logout that has a greater affordance and external consistency. Also position it
  • Tried to pinch photo to close it, but didn’t work correctly (bug)

Reflection

We started our project with a very clear idea of what we wanted to achieve: an iPad app that allowed users to find, explore, and share their friends’ photos and albums from Facebook. After a brief brainstorming session, we came up with many possible features to include in our app. However, we spent many more hours of brainstorming to really pick the features which we thought were the most essential to the app. We wanted to make sure that our app kept a minimalistic design and had a strong focus on these basic features:

  • viewing photos in full screen
  • powerful search, especially allowing to search for multiple people tagged in pictures
  • efficient scrolling through albums and search results and displaying as much content as possible.

The majority of our project prototyping focused on the third point. Facebook provides different types of pictures, albums uploaded by a user, and photos in which a user is tagged. Therefore, we had to distinguish between the two which led us to the design of the Album and Friends views. However, there were many possible ways to display the photos within each view and a lot of the initial paper prototyping was to see how each arrangement would look. Once we decided on a particular layout for each page, we still used the subsequent computer prototype to test some of the details of the layout. For example, in the search results page, we realized that we needed to add an affordance to show that it was possible to scroll horizontally.

Simplicity was also a guiding principle in our design process. This was especially relevant when designing the search feature. We wanted to do complex searches of multiple tags and filtering by album title. We achieved this feature with only a single search field.

We tried to effectively use animation in our interface, and this had to be carefully included in each prototype. The most visible (and most complex) animation was the drawer animation for opening albums. We also used animation to expand the search bar and indicate the transition to search mode. When a photo is tapped, the full screen photo viewer animates open from the location of the thumbnail.

Overall, the design went very smoothly. Once we found fitting metaphors for each task, the details fit very nicely. We took advantage of each prototype to find problems and improve. We received great user feedback, and are pleased with the final result!

  • No labels