jump to content

Course Description

The course will introduce students to the core principles and methodologies of Information Architecture including conducting user research, content assessment and organization, documenting technical processes within systems, defining organizational structures, and developing interactive prototypes. Upon completion of this course, students will be able to design organizational systems that facilitate efficient retrieval of information.

Recommended Textbook(s)

Recommended Reference Books

Additional books to consider for reference:

Recommended Reading

Technologies Required

  • Mac or PC computers with internet connection
  • Web Browsers (Firefox, Opera, Safari, Internet Explorer)
  • Diagramming tool for creating wireframes, flowcharts, and more (Omnigraffle for Mac users, Visio for Windows users)

Competencies

Topic Competency Evaluation Methods
Information Architecture Define information architecture
Discuss value of information architecture in the context of web design and development.
Identify stages in the web design process and indicate the information architecture deliverables within this process.
Research / Web Project Definition Conduct a client interview to determine the business purpose of the new web site and the primary goals.
Identify common user information needs, information gathering models and methods for gathering user research
Write a project brief
Define the primary audience and develop a persona
Identify the steps to conducting an competitive analysis and explain the value of conducting this analysis
Content: Organization & Structure Perform a content audit and create a content inventory.
Explain the difference between content organization and content structure
Define content structure by creating a content map
Describe how to conduct a card sort and analyze the findings
Create a content brief outlining the content strategy
Process Identify trends using web analytic tools that can be used to shape an information architecture strategy
Explain how storyboards/process flows are used in complex interface design.
Structure Create a global site map
Create a page description diagram
Create a wireframe
Explain the advantages and disadvantages of the different types of wireframes (low fidelity, medium fidelity, high fidelity, CSS/XHTML)
Interaction Write the Functional Specifications for a simple web application
Develop a prototype based on the functional specifications

Assignments

Information Architecture 1 Assignment Rubrics

Course Blog

Setup a blog using WordPress, Blogger, or another comparable system. Each week of the course, write one blog post that expands upon the topics discussed in class or readings. Each post should be at least 200 words in length, and should contain images and links where appropriate.

Recommended: Subscribe to your classmates' blog RSS feeds using Google Reader, Netvibes, Bloglines, or another RSS reader of your choice so you can learn from your peers.

Course Blog Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Blog Posts (evaluated weekly) Blog post was not published on time, is poorly written, does not contain content relevant to the course, or does not meet the post length requirement. Blog post was published on time, contains some spelling and/or grammatical errors, meets the post length requirement, but content is not very relevant to the course, or does not expand upon course topics. Blog post was published on time, contains no spelling and/or grammatical errors, meets the post length requirement, and the content expands upon course topics. Blog post is published on time, is very well written with no typos, grammar, or spelling errors, expands upon course topics, and exceeds the minimum post length. Post contains images where relevant to the content, and links to plenty of sources and resources.

Labs

Web Project Definition

The point of this activity is to define the purpose, audience, value, desired perception, technical and user needs for a new web site. In teams of two, select a web site topic below:

  • eText books for college students
  • a text/email alert service for sports to let you know when a game is getting really good
  • a fresh baked cookie delivery service
  • an online dating service
  • or suggest a topic for your web site

One member of your team will play the role of the information architect. The other member of your team will play the client who wants the new website.

Conduct a client interview using the client survey. Summarize your findings and write a one page project brief. Consider using Kelly Goto's Communication Brief Worksheet as a guide. Content Brief required components:

  1. purpose
  2. audience definition
  3. value to audience
  4. desired perception
  5. technical and user needs
