User Testing

After completing our hi-fi prototype, we wanted to put it in the hands of users to find out what works and what doesn’t. We completed 5 user tests to learn what features users liked, which they had trouble using, and to see if there were any design oversights on our part. We used the data we collected to improve our prototype.

Testing Setup

While users were performing tasks, we captured video of the screen, mouse, and the user, as well as audio of the user speaking aloud. We used ScreenFlow (Mac) to capture and edit the video we had collected. Users interacted with our prototype in Internet Explorer 7 on Windows XP running through Parallels. We used a local copy of our prototype to increase the speed and lessen the delay between clicks and pages.

Script and Tasks

After introducing ourselves, affiliations, the equipment, and explaining what was required of them, we attained informed consent regarding capturing video and audio. We had users perform 3 tasks concerning commenting, tagging, browsing, using different view types, changing settings. The tasks are below.

  1. Imagine that you received an email notifying you that your friend Ryan has uploaded new pictures to his album on his website. You received this notification in your email with a link that brings you to the current (Notifications) page that is open in front of you. Browse through Ryan’s photos and find your favorite one. When you find a photo you like, try to comment on the photo.
  2. Browse the photos some more, try viewing the Travelogue album in different view-types. When you find another photo that you like, try to tag the photo with descriptive information. Also, try to find a way to print or email the photo, but don’t actually do either.
  3. Return to the notifications page. Imagine that you’d like to receive notifications for another one of Ryan’s albums as well. Navigate to the settings for notifications and change them accordingly. Save your changes.

After users completed the tasks, they were asked a series of questions regarding their experience with commenting, tagging, browsing, view types, settings, and the overall look and feel of the prototype. Users were also asked follow up questions that came up during the tasks.

User Quotes

[Tagging]…would enhance the experience of photos.

The look and feel is simple, clean, and not cluttered.

What you need is there and pictures are at the center.

Usability Successes

Look and Feel

All users commented on the simple, uncluttered design, that helped to focus attention on the images.

Mosaic Image view with thumbnails

All users commented on this being the most usable and preferred way for browsing images.

Notifications

Users mentioned liking that people can subscribe to user’s albums and be notified when new images are uploaded.

Usability Issues

Below is an overview of the usability issues found during user testing. We will examine each issue and provide more detail of each issue and propose a possible solution.

No.
 Usability Problem
Priority
1
 ‘Next’ and ‘Prev.’ buttons require precision to operate
High
2
 Mosaic view does not provide large image for browsing
High
3
 Image controls (Print, email, etc) are hidden and difficult to discover
High
4
 Carousal view type is confusing and out of control
High
5
 Common features (Notifications, Settings) are difficult to locate
Medium
6
 Tagging function is unintuitive
Medium
7
 Thumbnails do not accurately represent the image
Medium

Finding 1

1
 ‘Next’ and ‘Prev.’ buttons require precision to operate
High

User had trouble with the next and previous buttons because they were only visible on mouse-over and required too much precision. This is a violation of Fitts’s Law. Also, mouse-over effect was inconsistent, possibly due to how the software implemented the rollovers.

Possible Solutions:

Assign a fixed space for these buttons near the bottom of the picture. Another possible solution is to split the image into two halves, and allow the users to click anywhere in the two halves to control next and previous actions.

Finding 2

2
 Mosaic view does not provide large image for browsing
High

Users wanted larger main image while viewing the album in the mosaic view. The thumbnails consume too much real estate in the default view.

Possible Solutions:

Provide larger image size and reduce thumbnail panel in the default view and provide options to view an image at different sizes. Other possible solution could be to provide a slideshow option that would enable users to view images in a larger size.

Finding 3

3
 Image controls (Print, email, etc) are hidden and difficult to discover
High

User had trouble with the print / email / download buttons because they were only visible on mouse-over and because mouse-over effect is inconsistent, possibly due to how the software implemented the rollovers. This issue is similar to the next / previous buttons issue.

Possible Solutions:

Provide better visual cues and mouse-over effects, assign a fixed space for these buttons near the bottom of the picture. Another possible solution could be to show the control initially and have them fade away within a few seconds so the user has a chance to see them.

Finding 4

4
 Carousal view type is confusing and out of control
High

Too many images are in focus at the same time and fast rotation makes it difficult to chase an image. Clicking on an image leads to a new window, which disrupted the image viewing experience.

Possible Solutions:

Redesign the Carousal to only allow on image to be in focus to draw and keep the users attention on a single image. Alternatively, we could discard carousal feature and focus on simpler experience using a mosaic view and slideshow, considering many users found it useless.

Finding 5

5
 Common features (Notifications, Settings) are difficult to locate
Medium

Users have to go through many links to find the settings page. It wasn’t obvious that My Gallery contained their settings, notifications, and potentially their albums. Perhaps users did not understand the scenario correctly or we did not sufficiently explain the relationship between them and the Gallery administrator.

Possible Solutions:

Put Setting and Notifications links in a prominent place on the interface and allow shortcuts to these pages from all other pages, such as the header near the login box.

Finding 6

6
 Tagging function is unintuitive
Medium

Users are confused between captioning the whole image vs. tagging a particular region. Also, little feedback is provided when the user clicks tag.

Possible Solutions:

Allow distinguished ways for region tagging and image captioning. Provide continuous feedback when user begins tagging, such as a hovering crosshair as the user is mousing over the image or provide them with a different cursor to communicate a different action.

Finding 7

7
 Thumbnails do not accurately represent the image
Medium

Users quickly noticed that only a section of image filled the thumbnail, giving them a distorted view of actual image. Users consistently though the image being displayed was not the image they clicked, until they further inspected the image.

Possible Solutions:

Pretty simple solution, scale down images to produce miniatures as thumbnails

Next Steps

If our team were to continue with this project, these are the things we would do next:

  • we would first implement fixes for usability issues and conduct another round of user test.
  • Second, our team would further develop new prototypes and view types, then user test to compare the results to the other prototype.
  • Third, start exploring admin interfaces for secondary persona.
  • Finally, meet with other Gallery team to consolidate research and design.