Information Architecture   &  Why You Care About It  As a Designer
The structural design of an information space to facilitate task completion and intuitive access to content.  Definition Information Architecture for the World-Wide Web   Louis Rosenfeld & Peter Morville Organizing info so  people can find stuff >
Metaphor – Painterliness vs. Draftsmanship Detail from  Water Lilies   Claude Monet 1906
Metaphor – Painterliness vs. Draftsmanship Detail from  The Entombment   Raphael 1507
Metaphor – Painterliness vs. Draftsmanship Detail from  The Entombment   Raphael 1507
The Key is Balance A  beautifully designed  interface might satisfy the business vision but imply things about the function of a site that  can’t be realized An  elegantly coded  back-end system might meet basic business requirements and still be  wholly un-usable
The Role In Context IA is about  Applied Usability   Content Organization : structure & labeling Interaction Design : page-level elements
The Role In Context IA is about  Applied Usability   Content Organization : structure & labeling Interaction Design : page-level elements
The Context of Development It doesn’t matter what development processes your client or your company subscribe to.  They  all  have the same thing in  common Plan Build IA IA Idea
The Context of Development We’re going to focus on the first gap between an  Idea  and a  Plan Idea Plan Build IA IA
Steps Requirements come from multiple sources.  Some are  formal Some are  random Some are completely  off the wall ! Gather  |  Qualify  |  Organize  |  Validate  |   Interaction
Steps:  Feature List Gather  |  Qualify  |  Organize  |  Validate  |   Interaction Granular  breakdown and description of all  potential  features and functions
Gather  |  Qualify  |  Organize  |  Validate  |   Interaction Steps Scrutinize the requirements against three facets: User  Value Business  Value Technical  Risk Use the outcome to determine your  scope
Steps:  Feature Analysis Gather  |  Qualify  |  Organize  |  Validate  |   Interaction Evaluation of each element: Removes Bias Considers Constraints
Steps Organize  the features and functions into some kind of framework Process Flows  for Linear Applications  EX: E-Commerce Check-Out Site Maps  for Information Sites EX: Corporate Information Site Page Flows  to translate processes into pages EX: Catalog Index Gather  |  Qualify  |  Organize  |  Validate  |   Interaction
Steps:  Process & Page Flow Gather  |  Qualify  |  Organize  |  Validate  |   Interaction Page Agnostic Page Specific Better for Linear Applications
Steps:  Site Map Gather  |  Qualify  |  Organize  |  Validate  |   Interaction Better for Broad Content Sites
Steps Review your framework with the technical team to  validate  the way the system will support it Are there any  constraints  that might influence the way the user will be able to encounter the information? Gather  |  Qualify  |  Organize  |  Validate  |   Interaction
Steps Create a  low-risk model  of a page to account for the features and functions that have been scoped. This is the  first time  that the team will be able to see and think of the site in terms of pages. Gather  |  Qualify  |  Organize  |  Validate  |   Interaction
Steps:  Wireframe Gather  |  Qualify  |  Organize  |  Validate  |   Interaction Functional Model, Few if any Design Elements
Why Do You Care? IAs promote the  expertise of design  by couching its impact in terms of  usability Form Follows Function  – IAs establish the function of a page  independent of design  elements.  This keeps the client from designing for you IAs provide the  framework  to inform a solid design scheme   Your  grade  depends on it
Q  &  A

Information Architecture & Why you care about it as a designer

  • 1.
    Information Architecture & Why You Care About It As a Designer
  • 2.
    The structural designof an information space to facilitate task completion and intuitive access to content. Definition Information Architecture for the World-Wide Web Louis Rosenfeld & Peter Morville Organizing info so people can find stuff >
  • 3.
    Metaphor – Painterlinessvs. Draftsmanship Detail from Water Lilies Claude Monet 1906
  • 4.
    Metaphor – Painterlinessvs. Draftsmanship Detail from The Entombment Raphael 1507
  • 5.
    Metaphor – Painterlinessvs. Draftsmanship Detail from The Entombment Raphael 1507
  • 6.
    The Key isBalance A beautifully designed interface might satisfy the business vision but imply things about the function of a site that can’t be realized An elegantly coded back-end system might meet basic business requirements and still be wholly un-usable
  • 7.
    The Role InContext IA is about Applied Usability Content Organization : structure & labeling Interaction Design : page-level elements
  • 8.
    The Role InContext IA is about Applied Usability Content Organization : structure & labeling Interaction Design : page-level elements
  • 9.
    The Context ofDevelopment It doesn’t matter what development processes your client or your company subscribe to. They all have the same thing in common Plan Build IA IA Idea
  • 10.
    The Context ofDevelopment We’re going to focus on the first gap between an Idea and a Plan Idea Plan Build IA IA
  • 11.
    Steps Requirements comefrom multiple sources. Some are formal Some are random Some are completely off the wall ! Gather | Qualify | Organize | Validate | Interaction
  • 12.
    Steps: FeatureList Gather | Qualify | Organize | Validate | Interaction Granular breakdown and description of all potential features and functions
  • 13.
    Gather | Qualify | Organize | Validate | Interaction Steps Scrutinize the requirements against three facets: User Value Business Value Technical Risk Use the outcome to determine your scope
  • 14.
    Steps: FeatureAnalysis Gather | Qualify | Organize | Validate | Interaction Evaluation of each element: Removes Bias Considers Constraints
  • 15.
    Steps Organize the features and functions into some kind of framework Process Flows for Linear Applications EX: E-Commerce Check-Out Site Maps for Information Sites EX: Corporate Information Site Page Flows to translate processes into pages EX: Catalog Index Gather | Qualify | Organize | Validate | Interaction
  • 16.
    Steps: Process& Page Flow Gather | Qualify | Organize | Validate | Interaction Page Agnostic Page Specific Better for Linear Applications
  • 17.
    Steps: SiteMap Gather | Qualify | Organize | Validate | Interaction Better for Broad Content Sites
  • 18.
    Steps Review yourframework with the technical team to validate the way the system will support it Are there any constraints that might influence the way the user will be able to encounter the information? Gather | Qualify | Organize | Validate | Interaction
  • 19.
    Steps Create a low-risk model of a page to account for the features and functions that have been scoped. This is the first time that the team will be able to see and think of the site in terms of pages. Gather | Qualify | Organize | Validate | Interaction
  • 20.
    Steps: WireframeGather | Qualify | Organize | Validate | Interaction Functional Model, Few if any Design Elements
  • 21.
    Why Do YouCare? IAs promote the expertise of design by couching its impact in terms of usability Form Follows Function – IAs establish the function of a page independent of design elements. This keeps the client from designing for you IAs provide the framework to inform a solid design scheme Your grade depends on it
  • 22.
    Q & A