HCI and UI Design

From Theory to Implementation

Michael Saltsman Computer Science Program, University of Utah

What is an interface?
the place at which independent and often unrelated systems meet and act on or communicate with each other.
Meriam-Webster

Why do we remember only the bad?

A good interface should be transparent Bad interfaces cause user frustration
What was this product designer thinking?

GOOD

BAD

Topics of this presentation

Brief history of software user interface (UI) design Some of the psychological studies done in human computer interface (HCI) design Usability and the use of icons Necessities for accessibility Some guidelines for good UI design

Brief history of software UI

1968: Douglas Engelbart, Stanford Research Institute, regarded as father of the GUI
Text-based manipulation using a mouse

1970: XEROX establishes Palo Alto Research Center (PARC) to develop first mainstream GUI

The First Graphical User Interfaces

Apple Computers Lisa GUI (1983) XEROXs GUI (1981)

Microsofts Window (1985)

Psychology of HCI
GOAL: To determine how best to produce predictive theories of user and system behaviors William Edmond Hick British Psychologist
Hicks Law

Paul Fitts Ohio State University

Fitts Law

Hicks Law
William Edmund Hick
British Psychologist 1952

Ability of a human to quickly predict an outcome based on the number of simultaneous stimuli Relationship between speed and accuracy Software Example
More options are not always better

Fitts Law
Paul Fitts Psychologist at Ohio State University 1954 Mathamatical model used to predict how long it takes a user to move from one point on a screen to another Based on the distance between two points

Fitts Law (contd)

Farther away an object is, the longer it takes to acquire with a mouse In order to keep the average acquisition speed, object needs to be larger

Principles of UI design
Focus on the user
Standards Example Phone number
US uses 10 characters Europe can be up to 15 characters

Color
1 in 12 people are colorblind in some way Red / Green is most common
Occurs mostly in males

Icons as a means of communication

Principles of UI design (contd)

3-Click rule Visibility Accessibility Keyboard equivalents Undo action Short term memory load
Average person can hold a maximum of 7 pieces of independent information Can hold information from 3 to 20 seconds

Keep in mind

This not ALL of the principles of UI design, but what I have found to be the most important ones.

Thank you.
For more information on UI design, contact Michael Saltsman at saltsman@eng.utah.edu

Works Cited
Merriam Webster Online Dictionary. Retrieved March 10, 2008 from http://www.merriam-webster.com/dictionary/interface Reimer, J. (May 05, 2005). A history of the Gui. Ars technical, the art of technology. Retrieved March 15, 2008 from http://arstechnica.com/articles/paedia/gui.ars Abowd G. D. (17 Dec, 1991). Formal descriptions of user interfaces. Theory in Human-Computer Interaction (HCI), IEE Colloquium on. pp. 7/1-7/3. London, UK Seow, S. C. (2005). Information Theoretic Models of HCI: A comparison of the HickHyman Law and Fitts Law. Human-Computer Interaction, Volume 20, pp. 315-352. Norman, K. L. (1991). The Psychology of Menu Selection: Designing Cognitive Control at the Human/Computer Interface . Alex Publishing Corporation. 1991 ISBN: 0-89391-553-X. Retrieved on March 30, 2008 from http://lap.umd.edu/POMS/Chapter4/Chapter4.html Olson J.R. and Nilsen, E. (1987). "Anaiysis of the Cognition Involved in Spreadsheet Software Interaction," Human-Computer Interaction (3:4), 1987, pp. 309-349. Harris J. (2006). Giving You Fitts, Jensen Harris: An Office User Interface Blog. Retrieved on March 30, 2008 from http://blogs.msdn.com/jensenh/archive/2006/08/22/711808.aspx

Works Cited
Guiard Y., Beaudouin-Lafon M., Bastin J., Pasveer D., & Zhai S. (2004). View size and pointing difficulty in multi-scale navigation. Proceedings of AVI, Advanced Visual Interfaces. Pp. 117-124. New York: ACM Press. Dr. Riesenfeld suggested that when designing a UI of any sort, the most important thing to focus on in this design is your user. Who will you be designing this interface for? (personal communication, Dr. Richard Riesenfeld, University of Utah School of Computing. March 14, 2008). Dr. Riesenfeld suggested you cannot globally standardize an interface because standards vary between countries. (personal communication, Dr. Richard Riesenfeld, University of Utah School of Computing. March 14, 2008). Henderson C. (2002). Color Vision. Retrieved on March 15, 2008 from http://www.iamcal.com/toys/colors/stats.php. Cooper E., Demchak MA. (2000). Facts About Colorblindness. Tips for Home or School. Retrieved on March 15, 2008 from http://www.unr.edu/educ/ndsip/tipsheets/colorblindness.pdf Fahlman S. (2007) SMILEY: 25 YEARS OLD AND NEVER LOOKED HAPPIER!. Retrieved on March 15, 2008 from http://www.cs.cmu.edu/smiley/history.html

Works Cited
Aronson J. (2005) Medical emoticons. BMJ, Volume 330, January 8, 2005, pp. 87. Retrieved on March 15, 2008 from http://www.bmj.com/cgi/reprint/330/7482/87.pdf Usability Glossary: 3-click rule. Retrieved on March 15, 2008 from http://www.usabilityfirst.com/glossary/term_707.txl Norman D. (1990). Design of Everyday Things. New York: Doubleday. ISBN 0-38526774-6 (Original work published 1988 under Psychology of Everyday Things). US Department of Justice. (2000). Software Accessibility Checklist. Retrieved on March 20, 2008 from http://www.usdoj.gov/crt/508/archive/oldsoftware.html Shneiderman, B. (2005) Shneidermans Principles of Computer Interface Design, Retrieved from http://www.sjsu.edu/depts/it/itcdpdf/shneiderman.pdf. Skaalid B. (1999). Human-Computer Interface Design: Shneidermans Principles of Human-Computer Interface Design. Retrieved on March 20, 2008 from http://www.usask.ca/education/coursework/skaalid/theory/interface.htm Clark D. (2007). Memory: Short Term Memory (STM). Retrieved on March 21, 2008 from http://www.nwlink.com/~donclark/hrd/learning/memory.html