guide to creating website information architecture and content · introduction 5 creating ia 7 :kdw...
TRANSCRIPT
![Page 1: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/1.jpg)
Guide to Creating Website Information Architecture and Content
![Page 2: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/2.jpg)
Preface 3
Introduction 5
Creating IA 7
IA standards 26
University website requirements 29
Creating content 31
Pre-launch checklist 36
Glossary 39
References 42
![Page 3: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/3.jpg)
Preface
![Page 4: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/4.jpg)
Preface
Campus site building support
Preface
![Page 5: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/5.jpg)
Introduction
![Page 6: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/6.jpg)
Introduction
mz + ms 1/26/06
Phases of Site Development
= phases covered in this document= phase start= semifinal review= phase completion= revisions may still occur in response to usability testing, etc.
information architecture analysis
define project scope
visual design mock-ups
add text and images to content-ready site
proofread and approve text and images
functionality testing and quality assurance
site goes live to limited audience
site goes live to all
update content to keep site current (ongoing)
set up content-ready site
build custom functionalities
implement visual design
create/update content
NOTE: Remember to test the effectiveness of your site's information architecture, visual design, content and programming decisions with members of your target audiences as often as you can throughout the development of your site.
Introduction
Sample illustration of a website development timeline
![Page 7: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/7.jpg)
Creating IA
![Page 8: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/8.jpg)
Creating IA
What is information architecture (IA)?
Why do I need information architecture?
Who should work on the information architecture?
Designing Web Sites that Work: Usability for the Web
What, why, who
Site
map
Wire
fram
e
![Page 9: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/9.jpg)
Creating IA
How do I create great information architecture?
Who are the principal audiences with whom your key stakeholders want to
Ask them to prioritize these audiences in the following way:
site?
in this site?
Stakeholder goals
Sample illustration of target audiences and key stakeholder goals
![Page 10: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/10.jpg)
Creating IA
User goals
![Page 11: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/11.jpg)
Creating IA
Conducting user interviews and creating data sheets1
questions:
interviews + data sheets
(continued on the next page)
”
![Page 12: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/12.jpg)
Creating IA
interviews + data sheets
Sample illustration of a user data sheet
![Page 13: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/13.jpg)
Creating IA
Content areas
![Page 14: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/14.jpg)
Creating IA
Content area brainstorming1
brainstorm
(continued on the next page)
Bridging Cultures Conference Tutorial: Card-Sorting and Cluster Analysis for Information Architecture Design
![Page 15: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/15.jpg)
Creating IA
brainstorm
![Page 16: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/16.jpg)
Creating IA
Organizing
Organizing the content areas
![Page 17: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/17.jpg)
Creating IA
grouping
Grouping content1
Bridging Cultures Conference Tutorial: Card-Sorting and Cluster Analysis for Information Architecture Design
(continued on the next page)
![Page 18: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/18.jpg)
Creating IA
grouping
Sample of content groupings
Sample of subcategory grouping
![Page 19: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/19.jpg)
Creating IA
Creating the site map
Site map
![Page 20: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/20.jpg)
Creating IA
Outlining your navigational structure
Navigation
Illustration 1: Sketch of a navigation scheme created from a site map
(continued on the next page)
![Page 21: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/21.jpg)
Creating IA
Navigation
Vertical navigation in smaller sites
Adding a horizontal navigation bar
Illustration 3: Sample of a site using vertical navigational structure
(continued on the next page)
![Page 22: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/22.jpg)
Creating IA
Navigation
A
B
Illustration 4: Sample of a site using both horizontal and vertical navigational structures
Adding audience navigation
![Page 23: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/23.jpg)
Creating IA
Labeling the content areas
Labeling
ORIGINAL LABEL REFINED LABEL
![Page 24: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/24.jpg)
Creating IA
Wireframes
![Page 25: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/25.jpg)
Creating IA
![Page 26: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/26.jpg)
IA standards
![Page 27: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/27.jpg)
IA standards
Information architecture standards
Naming conventions
Visual design
Content location conventions
Site title
IA standards
(continued on the next page)
Web address
menu label
page header
site title
![Page 28: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/28.jpg)
IA standards
NavigationIA standards
![Page 29: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/29.jpg)
University website requirements
![Page 30: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/30.jpg)
Requirements
University website requirements
University requirements
![Page 31: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/31.jpg)
Creating content
![Page 32: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/32.jpg)
Creating content
Creating content
Why planning for content is important
Planning for content creation
User-oriented content
Consistency is a major key
(continued on the next page)
Creating content
![Page 33: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/33.jpg)
Creating content
Shorter is better
Make a favorable impression
(continued on the next page)
Creating content
![Page 34: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/34.jpg)
Creating content
Links
Lists
Visual content
(continued on the next page)
Creating content
![Page 35: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/35.jpg)
Creating content
Additional Web media
Creating content
![Page 36: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/36.jpg)
Pre-launch checklist
![Page 37: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/37.jpg)
Checklist
Pre-launch checklist
University website requirements
Highly recommended features
Pre-launch checklist
(continued on the next page)
![Page 38: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/38.jpg)
Checklist
Pre-launch checklist
![Page 39: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/39.jpg)
Glossary
![Page 40: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/40.jpg)
Glossary
Glossary
Content management system (CMS)
Developer
Hyperlink / hotlink / link
Information architecture
Key stakeholders
Navigation
Project scope
Screen Reader
Site map
Target audience(s)
(continued on the next page)
Glossary
![Page 41: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/41.jpg)
Glossary
User
User testing
Validate / validation
Visual designer
Visual presence
Web accessibility
Web usability
Wireframe
Designing with Web StandardsDesigning Web Sites that Work: Usability for the Web
Glossary
![Page 42: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/42.jpg)
References
![Page 43: Guide to Creating Website Information Architecture and Content · introduction 5 creating ia 7 :kdw zk\ dqg zkr" +rz" 6whsv ± 6whs 'h¿qlqj nh\ vwdnhkroghuv¶ jrdov 6whs ,ghqwli\lqj](https://reader033.vdocuments.site/reader033/viewer/2022042920/5f6459eb8fbe2c3ac4595e37/html5/thumbnails/43.jpg)
References
ResourcesUsability for the Web: Designing Web Sites that Work.
The Elements of User Experience: User-Centered Design for the Web
Don’t Make Me Think! A Common Sense Approach to Web Usability
What is Web design?
The Psychological Review
Designing Web Usability: The Practice of Simplicity
The Design of Everyday Things..”
Information Architecture for the World Wide Web
Bridging Cultures Conference Tutorial: Card-Sorting and Cluster Analysis for Information Architecture Design.
Credits
Equal Opportunity Policy
Nondiscrimination Statement
References