Designing with the Mind in Mind

Simple Guide to Understanding User Interface Design Rules

Jeff Johnson

• Publisher: Morgan Kaufmann
• Year: 2010
• eBook ISBN: 9780080963020
• Topic: Computer Science
• Subtopic: Computer Science General
• Index: Computer Science

Early user interface (UI) practitioners were trained in cognitive psychology, from which UI design rules were based. But as the field evolves, designers enter the field from many disciplines. Practitioners today have enough experience in UI design that they have been exposed to design rules, but it is essential that they understand the psychology behind the rules in order to effectively apply them. In Designing with the Mind in Mind, Jeff Johnson, author of the best selling GUI Bloopers, provides designers with just enough background in perceptual and cognitive psychology that UI design guidelines make intuitive sense rather than being just a list of rules to follow.- The first practical, all-in-one source for practitioners on user interface design rules and why, when and how to apply them- Provides just enough background into the reasoning behind interface design rules that practitioners can make informed decisions in every project- Gives practitioners the insight they need to make educated design decisions when confronted with tradeoffs, including competing design rules, time constrictions, or limited resources

Chapter 1 We Perceive What We Expect

Our perception of the world around us is not a true depiction of what is actually there. We perceive, to a large extent, what we expect to perceive. Our expectations—and therefore our perceptions—are biased by three factors:

• the past: our experience

• the present: the current context

• the future: our goals

Perception Biased by Experience

Imagine that you own a large insurance company. You are meeting with a real estate manager, discussing plans for a new campus of company buildings. The campus consists of a row of five buildings, the last two with T-shaped courtyards providing light for the cafeteria and fitness center. If the real estate manager showed you the map shown in Figure 1.1, you would see five black shapes representing the buildings.

Figure 1.1 Building map or word? What you see depends on what you were told to see.

Now imagine that instead of a real estate manager, you are meeting with an advertising manager. You are discussing a new billboard ad to be placed in certain markets around the country. The advertising manager shows you the same image, but in this scenario the image is a sketch of the ad, consisting of a single word. In this scenario, you see a word, clearly and unambiguously.

When your perceptual system has been primed to see building shapes, you see building shapes, and the white areas between the buildings barely register in your perception. When your perceptual system has been primed to see text, you see text, and the black areas between the letters barely register.

A relatively famous example of how priming the mind can affect perception is a sketch, supposedly by R. C. James,¹ that initially looks to most people like a random splattering of ink (see Fig. 1.2). Before reading further, look at the sketch.

Figure 1.2 Image showing the effect of mental priming of the visual system. What do you see?

Only after you are told that it is a Dalmatian dog sniffing the ground near a tree can your visual system organize the image into a coherent picture. Moreover, once you’ve “seen” the dog, it is hard to go back to seeing the image as a random collection of spots.

The examples above are visual. Experience can also bias other types of perception, such as sentence comprehension. For example, the headline “New Vaccine Contains Rabies” would probably be understood differently by people who had recently heard stories about contaminated vaccines than by people who had recently heard stories about successful uses of vaccines to fight diseases.

Users of computer software and Web sites often click buttons or links without looking carefully at them. Their perception of the display is based more on what their past experience leads them to expect than on what is actually on the screen. This sometimes confounds software designers, who expect users to see what is on the screen. But that isn’t how perception works.

For example, if the positions of the “Next” and “Back” buttons on the last page of a multipage dialog box² switched, many people would not immediately notice the switch (see Fig. 1.3). Their visual system would have been lulled into inattention by the consistent placement of the buttons on the prior several pages. Even after unintentionally going backward a few times, they might continue to perceive the buttons in their standard locations. This is why “place controls consistently” is a common user interface design guideline.

Figure 1.3 The “Next” button is perceived to be in a consistent location, even when it isn’t.

Similarly, if we are trying to find something, but it is in a different place or looks different from usual, we might miss it even though it is in plain view because experience tunes us to look for expected features in expected locations. For example, if the “Submit” button on one form in a Web site is shaped differently or is a different color from those on other forms on the site, users might not find it. This expectation-induced “blindness” is discussed further later in this chapter, in the section on how our goals affect perception.

Perception Biased by Current Context

When we try to understand how our visual perception works, it is tempting to think of it as a bottom-up process, combining basic features such as edges, lines, angles, curves, and patterns into figures and ultimately into meaningful objects. To take reading as an example, you might assume that our visual system first recognizes shapes as letter and then combines letters into words, words into sentences, and so on.

But visual perception—reading in particular—is not strictly a bottom-up process. It includes top-down influences too. For example, the word in which a character appears may affect how we identify the character (see Fig. 1.4).

Figure 1.4 The same character is perceived as H or A depending on the surrounding letters.

Similarly, our overall comprehension of a sentence or of a paragraph can even influence what words we see in it. For example, the same letter sequence can be read as different words depending on the meaning of the surrounding paragraph (see Fig. 1.5).

Figure 1.5 The same phrase is perceived differently depending on the list it appears in.

This biasing of perception by the surrounding context works between different senses too. Perceptions in any of our five senses may affect simultaneous perceptions in any of our other senses. For example:

• What we see can be biased by what we are hearing, and vice versa

• What we feel with our tactile sense can be biased by what we are hearing, seeing, or smelling

Later chapters explain how visual perception, reading, and recognition function in the human brain. For now, I will simply say that the pattern of neural activity that corresponds to recognizing a letter, a word, a face, or any object includes input from neural activity stimulated by the context. This context includes other nearby perceived objects and events, and even reactivated memories of previously perceived objects and events.

Context biases perception not only in people but also in lower animals. A friend of mine often brought her dog with her in her car when running errands. One day, as she drove into her driveway, a cat was in the front yard. The dog saw it and began barking. My friend opened the car door and the dog jumped out and ran after the cat, which turned and jumped through a bush to escape. ...

Table of contents

• Cover image
• Title page
• Table of Contents
• Copyright
• Acknowledgments
• Foreword
• Introduction
• Chapter 1: We Perceive What We Expect
• Chapter 2: Our Vision is Optimized to See Structure
• Chapter 3: We Seek and Use Visual Structure
• Chapter 4: Reading is Unnatural
• Chapter 5: Our Color Vision is Limited
• Chapter 6: Our Peripheral Vision is Poor
• Chapter 7: Our Attention is Limited; Our Memory is Imperfect
• Chapter 8: Limits on Attention Shape Thought and Action
• Chapter 9: Recognition is Easy; Recall is Hard
• Chapter 10: Learning from Experience and Performing Learned Actions are Easy; Problem Solving and Calculation are Hard
• Chapter 11: Many Factors Affect Learning
• Chapter 12: We Have Time Requirements
• Epilogue
• Well-known User Interface Design Rules
• Bibliography
• Index