HCI and UI Design
From Theory to Implementation
Michael Saltsman
What is an interface?
• the place at which independent and often
unrelated systems meet and act on or
communicate with each other.
Why do we remember only the bad?
• A good interface should be transparent
• Bad interfaces cause user frustration
– “What was this product designer thinking?”
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
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
The First Graphical User Interfaces
XEROX’s GUI (1981)
Microsoft’s Window (1985)
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
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
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
Fitts’ Law
(cont’d)
• Farther away an object is, the longer it takes to
acquire with a mouse
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
• 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
Thank you.
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
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
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
