Downloaded 381 times
Uploaded byKathy Gill
Intro to Web Design
The document discusses principles of good user experience and interface design. It provides principles from experts like Schneiderman, Norman, and Krug on how to design intuitive and easy to use interfaces. Key principles include consistency, visibility of actions, clear feedback, and reducing cognitive load on users. The goal is to design interfaces that "don't make me think" and are obvious to use. It also discusses Kathy's rule of designing interfaces that are polite, self-explanatory, and allow users to easily understand where they are and navigate between pages.
More Related Content
![Copy of Presentation - [Your Organization Name]_20250924_181258_0000.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/copyofpresentation-yourorganizationname202509241812580000-251117131601-9744dd2d-thumbnail.jpg?width=640&height=640&fit=bounds)
Intro to Web Design
- 1. Design Fundamentals UserExperience, Aesthetics, Process 03 November 2011
- 2. Tonight What IsDesign Design Principles Design Process
- 3.
- 4. Quote: A designeris a visually literate person, just as an editor is expected by training and inclination to be versed in language and literature… Douglas Martin, Book Design, quoted in Designing Visual Interfaces (8)
- 5. The Key Goodinterface design enables increased productivity, reduces errors, and provides a “better” user experience
- 6. Our Goal ObviousDesign = “ Don’t Make Me Think” Design
- 7. Design Principles SchneidermanNorman Krug
- 8. We Scan, WeDon’t Read Heat map from eyetracking research via Jakob Nielsen: http://www.useit.com/alertbox/reading_pattern.html
- 9. How We ReallyUse The Web http://www.wdvl.com/Authoring/Design/Dont/index.html
- 10. Ben Schneiderman Strivefor consistency Offer informative feedback Reduce short-term memory load Enable shortcuts Offer simple error handling Make actions reversible
- 11. Don Norman Visibility – Can we see it? Feedback - What is happening?!? Mapping – Do the controls do what I think they will do? Consistency – Does the widget do the same thing this time as it did last time? Is this how things work on other sites? Is that navigation element in the same place?
- 12. Steve Krug Don’tmake me thin
- 13. Quote: When I’ m looking at a page that doesn ’ t make me think, all the thought balloons over my head say things like “ OK, there ’ s the ____. And that ’ s a _____. And there ’ s the thing that I want. ” Steve Krug Don’t Make Me Think
- 14. Kathy’s Rule: Be Polite aka Don’t Be Rude!
- 15. Understand who Iam and why I’m here Implementing Kathy’s Rule
- 16. 1. Know whyI’m here and greet me appropriately Less than a quarter of the visible portion of the page is devoted to actions that might have triggered a citizen visit.
- 17.
- 18.
- 19. 2. Where amI, where can I go, where have I been? Contrast is important for readability. So are “you are here” signals.
- 20.
- 21. Ahem. Any ideawhat this is? It’s the Washington Post redesign.
- 22. 3. Is thata link? If you have to tell someone where to click … rethink the design!
- 23. 4. Practice appropriateconsistency
- 24. 5. Be personable.That means human!
- 25. Don’ t writelike lawyers!
- 26. Let me knowwhat others think.
- 27. Make it easyfor me to talk to you.
- 28. Implementing Kathy’s RuleSummary The page/screen should be self-explanatory, obvious I should be able to easily tell where I am, where I’ve been and where I can go A link should look like a link. If something looks like a link, it should be a link. Practice appropriate consistency (header, footer elements in particular) Be personable
- 29. A Quick CheckWhat is the key info people are seeking (what are they trying to do)? List 6-10 things. Rank them in importance. Now go look at the website Compare your rankings of information to the website
- 30.
- 31. Contact Kathy EGill @kegill kegill at uw dot edu http://faculty.u.washington.edu/kegill
- 32. Resources Ask Tog,First Principles of Interaction Design, http://www.asktog.com/basics/firstPrinciples.html OneExtraPixel, 10 principles of navigation design, http://www.onextrapixel.com/2009/07/03/10-principles-of-navigation-design-and-why-quality-navigation-is-so-critical/ Smashing Magazine, 10 principles of effective web design, http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ WebDesign, Understanding visual hierarchy, http://webdesign.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-web-design/
Editor's Notes
- #31 http://www.flickr.com/photos/frauleinschiller/4343425717/