Your SlideShare is downloading. ×
Sva Intro to Information Architecture & Design Fall 09
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Sva Intro to Information Architecture & Design Fall 09

2,427
views

Published on

Published in: Education, News & Politics

1 Comment
5 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
2,427
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
88
Comments
1
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. About You Hello Class Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 4. Let’s Go Let’s get started Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 5. About the class Lectures Discussions Exercises Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 6. 3 I’s Information + (Interactions + Interfaces) Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 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. 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. Discussion Point What is IA? Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 10. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 11. http://flickr.com/photos/dcjohn/ Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 12. Venn Diagram CONTEXT IA CONTENT USERS Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 13. IA/ID Pyramid INTERFACE INFORMATION ARCHITECTURE Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 14. Discussion Point What is GOOD design? Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 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. 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. *****ADDPICTURE****** Exercise 1 DESIGN LIGHTNING ROUND Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 18. Quote “Don’t make me think.” STEVE KRUG Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 19. ATM Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 20. Subway ***ADD PHOTO*** Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 21. Door 1 Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 22. Door 2 Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 23. Remote 1 Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 24. Remote 2 Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 25. Microwave Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 26. Themostat Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 27. Yahoo Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 28. Bing Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 29. Google Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 30. Example Continental Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 31. Example Northwest Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 32. ORGANIZING INFORMATION Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 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. 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. 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. 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. 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. 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. 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. Example: Vietnam War Memorial Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 41. CASe Study: NYT Homepage (category) Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 42. Case StudyL Times Wire (time) Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 43. *****ADDPICTURE****** Exercise 2 SHOPPING ON ETSY Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 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. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 46. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 47. Technique Card Sorting CARD SORTING Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 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. 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. VISUALIZING INFORMATION Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 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. 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. Jock Mackinlay’s Visual Features Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 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. *****ADDPICTURE****** Examples Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 56. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 57. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 58. Example: Map Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 59. Example: Map Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 60. Case Study: Gap Minder Hans Rosling GAP MINDER Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 61. Lunch LUNCH Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 62. INTERACTIONS & INTERFACES Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 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. 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. 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. 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. 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. 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. affordance Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 70. Affordance Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 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. Mapping http://flickr.com/photos/annavsculture/441610821/ Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 73. Mapping Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 74. Contraints CONSTRAINTS Limitations that constrain possible interactions Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 75. Constraints http://flickr.com/photos/annavsculture/441610821/ Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 76. Constraints Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 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. Visibility Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 79. Visibility Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 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. Feedback Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 82. Feedback http://flickr.com/photos/huladancer22/530743543/ Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 83. *****ADDPICTURE****** Exercise 3 ZIPTHRU Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 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. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 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. HEURISTIC EVALUATION http://www.flickr.com/photos/mollivan_jon/67850029 / Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 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. Technique Task Flows TASK FLOWS Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 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. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 92. Sketching SKETCHING Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang
  • 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. 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. 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. 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. 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. 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. 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. 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. THE END. Introduction to Information Architecture & Design | Fall 2009 School of Visual Arts | Anh Dang