1. A Blueprint for Successful Web Sites Information Architecture & Web Design Web 2003 - June 18, 2003 Beth Bailey Kim Eke Elizabeth Pyatt

2. IA & Web Design IA Overview IA Overview Design Document Design Document Activity Activity IA Process: Next steps IA Process: Next steps Your next steps Your next steps Today’s presentation

3. What makes a good site? Or, what makes a bad site? Or, what makes a bad site? IA Overview

4. IA: What it is The blueprint of the site/project upon which all other aspects are built The blueprint of the site/project upon which all other aspects are built  Project scope  Goals, mission, vision  Content and functionality  Structure  Navigation and interface  Interaction  Visual design IA Overview

5. IA: What it isn’t IT’S NOT THE SAME AS: Usability Usability Accessibility Accessibility Web Design Web Design IA Overview

6. The sum of its parts… Before you begin take time to: Before you begin take time to:  Identify individual components or pieces of information  Consider the nature of info (static v. dynamic)  Conceptualize the whole  Anticipate future growth IA Overview

7. Mapping information Concept maps Concept maps Outlines Outlines Organizational charts Organizational charts Spreadsheets Spreadsheets Whatever works best for your brain… Whatever works best for your brain… IA Overview

8. What is it good for? Absolutely everything! Absolutely everything! Design Document

9. Overview Physical documents in which planning information is recorded Physical documents in which planning information is recorded Essential in the entire process Essential in the entire process Each stage builds on the prior Each stage builds on the prior Can refer back to them at any time in the project Can refer back to them at any time in the project Design Document

10. Allows for… Walk through of scenarios Walk through of scenarios Opportunity to view the site in action prior to programming Opportunity to view the site in action prior to programming Collaboration tool when development does begin Collaboration tool when development does begin Design Document

11. The Document Site Goals Site Goals Audience Audience Scenarios Scenarios Competitive Analysis Competitive Analysis Design Document

12. The Document (cont) Content and Functional Requirements Content and Functional Requirements Site Structure Site Structure Layout Grids Layout Grids Page Mockups Page Mockups Design Document

13. Part 1: Mapping Info (10 min) Read “meeting notes” from scenario Read “meeting notes” from scenario Identify all possible information to Identify all possible information to  Meet client’s goals & needs  Consider nature of info  Consider future growth of site Activity

14. Part 2: Organizing Info (10 min) Group information (categories) Group information (categories) Consider all possible labels for info and select best Consider all possible labels for info and select best Create an outline or table to identify your main categories Create an outline or table to identify your main categories List the information included in each category List the information included in each category Activity

15. Part 3: Compare In small groups, compare In small groups, compare  Categories  Overall organization  Types of info included or not Activity

16. Debriefing (So what?) Organizing & labeling info is difficult Organizing & labeling info is difficult  Label interpretations vary  Future growth unknown  Designing a system And you still don’t have a clue about what the site looks like And you still don’t have a clue about what the site looks like Activity

17. Life “after” documentation Navigation systems Navigation systems Screen design Screen design Prototyping Prototyping  Paper, web, graphics Present Design Doc & prototype(s) to client Present Design Doc & prototype(s) to client IA Process: Next Steps

18. Your thirst for knowledge IA resources IA resources Usability & user testing Usability & user testing Accessibility Accessibility Your next steps

19. IA is the blueprint… Broad & growing field Broad & growing field Design Doc is small piece Design Doc is small piece More research now More research now Good IA contributes to usability Good IA contributes to usability Use your knowledge & creativity for good… not evil! Use your knowledge & creativity for good… not evil! Summary

20. Questions??