Navigation & Interface Website Designs

Electronic Writing & PublishingDr. Bowie

Type 1: Long list of links• Name

descriptive: site design (especially homepage) is a long list of text links

• Design outdated, but common before 2000

Type 2: Simple rectangle• Rectangular shape,

designed to fit in browser window (no scrolling) with 1-2 graphics and categorical links

• Common today• May be similar to

other types

Type 3: Short L• Similar to short

rectangle in shape, but often larger

• Has clear header bar & left menu bar that are one piece or related

• Common late 1990’s to early 2000’s, being replaced by “Long L” type

Type 4: Long L (or high density)• Has header and

left menu bar of “Short L”

• May have links in header area

• Has high density of images, links, and info

• Common since 1997, but often becomes more dense over time

Type 5: Portal type • Horseshoe or

inverted U style• Has “Long L”

plus a right link menu

• Explosive growth in early 2000’s, becoming more and more popular

Type 6: The Blog• Normally an two or

three column layout with 1-2 narrow columns for navigation and one wider content column

• Includes a larger header region

• Common since the “birth” of blogs for blogs, but more recently is being used for a variety of “non-blog” sites

Other types• Lots of other types

exist, but most sites lean towards these most common types

• Example: http://www.tiffany.com/

Designing your Structure• Make all links obvious• Utilize the “rhetoric of departure” and “rhetoric of arrival”

– rhetoric of departure: let people know where they are going by crafting links with clear destinations

– rhetoric of arrival: let people know where they have arrived with site design

• Compose clear and brief links and menu items • Reveal the site structure with your design (map-like)• Provide “clear, brief, and highly conspicuous orientation

information” on the main page (Farkas & Farkas 350)• Include basic orientation information including links to main

page on all pages• Use a consistent interface design• Make each page clear in the site structure• Organize information by common patterns (alphabetical,

numerical, chronological, see Jeney 44)

Consider Navigation Methods• Website navigation methods: how people

find their way around the site– Landmark: route-based strategy that relies of

geographic features • draws on the use of consistent navigational links, use

of in-text links, use of “breadcrumbs” navigation structure

– Global: mental map-based strategy that includes cardinal directions and distance measures

• includes the use of browser controls like “go” and “history,” use of the search engine on the website, use of a site map, use of browser “find” command, and the use of the URL address bar to type in URLs

Think about what types will work for you!Have Fun

Source for slides 2-5 : Rayn et al. “The Evaluation of US State government homepages..” IJHCS. Also used Farkas & Farkas “Guidelines for Designing Web Navigation” TC and Jeney textbook chapter 3