Designing Experience School of Visual Arts Instructor: Anh Dang 27 September 2008
Workshop Description <ul><li>This workshop will introduce students to the basic principles of user experience and provide ...
Agenda <ul><li>Introductions </li></ul><ul><li>Design Experience Overview </li></ul><ul><li>Lunch </li></ul><ul><li>Guest ...
Goals <ul><li>Understand the basic Interface, Information, Interaction Design concepts </li></ul><ul><li>Experience the ge...
Back to Basics <ul><li>Interfaces </li></ul><ul><li>Information </li></ul><ul><li>Interactions </li></ul>
Goals of user experience design <ul><li>Communicate a message that allow users to accomplish their goals easily, simply, a...
Designing Interfaces
ATM
Design of Everyday Things <ul><li>Donald Norman </li></ul>
Key Design Concepts <ul><li>Affordance </li></ul><ul><li>Mapping </li></ul><ul><li>Constraints </li></ul><ul><li>Visibilit...
Affordance <ul><li>“ Perceived properties that determine how a thing is used [and] provide strong cues to the operations o...
Mapping <ul><li>Relationship between two things </li></ul>http://flickr.com/photos/annavsculture/441610821/
Constraints <ul><li>Limitations that constrain possible interactions </li></ul>http://flickr.com/photos/hippie/2561854165/
Visibility <ul><li>“ Just the right things have to be visible: to indicate what parts operate and how, to indicate how the...
Feedback <ul><li>“ Sending back to the user information about what action has actually been done, what result has been acc...
Exercise #1
Things to Consider <ul><li>Who is the target audience? </li></ul><ul><li>What is the purpose of the device? </li></ul><ul>...
Designing Information
<ul><li>“ There is virtually unlimited freedom in how we represent data.  The difficult question is  how best to represent...
 
 
 
 
Information Design <ul><li>Hans Rosling </li></ul>
Visual Variables for Contrast position size orientation value hue shape
Gestalt Principles of Grouping proximity similarity continuity closure area symmetry
Gestalt Principles of Grouping proximity similarity
similarity proximity
Content Organization <ul><li>Alphabets </li></ul><ul><li>Locations </li></ul><ul><li>Time </li></ul><ul><li>Continuums </l...
Vietnam War Memorial http://flickr.com/photos/steffsmith_fotos/267461474/
Continental
Northwest
Exercise #2
NYC Recycles
Designing Experience
User Experience Design Process <ul><li>1. Discovery </li></ul><ul><li>Stakeholder interviewers, Business requirements, Com...
interface information architecture
users content context IA
Guest Speaker <ul><li>Robert Stribley </li></ul><ul><li>Senior Information Architect </li></ul><ul><li>Avenue A | Razorfis...
Exercise #3
<ul><li>Founded in February 2004 by Mark Zuckerberg </li></ul><ul><li>Started as a collegiate social networking applicatio...
NEW
 
Conclusion
Braun’s 10 principles of good design <ul><li>Good design is… </li></ul><ul><li>Innovative </li></ul><ul><li>Enhances the u...
Thank you!
Upcoming SlideShare
Loading in...5
×

Designing Experience F08

1,850

Published on

