Sva Intro to Information Architecture & Design Fall 09

3,071 views

Published on

Published in: Education, News & Politics
1 Comment
6 Likes
Statistics
Notes
  • I've been unable to download this file. It seems that it is a corrupt file. Can you reload or email it to me? An electronic version of the syllabus would also be very helpful.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,071
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
121
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Sva Intro to Information Architecture & Design Fall 09

  1. 1. INTRODUCTION TO Information Architecture & Design SCHOOL OF VISUAL ARTS | FALL 2009 | ANH DANG Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  2. 2. About Me Anh Dang Information Architect NEW YORK TIMES Adjunct Professor SCHOOL OF VISUAL ARTS PRATT INSTITUTE Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  3. 3. About You Hello Class Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  4. 4. Let’s Go Let’s get started Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  5. 5. About the class Lectures Discussions Exercises Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  6. 6. 3 I’s Information + (Interactions + Interfaces) Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  7. 7. 3 I’s Information + ( Interactions + Interfaces ) • Understanding content • Organize content Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  8. 8. 3 I’s Information + ( Interactions + Interfaces ) • Understanding content • Mapping task flows • Learning design basics • Organize content • Evaluating user goals • Creating a concept • Testing prototypes Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  9. 9. Discussion Point What is IA? Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  10. 10. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  11. 11. http://flickr.com/photos/dcjohn/ Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  12. 12. Venn Diagram CONTEXT IA CONTENT USERS Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  13. 13. IA/ID Pyramid INTERFACE INFORMATION ARCHITECTURE Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  14. 14. Discussion Point What is GOOD design? Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  15. 15. Braun’s 10 Principles of Good Design Braun’s 10 Principles of Good Design GOOD DESIGN IS 1. Innovative 2. Enhances the usefulness of product 3. Is aesthetic 4. Displays the logical structure of a product; it’s form follows its function 5. Is unobtrusive 6. Is honest 7. Is enduring 8. Is consistent right to the details 9. Is ecologically conscious 10. Is minimal design Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  16. 16. Goals Goals of User Experience Design Create designs that effectively communicate a message and allow users to accomplish their goals easily, simply, and rapidly. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  17. 17. *****ADDPICTURE****** Exercise 1 DESIGN LIGHTNING ROUND Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  18. 18. Quote “Don’t make me think.” STEVE KRUG Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  19. 19. ATM Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  20. 20. Subway ***ADD PHOTO*** Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  21. 21. Door 1 Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  22. 22. Door 2 Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  23. 23. Remote 1 Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  24. 24. Remote 2 Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  25. 25. Microwave Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  26. 26. Themostat Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  27. 27. Yahoo Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  28. 28. Bing Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  29. 29. Google Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  30. 30. Example Continental Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  31. 31. Example Northwest Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  32. 32. ORGANIZING INFORMATION Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  33. 33. “There are often better ways to organize data than the traditional ones that first occur to us. Each organization of the same set of data expresses different attributes and messages. It is also important to experiment, reflect, and chose which organization best communicates our messages.” NATHAN SHEDROFF Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  34. 34. Principle: LATCH Most information can be organized by: L A T C H RICHARD SAUL WURMAN Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  35. 35. Principle: LATCH Most information can be organized by: Location A T C H RICHARD SAUL WURMAN Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  36. 36. Principle: LATCH Most information can be organized by: Location Alphabet T C H RICHARD SAUL WURMAN Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  37. 37. Principle: LATCH Most information can be organized by: Location Alphabet Time C H RICHARD SAUL WURMAN Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  38. 38. Principle: LATCH Most information can be organized by: Location Alphabet Time Category H RICHARD SAUL WURMAN Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  39. 39. Principle: LATCH Most information can be organized by: Location Alphabet Time Category Hierarchy RICHARD SAUL WURMAN Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  40. 40. Example: Vietnam War Memorial Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  41. 41. CASe Study: NYT Homepage (category) Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  42. 42. Case StudyL Times Wire (time) Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  43. 43. *****ADDPICTURE****** Exercise 2 SHOPPING ON ETSY Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  44. 44. EXERCISE 1 Exercise 1 Etsy is a site with a lot of products and a lot of categories. Conduct a card sort and organize the content in a manner that is useful and interesting. Propose a new navigation system that is easy for users to find search and browse for ETSY products •Group and label with index cards, post-it notes •Cluster similar items and create categories •Identify patterns and relationships •Recommend a new taxonomy Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  45. 45. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  46. 46. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  47. 47. Technique Card Sorting CARD SORTING Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  48. 48. Quote “Card sorting is a great, reliable, inexpensive method for finding patterns in how users would expect to find content or functionality.” DONNA SPENCER Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  49. 49. Technique Card Sorting Card Sorting METHODOLOGY • Grouping and labeling with index cards, post-it notes GOALS • Find names for groups of content based on user’s perspective. • Organize content more efficiently. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  50. 50. VISUALIZING INFORMATION Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  51. 51. Principle: Visual Organization Visual Variables of Contrast POSITION SIZE HUE VALUE ORIENTATION SHAPE Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  52. 52. Principle: Gestalt Principles of Grouping Gestalt Principles of Grouping PROXIMITY SIMILARITY CONTINUITY CLOSURE AREA SYMMETRY Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  53. 53. Jock Mackinlay’s Visual Features Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  54. 54. Principle: Gestalt Principles of Grouping Information Seeking Mantra BEN SCHNEIDERMAN • Overview first • Zoom & filter • Details on demand Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  55. 55. *****ADDPICTURE****** Examples Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  56. 56. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  57. 57. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  58. 58. Example: Map Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  59. 59. Example: Map Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  60. 60. Case Study: Gap Minder Hans Rosling GAP MINDER Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  61. 61. Lunch LUNCH Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  62. 62. INTERACTIONS & INTERFACES Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  63. 63. “Most design is intended to be used by people, so the needs and requirements of people ought to be driving much of the work throughout the entire process.” DONALD NORMAN Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  64. 64. Donald Norman http://www.jnd.org/NNg-Photographs/DonNorman2003-5.jpg Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  65. 65. Principle: Things to Consider Things to consider… • Who is the target audience? • What is the purpose of the product? • When would this product be used? • Where would this product be used? • How easy is it to understand what to do? • What are all the steps needed to accomplish a task? Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  66. 66. Principle: Things to Consider Things to consider… • Who is the target audience? • What is the purpose of the product? • When would this product be used? • Where would this product be used? • How easy is it to understand what to do? • What are all the steps to accomplish a task? • What are the business goals? • What are the user goals? • What are the product interface goals? Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  67. 67. Principle: Design Concepts Key Design Concepts Affordance Mapping Constraints Visibility Feedback Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  68. 68. Affordance AFFORDANCE “Perceived properties that determine how a thing is used [and] provide strong cues to the operations of things.” DONALD NORMAN Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  69. 69. affordance Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  70. 70. Affordance Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  71. 71. Mapping MAPPING “Relationship between two things, in this case between controls and their movements and the results in the world.” DONALD NORMAN Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  72. 72. Mapping http://flickr.com/photos/annavsculture/441610821/ Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  73. 73. Mapping Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  74. 74. Contraints CONSTRAINTS Limitations that constrain possible interactions Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  75. 75. Constraints http://flickr.com/photos/annavsculture/441610821/ Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  76. 76. Constraints Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  77. 77. Visibility VISIBILITY “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.” DONALD NORMAN Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  78. 78. Visibility Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  79. 79. Visibility Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  80. 80. Fdback FEEDBACK “Sending back to the user information about what action has actually been done, what result has been accomplished.” DONALD NORMAN Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  81. 81. Feedback Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  82. 82. Feedback http://flickr.com/photos/huladancer22/530743543/ Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  83. 83. *****ADDPICTURE****** Exercise 3 ZIPTHRU Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  84. 84. EXERCISE 2 Exercise 3 Redesign the interface and user taskflow of Zipthur to improve its usability. Use information organization principles such as LATCH, visual variables of contrast, gestalt principles of grouping to improve: •Affordance •Mapping •Visibility •Constraints Diagram the task flows to 1.Check balance 2.Get a New Card 3.Add funds to your card Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  85. 85. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  86. 86. Design Process To do… • Heuristic Evaluation • Map task flows • Sketch concepts • Prototype • User Test Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  87. 87. HEURISTIC EVALUATION http://www.flickr.com/photos/mollivan_jon/67850029 / Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  88. 88. Technique Card Sorting Heuristic Evaluation METHODOLOGY • Use a small set of criteria to evaluate information and interface to identify usability problems. GOALS • Evaluate usability of current product and guide design direction. • Organize content more efficiently. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  89. 89. Technique Task Flows TASK FLOWS Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  90. 90. Technique Task Flow Task Flows METHODOLOGY • Identify all the possible pathways of user tasks GOALS • Identify gaps and opportunities of how to improve the flow of information and interactions. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  91. 91. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  92. 92. Sketching SKETCHING Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  93. 93. Quote “There are techniques and processes whereby we can put experience front and center in design. My belief is that the basis for doing so lies in extending the traditional practice of sketching. ” BILL BUXTON Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  94. 94. Technique Methodology • Draw! Goals • Quickly generate ideas and refine through iterations. • Identify key features and functionality. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  95. 95. Sketching Attributes of a Sketch BILL BUXTON • Quick • Timely • Inexpensive • Disposable • Plentiful • Clear vocabulary • Distinct gesture • Minimal detail • Appropriate degree of refinement • Suggest & explore rather than confirm Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  96. 96. Paper Prototyping PAPER PROTOTYPING http://www.flickr.com/photos/arrrika/2298422351/ Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  97. 97. Quote “A prototype can answer design questions and communicate design ideas… ” FRED BEECHER Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  98. 98. User Testing USER TESTING http://www.flickr.com/photos/psd/2247745929/ Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  99. 99. resources Resources SITES • interactiondesign.sva.edu • boxesandarrows.com • konigi.com • subtraction.com • smashingmagazine.com • designmind.frogdesign.com • adaptivepath.com • iainstitute.com ORGANIZATIONS • Interaction Designers Association (IxDA) • Usability Professionals’ Association (UPA) • Human Computer Interactions (HCI) • AIGA EVENTS • Swiss Miss Creative Mornings • SVA MFA Interaction Design Events Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  100. 100. Good Design “Good design will have it all - aesthetic pleasure, art, creativity - and at the same time be usable, workable, and enjoyable.” DONALD NORMAN Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  101. 101. THE END. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang

×