1. Information Architecture Information Architecture (IA) is a process of identifying the objectives for building a Web site and then constructing a comprehensive plan, or blueprint before development begins. Define Goals for the Web Site Define the Audience Define the Site Content Define the Site Structure Define the Site Structure Hierarchy and Navigation

2. IA: Define Site Goals Understand “Why” the site is being built Understand “What” you are building – If you don’t know what you are building, what is the point? Defining the goals for the Web site establishes a clear, well-documented plan for what you are going to accomplish and helps to define the roles of the project participants Solicit diverse opinions

3. IA: Define Site Goals Ask Questions –Basic set of questions should include: What is the mission or purpose of org? What are short / long term goals of the site? Who are the intended audiences? Why will users visit your site? –Filter answers and distill into a master list –You now have goals and a purpose! –Make sure the client agrees and signs off on the goals for the site…

4. IA: Define the Audience Objective is to establish a clear definition of the site’s audience and how they will react to the site An audience is defined by more than the technology it uses to access the site –That a user visiting the site uses a 56 kb modem is only a small part of the audience definition Avoid a “too narrow” focus, look beyond the immediate needs

5. IA: Define the Audience Why build a Web site if you don’t have an Audience? Facts: –Most sites get a wide variety of visitors –Some visitors are better than others –Build your site around a “target audience”

6. IA: Define the Audience What makes up an audience? –Goals: Why are they on your Web site? –Language: What is their native language? Learn the “lingo” –Technology: Hardware / Software / Platforms, etc.

7. IA: Define the Audience What makes up an audience? –Demographics: Age, sex, education, geography, etc. http://www.valleytech.k12.ma.us/medialit/demo graphics.htmhttp://www.valleytech.k12.ma.us/medialit/demo graphics.htm –On-line Skill Level: New to AOL Runs a Web design firm

8. IA: Define the Audience Perform a Competitive Analysis –Know what the competition is doing on their Web site –List competitors and research their sites –Generate a set of features and criteria to evaluate each site –Begin with your goals, use them as the basis for a set of features in your analysis –Criteria include things such as download time, page size, layout, graphics, navigation, etc.

9. IA: Define the Audience Perform a Competitive Analysis –Measure effectiveness of your Web Site vs. your Competitor’s: Load Time – How quickly do pages show up Accessibility – How long does it take an average user to navigate to pages Content – graphics, text, technology Task Analysis – Start to Finish process –Measure from different user perspectives 56k vs. Broadband line for example

10. IA: Define the Site Content Use the list of goals, needs of your audience, and competitive analysis to start two Content Inventory Lists: – Content elements – Functional requirements Add as much content as you can to each list – types include: –Examples, copyright notices, rules, Web pages, dynamic content, images, etc.

11. IA: Define the Site Content More types of content for your lists: –Member login pages, newsletters, forms, documents, signup pages, etc. –Browse your competition … When complete, revisit functional requirements –Determine feasibility –Rank importance

12. IA: Define the Site Content What do you already have in hand? What would be good to develop for the site? For each item, ask yourself: -Does it fit purpose of site? -Does it suit the audience? -Why would people come to see this item? Don't forget the functional items, e.g. -Site map -Copyright notices -Search function -Security Define your incremental goals: -What should be published first? -What can come later stages?

13. IA: Define the Site Content Next, group and label content –Experiment with different groupings –When you are satisfied with the groupings, label each group –Becomes the basis of your site structure –Get feedback and input from key players

14. IA: Define the Site Structure Site Structure is the blueprint that holds the page together A well-defined structure helps to define a navigation system, and these two combined facilitate page layout design Metaphor exploration can help to refine the vision of the site’s structure

15. IA: Define the Site Structure How will the site be Organized? –Based upon Organizational Structure:

16. IA: Define the Site Structure How will the site be Organized? –Based upon Topics of Interest:

17. IA: Define the Site Structure How will the site be Organized? –Based upon Target Audience Groups:

18. IA: Define the Site Structure How will the site be Organized? –Based upon Task Oriented Goals:

19. IA: Define the Site Structure How will the site be Organized? –Based upon Metaphors:

20. IA: Site Structure: Metaphor Explore various metaphors during the process of determining the site’s structure Good metaphors help to make your site intuitive to users No metaphor is perfect – combine elements of several types

21. IA: Site Structure: Metaphor Organizational metaphors –Rely on the existing structure of a group, system or organization –For a site to sell groceries, your metaphor could be a supermarket, where products are grouped logically by type

22. IA: Site Structure: Metaphor Organizational metaphors

23. IA: Site Structure: Metaphor Functional metaphors –Relating online tasks to real-world representations of tasks –You can figuratively “cut”, “copy” and “paste” graphics on a computer using PhotoShop for example

24. IA: Site Structure: Metaphor Visual metaphors –Based on common graphic elements familiar to most people –Consider a music site that allows users to play songs using traditional icons found on CD players for “start”, “pause”, “stop”, etc.

25. IA: Site Structure: Hierarchy Integrate Metaphor with Content –Match content with Sections to form a Hierarchy, starting with general information and drilling into specifics –Major sections form the site’s “roots” –Map out the levels on paper, indenting as you drill deeper

26. IA: Site Structure: Navigation Map Navigation system should address Global and Local paths Create a visual representation of the site structure showing how elements are grouped and linked

27. IA: Site Structure: Navigation Map Questions: –How will visitors use the site? –How will they get from “A” to “B” –How do you prevent them from getting lost? Major sections are good candidates for Global Navigation Each section can also have multiple subcategories - People like to work from structured lists

28. IA: Site Structure: Navigation Map Include notes that distinguish among parts of the site that perform a function or transactions, parts that are generated dynamically, etc. Work on paper or a whiteboard, with sticky notes, etc. Brainstorm! Plan for growth

29. IA: Site Structure: Navigation Map Create a visual representation of the site structure showing how elements are grouped and linked

30. IA: Site Structure: Navigation Map Limit number of Global Navigation elements to between five and seven Decide on the category order Alphabetize categories

31. IA: Site Structure: Navigation Map Local Navigation can take many forms: –Hyperlink lists (Yahoo) –Sub Menu Choices –Next Page Buttons

32. IA: Site Structure: Navigation Map Remember the 3 Click Rule!

33. Design Process: Artifacts During the process of defining the Site Structure, Web designers create representations of the site at various levels of detail Web sites are refined at all levels of detail Site Maps Story Board/ Scenarios Page Mock-ups Sketches Prototypes/ Templates

34. Design Process: Conceptualize During the early phases of the design process, activities typically involve: –Brainstorming –Sketching ideas –Defining site structure Early project deliverables: –Site maps –Scenarios and storyboards –Written reports and Proposals –Presentations (off-line & on-line)

35. Design Process: Conceptualize Early IA starts out unrefined … –Rough navigation and site map

36. Design Process: Conceptualize Minimal page level detail Interaction Sequence Story Boards

37. Design Process: Preliminary Generate multiple (3-5) designs –one will be selected for development –navigation design –early graphic design During this phase, activities typically involve: –Design Sketches –Creating Templates and Page Mock-ups Preliminary project deliverables: –Schematics (a.k.a. templates) –Site maps –Mock-ups –Presentations

38. Design Process: Preliminary Rough sketch of content and navigation as a page layout

39. Design Process: Preliminary Refine the navigation and page layout on a template or prototype Create more solid navigation

40. Design Process: Design Phase Develop the design –Design is selected in previous stage –Increasing level of detail During this phase, activities typically involve: –Design, Prototype, Evaluate, Design … –Creating more refined graphics and prototypes Design phase project deliverables: –Mock-ups –Prototypes (with HTML) –Presentations

41. Design Process: Design Phase Graphic design: mock-up High-fidelity, precise representation of page

42. Summary: Why IA? Building a “blue print” for the Web site structure Support information/navigation design Support creation of specific Design Process artifacts –Sketches –Schematics –Site maps –Prototypes –Walkthroughs/presentations