Web Project Definition Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Client Survey Client survey was not completed. Answers to survey questions are poorly written. Answers do not contain content relevant to the questions. Answers to survey questions are incomplete or have inaccuracies. Answers to survey questions are complete and accurate, but lacking in details. Answers to survey questions are complete, accurate and have relevant details.
Content Brief Content Brief is incomplete. The content brief is poorly written. There are three or more grammatical errors. Content Brief includes all required components but is inconsistent with the answers to the client survey. Content Brief includes all required components and is accurate but with omissions of relevant data from the client survey. There are three or fewer grammatical errors. Content Brief includes all required components, is accurate and addresses all relevant client survey data. There are no grammatical errors.
Critical Thinking The Content Brief is lacking critical thinking. The brief tends to be inaccurate or unclear. The Content Brief is lacking critical thinking. The brief tends to address peripheral issues. Generally accurate, but with omissions or clear recitation. The Content Brief shows some critical thinking (application, analysis, synthesis, and evaluation) evident, but the brief may not directly address the client's needs. The Content Brief shows clear evidence of critical thinking (application, analysis, synthesis, and evaluation). The brief is characterized by originality and relevance to the client's needs.

Develop a Persona

Review the article Building a Data Backed Persona. Look back at the client survey and project brief you completed in Lab 1 and develop a persona for the primary audience. Use the persona template to bring an imaginary audience member to life by filing in the following details:

  • photo
  • name
  • quote
  • description
  • demographics
  • technical profile
  • top three user goals
  • top three business objectives for the site
Persona Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points
Persona Persona document is incomplete. The persona is poorly written. The persona is unrealistic, unbelievable and/or does not represent the primary audience defined for lab 1. There are three or more grammatical errors. Persona document includes all required components and is well written but is lacking in details. Persona represents primary audience defined in lab 1 and is realistic. There are three or fewer grammatical errors. Persona document includes all required components, is exceptionally well written and includes relevant details. Persona represents primary audience defined in lab 1 and is realistic. There are no grammatical errors.
Critical Thinking The Persona is lacking critical thinking. The persona tends to be inaccurate or unclear. The Persona shows some critical thinking (application, analysis, synthesis, and evaluation) evident, but the persona may not directly address all the client and user needs. The Persona shows clear evidence of critical thinking (application, analysis, synthesis, and evaluation). The persona is characterized by originality and relevance to the client and user needs.

Create a Content Inventory and Content Map

Conduct a content audit and inventory on a small local restaurant or club's web site. In order to keep this assignment to a reasonable size, it is suggested that you not use a national chain or any site that has more than 30 pages.

Use the simple content audit spreadsheet (a simplified version of the content inventory spreadsheet developed by Sarah Rice of Senab Consulting) to document your content audit. The content inventory should include at least 15 pages on the site. Each page should have a unique page id number. Use the content inventory examples from Chapter 12.5 in Information Architecture for the World Wide Web, 3rd Edition, as your guide.

Using paper and pencil, create a simple content map diagram based on the content inventory. Use the page titles and unique page id numbers from the content inventory to label each page on the content map.

Content Inventory and Content Map Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points
Content Inventory Content inventory contains less than 15 items. Pages are not uniquely identified. The content inventory is inaccurate and/or incomplete. There are three or more grammatical errors. Content inventory contains 15-20 items. Pages are uniquely identified with a page id number. The content inventory is accurate and complete. There are three or fewer grammatical errors. Content inventory contains 20-30+ pages. Pages are uniquely identified. The content inventory is accurate and complete. There are no grammatical errors.
Content Map Content Map is incomplete. The map is not well organized. The map includes data that is not represented on the content inventory. There are three or more grammatical errors. Content Map is complete. The map is well organized. The map includes all the data represented on the content inventory including the unique identifiers. Most of the data on the map is relevant. There are three or fewer grammatical errors. Content Map is complete. The map is well organized. The map includes all the data represented on the content inventory including the unique identifiers. All data on the map is relevant. There are no grammatical errors.

Write a Content Strategy

Read the articles What is Content Strategy? (Part I) & What is Content Strategy? (Part II) . Create a Content Strategy for the web site you defined in Lab 1. The Content Strategy should include:

  • Content Purposes and Context
  • Content Topics and Types
  • Content Tone
  • Content Channels and Distribution
  • SEO
  • Content Maintenance
