HCI and UI DesignFrom 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

XEROX’s GUI (1981)

Microsoft’s Window (1985)

Apple Computer’s Lisa GUI (1983)

Psychology of HCI

• GOAL: To determine how best to produce predictive theories of user and system behaviors

• William Edmond Hick – British Psychologist– Hick’s Law

• Paul Fitts – Ohio State University– Fitts’ Law

Hick’s 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 (cont’d)

• 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

• 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

Principles of UI design (cont’d)

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 Hick-Hyman 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-385-26774-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) Shneiderman’s Principles of Computer Interface Design, Retrieved from http://www.sjsu.edu/depts/it/itcdpdf/shneiderman.pdf.

• Skaalid B. (1999). Human-Computer Interface Design: Shneiderman’s 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