N341 - Chapter 7 Site Structure and Prototyping

Overview 

Prototyping is one method for constructing and testing a design before incurring the high cost of programming. Paper prototyped Web sites (as presented in the demo video) can be user tested with no programming and can reveal design flaws early, before a large investment in programming.

The class project will serve as an example for developing a site structure (how pages are connected) and prototyping pages.

Project Site Structure

• Site structure defines how pages are connected, in practice the relationship of one page to another would be determined by an analysis method such as card sorting. The diagram at right reflects a partial site structure of the project stock trading site.

• Each page is uniquely named with directed arrows indicating page linkage. For example, the bi-directional arrow between the Welcome, Register, Login and Logout pages indicate that each page contains links to the others, including itself, allowing the user to move from any of these pages to the others; these pages are linked to form site navigation.
   
• The site structure reflects a decision that most pages have a common site navigation consisting of Welcome, Register, Login and Logout pages. In theory, the site structure should include all page links; in practice, redundant links included on many or all pages would not be displayed but simply noted in commentary as redundant elements can be included automatically by the server when the page is generated.

Prototyping

• Prototyping allows an interface to be tested by users before committing the significant time and effort required to implement a real interface.  Sufficient pages must be prototyped for a user to experience the interface by moving from one page to another in accomplishing some predefined task. Pages must be linked; a breadth or single level usually prototypes navigation while depth linkage generally prototypes accomplishing some task such as buying a ticket.
   
• Each darkened page of the site diagram above will be prototyped to allow testing of site navigation, registration, login and logout.
   
• Fidelity - Prototyping is low-fidelity but requires sufficient page fidelity for the user to accomplish the specified task. Low-fidelity often means hand-drawn prototypes.
   
• Affordance - A prototype requires an affordance or some means of completing the task. For example, given the task of reaching the Login page from the Welcome page, the user would require an interface on the Welcome page that links to the Login page.
   
• Usability - There are two measures: preference and performance.
  • Preference is one's opinion; do you prefer one page version over another due to color, etc.
  • Performance is observable and quantifiable; measuring the times a user correctly completes a task.
     

1.	2.
3.	4.

Account access - Traders must have access to their account before they can perform trading.

Register - Four pieces of information must be obtained from the trader before they can perform trading:

1. Credit card number.
    
2. Amount of money to transfer from the credit card into the trading account.
    
3. Trader account identification (user name)
    
4. Account password
   

Login - Two pieces of information must be obtained from the trader before they can be allowed to access their account:

1. Trader account identification (user name)
    
2. Account password