Design and Documentation

       Information Architecture
Diagramming an IA
• Information architects are required to
  present the product of their work using
  visual representati...
Tools for representing an IA
 •   Blueprints
 •   Wireframes
 •   Content mapping inventory
 •   Content Modeling
 •   Con...
Blueprints
• Blueprints, a.k.a. “sitemaps”, are diagrams
  that represent relationships between pages
  and other content ...
Blueprints
• High-level architecture blueprints
  – are usually created during the top-down
    information Architecture p...
High Level Blueprint
                                               M a in g a te w a y




                              ...
Blueprints
• Detailed Blueprints
  – Detailed blueprints map out the entire map so
    that the production team can implem...
Wireframes
• Wireframes are use to depict how an
  individual page would look from the
  architectural perspective.

• Wir...
Wireframes
• Types:
  – Low fidelity wireframes
     • No graphic elements and no real content
  – Medium fidelity wirefra...
Wireframes
• Guidelines
   – Consistency is key
   – Visio and other standard charting tools support
     background layer...
Low Fidelity Wireframe
Name of the Site              Logo




Global Navigation




Label               Content Area




F...
Medium Fidelity Wireframe
                                                                                        LOGO

Na...
High Fidelity Wireframe
Content Mapping
• Content mapping involves breaking down
  or combining existing content into chunks
  that are useful for...
Content Mapping
• Content Mapping is the framework used
  by information designers to combat
  information overload and tu...
Content Mapping
ID      Name             Type                Content                         Topics                       ...
Content Modeling
• Content models are micro information
  architectures targeted to improve access to
  the most valuable ...
Content Modeling
• A content model specifies:
  – What types of chunks we are working with
  – Relations between these chu...
Content Modeling
• Types of relationships between chunks:
  – Sequencing: Chunks can be placed together in
    sequence.
 ...
Content Modeling Basics
•    Based on patterns revealed during content
     inventory and analysis
•    What makes up a co...
Content Modeling
Content Modeling across silos
Content Modeling
• Condition for using content modeling:
  – The content has an inherent structure that can
    be teased ...
Controlled Vocabularies
• Products to facilitate the development of
  controlled vocabularies:
  – Metadata matrixes
  – A...
Controlled Vocabularies
• A metadata matrix summarizes the
  different types of vocabularies needed and
  the level of eff...
Controlled Vocabularies

Vocabulary      Description     Examples      Maintenance

Subject         Terms that      Home  ...
Controlled Vocabulary


Vocabulary    Description                         Examples                                     Mai...
Controlled Vocabularies
• For building vocabularies you will need to
  choose a database solution to manage
  terms and te...
