PRINCIPLES OF WEB PAGE APPLICATION DESIGN

RICHARD MASON'S MIS 6386

OBJECTIVE

A web page application should be:

EFFECTIVE -- because its content is sound and satisfies viewers' wants and needs;

AFFECTIVE -- because appears to a viewer's emotional state, is attention getting, stimulating and interesting; and

EFFICIENT -- because viewers can navigate the assemblage of pages with a minimal amount of time and effort to get the information they want.

• I PREPARATION
  
  
• II DESIGN
  
  
• III IMPLEMENTATION
  
  
• IV MAINTENCE and CONTINUAL IMPROVEMENT
  
  

A. Key Parties

1. Designer
   
   
2. Presenters
   
   
3. Information Stewards
   
   
4. Viewers
   
   

a. Browsers

b. Users

---

NORMAN'S MODEL

---

• Presenters have intentions and a model of the world in their heads.
  
  
• Viewers have intentions and a model of the world in their heads.
  
  
• Viewers' ATTENTION is their most important asset.
  
  
  
• Viewers require both accomodation and assimilation information.
  
  
  • ACCOMODATION information causes a viewer's model of the world (cognitive schema) to adapt, adjust and change; ASSIMILATION information is taken as is an absorbed into a viewer's existing model of the world.
    
    
• A viewer's model of the world guides the way he or she response to information and its presentation, how the information is interpreted, and what actions seem intuitive, natural and easy to take.
  
  
• Viewers see the application's IMAGE, not the system itself.
  
  
• Viewers operate in a context:
  
  
  • Technological
    
  • Psychological
    
  • Sociologicial
    
  • Economic
    
    
    
• Viewers have cognitative limits (Magical 7 +/- 2)
  
  

  CHUNKING!!

  
  
  
• Viewers have various kinds of information needs:
  
  
  • Internal or Problem Specific
  • Conversational
  • Reference
  • News
  • Cultural
    
    
• Viewers come to a page with different predispositions:
  
  
  • Questions to be answered
  • Requests for information
  • Desire to do something
  • Desire to be entertained
  • Assumptions to be tested
  • General feelings of wants or needs
  • Vague ideas
    
    
• The information and links on web pages can be organized in at least 5 different ways:
  
  
  • Category
  • Time
  • Location
  • Alphabet or by sequence
  • Continunm or by a measure
    
    
    
• Viewers should be able to:
  
  
  • Know where they are in the system of pages at all times
  • Understand the information function or purpose of each page
  • Know what actions they can take on each page
  • Know what actions they can not or should not take on each page
  • Know what will happen if they take a given action -- mapping
  • Take any action naturally and easily
  • Navigate pages gracefully to find the page they want
    
    
    
• Designers design web page applications so that presenters and viewers can communicate and reach mutual understanding with each other -- their intentions and their mental models begin to coalesce.
  
  

1. Ideation Phase
   
   
   • Determine presenter's intent and model
     
     
   • Determine viewers' intent and model
     
     
   • Collect the entire "Information Domain" from available sources:
     
     
     Ideas
     Facts
     Text
     Tables
     Images, Photos, Graphs, Drawings
     Sounds
     Video
     Prices
     Points of Persuasion or Argument
     Scrips, Applets or Common Gateway Interfaces (CGI)
     
     
     
2. Indentification Phase
   
   
   1. Decide what information is to be included and what is excluded
      
      
   2. Create an exhaustive list of all information objects in the domain
      
      
   3. Identify the information STEWARDS of each object
      
      
   4. Secure stewards' approval as to information
      
      
      
      Type Wording
      Accuracy
      Clarity
      Completeness, Breath and Depth
      Timeliness and Changability
      Proprietariness and Confidentiality
      Considerations of organizational prestige, image or presence
      
      
      
3. Decomposition and Organization Phase
   
   
   • Reduce to all vague information in the domain to a set of atomic elements -- "Chunking" into a set of collectively exhaustive, mutually exclusive (except for links to external sources) items.
     
     
   • Turn each piece of amorphous information on the list into clear information objects.
     
     
     • An INFORMATION OBJECT is any fully specified unit of information. that carries a complete thought.
       
       
     • Each information object will eventually become an element on a web page.
       
       
     • This also requires good writing skills.
       
       
   • Create an Information Relationship Diagram
     
     
     • "Home" is the first page, the entry level and the highest level in the hierarchy.
       
       
     • The hierarchy normally proceeds from general to specific.
       
       
     • Each object can have one or more relationships.
       
       
     • Some objects may not be hierarchical.
       
       
       
     
     
   • Create a From/To Matrix
     
     
     • Use matrix to check hierarchy, linkages and navigation paths.
       
       
       

D. Design Stage -- Incorporating Aesthetics with Informational Considerations

Iterate between analysis and composition in sequence:

Text Only --->Text and Images ---> Linkages ---> Multimedia

1. Analysis Phase -- Consider each information object.
   
   

• What is the key idea?
  
  
• Is it expressed well? With the appropriate media?
  
  
• If all of the information a viewer needs is not contained in this object is it possible to link to a source that contains it?
  
  
• How does the viewer experience the information element?
  
  
• What does the presenter really want the viewer to know or feel after being exposed to this element?
  
  
• Does it satisfy viewers' wants and needs?
  
  
• Does it facilitate information accomodation or assimilation or both for viewers?
  
  
• The analysis phase yields an agenda consisting of the medium and design of the individual information objects that are to be conveyed to viewers.
  
  

1. Composition Phase
   
   

• Composition is the process of translating objects into groups of text and graphical symbols for presentation, collecting objects onto pages, determining the actions and functions that required by viewers to access the information they want, and establishing the overall "look and feel" of the assemblage of pages.
  
  
• Actions and functions include arranging and ordering the symbols to manage dependencies among the pages, ensuring consistency in content and presentation, defining navigation paths, developing the controls necessary to facilitate interaction and navigation.
  
  
• Prepare a STORY BOARD.
  
  

A STORY BOARD is a series of pictures and words that depicts what viewers will see and what they can do on every page. It is generally based on one or more scenarios describing how a viewer enters the home page , traverses the assemblage of pages, and what happens until the viewer exits the site.

E. Implementation Stage

1. Prepair images as gif's or jpeg's and place in a directory.
   
2. Code HTML documents.
   
3. Test and refine documents.
   
4. Review with presenters and stewards.
   
5. Secure approval to implement.
   
6. File Transfer Protocal (FTP) to the server.
   
   
   

F. Maintence and Continual Improvement Stage

NO WEB APPLICATION IS FINISHED FOREVER!

• Provide methods and procedures for keeping information and pages current.
  
  
• Make the updating of information easy.
  
  
• Be prepared to accomodate new aesthetics, ideas and approaches as they appear.
  
  
• Be prepared to accomodate to new technological platforms as they become available.
  
  
  

---

---

SOME UNIVERSITY PAGES TO CONSIDER

• Tulane
  
  
• UNC Home
  
  
• UNC --Students
  
  
• IUP
  
  
• UCF
  
  
• LSU
  
  
• TTU
  
  
• Williams
  
  
• Westmont
  
  
• GMU
  
  
• Auburn
  
  
• Yale
  
  
• Berkeley
  
  
• Duke
  
  
• Vanderbilt
  
  
• SMU
  
  
  
  
• OPEN MARKET, INC. -- for use with case
  
  
  

• Worst Home Page
  
  
• A bad page.
  
  
• Scott's Bad pages
  
  
• a useful page?