Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

What is Information Architecture?

1,992 views

Published on

A presentation on the basics of Information Architecture including my IA Pyramid concept.

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

What is Information Architecture?

  1. 1. Information Architecture
  2. 2. Information <ul><li>The communication or reception of knowledge or intelligence </li></ul><ul><ul><li>Text </li></ul></ul><ul><ul><li>Images </li></ul></ul><ul><ul><li>Music </li></ul></ul><ul><ul><li>Video </li></ul></ul>
  3. 3. Architecture <ul><li>The art or science of building </li></ul><ul><ul><li>Design </li></ul></ul><ul><ul><li>Structure </li></ul></ul><ul><ul><li>Space </li></ul></ul><ul><ul><li>Function </li></ul></ul>
  4. 4. Building Blueprint Bedroom Sleeping Living Room Relaxing Den Books Kitchen Cooking Dining Eating Garage Storage
  5. 5. Website Blueprint Services Contact Products Main Staff About
  6. 6. Levels of Information Architecture <ul><li>The Internet </li></ul><ul><li>Websites </li></ul><ul><li>Site sections </li></ul><ul><li>Section page groups </li></ul><ul><li>Pages </li></ul><ul><li>Page elements </li></ul><ul><li>Paragraphs </li></ul>
  7. 7. Page Level Information Architecture <ul><li>HTML title and filename </li></ul><ul><li>Description (metadata) </li></ul><ul><li>Title on the page </li></ul><ul><li>Subsections </li></ul><ul><li>Paragraphs </li></ul><ul><li>Sentences </li></ul><ul><li>Words/Keywords (metadata) </li></ul>
  8. 8. IA Deliverables <ul><li>Page Flow Diagram </li></ul><ul><ul><li>Interaction diagram </li></ul></ul><ul><ul><li>Flow chart </li></ul></ul><ul><li>Wireframe </li></ul><ul><ul><li>Mockup </li></ul></ul><ul><ul><li>Paper Prototype </li></ul></ul>
  9. 9. Page Flow Diagram <ul><li>Define navigation </li></ul><ul><li>Define structure </li></ul><ul><li>Visualize page relationships </li></ul><ul><li>Define site scope </li></ul>
  10. 10. Horizontal format <ul><li>Used to describe interactive sites </li></ul>Services Contact Products Main Staff About
  11. 11. Horizontal format <ul><li>Used to describe interactive sites </li></ul>Services Contact Products Main Staff About History Mission
  12. 12. Vertical format <ul><li>Used to describe step by step flows </li></ul>Return Date Payment Departure Date Choose Flights From/To City Airline Reservation
  13. 13. Boxes (symbols) Decision External Process Output (print) Database Jump Page Page Page Page Page Stack Page Group Page Page Page
  14. 14. <ul><li>Double arrow points – two way link </li></ul><ul><li>Single arrow point – one way link </li></ul><ul><li>Dotted lines – anything different than a standard link </li></ul>Arrows (connectors)
  15. 15. Wire Frame Diagram <ul><li>Paper prototype </li></ul><ul><li>Mockup </li></ul><ul><li>Page script </li></ul>
  16. 16. Tools <ul><li>Visio </li></ul><ul><li>OmniGraffle </li></ul><ul><li>PowerPoint </li></ul><ul><li>Pencil and Paper </li></ul>
  17. 17. Questions?
  18. 18. Web Head Processes

×