Jeff Johnson
Simple Guide to Understanding . User Interface Design Rules
ELSEVIER . MK
AMSTERDAM • BOSTON • HEIDELBERG • LONDON
NEW YORK • OXFORD • PARIS • SAN DIEGO
SAN FRANCISCO • SINGAPORE • SYDNEY • TOKYO
Morgan Kaufmann Publishers is an imprint of Elsevier
AMSTERDAM • BOSTON • HEIDELBERG • LONDON
NEW YORK • OXFORD • PARIS • SAN DIEGO
SAN FRANCISCO • SINGAPORE • SYDNEY • TOKYO
Morgan Kaufmann Publishers is an imprint of Elsevier
 |
| Designing with the Mind in Mind Simple |
I could not have written this book without a lot of help and support.
First to mention are the students of the Human-Computer Interaction course I
taught as an Erskine Fellow at the University of Canterbury in New Zealand in the
winter semester of 2006. It was for them that I developed a lecture providing a brief
background in perceptual and cognitive psychology—just enough to enable them to
understand and apply user interface design guidelines. That lecture expanded into a
professional development course, then into this book.
Second are the reviewers of the first draft: Susan Fowler, Robin Jeffries, Tim McCoy,
and Jon Meads. They made many helpful comments and suggestions that allowed me
to greatly improve the book.
Third are three cognitive science researchers who provided useful content,
directed me to valuable readings, or allowed me to bounce ideas off of them: Prof.
Edward Adelson (M.I.T. Dept. of Brain and Cognitive Sciences), Prof. Dan Osherson
(Princeton University Dept. of Psychology), and Dr. Dan Bullock (Boston University
Dept. of Cognitive and Neural Systems).
The book also was helped immeasurably by the care, oversight, logistical support,
and nurturing provided by the staff at Elsevier, especially Mary James, David Bevans,
and Andre Cuello.
Valuable additional copyediting was provided by Cate de Heer. Most importantly,
I thank my wife and friend Karen Ande for her love and support while
I was researching and writing this book, all the more remarkable because it coincided
with the period when she was completing a book of her own: Face To Face:
Children of the AIDS Crisis in Africa, a photography book documenting the plight
of children orphaned by AIDS in sub-Saharan Africa (FaceToFaceAfrica.com).
Foreword
The design of interactive computer systems is not only an art, but, at least aspirationally,
a science. Well, not a science, actually, but rather a kind of joint computer-cognitive
engineering, that is, science-based techniques to create interactive systems satisfying
specified requirements.
Like cars, buildings, and clothes, interactive computing artifacts can emotionally
delight, exhibit style and fashion, and have social significance. There is much
room for art and industrial design in making things that pop, flash, and interact. But
the resulting artifacts also have to work correctly and to flow with human activity.
A beautiful building whose soaring windows roast its inhabitants in the summer
or whose trusses buckle in a storm is a failure. Designers need methods to put
latitude, season, fenestration, volume, and circulation together to predict heating
loads before building the building. They also need a stockpile of technology component
solutions, like thermopane glass, blinds, overhangs, and fans to choose among
as part of the standard engineering of a solution. Engineering does not replace art in
a design, it makes it possible.
Engineering is hard enough for architecture; it is harder still for interactive artifacts,
for the simple reason that it is easier to get a science of buildings than one of
people. Providing such a supporting science and engineering has been a founding
aspiration of the field of human-computer interaction. How to do it? The most basic
method is by “usability testing”—watch users doing tasks, discover their difficulties,
and fix these through redesign. Usability testing is useful, necessary, and inefficient.
The results don’t cumulate very well into a discipline anything like engineering, and
it isn’t very insightful about why things break. It’s the cognitive equivalent of roasting
the users to find the effect of the large windows. But usability testing can find
many of a system’s flaws. It is a feasible method, because interactive systems are
often much easier to change than rebuilding a building. Better
would be to avoid many of the errors in the first place, and one method is
through design rules. Instead of rediscovering over and over through usability testing
that interfaces depending on red and green are bad for color-blind users, just make
it a design rule to use color redundantly with other cues. Design rules, however,
turn out to have their own problems. In practice, design rules may be ambiguous
or require subtle interpretation of context or contradict other guidelines. And that
brings us to the current book.
The idea of the present book is to unite design rules with the supporting cognitive
and perceptual science that is at their core. This format has several merits: the
psychological science is made concrete and easy to absorb by connecting to actual
designs, and the design rules are made easier to adjust for context, since they are
related to their deeper rationale.
Jeff Johnson is the perfect author to attempt such a book. His whole career has
combined work on both the interface design side and the psychological science
side. I first met him when he was on the user interface team of the Xerox Star series
of products—the first commercial graphical user interface. So on the design side, he
was essentially in at the beginning of GUIs. On the psychology side, he did degrees
at Yale and Stanford. Putting design and psychology together, he worked on commercial
interactive systems, taught at the university, and worked as a consultant.
His trademark is using concrete design examples to illustrate abstract principles. In
fact, he is famous for driving his points home memorably by exhibiting “blooper”
examples of bad designs—and so he does in this book.
There is a third method of using science to help engineer a system that goes
beyond design rules—design models. Jeff’s book shows examples of how to use
this method, too. He shows how to model the task context in terms of object and
actions and how to understand real-time interaction constraints.
In sum, this is a book that advances the goal of a supporting engineering method
for interactive system design. At the same time, it is a primer to understand the
why of the larger human action principles at work—a sort of cognitive science for
designers in a hurry. Above all, this is a book of profound insight into the human
mind for practical people who want to get something done.
—Stuart Card
Introduction
USER-INTERFACE DESIGN RULES: WHERE DO THEY COME
FROM AND HOW CAN THEY BE USED EFFECTIVELY?
For as long as people have been designing interactive computer systems, some have
attempted to promote good design by publishing user-interface design guidelines
(also called design rules). Early ones included:
- Cheriton (1976) proposed user-interface design guidelines for early interactive (time-shared) computer systems.
- Norman (1983a, 1983b) presented design rules for software user interfaces based on human cognition, including cognitive errors.
- Smith and Mosier (1986) wrote perhaps the most comprehensive set of userinterface design guidelines.
- Shneiderman (1987) included “Eight Golden Rules of Interface Design” in the first edition of his book Designing the User Interface and in all later editions.
- Brown (1988) wrote a book of design guidelines, appropriately titled Human- Computer Interface Design Guidelines.
- Nielsen and Molich (1990) offered a set of design rules for use in heuristic evaluation of user interfaces.
- Marcus (1991) presented guidelines for graphic design in online documents and user interfaces.
In the twenty-first century, additional user interface design guidelines have been
offered by Stone et al. (2005), Koyani, Bailey, and Nall (2006), Johnson (2007), and
Shneiderman and Plaisant (2009). Microsoft, Apple Computer, and Oracle publish
guidelines for designing software for their platforms (Apple Computer, 2009; Microsoft
Corporation, 2009; Oracle Corporation/Sun Microsystems, 2001).
How valuable are user-interface design guidelines? That depends on who applies
them to design problems.
USER EXPERIENCE DESIGN AND EVALUATION REQUIRES
UNDERSTANDING AND EXPERIENCE
Following user-interface design guidelines is not as straightforward as following cooking
recipes. Design rules often describe goals rather than actions. They are purposefully
very general to make them broadly applicable, but that means that their exact meaning
and their applicability to specific design situations is open to interpretation.
Complicating matters further, more than one rule will often seem applicable to
a given design situation. In such cases, the applicable design rules often conflict, i.e.,
they suggest different designs. This requires designers to determine which competing
design rule is more applicable to the given situation and should take precedence.
Design problems—even without competing design guidelines—often have multiple
conflicting goals. e.g.:
- bright screen and long battery life
- lightweight and sturdy
- multifunctional and easy to learn
- powerful and simple
- WYSIWIG (what you see is what you get) and usable by blind people
Satisfying all the design goals for a computer-based product or service usually
requires tradeoffs—lots and lots of tradeoffs. Finding the right balance point
between competing design rules requires further tradeoffs.
Given all of these complications, user-interface design rules and guidelines must
be applied thoughtfully, not mindlessly, by people who are skilled in the art of UI
design and/or evaluation. User-interface design rules and guidelines are more like
laws than like rote recipes. Just as a set of laws is best applied and interpreted by
lawyers and judges who are well versed in the laws, a set of user-interface design
guidelines is best applied and interpreted by people who understand the basis for
the guidelines and have learned from experience in applying them.
Unfortunately, with a few exceptions (e.g., Norman, 1983a), user-interface
design guidelines are provided as simple lists of design edicts with little or no rationale or background.
Furthermore, although many early members of the user-interface design and
usability profession had backgrounds in cognitive psychology, most newcomers to
the field do not. That makes it difficult for them to apply user-interface design guidelines sensibly.
Providing that rationale and background education is the focus of this book.
INTENDED AUDIENCE OF THIS BOOK
This book is intended mainly for software development professionals who have to
apply user-interface and interaction design guidelines. This of course includes interaction
designers, user-interface designers, and user-experience designers, graphic
designers, and hardware product designers. It also includes usability testers and
evaluators, who often refer to design heuristics when reviewing software or analyzing
observed usage problems.
A second audience for this book is software development managers who want
enough of a background in the psychological basis for user-interface design rules to
understand and evaluate the work of the people they manage.
Screenshot
Purchase Now !
Just with Paypal
Just with Paypal
Product details
Price
|
|
|---|---|
File Size
| 10,925 KB |
Pages
|
188 p |
File Type
|
PDF format |
ISBN
| 978-0-12-375030-3 |
Copyright
| 2010 E lsevier Inc . All rights reserved |
Chapter Contents
1.We Perceive What We Expect
2.Our Vision is Optimized to See Structure
3.We Seek and Use Visual Structure
4.Reading is Unnatural
5.Our Color Vision is Limited
6.Our Peripheral Vision is Poor
7.Our Attention is Limited; Our Memory is Imperfect
8.Limits on Attention, Shape, Thought and Action
9.Recognition is Easy; Recall is Hard
10.Learning from Experience and Performing Learned
Actions are Easy; Problem Solving and Calculation are Hard
11.Many Factors Affect Learning
12.We Have Time Requirements
Bibliography
Angier, N. (2008). Blind to change, even as it stares us in the face.
New York Times. April 1, 2008.
Arons, B. (1992). A review of the cocktail party effect.
Journal of the American Voice I/O Society, 12, 35–50.
Apple Computer (2009). Apple human interface guidelines.
developer.apple.com/mac/library/documentation/UserExperience/Conceptual/AppleHIGuidelines
Barber, R., & Lucas, H. (1983).
System response time, operator productivity, and job satisfaction.
Communications of the ACM, 26(11), 972–986.
Bays, P. M., & Husain, M. (2008).
Dynamic shifts of limited working memory resources in human
vision. Science, 321, 851–854.
Beyer, H., & Holtzblatt, K. (1997).
Contextual design: A customer-centered approach to systems
design. Morgan-Kaufmann Publishers.
Blauer, T. (2007).
On the startle/flinch response. Blauer tactical intro to the spear system:
Flinching and the first two seconds of an ambush. YouTube video: www.youtube.com/watch?vjk_Ai8qT2s4.
Broadbent, D. E. (1975). The magical number seven after fifteen years.
In A. Kennedy & A. Wilkes (Eds.), Studies in long-term memory (pp. 3–18). Londmon: Wiley.
Brown, C. M. (1988). Human–computer interface design guidelines.
Norwood, NJ: Ablex Publishing Corporation.
Boulton, D. (2009). Cognitive science: The conceptual components of reading & what reading
does for the mind. Interview of Dr. Keith Stanovich,
Children of the Code website: www.childrenofthecode.org/interviews/stanovich.htm
Card, S. (1996). Pioneers and settlers: Methods used in successful user interface design.
In M. Rudisill,
C. Lewis, P. Polson, & T. McKay (Eds.), Human-computer interface design: Success cases, emerging
methods, real-world context.
San Francisco: Morgan Kaufmann.
Card, S., Moran, T., & Newell, A. (1983).
The psychology of human–computer interaction.
Hillsdale, NJ: Lawrence Erlbaum Associates.
Card, S., Robertson, G., & Mackinlay, J. (1991).
The Information Visualizer, an Information
Workspace. Proceedings of ACM CHI’91, 181–188.
Carroll, J., & Rosson, M. (1984). Beyond MIPS: Performance is not quality.
BYTE, 168–172.
Cheriton, D. R. (1976). Man–machine interface design for time-sharing systems.
Proceedings of the
ACM National Conference, 362–380.
Chi, E. H., Pirolli, P., Chen, K., & Pitkow, J. (2001).
Using information scent to model user information
needs and actions on the web. Proceedings of ACM SIGCHI Conference on Computer–Human Interaction (CHI 2001), 490–497.
Clark, A. (1998). Being there: Putting brain, body, and world together again.
Cambridge, MA: MIT Press.
Cowan, N., Chen, Z., & Rouder, J. (2004).
Constant capacity in an immediate serial-recall task:
A logical sequel to Miller (1956). Psychological Science, 15(9), 634–640.
Duis, D., & Johnson, J. (1990).
Improving user-interface responsiveness despite performance limitations.
Proceedings of IEEE CompCon’90, 380–386.
Geelhoed, E., Toft, P., Roberts, S., & Hyland, P. (1995).
To influence time perception. Proceedings of ACM CHI’95, 5, 272–273.
Grudin, J. (1989). The case against user interface consistency.
Communications of the ACM, 32(10), 1164–1173.
Hackos, J., & Redish, J. (1998). User and task analysis for interface design. New York: Wiley.
Isaacs, E., & Walendowski, A. (2001). Designing from both sides of the screen: How designers and
engineers can collaborate to build cooperative technology. Indianapolis, Indiana: SAMS.
Johnson, J. (1987). How faithfully should the electronic office simulate the real one? SIGCHI
Bulletin, 21–25.
Johnson, J. (1990). Modes in non-computer devices. International Journal of Man–Machine
Studies, 32, 423–438.
Johnson, J. (2007). GUI bloopers 2.0: Common user interface design don’ts and dos.
San Francisco, CA: Morgan-Kaufmann Publishers.
Johnson, J., & Henderson, A. (2002). Conceptual models: Begin by designing what to design.
Interactions, 25–32.
Johnson, J., Roberts, T., Verplank, W., Smith, D. C., Irby, C., Beard, M., & Mackey, K. (1989). The
xerox star: A retrospective. IEEE Computer, September, 11–29.
Jonides, J., Lewis, R. L., Nee, D. E., Lustig, C. A., Berman, M. G., & Moore, K. S. (2008). The mind
and brain of short-term memory. Annual Review of Psychology, 59, 193–224.
Koyani, S. J., Bailey, R. W., & Nall, J. R. (2006). Research-based web design and usability guidelines.
US Department of Health and Human Services. Website: usability.gov/pdfs/guidelines.html.
Krug, S. (2005). Don’t make me think: A common sense approach to web usability (2nd ed.).
Indianapolis: New Riders Press.
Lambert, G. (1984). A comparative study of system response time on program developer productivity.
IBM Systems Journal, 23(1), 407–423.
Landauer, T. K. (1986). How much do people remember? Some estimates of the quantity of learned
information in long-term memory. Cognitive Science, 10, 477–493.
Liang, P., Zhong, N., Lu, S., Liu, J., Yau, Y., Li, K., & Yang, Y. (2007). The neural mechanism
of human numerical inductive reasoning process: A combined ERP and fMRI study. Berlin:
Springer Verlag.
Lindsay, P., & Norman, D. A. (1972). Human information processing. New York and London:
Academic Press.
Marcus, A. (1992). Graphic design for electronic documents and user interfaces. Reading, MA:
Addison-Wesley.
Marr, D. (1982). Vision. New York, NY: W. H. Freeman. p. 101, Figure 3-1, attributed to R. C. James.
McInerney, P., & Li, J. (2002). Progress indication: Concepts, design, and implementation, July,
IBM. Developer Works. Website: www-128.ibm.com/developerworks/web/library/us-progind.
Microsoft Corporation (2009), Windows User Experience Interaction Guidelines: http://www.msdn.microsoft.com/en-us/library/aa511258.aspx
Miller, G. A. (1956). The magical number seven, plus or minus two: Some limits on our capacity for
processing information. Psychological Review, 63, 81–97.
Miller, R. (1968). Response time in man–computer conversational transactions. Proceedings of IBM
Fall Joint Computer Conference Vol. 33, 267–277.
Monti, M. M., Osherson, D. N., Martinez, M. J., & Parsons, L. M. (2007). Functional neuroanatomy
of deductive inference: A language-independent distributed network. NeuroImage, 37(3),
1005–1016.
Mullet, K., & Sano, D. (1994). Designing visual interfaces: Communications oriented techniques. Prentice-Hall.
Nielsen, J. (2003). Information foraging: Why Google makes people leave your site faster, Alertbox, June 30, 2003.
Nielsen, J., & Molich, R. (1990). Heuristic evaluation of user interfaces. Proceedings of ACM CHI’90
Conference. (Seattle, WA, 1–5 April), 249–256.
Norman, D. A. (1983a). Design rules based on analysis of human error. Communications of the
ACM, 26(4), 254–258.
Norman, D. A. (1983b). Design principles for human–computer interfaces. In A. Janda (Ed.),
Proceedings of the CHI-83 conference on human factors in computing systems (Boston). New
York: ACM. Reprinted in Readings in Human-Computer Interaction, ed. by Ronald M. Baecker
and William A. S. Buxton. San Mateo, CA: Morgan-Kaufmann Press (1987).
Norman, D. A., & Draper, S. W. (1986). User centered system design: New perspectives on
human–computer interaction. Hillsdale, NJ: CRC.
Oracle Corporation/Sun Microsystems (2001). Java Look and Feel Design Guidelines, 2nd ed.
Perfetti, C., & Landesman, L. (2001). The truth about download time. Web article, User Interface
Engineering, Jan 31, 2001, http://uie.com/articles/download_time/
Redish, G. (2007). Letting go of the words: Writing web content that works. San Francisco:
Morgan-Kaufmann Publishers.
Robertson, G., Card, S., & Mackinlay, J. (1989). The cognitive co-processor architecture for interactive
user interfaces. Proceedings of the ACM Conference on User Interface Software and
Technology (UIST’89). November 1989, ACM Press, 10–18.
Robertson, G., Card, S., & Mackinlay, J. (1993). Information visualization using 3D interactive animation.
Communications of the ACM, 36(4), 56–71.
Rushinek, A., & Rushinek, S. (1986). What makes users happy? Communications of the ACM, 29, 584–598.
Sapolsky, R. M. (2002). A primate’s memoir: A neuroscientist’s unconventional life among the
Baboons. New York: Scribner.
Schneider, W., & Shiffrin, R. M. (1977). Controlled and automatic human information processing:
1. Detection, search, and attention. Psychological Review, 84, 1–66.
Schrage, M. (2005). The password is fayleyure. Technology Review, March. http://www.technologyreview.com/read_article.aspx?chspecialsections&scsecurity&id16350.
Shneiderman, B. (1984). Response time and display rate in human performance with computers.
ACM Computing Surveys, 16(4), 265–285.
Shneiderman, B. (1987). Designing the user interface: Strategies for effective human–computer
interaction (1st ed.). Reading, MA: Addison-Wesley.
Shneiderman, B., & Plaisant, C. (2009). Designing the user interface: Strategies for effective
human–computer interaction (5th ed.). Reading, MA: Addison-Wesley.
Simon, H. A. (1969). The sciences of the artificial. Cambridge, MA: MIT Press.
Simons, D. J., & Levin, D. T. (1998). Failure to detect changes in people during a real-world interaction.
Psychonomic Bulletin and Review, 5, 644–669.
Smith, S. L., & Mosier, J. N. (1986). Guidelines for designing user interface software. Springfield,
VA: National Technical Information Service. Technical Report ESD-TR-86-278.
Soegaard, M. (2007). Gestalt Principles of form perception. Web article, Interaction-Design.org,
Sohn, E. (October 8, 2003). It’s a math world for animals. Science News for Kids. http://www.sciencenewsforkids.org/articles/20031008/Feature1.asp.
Sousa, D. A. (2005). How the brain learns to read. Thousand Oaks, CA: Corwin Press.
Stafford, T., & Webb, M. (2005). Mind hacks: Tips and tools for using your brain.
Sebastapol, CA: O’Reilly.
Stone, D., Jarrett, C., Woodroffe, M., & Minocha, S. (2005).
User interface design and evaluation.
San Francisco: Morgan Kaufmann Publishers.
Thadhani, A. (1981). Interactive user productivity. IBM Systems Journal, 20(4), 407–423.
Thagard, P. (2002). Coherence in thought and action. Cambridge, MA: MIT Press.
Waloszek, G. (2005), Vision and Visual Disabilities: An Introduction, SAP Design Guild.
Ware, C. (2008). Visual thinking for design. San Francisco, CA: Morgan-Kaufmann Publishers.
Weinschenk, S. M. (2009). Neuro web design: What makes them click? Berkeley, CA: New Riders.
Wolfmaier, T. (1999). Designing for the color-challenged: A challenge. ITG Publication, March
●▬▬▬▬▬❂❂❂▬▬▬▬▬●
●▬▬❂❂▬▬●
●▬❂▬●
●❂●
═════● ●═════
