Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.

Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.

Designing Rich Web Experience

Bill Scott, Director from the UI Engineering team at Netflix shows ways to use RIA to enhance the User Experience. If you take more interest in the field of design patterns than drop by at www.interaction-patterns.org.

make it direct Use Drag
& Drop where appropriate Not for simply setting an attribute Don’t construct artiﬁcial visual constructs 18

make it direct Use Drag
& Drop where appropriate Not for simply setting an attribute Don’t construct artiﬁcial visual constructs Good for layout changes/re-organizing 19

make it direct Use Drag
& Drop where appropriate Not for simply setting an attribute Don’t construct artiﬁcial visual constructs Good for layout changes/re-organizing Good for grabbing items 20

make it direct Drag and
Drop Modules - Interesting Moments Grid Currently on beta.my.yahoo.com ID: Bill Scott & Eric Miraglia Date: Nov-0 Mouse Drag Over Drag Over Drag Over Drop Drop Hover Mouse Down Drag Initiated Valid Target Invalid Target Parent Container Accepted Rejected Cursor CSS CSS Move cursor Move cursor CSS Move cursor CSS Move cursor CSS Move cursor CSS Move cursor Normal Cursor Normal Cursor N Tool Tip Drag Object Modules animates into the area Modules animates back to M Full Opacity Reduced Opacity Reduced Opacity Reduced Opacity & Invalid Badge Reduced Opacity just below insertion bar the home area t Module comes to rest in new Module comes back to rest M area at full opacity r Modules slide up in a self-healing transition to close hole Drop Target I Insertion bar is removed as first Insertion bar is removed a No insertion bar, just a gap No insertion bar, just a gap Insertion bar showing where it will drop No insertion bar, just a gap No insertion bar, just a gap & original holeframe of animation as first frame of animation a Take care of the interesting moments 21