Information Architecture

Web Design – Sec 2-5

Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course

materials

ObjectivesThe Student will:

learn theories and techniques for effectively organizing content on a website.

Information ArchitectureDesign informs even the

simplest structure, whether of brick and

steel or prose.—E. B. White

Information Architecture Information architecture

describes the overall conceptual models and general designs used to plan, structure, and assemble a site. Every web site has an information

architecture, but information architecture techniques are particularly important to large, complex web sites

Goals of Information Architecture

Organize the site content into taxonomies and hierarchies of information;

Communicate conceptual overviews and the overall site organization;

Design the core site navigation concepts;

Set standards and specifications for the format and handling of text content;

Design and implement search optimization standards and strategies.

Definitions Taxonomy: The science of

classification; laws and principles covering the classifying of objects.

Hierarchy: A series of ordered groupings of people or things within a system.

Goals of Information Architecture

Organize the site content into taxonomies and hierarchies of information;

Communicate conceptual overviews and the overall site organization;

Design the core site navigation concepts;

Set standards and specifications for the format and handling of text content;

Design and implement search optimization standards and strategies.

Organizing Your Information

Without a solid and logical organizational foundation, your web site will not function well even if your basic content is accurate, attractive, and well

written.

5 basic steps for organizing information

Inventory your content: What do you have already? What do you need?

Establish a hierarchical outline of your content and create a controlled vocabulary so the major content, site structure, and navigation elements are always identified consistently;

Chunking: Divide your content into logical units with a consistent modular structure;

Draw diagrams that show the site structure and rough outlines of pages with a list of core navigation links; and

Analyze your system by testing the organization interactively with real users; revise as needed.

Hierarchies and Taxonomies

Hierarchical organization is a virtual necessity on the web Most sites depend on hierarchies,

moving from the broadest overview of the site (the home page), down through increasingly specific submenus and content pages.

Site Structure The success of the organization

of your web site will be determined largely by how well your site’s information architecture matches your users’ expectations

Site Structure Web sites with too shallow an information

hierarchy depend on massive menu pages that can degenerate into a confusing laundry list of unrelated information. Menu schemes can also be too deep, burying information beneath too many layers of menus. Having to navigate through layers of nested menus before reaching real content is frustrating

Site Structural Themes Web sites are built around basic

structural themes that both form and reinforce a user’s mental model of how you have organized your content.

Site Structural Themes Three essential structures can

be used to build a web site: sequences, hierarchies, and webs.

Sequences The simplest and most familiar

way to organize information is to place it in a sequence. This is the structure of books,

magazines, and all other print matter.

Sequential ordering may be chronological, a logical series of topics progressing from the general to the specific, or alphabetical, as in indexes, encyclopedias, and glossaries.

Sequences

Hierarchies Information hierarchies are the

best way to organize most complex bodies of information. Because web sites are usually organized around a single home page, which then links to subtopic menu pages, hierarchical architectures are particularly suited to web site organization.

Hierarchies

Where to put things, and why

Classical art composition theory: The corners and middle of a plane attract early

attention from viewers. The “rule of thirds” places centers of interest

within a grid that divides both dimensions in thirds.

These compositional rules are purely pictorial, however, and are probably most useful for displays or home pages composed almost entirely of graphics or photography.

Where to put things, and why

Most page composition is dominated by text, Reading habits shape the way we scan

pages. In Western languages we read from top

to bottom, scanning left to right down the page in a “Gutenberg z” pattern.

Where to put things, and why

This preference for attention flow down the page—and a reluctance to reverse the downward scanning—is called “reading gravity” and explains why it is rarely a good idea to place the primary headline anywhere except the top of a page.

Readers who are scanning your work are unlikely to back up the page to “start again.”

Eye Tracking Studies Eye-tracking studies by the Poynter I

nstitute Readers start their scanning with many

fixations in the upper left of the page. Their gaze then follows a Gutenberg z pattern down the page, and only later do typical readers lightly scan the right area of the page

Eye-tracking studies by Jakob Nielsen web pages dominated by text information are scanned in an “F” pattern of intense eye fixations across the top header area, and down the left edge of the text

Eye Tracking Studies

When readers scan web pages they are clearly using a combination of classic Gutenberg z page scanning, combined with what they have learned from the emerging standards and practices of web designers.

Where to put things, and why Users have

developed clear expectations about where common content and interface elements are likely to appear.

Summary Information Architecture gives the

theories and principles to use when designing websites.

Consider your audience when designing the structure for your web site: “Goldilocks problem” is getting the site

structure “just right.” Too shallow a structure forces menus to become too long. Too deep a structure and users get frustrated as they dig down through many layers of menus.

Rest of Today Begin Project 1 – Due at the end

of class on Tuesday September 17, 2013 No extensions