SDSU CS 596: Client Server Programming
User Interface Design

[To Lecture Notes Index]
San Diego State University -- This page last updated April 25, 1995
----------

Contents of User Interface Lecture

  1. References
  2. Interface Design When You Don't Know How
  3. Prototyping
    1. Problems with Software Prototypes
    2. Lo-fi or Paper Prototypes
      1. The Kit
      2. Build A Paper Prototype
      3. Preparing for a Test
      4. Conducting a Test
      5. The Test
      6. Evaluate the Results

References


Gould, Boies, Lewis, Making Usable, Useful, Productivity Enhancing Computer Applications, Communications of the ACM, Jan. 1991, Vol. 34, No. 1, pp. 74-85

Heckel, Paul, Elements of Friendly Software Design, San Francisco, Sybex Books, 1991

Hix and Hartson. Developing User Interfaces: Ensuring Usability Through Product and Process. Wiley & Sons, 1993

Laurel, B., Computers as Theatre. Addison-Wesley, 1991

Marcus, A., Graphic Design for Electronic Documents and User Interfaces, ACM Press/Addison-Wesley, 1991

Mulligan, Altom, and Simkin. User interface design in the trenches: Some tips on shooting from the hip. In Reaching through Technology: CHI'91 Proceedings. ACM Press 1991, pp. 232-236

Norman, Donald. Defending Human Attributes in the Age of the Machine, Voyager, CD-ROM

Norman, Donald. The Design of Everyday Things, 1988.

Norman, Donald. Turn Signals Are the Facial Expressions of Automobiles.

Norman, Donald. Things That Make Us Smart.

Rettig, Marc. Interface Design When You Don't Know How, Communications of the ACM, Jan. 1992, Vol. 35, No. 1, pp. 29-34

Rettig, Marc. Prototyping for Tiny Fingers, Communications of the ACM, April. 1994, Vol. 37, No. 4, pp. 21-27

Schneiderman, B. Designing the User Interface, Addison-Wesley, 1987

Interactive Color Holliday Horton, ftp://ftp.sdsc.edu/pub/sdsc/

Questionnaire for User Interface Satisfaction
For information and licensing contact:
Carolyn Garrett
Office of Technology
Liason Lee Building, Room 2114
University of Maryland
College Park, MD 20742

Interface Design When You Don't Know How


Basic Rule for Good Visual Design

Hire a graphic/GUI designer




Basic Rule for Almost Everything Else

Painstakingly follow established standards


All major interfaces have published detailed standards for user interface design


If the standard says a window border is 3 pixels wide make it 3 pixels

User Interface Standards Manual

Produce standards manual for the project

Manual should address the following:


What symbols are there
How do they relate to each other
How do they relate to the things they represent
How do they relate to the user
The Process
Planning

Set a short time limit (4 weeks) on the planning process


Planning Documents

Document One
Defines design goals
Sets the direction for the work
Identifies open problems that need to be researched

Document Two
Project plan for next four months
Describe series of tasks, each no longer than two weeks


Document Three
Plan for user testing


Document Four
Definition of Iterative Process

Prototyping

Problems with Software Prototypes


Software Prototypes take too long to build and change


Testers tend to comment on "fit and finish" issues
Get comments on selection of colors, fonts and buttons
Developers spend time on colors, fonts and buttons


Developers resist changes


Software Prototypes set false expectations


Single bug in a software prototype can halt a test

Lo-fi or Paper Prototypes

The Kit


White paper
unlined
heavy enough to endure repeated testing and revisions


5-by-3-inch cards
Use as construction material
Taking notes


Adhesives
Tape: clear, colored, double-backed, etc.
Glue sticks
Post-It glue
White correction paper


Markers
Colored pens and pencils
Highlighters
Fine and thick markers


Sticky note pads

Acetate sheets

Scissors, X-acto knives, straight-edges, Band-Aids

White-out

Build A Paper Prototype


Set a short deadline
The prototype will be done by 4:00 this afternoon
Tomorrow at 9:30 we will demo the prototype
Just get a first pass on all aspects of the prototype
It will be "wrong" so don't spend weeks on it


Construct Models, not illustrations
Build the parts of your prototype so they can be used
The parts need to move around
User will use the model, must see the changes
On early models don't be picky - get ideas down
Later models can look "professional"

Preparing for a Test


Select your users
Know the demographics of your users
Educational background
Knowledge of computers
Typical tasks involved in their job
Can use "surrogate users"
People with same demographics of your users
Undergrads are cheap available labor
May wish to avoid actual customers, employees, friends, and family
Testers should represent the whole range of users
Do at least one in-house test with surrogates and one field test with typical end users

Prepare test scenarios

Practice

Conducting a Test


It takes four people to get the most out of a test

Greeter
Welcomes users
Puts users at ease
Users often worry about:
Flunking the test
Co-workers finding out how they did
Answering the question correctly
Has users fill out forms - experience profile


Facilitator
Runs the test
Gives users instruction
Gives user hand written tasks to perform
Encourage the user to express their thoughts
As use works elicit the user's thought
Makes sure test runs on time
Computer
Runs the computer
Moves the model in response to users "actions"


Observer
Takes notes
One observation per index card

The Test


Video tape the test

Before starting the test, explain the process to the user

Debrief the user after the test

During the test, don't:
Give user hints
laugh, gape, gasp, say "a-ha"
Don't display any reaction to the user's actions

Evaluate the Results


Go through all the notes taken during the tests

Use post-it notes to put comments on components of prototype that need change