Upload
milo-crammer
View
217
Download
0
Tags:
Embed Size (px)
Citation preview
Information ArchitectureInformation 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
IA: Define Site GoalsIA: 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
IA: Define Site GoalsIA: 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…
IA: Define the AudienceIA: 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
IA: Define the AudienceIA: 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”
IA: Define the AudienceIA: 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.
IA: Define the AudienceIA: Define the Audience
What makes up an audience?
– Demographics:• Age, sex, education, geography, etc.• http://www.valleytech.k12.ma.us/medialit/demo
graphics.htm
– On-line Skill Level:• New to AOL• Runs a Web design firm
IA: Define the AudienceIA: 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.
IA: Define the AudienceIA: 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
IA: Define the Site ContentIA: 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.
IA: Define the Site ContentIA: 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
IA: Define the Site ContentIA: 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?
IA: Define the Site ContentIA: 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
IA: Define the Site StructureIA: 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
IA: Define the Site StructureIA: Define the Site Structure
How will the site be Organized?– Based upon Organizational Structure:
IA: Define the Site StructureIA: Define the Site Structure
How will the site be Organized?– Based upon Topics of Interest:
IA: Define the Site StructureIA: Define the Site Structure
How will the site be Organized?– Based upon Target Audience Groups:
IA: Define the Site StructureIA: Define the Site Structure
How will the site be Organized?– Based upon Task Oriented Goals:
IA: Define the Site StructureIA: Define the Site Structure
How will the site be Organized?– Based upon Metaphors:
IA: Site Structure: MetaphorIA: 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
IA: Site Structure: MetaphorIA: 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
IA: Site Structure: MetaphorIA: Site Structure: Metaphor
Organizational metaphors
IA: Site Structure: MetaphorIA: 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
IA: Site Structure: MetaphorIA: 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.
IA: Site Structure: HierarchyIA: 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
IA: Site Structure: Navigation IA: Site Structure: Navigation MapMap
Navigation system should address Global and Local paths
Create a visual representation of the site structure showing how elements are grouped and linked
IA: Site Structure: Navigation IA: Site Structure: Navigation MapMap
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
IA: Site Structure: Navigation IA: Site Structure: Navigation MapMap
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
IA: Site Structure: Navigation IA: Site Structure: Navigation MapMap
Create a visual representation of the site structure showing how elements are grouped and linked
IA: Site Structure: Navigation IA: Site Structure: Navigation MapMap
Limit number of Global Navigation elements to between five and seven
Decide on the category order Alphabetize categories
IA: Site Structure: Navigation IA: Site Structure: Navigation MapMap
Local Navigation can take many forms:– Hyperlink lists (Yahoo)– Sub Menu Choices– Next Page Buttons
IA: Site Structure: Navigation IA: Site Structure: Navigation MapMap
Remember the 3 Click Rule!
Design Process: ArtifactsDesign 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
Design Process: ConceptualizeDesign 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)
Design Process: ConceptualizeDesign Process: Conceptualize
Early IA starts out unrefined …– Rough navigation and
site map
Design Process: ConceptualizeDesign Process: Conceptualize
Minimal page level detail
Interaction Sequence
Story Boards
Design Process: PreliminaryDesign 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
Design Process: PreliminaryDesign Process: Preliminary
Rough sketch of content and navigation as a page layout
Design Process: PreliminaryDesign Process: Preliminary
Refine the navigation and page layout on a template or prototype
Create more solid navigation
Design Process: Design PhaseDesign 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
Design Process: Design PhaseDesign Process: Design Phase
• Graphic design: mock-up
• High-fidelity, precise representation of page
Summary: Why IA?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