interactive media design week 2. usability: rules and principles 7±2 principle 2-second-rule ...

Interactive Media DesignWeek 2

Usability: Rules and Principles 7±2 Principle 2-Second-Rule 3-Click-Rule 80/20 Rule (The Pareto principle) Eight Golden Rules of Interface Design Fitts’ Law Inverted Pyramid Satisficing

Baby-Duck-SyndromeBanner-BlindnessCliffhanger-Effect (Zeigarnik-Effect) Gestalt principles of form perceptionThe Self-Reference Effect

Eye-Tracking Fold Foveal viewport (Foveal area) Gloss Graceful Degradation (Fault-tolerance) Granularity Hotspot Legibility Minesweeping

Mystery-Meat Navigation (MMN) Physical consistency Progressive Enhancement (PE) Readability User-centered design (UCD) Vigilance (sustained attention) Walk-Up-And-Use Design Wireframe

1. Tiny clickable areas2. Pagination used for the wrong

purpose3. Duplicate page titles4. Content that is difficult to scan5. No way to get in touch6. No way to search7. Too much functionality that requires

registration8. Old permalinks pointing nowhere9. Long registration forms

1. Hidden log-in link. 2. Pop-ups for content presentation. 3. Dragging instead of vertical navigation. 4. Invisible links. 5. Visual noise. 6. Dead end. 7. Content blocks layering upon each

other. 8. Drop-Down Menus. 9. Blinking images.

1. You don’t use pop-ups.2. You don’t change users’ window size.3. You don’t use too small font sizes.4. You don’t have unclear link text.5. You don’t have dead links.6. You have at most one animation per

page.7. You make it easy to contact you.8. Your links open in the same window.

1. Padded block links 2. Typesetting buttons 3. Using color to manage attention 4. White space indicates relationships 5. Letter spacing 6. Auto-focus on input 7. Custom input focus 8. Hover controls 9. Verbs in labels

1. Use an effective marketing principle2. Experiment with few colors3. Strive for Balance4. Strive for Clarity5. Address your users’ needs

1. Interface elements on demand 2. Specialized controls 3. Disable pressed buttons 4. Shadows around modal windows 5. Empty states that tell you what to do 6. Pressed button states 67. Link to the sign-up page from the log-

in page 8. Context-sensitive navigation 9. More emphasis on key functions 10.Embedded video

1. Highlight important changes 2. Enable keyboard shortcuts in your Web

application3. Upgrade options from the account page 4. Advertise features of the application 5. Use color-coded lists 6. Offer personalization options 7. Display help messages that attract the eye 8. Design feedback messages carefully 9. Use tabbed navigation 10. Darken background under modal windows 11. Lightboxes and Slideshows 12. Short sign-up forms