Content Strategy Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points
Content Strategy Content Strategy document is incomplete. The strategy is poorly written. There are three or more grammatical errors. Content Strategy includes all required components and is well written but is lacking in details. There are three or fewer grammatical errors. Content Strategy includes all required components, is exceptionally well written and includes relevant details. There are no grammatical errors.
Critical Thinking Lacking critical thinking. Responses tend to be inaccurate or unclear. Some critical thinking (application, analysis, synthesis, and evaluation) evident, but responses may not directly address the issue. Clear evidence of critical thinking (application, analysis, synthesis, and evaluation). Responses are characterized by originality and relevance to the topic.

Create a Global Site Map

Review chapter 12.3 of Information Architecture for the World Wide Web, 3rd Edition.

Develop a proposed content inventory for the site you defined in Lab 1. Use the simple content audit spreadsheet to document your proposed content inventory. The content inventory should include at least 10 items/pages. Using Omnigraffle or Visio, create a global site map/high level blueprint for the Lab 1 site. Use the page titles and unique page id numbers from the content inventory to label each page on the global site map.

Global Site Map Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points
Content Inventory Content inventory contains less than 10 items. Pages are not uniquely identified. The content inventory is incomplete (does not include pages that will meet both the user needs and business objectives stated in the Persona from Lab 2). There are three or more grammatical errors. Content inventory contains 10-15 items. Pages are uniquely identified with a page id number. The content inventory is complete (includes pages that will meet both the user needs and business objectives stated in the Persona from Lab 2). There are three or fewer grammatical errors. Content inventory contains more than 15 pages. Pages are uniquely identified. The content inventory is complete (includes pages that will meet both the user needs and business objectives stated in the Persona from Lab 2). There are no grammatical errors.
Global Site Map Global Site Map is incomplete. The map is not well organized. The map includes data that is not represented on the content inventory. There are three or more grammatical errors. Global Site Map is complete. The map is well organized. The map includes all the data represented on the content inventory including the unique identifiers. Most of the data on the map is relevant. There are three or fewer grammatical errors. Globla Site Map is complete. The map is well organized. The map includes all the data represented on the content inventory including the unique identifiers. All data on the map is relevant. There are no grammatical errors.
Critical Thinking The Inventory and/or Map are lacking critical thinking. The Inventory and/or Map tends to be inaccurate or unclear. The Inventory and/or Map shows some critical thinking (application, analysis, synthesis, and evaluation) evident, but the Inventory and/or Map may not directly address all the client and user needs. The Inventory and/or Map shows clear evidence of critical thinking (application, analysis, synthesis, and evaluation). The Inventory and/or Map is characterized by originality and relevance to the client and user needs.

Create a Page Description Diagram

Read the article Where the Wireframes Are: Special Deliverable #3 by Dan Brown where he explains Page Description Diagrams (PDD). Create a Page Description Diagram for the home page of the site your defined in Lab 1. Consider using the sample PDD found at Web Design Process: Site Structure as a guide.

Page Description Diagram essential elements:

  1. Company Name
  2. Page Title
  3. A Three Point Priority Scale (high to low)
  4. At least 5 page elements (chunks of content)
  5. Notes explaining any important content strategies or user needs that effect the priority of content.
Page Description Diagram Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points
Page Description Diagram (PDD) PDD is incomplete. PDD is poorly written. There are three or more grammatical errors. PDD includes all required components and is well written but is lacking in details. There are three or fewer grammatical errors. PDD includes all required components, is exceptionally well written and includes relevant details. There are no grammatical errors.
Critical Thinking PDD is lacking critical thinking. The PDD tends to be inaccurate or unclear. PDD shows some critical thinking (application, analysis, synthesis, and evaluation) evident, but the PDD may not directly address all the client and user needs for the home page. PDD shows clear evidence of critical thinking (application, analysis, synthesis, and evaluation). The PDD is characterized by originality and relevance to the client and user needs as they relate to the home page.

Create a Wireframe

Review chapter 12.4 of Information Architecture for the World Wide Web, 3rd Edition. Review the information you gathered on the Page Description Diagram from Lab 5. Create a wireframe for the home page of the site you defined in Lab 1. Use Omnigraffle or Visio for this activity. The wireframe should include:

  • labeled boxes representing areas or regions
  • text representing content
  • crossed out boxes representing images
  • navigational features (tabs, nav bars, links)
  • annotations explaining any dynamic functionality

