CS 596: Client-Server Programming
Spring Semester, 1997
Doc 26, User Interface
To Lecture Notes Index
San Diego State University -- This page last updated Apr 17, 1997
Contents of Doc 26, User Interface
- References
- Interface Design When You Don't Know How
- Prototyping
- Problems with Software Prototypes
- Lo-fi or Paper Prototypes
- The Kit
- Build A Paper Prototype
- Preparing for a Test
- Conducting a Test
- The Test
- Evaluate the Results
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
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
- Plan ahead
- Use bite-sized chunks
- Abandon the waterfall life cycle in favor of iterative design
- Conduct user testing early and often
- Focus on the users' needs and involve them in the process
- Come up with good , testable usability goals
- Hire a graphic designer
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
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
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
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"
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
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
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
Go through all the notes taken during the tests
Use post-it notes to put comments on components of prototype that need
change