Introduction to Information Architecture and Design - SVA Workshop 06/22/13


Published on

Introduction to Information Architecture and Design - As presented by Robert Stribley, 06/22/13, SVA

Published in: Technology, Education
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Introduction to Information Architecture & DesignSchool of Visual Arts | Winter 2010Robert StribleyMail Box Planes - Photo:
  • Aussie-Style Liquorice,Razorfish War Room
  • Aussie-Style Liquorice,Razorfish War Room
  • Butterfly on the New York City HighlinePhoto:
  • Butterflies at the American Museum of Natural History’s Butterfly Conservatory.  Photo:
  • Butterflies at the American Museum of Natural History’s Butterfly Conservatory.  Photo:
  • Navigation, interaction design, art/science, discipline/community
  • Or not.
  • Using architectural plans as a metaphor for an IA’s work
  • The 2010 Summit is in Phoenix, AZPartially adapted from: “A brief history of information architecture” by Peter MorvilleInformation Architecture: Designing information environments for purpose, edited by Alan Gilchrist and Barry Mahon
  • Photo:
  • User Research in Copenhagen’s Elderly Homes -
  • Discovery: Competitive Review – or Audit
  • We review each of these sites live during class
  • Goals and data from focus groups, stakeholder interviews, etc – including user behaviors and opinions
  • Wikipedia: Cluster analysis or clustering is the assignment of a set of observations into subsets (called clusters) so that observations in the same cluster are similar in some sense
  • As part of our analysis of the user research, we mapped the participants onto the behavioral matrix identified. The mapping revealed clusters of people with a similar observed behavior. These clusters helped us to determine key attributes for the personas.
  • Ordering lunch on a Virgin America flight - - Photo: stribs
  • Nathan Shedroff is Program Director of the MBA in Design Strategy program at the California College of the Arts. His books include Experience Design 1, Making Meaning, and contributing to Richard Saul Wurman's Information Anxiety 2. Advisor for Rosenfeld Media
  • http://websort.net
  • Home page, category page, details page/product page
  • Home page, category page, details page/product page
  • Home page, category page, details page/product page
  • Home page, category page, details page/product page
  • Adapted from Atsushi HASEGAWA’s The 7 Navigation Types of Web Sites
  • Adapted from Atsushi HASEGAWA’s The 7 Navigation Types of Web Sites
  • Adapted from Atsushi HASEGAWA’s The 7 Navigation Types of Web Sites
  • Head of design at Braun, the German consumer electronics manufacturer, DIETER RAMS (1932-) was one of the most influential industrial designers of the late 20th century
  • Introduction to Information Architecture and Design - SVA Workshop 06/22/13

    1. 1. Introduction to Information Architecture & DesignSchool of Visual Arts | June 22, 2013Robert StribleyPhoto by Michael Wolf from his Life in Cities series
    2. 2. IntroductionToday‘s presentation will be available onSlideShare following the
    3. 3. Chocolate display, Xocolatti, SoHo, New York
    4. 4. Body Gel, Sabon, SoHo, New York
    5. 5. Butterfly on the New York City HighlinePattern Recognition:In cognitive psychology, the abilityto identify familiar forms within acomplex arrangement of sensorystimuli
    6. 6. Butterflies at the American Museum of Natural History‘s Butterfly Conservatory.
    7. 7. Butterflies at the American Museum of Natural History‘s Butterfly Conservatory.
    8. 8. IntroRobert Stribley•I‘m an Associate ExperienceDirector at Razorfish•I write music and arts reviews•I photograph various things•I drink coffeeIntroductionMy clients have included:• Bank of America, PNC, Wachovia• JPMorgan, Morgan Stanley,Oppenheimer Funds, Prudential, SmithBarney, T. Rowe Price• Boston Scientific, Nasonex• Choice Hotels• Computer Associates, EMC• Ford, Lincoln• Nextel• Red Cross• Pearson, Travel Channel, Women‘sWear Daily
    9. 9. IntroAbout You• What‘s your name?• What do you do for work?• What do you do for fun?• Coffee, tea or bottled water?Introduction
    10. 10. IntroGoals of this workshop• Understand the basic concepts of informationarchitecture• Experience the general process and techniques usedon a design project• Review the basic deliverables an information architectdevelops within a projectIntroduction
    11. 11. Agenda
    12. 12. AgendaMorning• Background• Design Process• Our Project• User Research• Competitive Review• Personas• LunchAgenda
    13. 13. AgendaAfternoon•Card Sorting•Site Maps•Page Types•Navigation•Sketching•Wireframes•Q&AAgenda
    14. 14. Background
    15. 15. Backgroundin•for•ma•tion ar•chi•tec•ture n.Background: Defining IA• The combination of organization,labeling, and navigation schemes withinan information system.• The structural design of an informationspace to facilitate task completion andintuitive access to content.• The art and science of structuring andclassifying web sites and intranets to helppeople find and manage information.• An emerging discipline and community ofpractice focused on bringing principles ofdesign and architecture to the digitallandscape.Information Architecture for the World Wide Web (1st Edition), p. 4, Rosenfeld and MorvilleNavigationInteractionArt/ScienceDiscipline/Community
    16. 16. Background―Its hard to say who really is aninformation architect. In somesense, we all are.‖— Alex Wright, Author GlutBackground: Defining IA
    17. 17. userscontentcontextIABackground: Defining IA
    18. 18. Interface(skin)information architecture(skeleton)Background: Defining IA
    19. 19. Design Processmetaphor: architectural Cornell University LibraryBackground: Defining IA
    20. 20. Background: HistoryA Brief History of IA1975• Richard Saul Wurman coined the term―information architecture‖ to describe the fieldnow more likely described as ―informationdesign‖1994• Formation of Argus Associates in Ann Arbor,WI, the first firm devoted to IA1998• First edition of Peter Morville and LouRosenfeld‘s Information Architecture for theWorld Wide Web, affectionately known as―The Polar Bear‖ book
    21. 21. Partially adapted from: ―A brief history of information architecture‖ by Peter Morville and Information Architecture:Designing information environments for purpose, edited by Alan Gilchrist and Barry MahonA Brief History of IA2000• First IA Summit, Boston, MA – DefiningInformation Architecture2002• Boxes & Arrows, online journal for informationarchitects goes live• 3 new books on IA published, including JesseJames Garrett‘s The Elements of UserExperience2014• 15th Annual IA Summit held in San Diego, CA,March 25-30Background: History
    22. 22. Design Processsatire on project phasesby Harold Kerzner
    23. 23. Design ProcessDiscovery Definition Design DevelopmentDesign Process
    24. 24. Design ProcessDiscovery Definition Design Development• Stakeholder interviews• Business requirements• Competitive & comparative audits• User research• Site inventoryDesign Process
    25. 25. Design ProcessDiscovery Definition Design Development• Personas• Content Audit• Card sorts• Use Cases• Sketching• Site Map• Creative Brief• UX BriefDesign Process
    26. 26. Design ProcessDiscovery Definition Design Development• Site Map• Task Flows• Sketching• Wireframes• Stakeholder Reviews• Visual Design• Prototype• Usability Testing• Functional SpecificationsDesign Process
    27. 27. Design ProcessDiscovery Definition Design Development• Site Development• User AcceptanceTesting (UAT)• QualityAssurance (QA)• Usability TestingDesign Process
    28. 28. BackgroundIA Deliverablessite mapfeature/functionalityinventorycomparative/competitivereviewrequirements documentpersonassketchesuse casesuser flows prototypewireframesdiscover designdefineexperience briefDeliverables
    29. 29. BackgroundIA Deliverablessite mapfeature/functionalityinventorycomparative/competitivereviewrequirements documentpersonasuse casesuser flows prototypewireframesdiscover designdefineexperience briefvisual designsketchesDeliverables
    30. 30. Our Project
    31. 31. What to do?Our Project
    32. 32. Our wants to revamp its website tobecome the go-to online resource for peoplewanting to attend or promote events acrossthe United States.Our Project
    33. 33. Discover
    34. 34. User ResearchUser Research in Copenhagen‘s Elderly Homes
    35. 35. User Research―Through research, we aim to learn enoughabout the business goals, the users, and theinformation ecology to develop a solidstrategy.‖– Louis Rosenfeld & Peter MorvilleDiscovery: User Research
    36. 36. User ResearchMethodology• Focus Groups• Surveys• InterviewsGoals• Identify patterns and trends in user behavior,tasks, preferences, obstacles.Discovery: User Research
    37. 37. User ResearchClass Exercise: Survey Questions• How do you learn about events in NYC?• What type of events are you interested in?• What‘s more important to you:– Price– Type of Event– Location– Date• How often do you attend the events?• Do you ever need to promote an event?• Do you ever invite people to an event?Discovery: User Research
    38. 38. Competitive Reviewimage bybrandon schauer
    39. 39. Discovery: Competitive Audit―This type of assessment helps set anindustry ‗marker‘ by looking at what thecompetition is up to, what features andfunctionalities are standard, and how othershave solved the same problems you mightbe tasked with.‖– Dorelle RabinowitzDiscovery: Competitive Review
    40. 40. Competitive ReviewHeuristic Evaluation… involves evaluators examining theinterface and judging its compliancewith recognized usability principles(the ‗heuristics‘)- WikipediaDiscovery: Competitive Review
    41. 41. Competitive ReviewHeuristic EvaluationTen Usability Heuristics by Jakob NielsenDiscovery: Competitive Review•Recognition rather than recall•Flexibility and efficiency of use•Aesthetic and minimalist design•Help users recognize, diagnose,and recover from errors•Help and documentation•Visibility of system status•Match between system and thereal world•User control and freedom•Consistency and standards•Error preventionSelf StudyFor a more detailed explanation of these heuristics, see Nielsen‘s explanation here:
    42. 42. Competitive ReviewMethodology• Review and analyze competitor sites according toparticular criteria• Draw key findings, which can influence and guide IAthrough the design phase• Include a scorecard for a high-level depiction ofcomparison points across all sitesAlso:• Comparative ReviewsDiscovery: Competitive Review
    43. 43. Competitive ReviewExamples of Usability CriteriaNote: These examples are not intended to provide a comprehensive listing. Appropriate criteria may depend on the projectto be completed.Home Page• Are home page elements appropriately weighted and distributed?• Is information clustered in meaningful ways?Navigation• Is the navigation structure concise and consistent?• Are paths to important information intuitive and unobstructed?Content• Is content current? Are there visible indications of content freshness?• Is content properly adapted for the Web? Is tone of voice consistent throughout content? Iscontent chunked appropriately?• Are headings and titles scannable?Design• Are colors appropriate to the Web? Is white space used appropriately? Is text readable?Search• Are search results relevant and cleanly presented?Functionality• Are functionality and forms efficiently designed?Messaging• Are errors messages clear on the site? Is help readily available to users?• Are there appropriate means for user feedback?Discovery: Competitive Review
    44. 44. Competitive ReviewCompetitorsDiscovery: Competitive Review
    45. 45. Competitive ReviewKey Findings• Search placed prominently on each site• Clear need for and emphasis upon filtering events• Calendars provide obvious benefit, but aren‘t alwaysprominent• Profiles and community features are also common, buthandled with varying degrees of detail, success• Free events are often highlighted• Event detail pages vary, may have maps, RSVP, sharing,rating, commenting functionality• Displaying other venues and restaurants adds utility• Maps prove helpful, especially to out-of-towners• The ability to add or promote an event is not alwayspresent or prominentDiscovery: Competitive Review
    46. 46. Competitive ReviewWhat else have we learned?• Who are the audiences of these sites?• What are the strengths of these sites?• What are their weaknesses?• How might another event site differentiate itself from these sites?Discovery: Competitive Review
    47. 47. Define
    48. 48. PersonasCreated at Personas: is a component of the Metropath(ologies) exhibit, recentlyon display at the MIT Museum by the Sociable Media Group from theMIT Media Lab . It uses sophisticated natural language processingand the Internet to create a data portrait of ones aggregated onlineidentity. In short, Personas shows you how the Internet sees you.
    49. 49. Personas―Personas summarize user research findingsand bring that research to life in such a waythat everyone can make decisions based onthese personas, not based on themselves.‖– Steve MulderDefinition: Personas
    50. 50. PersonasCharacteristics of Effective Personas• Varied and distinct• Detailed• Not weighed down with minutiae• Tied into business-specific goals• Backed by dataDefinition: Personas
    51. 51. PersonasMethodology• Cluster AnalysisGoals• Create a narrative based on real data toillustrate user behavior, motivations, goalsDefinition: Personas
    52. 52. Small BudgetBig BudgetPlannerPromoterDefinition: Personas
    53. 53. Definition: PersonasSabrinaJenny DonnyJerry
    54. 54. Sabrina, 27The party plannerLocation:Gramercy ParkAttitude:Organized, outgoingFinancial Perspective:Generous, bit of spendthriftOnline Habits:Avid user of social networking sites,Twitter, Facebook, etcEvents:Wine tastings, gallery openingsQuote:―I love getting bunches of friendstogether to attend all these NYCevents. There‘s so much great stuff todo in this city!‖Small BudgetBig BudgetPlannerPromoterPersonasDefinition: Personas
    55. 55. Jerry, 44The out-of-townerLocation:Cincinnati, OHAttitude:Casual, yet adventurousFinancial Perspective:Moderate spenderOnline Habits:Utilitarian use of the Web toresearch trips, read about the artsand pay billsEvents:Museums, visiting landmarks, toursQuote:―I‘m visiting the Big Apple with mywife and we want to check outsome art-related events.‖Small BudgetBig BudgetPlannerPromoterDefinition: Personas
    56. 56. PersonasDonny, 38The local comedianLocation:East VillageAttitude:Laidback, loosely organizedFinancial Perspective:Frugal, paycheck to paycheckOnline Habits:Spends time networking, promoting hisact online, haunts comedy sitesEvents:Comedy slams, variety showsQuote:―I land a few comedy gigs around thecity and I want to promote them better.‖ Small BudgetBig BudgetPlannedPromoterDefinition: Personas
    57. 57. Jenny, 33The professional promoterLocation:WilliamsburgAttitude:Busy, disciplined, professionalFinancial Perspective:Healthy budget for promotions andadvertisingOnline Habits:Heavy use of social networking sites bothprofessionally and personally, shops onlineEvents:Small gigs, big concerts, DJ setsQuote:―I manage a few bands and DJs and Ihave to ensure they‘re listed in the right,targeted places.‖PersonasSmall BudgetBig BudgetPlannedPromoterDefinition: Personas
    58. 58. Class Exercise: PersonasDefinition: PersonasIn regards to,• What tasks might each persona attempt to complete on• What features can you imagine each persona might like on such a site?• What obstacles or pain points might they encounter?SabrinaJenny DonnyJerry
    59. 59. Lunch Break
    60. 60. AgendaAfternoon• Card Sorting• Site Maps• Page Types• Navigation• Sketching• Wireframes• Q&AAgenda
    61. 61. Card Sorting
    62. 62. Card Sorting―There are often better ways to organizedata than the traditional ones that firstoccur to us. Each organization of thesame set of data expresses differentattributes and messages. It is alsoimportant to experiment, reflect, andchoose which organization bestcommunicates our messages.‖– Nathan Shedroff, Experience StrategistDefinition: Card Sorting
    63. 63. Methodology• Grouping and labeling with index cards, post it notes• Two types:– Open – Participants sort cards with no pre-established categories.Useful for new architectures– Closed – Participants sort cards into predetermined, providedgroups. Useful for fitting content into existing architectures• Online card sorts– WebSort, OptimalSort, SocraticGoals• Organize content more efficiently• Find names for groups of content based on users‘ perspectivesDefinition: Card SortingSelf Study"Card sorting: a definitive guide" by Donna Spencer and Todd Warfel, Boxes and Arrows, 2004/04/07
    64. 64. Case Studies:•Wachovia Wealth Management Group•American Red Cross•Automotive ManufacturerDefinition: Card Sorting
    65. 65. Class Exercise: Card SortingAs individuals:• Take 5 minutes to think of all the events aperson could attend• Write each event you come up with on a Post-It noteDefinition: Card Sorting
    66. 66. Class Exercise: Card SortingNow, as a group:• Take a few minutes to organize your eventsinto categories (group & label them)• Then we‘ll share some categoriesDefinition: Card Sorting
    67. 67. Card Sorting: Next StepsWith the results of a card sort we then can:• Build consensus• Refine terminology• Create a site map• Help define navigationDefinition: Card Sorting
    68. 68. Design
    69. 69. Site Maps
    70. 70. Conceptual DesignDesign: Site Maps―A site map is a high leveldiagram showing the hierarchyof a system. Site maps reflectthe information structure, butare not necessarily indicative ofthe navigation structure.‖- Step Two Designs
    71. 71. Conceptual DesignDesign: Site Maps
    72. 72. Conceptual DesignDesign: Site Maps
    73. 73. Page TypesThe Mercator Atlas of EuropeFrom The British Library
    74. 74. Conceptual DesignHome Page Category Page Details PageDesign: Page Types
    75. 75. NavigationNavigation Bridge, USS Enterpriseby Serendigity, Flickr
    76. 76. GridsTypes of Navigation• Site Structure – major nav• Hierarchical – product families• Function – sitemap privacy• Direct – banner ad/shortcut• Reference – related links• Dynamic – search results• Breadcrumb – location• Step Navigation – sequencethrough forms/results• Faceted Navigation – filtersresultsDesign: NavigationAreas of Navigation• Global – universal header/footer• Local – left nav/right nav• Local content – text links, buttonsStyles of Navigation• Rollover• Dropdown• Flyout• Tabs• AccordionSelf StudyAdapted from Atsushi Hasegagwa‘s The 7 Navigation Types of Web Sites
    77. 77. GridsMega DropdownsDesign: Navigation
    78. 78. GridsPower FootersDesign: Navigation
    79. 79. SketchingOrnithopterby Leonardo da Vinci, 1485-1487
    80. 80. Design: Sketching
    81. 81. SketchingDesign: Sketching
    82. 82. SketchingAny guesses whatthis is a sketch of?Design: Sketching
    83. 83. “twttr sketch‖ Twitter.comSketchingTwitter[This sketch] has very special significance – its hanging in the office somewhere with one other page.Whenever Im thinking about something, I really like to take out the yellow notepad and get it down.– Jack Dorsey, TwitterDesign: Sketching
    84. 84. Sketching―There are techniquesand processes wherebywe can put experiencefront and center in design.My belief is that the basisfor doing so lies inextending the traditionalpractice of sketching. ‖- Bill BuxtonDesign: SketchingBill BuxtonSketching UserExperiences
    85. 85. Bill BuxtonSketching UserExperiencesSketchingAttributes of a Sketch•Quick•Timely•Inexpensive•Disposable•Plentiful•Clear vocabulary•Distinct gesture•Minimal detail•Appropriate degree of refinement•Suggest & explore rather than confirm•AmbiguityDesign: Sketching
    86. 86. SketchingMethodology• Draw• Limit your time• Don‘t worry about mistakes or styleGoals• Benefit from the participation of yourcolleagues• Quickly generate ideas and refine throughiterationsDesign: Sketching
    87. 87. Design: SketchingClass Exercise: SketchingIn teams, sketch your ideas.Create & Promote an Event1. Take 5 or so minutes first to discuss whatfeatures belong here• Is it a single page? Multiples steps?2. Time for silent sketching3. Time for sharing your sketchesDesign: Sketching
    88. 88. Design: SketchingJenny DonnyDon‘t forget to keep your personas in mind
    89. 89. Sketching Tools:The following apps are all for the iPad• Adobe Ideas ($9.99)• Bamboo Paper (Free)• Muji Notebook ($4.99)• Penultimate ($0.99)• SketchBook Pro ($4.99)InfoDesign: Sketching Tools
    90. 90. Wireframesphoto & sculpture bypolly verity
    91. 91. Wireframes―Web site wireframes are blue printsthat define a Web page‘s content andfunctionality. They do not conveydesign – e.g. colors, graphics, orfonts.‖- fatpurpleDesign: Wireframes
    92. 92. Design: SketchingDesign: Wireframes - Exampleswireframe bymatthieu mingasson
    93. 93. Design: SketchingDesign: Wireframes - Examplesscreencap fromThe Right way to Wireframeby Semantic Will
    94. 94. Design: SketchingDesign: Wireframes - ExamplesiPad news app wireby F. Yamada
    95. 95. Design: SketchingDesign: Wireframes - Examples
    96. 96. Design: SketchingDesign: Wireframes - Examples
    97. 97. Wireframing/Prototype Tools:• Adobe InDesign• Axure• Omnigraffle (Mac)• Microsoft Visio• Mockingbird (online, free)Also:• Adobe Proto (coming for iPad)• Balsamiq• iPlotz• iMockups (iPad)• Omnigraffle (iPad)InfoDesign: Wireframing ToolsSelf StudySmashing Magazine: 35 Excellent Wireframing Resources
    98. 98. Design: SketchingClass Exercise: Final WireframeIn your teams, create your final deliverable:You‘ll each design a home page for Events.com1) Sketch your ideas for a homepage as a team2) Then each of you will create a final ―wireframe‖3) Be sure to incorporate your team mates‘ designideas and feedbackDesign: Wireframes
    99. 99. Design: SketchingSabrinaJenny DonnyJerryDon‘t forget to keep your personas in mind
    100. 100. Design: SketchingWireframe & Prototyping ToolsAxureDreamweaverInDesignVisioDesign: WireframesDevelop
    101. 101. Books:• Information Architecture for the World WideWeb – Louis Rosenfeld, Peter Morville• Information Architecture: Blueprints for theWeb – Christina Wodtke, Austin Govella• The Elements of User Experience – JesseJames Garrett• Designing Web Navigation: Optimizing theUser Experience – James Kalbach, AaronGustafson• Design of Everyday Things – Donald NormanLocal Events:• IA Meetup• Content Strategy MeetupWeb Sites:• Alertbox• A List Apart• Boxes & Arrows• wireframes.tumblr.comInfoAdditional ResourcesOrganizations:• Human Computer Interactions (HCI)• Interaction Designers Association (IxDA)• Usability Professionals Association (UPA)Further Studies:• School of Visual Arts• Continuing Ed classes• MFA in Interaction Design• Adaptive Path• The Information Architecture Institute• The IA Summit• Pratt – Course in Information Design• Nielsen Norman Group• Rosenfeld Media• User Interface EngineeringVideo:The Right Way to Wireframe by Russ Unger (YouTube)
    102. 102. Q&A
    103. 103. Slideshare address: article on how to find an IA job: Info
    104. 104. Design: SketchingWireframe & Prototyping ToolsAxureDreamweaverInDesignVisioDesign: WireframesAddendum:• Grids• Dieter Rams: 10 Principles of Good Design• Defining Wireframes vs. Sketches
    105. 105. Grids
    106. 106. Grids―The true benefit of using a grid is thatas you learn how to use a grid, youstart to think systemically about thesolutions you design. You start to tryand see how various details can echoone another, how different regions ofthe canvas can be reused or used forsimilar things, how like elements can begrouped together.‖– Khoi Vinh, former design Director, NYTimes.comDesign: Grids
    107. 107. GridsDesign: Grids
    108. 108. GridsDesign: Grids
    109. 109. GridsDesign: Grids
    110. 110. GridsSelf Study: Want to know more?Learn more about design by grids:960 Grid System960.gsDesign by Gridwww.designbygrid.comHashgridwww.hashgrid.comDesign: Grids
    111. 111. Good design is…Good design is innovative.Good design makes a product useful.Good design is aesthetic.Good design makes a product understandable.Good design is unobtrusive.Good design is honest.Good design is long-lasting.Good design is thorough down to the last detail.Good design is environmentally friendly.Good design is as little design as possible.© Dieter Rams, amended March 2003 and October 2009Dieter Rams: 10 principles of good design
    112. 112. Design: SketchingDefining Sketches Versus WireframesTemplates PagesApply to many different pages Specific, may apply to a singlepage or screenExamples:• basic page• product pageExamples:• homepage• ecommerce or transactionalformSketches WireframesQuick More time-consumingFew details Very detailedNot typically delivered Professional deliverable