What is Information Architecture?

1,564 views
1,411 views

Published on

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

Published in: Technology, Education
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,564
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
166
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

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

×