You may find Wireframe Stencils for Visio and/or Wireframe Stencils for Omnigraffle useful.

Wireframe Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points
Wireframe Wireframe is incomplete. There are three or more grammatical errors. Wireframe includes all required components but is lacking in details. There are three or fewer grammatical errors. Wireframe includes all required components, and includes relevant details. There are no grammatical errors.
Critical Thinking Wireframe is lacking critical thinking. The wireframe tends to be inaccurate or unclear. Wireframe shows some critical thinking (application, analysis, synthesis, and evaluation) evident, but the wireframe may not directly address all the client and user needs for the home page as indicated on the Page Description Diagram. Wireframe shows clear evidence of critical thinking (application, analysis, synthesis, and evaluation). The Wireframe is characterized by originality and relevance to the client and user needs as they relate to the home page. The Wireframe is clearly based on the Page Description Diagram from Lab 6.

Develop Functional Specifications and a Working Prototype

Imagine that you are an information architect in a web design firm. A museum has hired your firm to help them create a web application for exhibit planning. The museum director has explained that they web application should be designed to help them create exhibits that appeal to the general public. The primary users will be curators. The curators will need to browse the museum's collection, find works of art belonging to a number of themes and build a story around them.

For this assignment focus on the part of the application that will allow the curators to browse the collection, indicate works of art that might be used in the exhibit, as well as indicate themes/stories related to individual works of art.

Decide on the desired functionality. Document the desired functionality and prioritize is into the following categories:

  1. Required functionality
  2. Preferred functionality
  3. Bonus functionality

For the items you have listed in required functionality, develop a simple xhtml/css functional prototype that will allow your client to click through and experience the bare bones interactive elements.

Functional Prototype Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points
Functional Spec Functional spec is incomplete and/or irrelevant to the clients' needs. Functional spec is unclear or poorly written. There are three or more grammatical errors. Functional spec includes required and preferred functionality. Spec reasonably relevant to the clients' needs. Spec include some irrelevant information and/or is lacking in some details. Functional spec is well written and clear. There are three or fewer grammatical errors. Functional Spec includes required, preferred and bonus functionality. Functional spec is extremely relevant to the clients' needs and is well detailed. Functional spec is very well written and clear. There are no grammatical errors.
Simple Prototype Markup does not validate. Prototype does not allow client to click-thru required functionality. Markup validates. Prototype allows client to click-thru most of the required functionality. Markup validates. Prototype allows client to click-thru all of the required functionality.
Critical Thinking Spec and Prototype are lacking critical thinking. The spec and prototype tend to be inaccurate or unclear. Spec and prototype show some critical thinking (application, analysis, synthesis, and evaluation) evident, but may not directly address all the client and user needs. Spec and prototype show clear evidence of critical thinking (application, analysis, synthesis, and evaluation). The spec and prototype are characterized by originality and relevance to the client and user needs.

IA Critique Paper

The IA critique is a five page written critique with accompanying “before” and “after” screenshots of the Web page(s) critiqued from a Web site approved by the instructor.

You may choose to do an IA critique of the one of these four pages:

  • YouTube
  • craigslist
  • Myspace
  • Facebook
  • Your School/College/University

Critiques include a screen shot of the current home page, and a screen shot of your new design with commentary on why you are making changes to the design. Take into account the proposed user audience for the site, accessibility, labeling, navigation, etc. (in other words, the topics we discuss in class) and make an attempt to improve on these current designs.

Ideal formatting would be five pages of text describing your changes and why you made them, and a “before” and an “after” picture. Also, send an email to the class list so others can learn from your ideas.

Digital designs are required (no sketches of design). Two main methods for preparing your proposed design:

  1. Download theHTML and graphics for the page and modify the source code yourself and add (or resize) any relevant new graphics you require for your design.
  2. Take a screen shot of the page and use a graphics editing program to “paint over” your proposed re–design.

