Web Design and Marketing – Book Reading – Web Style Guide – Chapter 3:Information Architecture

Web Style Guide: Basic Design Principles for Creating Web Sites [WEB STYLE GD 3/E]

The book that we are using for my Web Design and Marketing Class.  Also available for free on line (but a little harder to read) at http://www.webstyleguide.com/wsg3/index.html

 

Information Architecture deals with the overall conceptual models and designs to plan and structure a site.  Like building a house takes many talents, so does building a web site.  If the team is not there, the part that shows to the user will display it. 

Organizing Information

Five basic steps to organize information:

1. Inventory content – what do you have and what do you need
2. Establish a hierarchical outline of content and establish a controlled vocabulary for the site
3. Chunking – divide the content into logical units
4. diagram the site and make outlines of page with navigation links
5. Test your system with real users and revise what is needed to be revised

Content Inventory

Content inventory is a listing of the information that you have or will need to create. Though time consuming it is important so that you know what you have.  In inventorying a site the team needs to be able to see the site in a browser as well as the file structure to make sure they have all the content inventoried.  Best way to inventory site is a spreadsheet with the following columns:

• Unique id number for project purposes
• Page title
• Page template or type
• url
• General type of content
• Person responsible for the content
• Keep/revise/discard decisions
• Create new content?
• Review status

Taxonomies and Controlled Vocabularies

Taxonomy is the science of classification.  In information architecture it is the hierarchical of content using specific specific set of terms to describe them.  A controlled vocabulary is necessary for the organization, user interface and what the user is expecting. 

Five Themes to Organize Information

• Category – similar characteristics or related terms
• Time – sequential order based on timeline, useful in training
• Location – spatial or geographic location, maps, training and repair
• Alphabetic – useful for directories
• Continuum – range measurements like price or score

Brainstorming

It is good when designing or redesigning a site to step back and take a look at how it can be organized, especially the following:

• Identity sites: Dominated by projected identity and marketing
• Navigation sites: Dominated by navigation and links
• Novelty sites: Dominated by news and “what’s new”
• The org chart site: Designed around the organization of the enterprise
• Service sites: Organized around service, content, or products categories
• Flashy sites: Use interaction and visual flash to draw an audience
• Tool-oriented sites: Organized around the latest technology, such as xml, Ajax, or “Web 2.0”

Look at all options and see which ones will work for your users.

Card Sorting and Whiteboard Sessions

Card sorting involves using index cards to put major and secondary content categories on them and then organize them in a way that seems intuitive and logical. Different designs can be worked out and then checked with users to see if they make sense.  for smaller sites, a whiteboard can be used with the cards.  Quick consensus can generally be made on topics and organization.  Make sure that:

• Name the major categories as clearly as possible, without duplications or redundancies in terminology
• Have a complete inventory of all your major categories and subcategories of content
• Prepare thorough instructions for individual card-sorting sessions
• Refrain from prompting or coaching individual participants
• Refrain from discouraging ideas, and allow free brainstorming
• Have plenty of supplies for new categories and improved terminology
• Bring a digital camera to record the proposed organizations and whiteboard layouts

Chunking Information

In general users do not read information on the web like they would with a book, sequentially.  For this reason the information needs to be broken up into chunks or blocks of information, often that will fit on a computer screen.  However, if it is not logical to break up the information leave it in one large piece. 

Site Structure

If your site is structured properly, then the mental models that people make of it will allow them to navigate it easily and find information that they need by extension. 

Browse functionality of your site

Test your site once it is built. You want to balance menus with the content that feels natural to the end user.  If the hierarchy is too shallow it will have large pages and large menus, too massive and the menus become frustrating to use as you have to dig thru them.  Balance this against a web site that continues to grow on a regular basis.

Site search as navigation

As your site becomes larger it will be necessary to have a search option to the content.  This becomes necessary because a lot of the content is only accessible by going down a long set of web pages.  Search is the only real option for a user to find that content quickly.

Site structural themes

There are three basic structural themes for a web site, though they can wind up being a mix of them.

Sequence
Simplest way to organize information is to create a sequence of it.  Good for training and educational sites.  Often these sites will have a small layer of hierarchical pages them that are sequential in nature to explain something in more detail. 

Hierarchies
Hierarchies are the best way to organize large complex bodies of information, especially web sites which suited for this design because of the nature of links. In its simplest form it is a hub and spoke structure (otherwise know as a start structure).  Since these types of sites can form large trees it is important not to lock your user into that branch with no way to get to the rest of the site.  This is done with good site navigation and search boxes.  

Webs
The structure here is really no structure but have a free flow of information.  It exploits the power of linking but can easily cause confusion.  They are best on small sites or on large ones that deal with education or enrichment. 

Summary
As noted earlier, most sites are a mixture of the different types. While they may be hierarchal in nature they can have web like nature underneath as links are made from words to pages that talk about them. Good site navigation helps in these sites.  Even though the user may not look at things in a structure, you have to have one for your site.

Presenting Information Architecture

To site plan as a team, get your site diagram developed and make changes on it as necessary. 

Site Diagrams

Site diagrams can help all stakeholders see how the site is laid out. 

 

Major elements of a mature site diagram include:

• Content structure and organization: major site content divisions and subdivisions
• Logical functional grouping or structural relationships
• The “click depth” of each level of the site: How many clicks are required to reach a given page?
• Page type or template (menu page, internal page, major section entry point, and so on)
• Site directory and file structure
• Dynamic data elements like databases, rss, or applications
• Major navigation terms and controlled vocabularies
• Link relationships, internal and external to the site
• Levels of user access, log-ins required, or other restricted areas

Site File and Directory Structure

As you move from pre-design to actual production, the diagram helps with the overall layout of how the files should organized as well as named.  As these are created, make notes on the diagram of what they are. 

Wireframes

Wireframes are layouts as to where your navigation and content are going to be located.  Using them will let you help focus on content while the design can be tweaked later.  Things that should be on it include but are not limited to:

• Organizational logo
• Site identity or titles
• Page title headlines
• Breadcrumb trail navigation
• Search form
• Links to a larger organization of which you are a part
• Global navigation links for the site
• Local content navigation
• Primary page content
• Mailing address and email information
• Copyright statements
• Contact information

Avoid being specific in color or pictures, the purpose here is to get the content going.  It can get more complex as you understand the full nature of the site.

Canonical Form in Web Pages: Where to put things and why?

Readers tend to scan things on a page in a Z pattern as well as a reading gravity (important at the top).  For these reasons, headlines should always be at the top.  Studies have shown that people will Z scan the left side of a page before they do the right.   Since the web is an emerging technology, placement design will still have to be studied, for best practices, at least till we can get a style guide everyone can agree on to be published.

Information Architecture for the World Wide Web: Designing Large-Scale Web Sites