Design Sketches
• Design sketches are used to put together
  the work of the three teams involved in
  the design (Graphic...
Web-Based Prototypes
• These prototypes show how the site will
  look and function.

• This is the official end of concept...
Architectural Style Guides
• An Architectural style guide is a document
  that explains:
  – How the site is organized,
  ...
Architecture Style Guide
• Contents:
   – Documentation of Mission and vision for the site
   – Information about intended...
Point-of-Production Architecture
• At this point your Information
  Architecture is implemented.
• Many implementation dec...
Design And Documentation
Design And Documentation
Upcoming SlideShare
Loading in …5
×

Design And Documentation

7,614 views

Published on

Published in: Technology, Design

Design And Documentation

  1. 1. Design and Documentation Information Architecture
  2. 2. Diagramming an IA • Information architects are required to present the product of their work using visual representations. • Guidelines: – Provide multiple views – Develop those views for specific audiences
  3. 3. Tools for representing an IA • Blueprints • Wireframes • Content mapping inventory • Content Modeling • Controlled Vocabularies • Design sketches • Web-based prototypes
  4. 4. Blueprints • Blueprints, a.k.a. “sitemaps”, are diagrams that represent relationships between pages and other content components. • They show the organization, navigation and labeling systems.
  5. 5. Blueprints • High-level architecture blueprints – are usually created during the top-down information Architecture process. – They are most useful for exploring primary organization schemes and approaches. – See examples: • http://www.elasticspace.com/interaction/liftarchitectu • http://www.elasticspace.com/interaction/animatearch
  6. 6. High Level Blueprint M a in g a te w a y M e d ia C areer P r im a r y S e le c t f ir m A bout us C e n te r ce n te r acce ss B y s e r v ic e B y co u n try B y in d u s tr y B y la n g u a g e B y to p ic By nam e G lo b a l F ir m s it e s c o n te n t r e p o s ito r y
  7. 7. Blueprints • Detailed Blueprints – Detailed blueprints map out the entire map so that the production team can implement your plans. – They must present complete information hierarchy from the main page to the destination pages – They must show details of the labeling and navigation systems
  8. 8. Wireframes • Wireframes are use to depict how an individual page would look from the architectural perspective. • Wireframes force you to consider: – Where the navigation system can be located – What components should be included – Decide how to group content components
  9. 9. Wireframes • Types: – Low fidelity wireframes • No graphic elements and no real content – Medium fidelity wireframes • Include several aspects of content, layout and navigation – High fidelity wireframes • Close approximation to the actual web page • Examples: • http://bobulate.com/documents/arch_two.pdf • http://iawiki.net/uploads/WireFrames/if.com.au.pdf
  10. 10. Wireframes • Guidelines – Consistency is key – Visio and other standard charting tools support background layers that you can export to your web page – Use callouts for providing notes about functionality – If more that one person is creating wireframes make sure to establish procedures for developing, sharing, and maintaining common wireframes
  11. 11. Low Fidelity Wireframe Name of the Site Logo Global Navigation Label Content Area Footer Area
  12. 12. Medium Fidelity Wireframe LOGO Name of the Site Global Navigation Section Tile: Contribute Page Contribute URL Contribute Paper Contextual Links Contribute URL + Short Info Contribute Bibliography Footer
  13. 13. High Fidelity Wireframe
  14. 14. Content Mapping • Content mapping involves breaking down or combining existing content into chunks that are useful for inclusion in you web site. • Content mapping table is used to match chunks of contents with their respective destinations in the web site.
  15. 15. Content Mapping • Content Mapping is the framework used by information designers to combat information overload and turn unstructured information into manageable and re-usable document-like content objects, ready for multiple purposes. • Ex - http://www.acf.hhs.gov/guide/contentmap.html
  16. 16. Content Mapping ID Name Type Content Topics Notes Location 0.0.0 Home Home Page World map, slogan News, slogan, world map image Index.asp 1.1.1 About Category Over of web site statement, vision, purpose of About.asp Home Page web site 1.2.1 Dedication Subcategory Dedication of web site Information on who and why this Dedication.asp About Page site was dedicated 1.1.1 Contribute Category Contribute content to the web Option to contribute a URL, Contribute.asp Home Page site article, short essay 1.2.1 URL Subcategory Contribute an URL Form to fill out to submit an URL Form URLsubmit.asp Contribution Contribute Page 1.2.2 Article Subcategory Contribute an Article Form to submit a journal article Form Articlesubmit.asp Contribution Contribute Page 1.2.3 Essay Subcategory Contribute an Essay or own Form to submit an essay or own Form Essaysubmit.asp Contribution Contribute Page information information 1.1.1 Search Category Search for information Search options for the web site Form Search.asp Home Page 1.2.1 Search Results Subcategory Search Results Displays search results for Searchresults.asp Search Page entered search criteria 1.1.1 Discussion Category Discussion Board Allows users to carrying on a Dicussion Board /Discussionboard/ Board Home Page conversation about diversity Application index.asp topics 1.2.1 Boards Subcategory View discussions List of all discussions /Discussionboard/ Dicussion Board list.asp 1.2.2 Add response Subcategory Add response or new Add response or new discussion Form /Discussionboard/ or discussion Dicussion Board discussion add.asp 1.1.1 Contact Info Category Contact Information How to contact web site owner / Form Contact.asp Home Page form to request info 1.2.1 Faculty Bio Subcategory Faculty information Faculty information and short bio Faculty.asp Contact Info Page
  17. 17. Content Modeling • Content models are micro information architectures targeted to improve access to the most valuable parts of the content.
  18. 18. Content Modeling • A content model specifies: – What types of chunks we are working with – Relations between these chunks – What kind of metadata is used for describing them
  19. 19. Content Modeling • Types of relationships between chunks: – Sequencing: Chunks can be placed together in sequence. – Co-location: Chunks can be placed in the same document – Linking: Chunks can link to other chunks – Shared meaning: even if chunks are not explicitly linked they can share semantic characteristics that ensure they are co-located in an ad-hoc manner
  20. 20. Content Modeling Basics • Based on patterns revealed during content inventory and analysis • What makes up a content model? 1. Content objects 2. Metadata (attributes and values) 3. Contextual links • Applies to many levels of granularity – Content objects – Individual documents – Document collections (e.g., web sites)
  21. 21. Content Modeling
  22. 22. Content Modeling across silos
  23. 23. Content Modeling • Condition for using content modeling: – The content has an inherent structure that can be teased out and capture as a content model – This content model will have value for many users – Small volume of content (for manual implementation) or explicit structure (can be automated) – You can afford the time, staff, resources and technology required for content modeling.
  24. 24. Controlled Vocabularies • Products to facilitate the development of controlled vocabularies: – Metadata matrixes – Applications for managing vocabulary terms and relationships
  25. 25. Controlled Vocabularies • A metadata matrix summarizes the different types of vocabularies needed and the level of effort necessary to develop them. • It also facilitates discussion about prioritization of vocabularies.
  26. 26. Controlled Vocabularies Vocabulary Description Examples Maintenance Subject Terms that Home Difficult describe networking; networking servers Product type Types of Hubs; Modems Moderate products that 3Com sells Product name Names of PC Digital Difficult products that Webcam 3Com sells Product brand Brands of HomeConnect; Easy product htat SuperStack 3Com sells
  27. 27. Controlled Vocabulary Vocabulary Description Examples Maintenance Subject Terms that describe Diversity Diversity, culture, customs Moderate Faculty Faculty responsible for this site Ellision, Dr Ellision Easy Areas List of some areas covered , Greek, Asian, Italian, etc. Moderate Page Titles Short text with keywords Management in Diversity – Cultures,Customs Easy
  28. 28. Controlled Vocabularies • For building vocabularies you will need to choose a database solution to manage terms and term relationships: – Thesauri or ontology development tools for sophisticated thesaurus. – A word processor, spread sheet, or database for simple vocabularies with only preferred term variants.
  29. 29. Design Sketches • Design sketches are used to put together the work of the three teams involved in the design (Graphic design, technical team, Information architect). • It is easier to build “rough design sketches” that can be used for the interaction than to us actual HTML code.
  30. 30. Web-Based Prototypes • These prototypes show how the site will look and function. • This is the official end of conceptual design and the beginning of production.
  31. 31. Architectural Style Guides • An Architectural style guide is a document that explains: – How the site is organized, – Why it is organized that way, – How the architecture should be extended as the site grows
  32. 32. Architecture Style Guide • Contents: – Documentation of Mission and vision for the site – Information about intended audiences – Description of the content development policy – Blueprints, wireframes and other documentation – Guidelines for adding content, extending the organization, labeling, navigation, and indexing systems – Graphic design style guide – HTML templates
  33. 33. Point-of-Production Architecture • At this point your Information Architecture is implemented. • Many implementation decisions would be made. • You should balance your client’s requests against sanity of your production team, budget and timeline.

×