Interface_Presentation.ppt 877KB Jun 23 2011 12:33:04 PM
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 Computer’s Lisa GUI (1983)
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
– 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
Principles of UI design (cont’d)
•
•
•
•
•
•
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 [email protected]
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) 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
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 Computer’s Lisa GUI (1983)
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
– 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
Principles of UI design (cont’d)
•
•
•
•
•
•
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 [email protected]
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) 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