Published in: Technology, Design
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,850
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide
  • Designing Experience F08

    1. 1. Designing Experience School of Visual Arts Instructor: Anh Dang 27 September 2008
    2. 2. Workshop Description <ul><li>This workshop will introduce students to the basic principles of user experience and provide a conceptual framework for thinking about and designing good experiences online and offline. A wide range of design practices will be explored through discussions and exercises during the workshop. </li></ul>
    3. 3. Agenda <ul><li>Introductions </li></ul><ul><li>Design Experience Overview </li></ul><ul><li>Lunch </li></ul><ul><li>Guest Speaker </li></ul><ul><li>Classroom Case Study </li></ul><ul><li>Q/A </li></ul>
    4. 4. Goals <ul><li>Understand the basic Interface, Information, Interaction Design concepts </li></ul><ul><li>Experience the general process & techniques used on a design project </li></ul>
    5. 5. Back to Basics <ul><li>Interfaces </li></ul><ul><li>Information </li></ul><ul><li>Interactions </li></ul>
    6. 6. Goals of user experience design <ul><li>Communicate a message that allow users to accomplish their goals easily, simply, and rapidly. </li></ul>
    7. 7. Designing Interfaces
    8. 8. ATM
    9. 9. Design of Everyday Things <ul><li>Donald Norman </li></ul>
    10. 10. Key Design Concepts <ul><li>Affordance </li></ul><ul><li>Mapping </li></ul><ul><li>Constraints </li></ul><ul><li>Visibility </li></ul><ul><li>Feedback </li></ul>
    11. 11. Affordance <ul><li>“ Perceived properties that determine how a thing is used [and] provide strong cues to the operations of things.” </li></ul><ul><li>Donald Norman </li></ul>http://flickr.com/photos/holster/1303003175
    12. 12. Mapping <ul><li>Relationship between two things </li></ul>http://flickr.com/photos/annavsculture/441610821/
    13. 13. Constraints <ul><li>Limitations that constrain possible interactions </li></ul>http://flickr.com/photos/hippie/2561854165/
    14. 14. Visibility <ul><li>“ Just the right things have to be visible: to indicate what parts operate and how, to indicate how the user is to interact with the device.” </li></ul><ul><li>Donald Norman </li></ul>http://flickr.com/photos/huladancer22/530743543/
    15. 15. Feedback <ul><li>“ Sending back to the user information about what action has actually been done, what result has been accomplished.” Donald Norman </li></ul>
    16. 16. Exercise #1
    17. 17. Things to Consider <ul><li>Who is the target audience? </li></ul><ul><li>What is the purpose of the device? </li></ul><ul><li>What can you do with it? </li></ul><ul><li>How can you tell what state it is in? </li></ul><ul><li>How easy is it to use? </li></ul>
    18. 18. Designing Information
    19. 19. <ul><li>“ There is virtually unlimited freedom in how we represent data. The difficult question is how best to represent it .” william wright </li></ul>
    20. 24. Information Design <ul><li>Hans Rosling </li></ul>
    21. 25. Visual Variables for Contrast position size orientation value hue shape
    22. 26. Gestalt Principles of Grouping proximity similarity continuity closure area symmetry
    23. 27. Gestalt Principles of Grouping proximity similarity
    24. 28. similarity proximity
    25. 29. Content Organization <ul><li>Alphabets </li></ul><ul><li>Locations </li></ul><ul><li>Time </li></ul><ul><li>Continuums </li></ul><ul><li>Categories </li></ul><ul><li>Numbers </li></ul><ul><li>Randomness </li></ul><ul><li>Nathan Shedroff </li></ul>
    26. 30. Vietnam War Memorial http://flickr.com/photos/steffsmith_fotos/267461474/
    27. 31. Continental
    28. 32. Northwest
    29. 33. Exercise #2
    30. 34. NYC Recycles
    31. 35. Designing Experience
    32. 36. User Experience Design Process <ul><li>1. Discovery </li></ul><ul><li>Stakeholder interviewers, Business requirements, Competitive & Comparative Audits, User Research </li></ul><ul><li>2. Definition </li></ul><ul><li>Persona/Scenario Development, Content & Meta Data Audits, Use cases, Creative Brief, Mood boards </li></ul><ul><li>3. Design </li></ul><ul><li>Sitemaps, Task Flows, Wireframes, Content Strategy, Interactive Prototypes, Usability Testing, Design Comps </li></ul><ul><li>4. Development </li></ul><ul><li>Functional Specifications, Quality Assurance Testing, Site development </li></ul>
    33. 37. interface information architecture
    34. 38. users content context IA
    35. 39. Guest Speaker <ul><li>Robert Stribley </li></ul><ul><li>Senior Information Architect </li></ul><ul><li>Avenue A | Razorfish </li></ul>
    36. 40. Exercise #3
    37. 41. <ul><li>Founded in February 2004 by Mark Zuckerberg </li></ul><ul><li>Started as a collegiate social networking application </li></ul><ul><li>Facebook gives people the power to share and makes the world more open and connected. </li></ul><ul><li>Open to 13 years + in 2006 </li></ul><ul><li>More than 64 million active users </li></ul>
    38. 42. NEW
    39. 44. Conclusion
    40. 45. Braun’s 10 principles of good design <ul><li>Good design is… </li></ul><ul><li>Innovative </li></ul><ul><li>Enhances the usefulness of product </li></ul><ul><li>Is aesthetic </li></ul><ul><li>Displays the logical structure of a product; it’s form follows its function </li></ul><ul><li>Is unobtrusive </li></ul><ul><li>Is honest </li></ul><ul><li>Is enduring </li></ul><ul><li>Is consistent right to the details </li></ul><ul><li>Is ecologically conscious </li></ul><ul><li>Is minimal design </li></ul>
    41. 46. Thank you!

    ×