N341  Homework 2
Analysis, Prototyping and Testing

 Modified: 

Table
of
Contents

 

Overview

Project Description

Our class is creating a stock trading Web-site that will undercut the brick-and-mortar stock brokers by allowing traders to perform all trading functions online without a broker: from registration, stock analysis, to buying and selling stocks. For our services, each stock trade will incur a small fee.

The site must be easy to use but traders need to feel that our Web-site and their money is secure. Security will be enforced by requiring traders to first register to create a unique trader identification and password that controls access to their account; to access an account, the trader must first provide their chosen identification and password. Further security is enforced by limiting account access to a single trader account at a time.

Stocks are traded in a usual way. In order to buy stocks, traders must transfer funds from a valid credit card to their account;  sufficient funds must be in the account to cover the cost of the stock and trading fees before a stock can be purchased. Stocks held in the trader's portfolio can be sold and the funds added to their account, minus the trading fee of course. Account funds are withdrawn by transference to a credit card account.

Web
Development
Process
Model
 Assignment

The purpose of the assignment gain a deeper understanding of the main elements of user interface design and programming methods through practice.

The assignment is to complete steps 2 and 3 of the model discussed in class. Step 1, defining the Web site goals and audience, has been completed. Steps 2, performing a site analysis, and 3, prototyping and testing the user interface to the site comprise the assignment.

  • Hand drawn charts and paper models are appropriate.
  • Be detailed enough that classmates can understand.
  • Based on a paper analysis, implement a paper prototype. 
  • Provide enough content on the prototype that classmates can understand the purpose of each page.

 

Analyze
  1. Site problem definition. Concept exploration.
    1. Site goals - Sell stocks to individual investors.
    2. Site audience - Anyone with a credit card.

     

  2. Site plan requirements analysis. Specification.
    1. þ Site purpose and success measures  
       
    2. þ Detailed measurable site goals  
       
    3. þ User profile of site visitors
      • List of common characteristics.
         
      • What do they want to accomplish?
         
    4. þ User task scenarios
      • how will user arrive at site
      • follow a visit to conclusion
      • measures of task completion

       

    5. x Site content list in form of matrix
      Content
      Name      		 Description
      		 Content
      Type      		 Content
      Format      		 Exists
               
               
      • text
      • graphics
      • etc.
         
    6. x Technical requirements
      • client side HTML, JavaScript, ...
      • server side CGI, ASP, ...

    7. x Visual requirements
      • relation of site visuals to site goals
      • constraints on color, bandwidth, screen size, etc.

    8. x Delivery requirements
      • hosting considerations
      • number of users
      • pages visited per visit
       
    9. þ Determine 5-6 objects and 5-6 actions used on a stock trading site.

      Perform card sorting analysis with three different people.

      Compute the similarity rating of their responses for only several of the card pairings (similar to example in Card Sorting).

      One method for determining user interface elements is to write a description of the project then label objects (nouns) and actions (verbs); eliminate redundancies (e.g. site and Web-site).

      1. Objects - Form the site content. List the key objects (nouns) of the analysis description.
         
      2. Actions - Tasks the user performs. List the key actions (verbs) of the analysis description.
         
      3. Card sorting -  Using the card sorting method, write each object and action onto a card with a unique number on back. Scatter the cards number-side down and sort into piles of related items; name each pile. Have three different people perform card sorting.
         
      4. Similarity rating - (see Card Sorting).
      • Each time two cards are in the same pile assign 1 point.
      • Add up all the times two cards are in a pile together and divide by the number of users. If all users place cards 3 and 4 in a pile, the similarity rating is 1, if no one did, the rating is 0.
      • Determine similarity rating only for card 1 with the other cards; because there are 10-12 cards, this can be time-consuming when done by hand. For 10 cards total, you should have ratings for cards 1 with 2, 1 with 3, ..., 1 with 10.
       
    10. þ Site structure diagram

      Use card sorting results as a guide to develop an initial site organization, the following is an example of a site structure diagram:

      • diagram of site sections,
      • labeling of each section,
      • indicate navigation linkage between pages.
         
    11. x Staffing
      • human resources required to implement site
        • content
        • technology
        • visual design
        • management
           
    12. x Time line
      • milestone dates
        • prototyping
        • implementation and unit testing
        • integration and system testing
        • release, operation and maintenance
           
    13. x Budget (give % allocated for each)
      • staff
      • site hosting
      • marketing

Assignment 1 - Collect all item answers into a single Word document.

  1. Each þ item above in Site plan requirements analysis.
     
  2. For Item I:
    1. List of the objects and actions along with number assignment.
    2. Similarity rating matrix of sorting results.
       
  3. For Item J:
    1. Give a one-page hand drawn diagram illustrating site organization and navigation linkage between pages.
    2. Scan or photo the diagram. A scanner is in CV-112 computer lab, a video camera is in LF-105.

Design
  1. Mockup/Prototyping pages and site
    1. þ Paper Prototype

      A task analysis and card sorting were performed in Assignment 1.

      Using the analysis, card sorting and diagram of the stock trading site produce paper prototype following the site structure.

      The prototype should have enough pages (a minimum of 4) and enough fidelity that a user can test the prototype to complete the single task of buying a stock from arrival at the site to leaving. Use the printed chapter handouts and video as guides for developing and testing the prototype.

    2. þ Template page 
      • block page composition showing common layout of pages on site
      • show each type of template page used on site
         
    3. þ Site, enough pages (a minimum of 4) to complete one task
      • storyboard
        • contains all task pages
        • number page sequence for each task

 

Assignment 2 - create video recording of hand-drawn prototype test.

Each þ item above in Mockup/Prototyping pages and site.

  1. Paper prototype labeled with page names and linkages to other pages as illustrated on the site structure chart.

    Structure Chart


     

    Welcome page with links to pages
     

    Welcome

    Register

    Login

    Logout

    The prototype should have enough pages (a minimum of 4) and enough fidelity that a user can test the prototype to complete the single task of buying a stock from arrival at the site to leaving.
     

  2. Test your paper prototype with another student as the user. Follow the paper prototyping example given in the demo video and, see Chapter 8 and printed handout for discussion of testing a paper prototype.

See instructions for recording the test at IUS.

   

Turn In

 Word document containing:
  1. Cover Page - Your name, date, and Homework 2.
     
  2. Assignment 1
    1. Answers for each þ Item for Assignment 1. Please label with the Item. Item 2J, Site Structure Diagram, can be hand drawn and scanned.
       
  3. Assignment 2
    1. A short written analysis of prototype test on separate page to the Word document. Label as Assignment 2. Include a description of improvements for future versions of the prototype.
       
    2. A link to the prototype test video. Verify that the video link actually works.

OnCourse Drop Box

  • Copy the Word document to your CSCI N341 OnCourse Drop Box using the Display Name of HW2.