43
2I¿FH RI &RPPXQLFDWLRQV 3ULQFHWRQ 8QLYHUVLW\ _ _ 9HUVLRQ Guide to Creating Website Information Architecture and Content

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

  • Upload
    others

  • View
    6

  • Download
    0

Embed Size (px)

Citation preview

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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