Edgar Web Design Guide
         
Home
Promoting Good Design
Accessible Design
Emotional Design
Intranet Management
Site Structure
Introduction
Developing an information hierarchy
Establishing a controlled vocabulary
Testing the hierarchy and labels
Designing transactional flows
Flow charting tools and methods
References
 

Introduction

A site's structure defines how users find content and functions. The examples below show some site structures in action:

  • Amy needs to transfer funds from her savings account to her checking account. She goes to the Seattle Savings home page, where she logs into her on-line banking account. She clicks on the Transfer funds option, selects her savings account as the From account and her checking account as the To account. She enters the amount she wants to transfer and clicks the Next button. The system displays a verification page, which shows the amount of the transfer and the new balance for both accounts. The information is correct so Amy clicks the Finish transfer button. The system confirms the transfer was successful and provides links to other on-line banking menu options.

  • Drake is looking for background information for an upcoming Seattle Symphony concert, including information about the featured soloist. He goes to the Seattle Symphony home page and clicks on The Orchestra/The Music. The system displays a biography of the music director. It's clear from looking at this page and its links that he has chosen the wrong main menu item. He clicks on another main menu option, Season Schedule & Tickets. Here he finds a chronological listing of concerts, along with program notes that contain the information he is looking for.

In this section of the Edgar Web Design Guide, we examine how to design a site's structure, including developing an information hierarchy and designing transactional flows.

< Previous | Next >