Post on 20-Dec-2015
transcript
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!