3 Information Architecture


Published on

Chapter Notes

Published in: Education
  • Be the first to comment

  • Be the first to like this

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

No notes for slide
  • !
  • 3 Information Architecture

    1. 1. Information Architecture CGS2826 Web Design Program in Interdisciplinary Computing Florida State University From Web Style Guide, Chapter 3: Information Architecture
    2. 2. “ If the underlying organization of a site and its content is poorly constructed, usability goes down the toilet, regardless of the quality of the visual design and user interface.”
    3. 3. Information Architecture (IA) <ul><li>the overall conceptual models and general designs used to plan, structure, and assemble a site </li></ul><ul><li>encompasses a broad range of design and planning disciplines </li></ul>
    4. 4. Information Architecture (IA) <ul><li>the boundaries among information architecture, technical design, user interface, and graphic design are necessarily blurred by the need for all of these communities of practice to cooperate to produce a cohesive, coherent, and consistent experience for the site user. </li></ul>
    5. 5. Information Architecture (IA) <ul><li>Organizes the site content into taxonomies and hierarchies of information </li></ul><ul><li>Communicate conceptual overviews and the overall site organization to the design team and clients </li></ul><ul><li>Research and design the core site navigation concepts </li></ul><ul><li>Set standards and specifications for handling site markup and format </li></ul><ul><li>Design and implement search optimization standards and strategies </li></ul>
    6. 6. 5 Steps to IA Nirvana <ul><li>Inventory your content </li></ul><ul><li>Establish a hierarchical outline, and create a controlled vocabulary for major content areas </li></ul><ul><li>Chunking: Divide your content into logical units </li></ul><ul><li>Draw site diagrams that illustrate site structure and navigation links </li></ul><ul><li>Test and Analyze the organization interactively with users </li></ul>
    7. 7. Hierarchy <ul><li>A hierarchy organizes website content from the most general to the most specific, and illustrate the relationships between the content. </li></ul>
    8. 8. Taxonomy <ul><li>The science and practice of classification through a controlled vocabulary. </li></ul><ul><li>Information can be organized by category, time, location, alphabet, and/or continuum. </li></ul>
    9. 9. Tools for Organizing Content <ul><li>Card sorting </li></ul><ul><li>Whiteboard Brainstorming Sessions </li></ul>
    10. 10. The Value of Chunking <ul><li>Short chunks of information are useful in that they: </li></ul><ul><li>are easy to read on computer screens </li></ul><ul><li>are convenient to place in a linked structure </li></ul><ul><li>provides a modular layout consistent throughout a site </li></ul><ul><li>provide good page layout </li></ul>
    11. 11. Site Structure <ul><li>A site structure should match user expectations, be logical and predictable, and utilize consistent methods and terminology. </li></ul><ul><li>A user’s mental model of a site should be clear, not confusing. </li></ul>
    12. 12. “ The goal is to build a hierarchy of menus and content pages that feels natural to users and doesn’t mislead them or interfere with their use of the site.” Too shallow Too deep
    13. 13. “ In a larger site, with maybe hundreds or thousands of pages of content, web search is the only efficient means to locate particular content.”
    14. 14. Site Structural Themes
    15. 15. Site Structural Themes
    16. 16. A Hierarchical structure should not force the user to back out to access another branch.
    17. 17. Site Structural Themes Web structures are best suited for small Websites
    18. 18. Site Diagrams The pattern of directories and subdirectories of the site files should mirror the major content divisions and structures as shown on the site diagram.
    19. 19. Wireframes <ul><li>Wireframes force teams to stay focused on the information architecture and structural design without getting sidetracked by the distraction of the visual layer. </li></ul>
    20. 20. Canonical Form (presenting info)