Hide Notes 

Slide 1: Design and Documentation Information Architecture
Slide 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
Slide 3: Tools for representing an IA • • • • • • • Blueprints Wireframes Content mapping inventory Content Modeling Controlled Vocabularies Design sketches Web-based prototypes
Slide 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.
Slide 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
Slide 6: High Level Blueprint M a in g a te w a y P r im a r y acce ss M e d ia C e n te r C areer ce n te r S e le c t f ir m A bout us B y s e r v ic e B y co u n try B y la n g u a g e B y in d u s tr y By nam e B y to p ic F ir m s it e s G lo b a l c o n te n t r e p o s ito r y
Slide 8: 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
Slide 10: 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
Slide 11: 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
Slide 12: 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
Slide 13: Low Fidelity Wireframe Name of the Site Logo Global Navigation Label Content Area Footer Area
Slide 14: 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
Slide 15: High Fidelity Wireframe
Slide 16: 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.
Slide 17: 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
Slide 18: Content Mapping ID Name Type Content Topics Notes Location 0.0.0 1.1.1 1.2.1 Home About Dedication Home Page Category Home Page Subcategory About Page Category Home Page Subcategory Contribute Page Subcategory Contribute Page Subcategory Contribute Page Category Home Page Subcategory Search Page Category Home Page Subcategory Dicussion Board Subcategory Dicussion Board Category Home Page Subcategory Contact Info Page World map, slogan Over of web site Dedication of web site News, slogan, world map image statement, vision, purpose of web site Information on who and why this site was dedicated Option to contribute a URL, article, short essay Form to fill out to submit an URL Form to submit a journal article Form to submit an essay or own information Search options for the web site Displays search results for entered search criteria Allows users to carrying on a conversation about diversity topics List of all discussions Add response or new discussion Dicussion Board Application Form Form Form Form Index.asp About.asp Dedication.asp 1.1.1 1.2.1 1.2.2 1.2.3 1.1.1 1.2.1 1.1.1 Contribute URL Contribution Article Contribution Essay Contribution Search Search Results Discussion Board Boards Add response or discussion Contact Info Contribute content to the web site Contribute an URL Contribute an Article Contribute an Essay or own information Search for information Search Results Discussion Board Contribute.asp URLsubmit.asp Articlesubmit.asp Essaysubmit.asp Search.asp Searchresults.asp /Discussionboard/ index.asp /Discussionboard/ list.asp Form /Discussionboard/ add.asp Contact.asp 1.2.1 1.2.2 View discussions Add response or new discussion Contact Information 1.1.1 How to contact web site owner / form to request info Faculty information and short bio Form 1.2.1 Faculty Bio Faculty information Faculty.asp
Slide 19: Content Modeling • Content models are micro information architectures targeted to improve access to the most valuable parts of the content.
Slide 20: 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
Slide 21: 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
Slide 22: 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)
Slide 23: Content Modeling
Slide 24: Content Modeling across silos
Slide 25: 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.
Slide 26: Controlled Vocabularies • Products to facilitate the development of controlled vocabularies: – Metadata matrixes – Applications for managing vocabulary terms and relationships
Slide 27: 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.
Slide 28: Controlled Vocabularies Vocabulary Subject Description Terms that describe networking Types of products that 3Com sells Names of products that 3Com sells Brands of product htat 3Com sells Examples Home networking; servers Maintenance Difficult Product type Hubs; Modems Moderate Product name PC Digital Webcam Difficult Product brand HomeConnect; Easy SuperStack
Slide 29: Controlled Vocabulary Vocabulary Description Examples Maintenance Subject Faculty Areas Page Titles Terms that describe Diversity Faculty responsible for this site List of some areas covered Short text with keywords Diversity, culture, customs Ellision, Dr Ellision , Greek, Asian, Italian, etc. Management in Diversity – Cultures,Customs Moderate Easy Moderate Easy
Slide 30: 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.
Slide 31: 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.
Slide 32: 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.
Slide 33: 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
Slide 34: 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
Slide 35: 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.