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

Objectives The Student will: learn theories and techniques for effectively organizing content on a website. learn theories and techniques for effectively organizing content on a website.

Information Architecture Design informs even the simplest structure, whether of brick and steel or prose. —E. B. White E. B. WhiteE. B. White

Information Architecture Information architecture describes the overall conceptual models and general designs used to plan, structure, and assemble a site. 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 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; Organize the site content into taxonomies and hierarchies of information; Communicate conceptual overviews and the overall site organization; Communicate conceptual overviews and the overall site organization; Design the core site navigation concepts; Design the core site navigation concepts; Set standards and specifications for the format and handling of text content; Set standards and specifications for the format and handling of text content; Design and implement search optimization standards and strategies. Design and implement search optimization standards and strategies.

Definitions Taxonomy: The science of classification; laws and principles covering the classifying of objects. 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. 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; Organize the site content into taxonomies and hierarchies of information; Communicate conceptual overviews and the overall site organization; Communicate conceptual overviews and the overall site organization; Design the core site navigation concepts; Design the core site navigation concepts; Set standards and specifications for the format and handling of text content; Set standards and specifications for the format and handling of text content; Design and implement search optimization standards and strategies. 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? 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; 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; 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 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. 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 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. 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 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 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. 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. 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. 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. 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. 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. 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: Classical art composition theory: The corners and middle of a plane attract early attention from viewers. 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. 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. 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, Most page composition is dominated by text, Reading habits shape the way we scan pages. 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. 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. 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.” 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 Institute Eye-tracking studies by the Poynter Institute Eye-tracking studies by the Poynter Institute Eye-tracking studies by the Poynter Institute 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 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 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 by Jakob Nielsen Eye-tracking studies by Jakob Nielsen

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. 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. 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. Information Architecture gives the theories and principles to use when designing websites. Consider your audience when designing the structure for your web site: 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. “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 Begin Project 1 – Due at the end of class on Tuesday September 17, 2013 No extensions No extensions