Information Architecture

Web Conventions

Logo

· Expected to be found in the top left-hand corner

· Expected on every page

· Expected to link to the homepage

Navigation

· Expected left-hand rail or directly below header

· Expected to “appear” like navigation and not content

· Expected to give “feedback”

Adding Emphasis with Visual Hierarchy

Location

The upper content area, below the header is a high priority area.

Contrast

Bigger and bolder type, underlining or colored type, communicate importance. But there is a balance to be struck, if type is over designed, it can communicate it’s a promotional advertisement and to be ignored.

Negative Space

Even an understated area can look like a high-priority spot if the area around it is clear of clutter.

Thinking Usability

Trunk Test

1) Where are you?

What site are you at?

Graphics

Good: www.lacitycollege.edu

Bad: www.canyons.edu

Logo

Text

Where are you within the site?

Page Titles

Okay: www.lacma.org (Consistent but in bad location)

Okay: www.getty.edu (Inconsistent)

Good: www.nortonsimon.org (Consistent)

Bread Crumbs

Okay: www.amazon.com (Not consistent)

Good: www.bhphotovideo.com

2) What can you do?

3) How can you get there?

Navigation

Rollovers

Good & Bad: www.cnn.com (Well designed in some areas but not in others)

Tolerable: www.annenbergspaceforphotography.org (Efficient but requires interactivity)

Unacceptable: www.cbs.com (Very large rollover, very confusing, inconsistent)

Consistent Navigation

Good: calarts.edu (Consistent throughout)

Unacceptable: www.risd.edu (Inconsistent throughout)

Persistent Navigation

Okay: www.otis.edu (Many links accessible from every page but requires interactivity)

Unacceptable: www.schoolofvisualarts.edu (Not enough global links)

Good: www.art.ucr.edu (Lots of links accessible on almost every page)

Hub and Spoke Navigation

Unacceptable: www.lumiere-editions.com

Ease of Use/Efficiency

Home page designed for site’s main purpose

Good: www.hertz.com

Bad: www.blockbuster.com

“All in one” Design

Good: Ihotelier online reservations system - The Broadmoor

Portal

Questionable: www.ups.com

Good: www.webex.com

Splash Page

Unacceptable: www.prunerestaurant.com

Resolution

Scrolling Issues

Unacceptable: www.planetquake.com (Way too large of a homepage)

Unacceptable: www.thehorizontalway.com (Horizontal scrolling)

Liquid

Questionable: Ihotelier online reservations system - The Broadmoor (Adjusts to various screen resolutions but with no limits)

Good: www.amazon.com (Adjusts to various screen resolutions)

Good: www.nitrogroup.com (Adjusts to various screen resolutions)

Fixed

Good: www.rampcreative.com (Still looks acceptable at various screen resolutions)

Acceptable: www.nytimes.com (Lots of content warrants some vertical scrolling)

Other Tips

Speed: Homepage should be fast loading

Global Links: Should always include a “home” link

Resources