N341  Chapter 1 Notes Web Design

 Modified: 

Table
of
Contents

 

Overview

 The Nutshell

The focus of the course is client-side programming for the Web. A major portion of the client issues have to do with the user interface design which includes Web site organization, page layout, user interaction, and seemingly minor details such as font size.

There are several approaches. Our approach is to develop and follow a methodology that, while it may not guarantee a great user interface, will increase the likelihood that the interface accomplishes our intended goals.

User-Centered Design Methodology

  1. User centric. Involves users in goal of creating a user interface by:
    1. observation of work habits
    2. including on design team
    3. testing design
  2. Interdisciplinary. Draws on art, psychology, computing, etc.
  3. Interactive. Involves repetitive:
    1. analysis
    2. design user interface
    3. prototype design
    4. evaluate design
    5. implement design

 

 

Program
Development Cycle

 Weeks of work can save hours of design.

In the year that the Brooklyn Bridge was completed, one in four bridges completed that year collapsed. Since then civil engineers have developed bridge analysis, design, and construction techniques that greatly reduce the likelihood of a collapse.

Software must also be analyzed, designed, and constructed like a building or a bridge. Just as blueprints are used by architects for design, methods are used by software developers to aid in building software. The C201 text outlines six steps that are part of all but the smallest program development. Just as bridge blueprints follow a formal notation, scaling, etc., software development methods have also been formalized.

The steps and methods are designed to help in problem solving using the computer. For small problems as that those in a class, these methods appear to be overkill, much like preparing blueprints for a yard swing. For larger programs these methods are essential.

There are six main steps to the Program Development Cycle:

  1. Analyze : Define the problem.
  2. Design: Plan the solution to the problem.
  3. Choose the interface: Determine how the program user will provide input and receive output.
  4. Code: Translate the algorithm into a programming language.
  5. Test and Debug: Locate and correct any errors.
  6. Complete the documentation: Organize all the material that describes the program.

 

Example

Program
Development
Cycle
  1. Analyze (define the problem) - How fast is a car traveling if it goes 50 miles in two hours:
    • input - miles, time
    • output - mph.
    • computation - mph =  miles/time
  2. Design (plan the solution to the problem)
    • Decompose problem - The problem can be divided into four smaller problems of inputting miles, inputting time, computing mph and outputting mph. The module chart graphically illustrates that to solve the mph of car problem we need to solve input miles, input time, compute mph and output mph problems.

    • Define pseudocode algorithm (steps leading to solution)
      • Input miles - read miles
      • Input time - read time
      • Compute MPH - mph = miles / time
      • Output MPH  - print mph
  3. Interface (determine how input is to be entered and output displayed) - The interface analysis and design for this problem has been ignored in favor of direct implementation at right. How would you rate the intuitiveness of this interface of a scale of 1-10.
  4. Code (translate the pseudocode to a computer language) - Using Visual Basic but another computer languages could be used. Each of the pseudocode solutions would now be translated into Visual Basic.
        5. Private Sub Command1_Click( )
           miles = Text2.Text
           time = Text3.Text
           mph = miles / time
           Text1.Text = mph
        End Sub
  5. Test and debug  - Verify that the program works correctly using valid (and invalid if possible) input. Entering miles of 50 and time of 2 should produce 24 mph. The difficulty is to determine an exhaustive set of test inputs, usually it is impractical or impossible to test all possible inputs. Typically boundary conditions should be tested, those inputs at the extreme, such as big and small numbers. What would be the result with miles of 50 and time of -2? Would we be traveling back in time?

Exercise 1

 

Analysis

Design

Interface


Take a few minutes to do the first few steps listed below of the program development to create a light system for a room with two entrances.
  • Analyze (define the problem) - Create a light system that has two controls of one light that is either is ON or OFF.
    • input -
    • output -
    • computation -
  • Design (plan the solution to the problem)
    • Decompose problem - Break the full problem down into smaller, more manageable pieces. Give the hierarchy or module chart to illustrate dividing the problem. Stop when the problem pieces are understandable.
  • Interface - Draw by hand a design of a user interface for the light system. The user interface consists of all input and output. Use buttons, levers, wheels, slots, baskets, etc. as you choose.

Exercise 2

Analysis

Design 

Interface

Take a few minutes to do the first few steps listed below of the program development for implementing an airline ticket machine.
  • Analyze (define the problem) - Create a airplane ticket machine that takes a credit card,  accepts a selected destination and returns a ticket.
    • input -
    • output -
    • computation -
  • Design (plan the solution to the problem)
    • Decompose problem - Break the full problem down into smaller, more manageable pieces. Give the hierarchy or module chart to illustrate dividing the problem. Stop when the problem pieces are understandable.
  • Interface - Draw by hand a design of a user interface for the ticket machine. The user interface consists of all input and output. Use buttons, levers, wheels, slots, baskets, etc. as you choose.

Web
Development
Process
Model

User interfaces must also be analyzed, designed, and constructed. Just as software development methods have been developed and formalized so have user interface methods.

The steps and methods are designed to help in user interface development, particularly for Web systems. 

There are six main steps of the Waterfall Model. Examples are underlined, the specific example is the Website for this class.