Divide your new design into some kind of quadrants or use arrows with numbers (or something like that) to note the sections you’re discussing in the textual part of the design critique.

Focus more on how the individual page (the Home page, what you’re critiquing) should work and then what a good IA would do to try to make those concepts and designs flow into the other pages.

IA Critique Paper Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points
IA Critique IA Critique was not completed on time, is poorly written, and/or does not contain relevant content. IA Critique was completed on time, is well written, contains some spelling and/or grammatical errors, most of the content is relevant. IA Critique was completed on time, is extremely well written, contains no spelling or grammatical errors, all of the content is relevant.
Design Screenshots Screenshots of current and proposed design are not included. Proposed design was not created in html or a graphics editing program. Screenshots of current and proposed design are included. Proposed design was created in html or a graphics editing program. Most sections of the design are labeled to provide clear reference for recommendations. Screenshots of current and proposed design are included. Proposed design was created in html or a graphics editing program. All sections of the design, referenced in the recommendation, are clearly labeled.
Critical Thinking Lacking critical thinking. Recommendations tend to be inaccurate or unclear. Some critical thinking (application, analysis, synthesis, and evaluation) evident, but recommendations may not directly address the issues. Clear evidence of critical thinking (application, analysis, synthesis, and evaluation). Recommendations are characterized by originality and relevance to the topic.

Examination Questions

Essay Questions

  1. What is an Information Architect?
  2. Identify the stages in the web design process and indicate the information architecture deliverables within this process.
  3. List four common information needs of users as defined by Morville and Rosenfeld in Information Architecture for the World Wide Web, 3rd Edition.
  4. Describe the berry-picking model of information gathering and contrast it with the "pearl growing" approach.
  5. List two methods that are can be used to research the information gathering behavior and needs of users
  6. Identify at least three organization schemes. For each scheme indicate if it is an exact or ambiguous organization scheme.
  7. List the three types of organization structures. Should large web sites select a single organization structure or employ all three? Why?

Discussion Questions

  1. Information Architecture - Take a moment to review What is an Information Architect? This article indicates that information architecture is the foundation on which the form, function, navigation, interaction, and visual design of a web site should be built. Do you agree? Why or why not?
  2. Competitive Analysis - Read Competitive Analysis: Understanding the Market Context. List two types of qualitative data and two types of quantitative data that could be collected in a competitive analysis. Would your design process always benefit from a competitive analysis? Why or why not?
  3. Card Sorting - Look at the web site for the school or university you are attending. Review Card Sorting: A Definitive Guide. Describe how you could conduct a card sorting exercise for your school/university's home page. Would you use an open or closed card sort? Why? How would you document and analyze the findings of the card sort?
  4. Web Analytics - Identify at least three types of web analytic data that could potential be useful in identifying trends or problems on a site. What are the pros and cons of using web analytics to inform the information architecture?
  5. Storyboards/Process Flows - Review the article Storyboarding Rich Internet Applications with Visio. Explain when you would choose to use a simple wireframe to document the design decisions for a web site, versus, when you would choose to use a storyboard/process flow.
  6. Wireframes - Review the article Recyclable Information Architecture as well as Chapter 12.4 of Information Architecture for the World Wide Web, 3rd Edition. Define each of the following types of wireframes:
    • low fidelity
    • medium fidelity
    • high fidelity
    • xhtml/css
    List advantages and disadvantages for each. If you were leading a redesign project for your school's web site, which type of wireframe would you chose to use and why?

Learning Modules

Help us develop our living curriculum. Contribute a learning module.

Contributors

Primary Course Developers: Glenda Sims and Nick Finck

Course Reviewers: Jade Anderson and Aarron Walter

Additional support and special thanks to:

  • Bob Boiko (Metatorial Services Inc., University of Washington Information School)
  • Louis Rosenfeld (Rosenfeld Media, formerly Information Architecture Institute)
  • Peter Morville (Semantic Studios, formerly University of Michigan School of Information)
  • Don Turnbull (University of Texas School of Information)