Added by Fluid Wiki Administrator, last edited by Allison Bloodworth on Oct 04, 2007  (view change)

Labels:

comp_analysis comp_analysis Delete
Enter labels to add to this page:
Wait Image 
Looking for a label? Just start typing.

Comparison of several drag and drop interaction implementations for organizing photos. The term "Interesting Moment" is taken from the Yahoo Design Patterns documents, which describes various times at which the UI needs to give the user some kind of feedback.

Video Examples:

  1. Picassa Web
  2. Flickr

Event Comparison:

Interesting Moment
Picassa Web Flickr Photo Organizer iPhoto
Page Loaded images are shown as small thumbnails
drop shadows indicate "you can do something with this"

Mouse Hover Cursor changes to pointer Cursor changes to pointer
Image Clicked Border appears indicating "selected state" N/a
Drag Initiated Half-alpha 'shadow' created Original image becomes the shadow
Dragged object is at full alpha
Cursor changes to four-way arrow
Drag Over Valid Adjacent images move out the way to indicate a valid drop point Original image (half alpha) 'follows' cursor to indicate potential new position
Drag Over Invalid No change in thumbnails Snaps to closest 'valid' position

Drag Over Original No Change in thumbnails Snaps to closest 'valid' position (in this case the original)
Drop Accepted Original object removed, and placed in new position Dragged Object moves to new position (animation), replacing half-alpha version.
Drop Rejected No Change, Dragged object removed
No Change, Dragged object removed

Drop on Original No Change, dragged object removed
No Change, dragged object removed


External Links