An online photo browsing system

Carrie Burgenercarrie@sims

Andrea Nelsonandrea@sims

Scott Fishersbfisher@sims

Mike Wooldridgemikew@sims

www.photocat.orgIs213-photocat@sims.berkeley.edu

PhotoCat: Before the Heuristic EvaluationPhotoCat: Before the Heuristic Evaluation

User could navigate time by selecting a range of time (month, day, year)

A User could move through time by clicking on Previous/Next or clicking the yellow links on the target

Larger thumbnail with metadata would be displayed when a user rolled over one of the images on the bulls eye

Single click of a picture on the target added a copy of the image to the Photo Bin

Buttons associated with the bin to: share, album, print a grouping of pictures

Filters to remove pictures from the current bulls eye based on where you were or who was around

Heuristic Evaluation: OverviewHeuristic Evaluation: Overview

24 Violations• 0 ~ Level 4• 11 ~ Level 3• 11 ~ Level 2• 1 ~ Level 1

Worst Categories were• Visibility of System Status (9)• Match Between System and Real World (5)• Consistency and Standards (5)

Heuristic Evaluation: Lessons LearnedHeuristic Evaluation: Lessons Learned

The bulls eye view needs better labeling

Where am I?

How are the segments laid out?

How do I find a specific day?

Not obvious what selecting week, month, or day does.

Where does this take me?

Empty sets were returned frequently. No way to find a week, month, day with pictures in it. The user had to move sequentially through time

Are albums displayed in the bin when they are returned?

How do I find an album once I created it?

Shouldn’t double clicking the picture open the full size version? Not just clicking it when it has been added to the bin

Current Prototype: Bulls Eye viewCurrent Prototype: Bulls Eye view

New labels on the bulls eye

Implemented a new Grid View

Developed a new date selection calendar. Bolded dates are those that include at least a single photograph

Rollover still shows metadata about a single photograph. Single click adds the picture to the bin. Double click displays a full size version of the photo

Added a view album button.

Changed labeling from “Create Album” to “Save bin as Album”

Current Prototype: Grid viewCurrent Prototype: Grid view

Grid view uses the similar controls and actions as the bulls eye viewGrid view

displays photos in a reverse chronological order. Coloring the background based on date and location. White vertical breaks mark the start and end of a date.

PhotoCat: Interactive Prototype II DemoPhotoCat: Interactive Prototype II Demo

Lets Twirl Some Photos!

Pilot Study: Test MeasuresPilot Study: Test Measures

• Number of times subjects used features. Which features were obvious or useful?

10 times 0 times

• Time spent completing tasks and using views. Was one view used more than the other?

BULL’S EYE GRID3:39/task 3:06/task

Pilot Study: Qualitative CommentsPilot Study: Qualitative Comments

• Users expected descriptive categories such as "outdoors" and "home" to appear in the Locations drop-down menu

• Static "Click to add to bin" instructions in mouse-over were confusing (one subject tried to click the text to add a photo to the bin)

• Users would like to share directly from grid view

Pilot Study: More Qualitative CommentsPilot Study: More Qualitative Comments

• Thumbnail images in the bull’s eye are too small for users to see what is in the picture

• Users employed grid view to see larger thumbnails when browsing for images

• Users wanted to be able to click and drag to move images to the bin

• Clustering of images on bull’s eye made it difficult to select a specific picture

Most Useful Lessons Learned Most Useful Lessons Learned

• Pilot testing suggests that a user can use the bull's eye and grid in tandem to complete tasks.

• Time measurements can tell you different things depending on the task.

• Users carry experiences and expectations from other application interfaces to PhotoCat.

Plans for Final IterationPlans for Final Iteration

• Add click-and-drag feature for moving photos to photo bin

• Update bull’s eye backgrounds to aid understandability

• Add single-image share link in the grid view

• Change placement and color of date hyperlinks on the bull’s eye

• Create separate demo interface that addresses overlapping thumbnails

Thank You!Thank You!