USER ORIENTED WEBSITE INTERFACE Website Layout & Mental Maps YOU ARE HERE!

WEBSITE IA & USABILITY: LAYOUT & MENTAL MAPS

Don't be creative in your layout - be original in your content! Simple, conventional and consistent website layout increase usability. Original and worthy content increase usefulness.

THE MENTAL MAP FACTOR

"Consistency and predictability are essential attributes of any well-designed information system" (Web Style Guide, 2nd edition).

The number of active Internet users increase month by month. US logged nearly 1.1 million more users in December 2003 (Nielsen-Netratings). When surfing across the Web, people start to form a mental map. When users arrive at your website they bring with them a mental map of how they expect the site to be designed. The more your website design corresponds to their mental map, the easier they would navigate, and more cozy they would feel.

Your website information architecture must conform to the mental models of your target audience to become successful. Familiar website formatting and navigation schemes ensures that users will learn and remember the layout of your site easier.

"Making it easier on the customer increases customer loyalty" (IBM). The same method is utilized by IBM for years, and explained in details in their User Interface Architecture - principles and guidelines for a user-centered design of their network-based products.

COZY WEBSITE LAYOUT

The most common web page layout has four blocks, or sets of columns and rows: a top block row - the header, a left hand block column that goes down the page - usually navigation, a center block column - usually where the content goes, and a bottom block row - usually the footer. On some websites,there is also a right block that often includes features, ads, blurbs, etc. Users are comfortable and familiar with this web design layout, which commonly includes:

THE HEADER / MASTHEAD / TOP AREA OF THE SCREEN

The first group of elements on the web page is the header, commonly containing:

• company logo - on every web page, linked back to the homepage
• banner image
• primary/global navigation bar:
  • displaying the information structure - high-level content categories
  • on every web page
  • starting with a link to Home and often finishing with a link to Contact
  • usually below logo / banner or in the Body on the far left of the page - optional
• global utility bar (search, site map, etc.) - optional.

THE BODY / CENTRAL AREA OF THE SCREEN

The body comprises all web page components besides the header and footer, typically comprising:

• breadcrumb bar - on all web pages except the home page
• actual web page content in the middle, with optional contextual navigation (links within the text)
• secondary/local navigation:
  • displaying navigational links within a category
  • typically leading to pages on the same level
  • often containing utility pages, site map, etc.
  • typically in the left area of the screen;
• important features, typically on the right, often in highlight boxes.

Note that the most common layout is a three-column layout, similar to newspapers, or two-column layout. In both cases navigational link bar is typically on the left.

THE FOOTER / BOTTOM AREA OF THE SCREEN

Every page should have a footer. The footer contains global navigation as hypertext, copyright, terms of use, privacy information, etc.

A consistent design and layout should be used for each page on your website to avoid confusing users: the same general colour scheme, header and footer in the same location, logo, navigation menu, etc. Utilizing other website design conventions, and especially navigation conventions could enhance your website usability further.

User Oriented Design & Ethical Website Marketing Strategies by Distinctia, 2006