Analyze
  1. Site problem definition. Concept exploration.
    1. Site goals
      • Provide a resource on user interface design and programming.
    2. Site audience - What important characteristic is shared by a majority.
      • Students in the N341 course and prospective students.
  2. Site plan requirements analysis. Specification.
    1. Site purpose and success measures
      • Provide detailed information about the N341 course.
      • Students get most questions answered by consulting the site.
      • Students have access to course material off campus.
      • Notes for class discussion.
    2. Detailed measurable site goals
      • Students can answer 90% of questions in class.
      • Course assignments are accurately completed by 75% of class.
      • Instructor and students know exactly what is expected for each class.
      • Instructor and students are prepared 80% of time.
    3. User profile of site visitors
      • characteristics
        • Interest in user interface design and programming.
        • Some programming background.
        • Very intelligent, able to read and write at post-secondary level.
      • what do they want to accomplish
        • Find information on:
          • Class schedule, assignments, and course notes.
          • Resources on user interface design.
          • How to contact instructor.
    4. User task scenarios
      • how will user arrive at site
        • Initially some arrive through the campus website but eventually most remember the URL for the class syllabus (site map navigation).
      • follow visit to conclusion
        • Arrive at syllabus and any or all of the following:
          • Find important class date and any or all of the following.
            • Select class notes.
            • Select assignment.
            • Print a copy of notes for adding handwritten notes.
          • Search the N341 information.
          • Print a copy for making handwritten notes.
      • measures of task completion
        • Assignments correctly completed 75% of the time.
        • 50% of students bring correct notes to class.
        • downloads
        • accesses per visit
        • sale
        • etc.
    5. Site content list in form of matrix. A list of all files for site.
      Content
      Name      		 Description
      		 Content
      Type      		 Content
      Format      		 Exists
      WD.jpg Chart Image JPG Y
      HW1.htm Assignment Text HTML N
      • text
        • Homework 1.
        • HTML guide.
      • graphics
        • Structure chart.
      • etc.
    6. Technical requirements
      • client side HTML, JavaScript, ...
        • HTML
        • Javascript
        • Cascading Style Sheets
        • XML and XSL
      • server side CGI, ASP, ...
        • Server Side Includes
    7. Visual requirements
      • relation of site visuals to site goals
        • Visuals are used only when required, not gratuitously.
      • constraints on color, bandwidth, screen size, etc.
        • Colors should be high contrast for classroom projection.
        • Bandwidth should allow page downloads in under 60 seconds over a 56K modem.
        • Screen size is 1024x768 for classroom projection.
    8. Delivery requirements
      • hosting considerations
        • Hosted at www.ius.edu
      • number of users
        • Generally limited to class.
      • pages visited per visit
        • On average 3, syllabus.htm, notes for the class date, and homework.
      • average page size
        • 30KB
      • bandwidth estimate

    9. Site structure diagram
      • diagram of site sections based on user task scenarios
      • labeling of each section
    10. Staffing
      • human resources in man-hours required to implement site
        • content
          • 500 hours
        • technology
          • 50 hours
        • visual design
          • 100 hours
        • management
          • 40 hours
    11. Time line
      • milestone dates
        • prototyping
          • June 18
        • implementation and unit testing
          • June 19
        • integration and system testing
          • June 20
        • release, operation and maintenance
          • June 29
    12. Budget
      • staff
        • $7,000
      • site hosting
        • No charge
      • marketing
        • $150

Exercise 3

Analysis

Complete the following Web Development Process Model for the Analysis steps by reverse engineering the orbitz.com website.

Find a flight from Louisville, KY to Madrid, Spain on June 12, 2008 returning July 3, 2008.

  1. Site problem definition. Concept exploration.
    1. Site goals                                           
    2. Site audience                                      
  2. Site plan requirements analysis. Specification.
    1. Site purpose and success measures
                                    
    2. Detailed measurable site goals
                                    
    3. User profile of site visitors
      • characteristics                              
      • what do they want to accomplish                                           
    4. User task scenarios
      • how will user arrive at site                                       
      • follow visit to conclusion                              
        • Stop before submitting credit card information. 
        • Print each page.
      • draw a flowchart of the path ________
      • measures of task completion                              
    5. Skip for now
    6. Skip for now
    7. Skip for now
    8. Delivery requirements
      • hosting considerations
        • Hosted at http://         
      • number of users          
      • pages visited per visit          
    9. Site structure diagram
      • diagram site sections           
      • label each section          
    10. Staffing
      • human resources in man-hours required to implement site
        • content          
        • technology          
        • visual design          
        • management          
    11. Time line
      • milestone dates
        • prototyping          
        • implementation and unit testing          
        • integration and system testing          
        • release, operation and maintenance          
    12. Budget
      • staff          
      • site hosting          
      • marketing          

 

Design
  1. Mockup/Prototyping pages and site
    1. Page 
      • block page composition of task
      • page details of task
      • test with users performing a possible task
    2. Site
      • storyboard
        • contains task pages
        • number page sequence for each task
      • user navigation test 
      • verify user feedback

Exercise 4

Design

Use the Web Development Process Model for the Design steps. 

  1. Mockup/Prototyping pages and site
    1. Page - Sketch by hand the opening page on orbitz.com 
      • block page composition of task          
      • page details of task          
      • test with users performing a possible task         
    2. Site - Tape printed web pages on whiteboard
      • storyboard
        • contains task sequence pages          
        • number page sequence for each task          
      • user navigation test          
      • verify user feedback          

 

Implement
  1. Implementation and Unit Testing
    1. Implementation
      • client navigation, text, graphics, programming
      • server programming CGI, ASP, etc.
    2. Unit test
      • visually consistent using different browsers, fits on screen
      • function test
        • links
        • interactive elements - email, shopping carts or submission forms
      • content
        • spelling
        • consistent word usage
        • accuracy
  2. Integration and System Testing.
    1. System and browser compatibility
    2. User tasks can be completed
    3. Delivery
      • time task completion at different bandwidths
      • simulate user loads
    4. User acceptance
      • last opportunity before site goes is delivered

Production
  1. Release, Operation, and Maintenance
    1. Monitor operation
    2. Gather user feedback on performance, feature improvements
    3. Correct problems and make improvements