1. HCI and UI Design From Theory to Implementation Michael Saltsman Computer Science Program, University of Utah

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

3. Why do we remember only the bad? A good interface should be transparent Bad interfaces cause user frustration –“What was this product designer thinking?” GOODBAD

4. 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

5. 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

6. The First Graphical User Interfaces XEROX’s GUI (1981) Microsoft’s Window (1985) Apple Computer’s Lisa GUI (1983)

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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)

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

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

15. 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

16. 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

17. 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