Feb 18, 2014

The Anatomy of Intuition

Thinking about What Designers Do

An earlier version of this article was published in UXMatters.

Don't ask me to "make it intuitive". It's not helpful. The word intuitive has no explanatory value. It just fills a hole in the sentence. You might as well say, "make it good," which irritates me because you seem to think I need to be reminded.   This article will analyse what you should ask a Designer to do.

Figure 1 -- an intuitive Save icon
I propose to replace the term intuitive in the UX design vocabulary with availability.
a·vail (v.)
To use or take advantage of an opportunity or available resource. For example, “She did not avail herself of my advice.” To help or benefit. For example, “No amount of struggle availed Charles.” Synonyms: help, serve, profit
a·vail·a·bil·it·y (n.)
Handiness, or the quality of being at hand when needed. The ease with which a thought comes to mind.
The concept of Availability is packed with well-defined meaning from established science. It gives designers practical guidance on how to design products that need no more explaining than sex. Intuitive asks for a magic wand; Availability gives us handles and levers.

I’ll use Jesse James Garrett’s “Elements of User Experience,” (shown in Figure 2) as the structure for this analysis. The framework is made up of Surface, Skeleton, Structure, Scope, and Strategy. The concept of Availability makes it easier to understand what makes for good design on each of these “Planes of User Experience". It also gives a bridge to relevant concepts in psychology.

Figure 2: Elements of User Experience (Jesse James Garrett)

Surface

“The surface level of an experience includes the smallest components of a design that make sense in themselves—for example, images, copy, colors, typography, and widgets.”
The surface level of an experience includes the smallest components of a design that make sense in themselves—for example, images, copy, colors, typography, and widgets. Availability at this level refers to how readily the intended meaning comes to mind. Do people understand the label? Do they recognize the icon? Is the font readable?

The ease with which different understandings come to mind is a result of:
  • the way our brains work
  • the properties of a thing—a stimulus
  • skills and experience of the perceiving individual.

The Way Our Brains Work

User interface designers frequently rely on findings from the early human-performance tradition of cognitive science, which focused on empirical analyses of perception, attention, memory, response selection, and motor control—most notably, Fitts’s Law, Hick’s Law, and Miller’s “Magical Number Seven, Plus or Minus Two.”

Fitts’s Law describes the time it takes to move the mouse pointer to a target area as a function of distance to the target. So if you place targets closer or make them bigger, they’ll be easier to click. In other words, when targets are closer or bigger they are more spatially available.

Hick’s Law describes a person’s reaction time as a function of possible choices. The time it takes to make a choice increases logarithmically with the number of options from which one must choose.

For example, the choice between chocolate and vanilla is quick and almost automatic, but picking a flavor becomes progressively more difficult and takes longer with each additional flavor on the menu. Your final choice becomes less cognitively available as the number of options increases.

Miller’s “Magical Number” describes the limits of human short-term memory capacity. Miller found we can keep between three and five things in mind at the same time. More recent research has the number varies with age, circumstance, context, and information density, and puts the number closer to Four, Plus or Minus One.

For example, you can easily remember a shopping list of four items, but longer shopping lists are best written down or put into your smartphone. Otherwise you’re likely to find yourself standing in the middle of the baking goods aisle struggling to remember what you’ve forgotten. Miller’s Magical Number is about cognitive availability.

These laws come from research into human performance efficiency. Applied to a design, their effect is to reduce the cognitive effort required by users, making their goals and objectives more available.

The Properties of a Thing

Affordance refers to the perceived possibilities for interacting with an object. For example, a text box on a Web page presents the possibility of typing text.

We can describe affordance in terms of availability.
aff·ord·ance
The extent to which an object makes an action available to a person.
Only perceived possibilities are available to users. Other possibilities that web page text boxes may hold, such as changing font or background color, are less available than the possibility of text entry.

Skills and Experience

Our skills and experience shape the possibilities we can realize in an object. Functions that are unavailable to novices may be readily available to experts. For example, while most people cannot conceive how they could record a conversation in real time using a stenographic machine (like the one in Figure 3), an experienced courtroom stenographer can use a stenographic keyboard as easily as you or I can use a computer keyboard.
“People’s skills and experience shape the possibilities they can realize in an object. Functions that are unavailable to novices may be readily available to experts.”
Similarly, a skilled pianist can use a piano keyboard (like that shown in Figure 4) without consciously thinking about the placement of her hands; and many skilled programmers find a computer keyboard and a VI editor (shown in Figure 5) the easiest way to express their creativity. Expertise opens up the potential of tools, making functionality available to skilled users.
Figure 3 - A stenographic machine
Figure 4 - A piano keyboard
Figure 5 - a VI code editor
A culture is a set of skills and experience that makes particular meanings of words, symbols, and other tools more or less available (for example, fart may cause a Swede to think of jazz). So regionalization and localization of user interfaces increases the availability of their significance and operations.

Design for accessibility is about making functionality and other benefits of tools available to all people—whatever their hardware, software, language, culture, location, or physical or mental ability.

Skeleton

“The overall arrangement of design elements on a screen shapes our understanding of discrete design elements. … A well-arranged skeleton makes intended meanings more available to users than unintended meanings.”
No icon, term, or any other design element in isolation has an obvious meaning. Meaning is contextual. For example, users misunderstand any single label in isolation more than 80% of the time. The overall arrangement of design elements on a screen shapes our understanding of discrete design elements.

Garrett calls a screen’s overall layout the skeleton. A well-arranged skeleton makes intended meanings more available to users than unintended meanings.

Availability maps neatly to psychology research on the phenomenon of selective accessibility. Daniel Kahneman uses the illustration shown in Figure 6 as an example of selective accessibility.

Figure 6 - Example of selective accessibility (Kahneman 2003)
“As one looks at the object [A], one has immediate impressions of the height of the tower, the area of the top, and perhaps the volume of the tower. Translating these impressions into units of height or volume requires a deliberate operation, but the impressions themselves are highly accessible. For other attributes, no perceptual impression exists. For example, the total area that the blocks would cover if the tower were dismantled is not perceptually accessible, though it can be estimated by a deliberate procedure, such as multiplying the area of the side of a block by the number of blocks. Of course, the situation is reversed with [B]. Now, the blocks are laid out, and an impression of total area is immediately accessible, but the height of the tower that could be constructed with these blocks is not.”—Daniel Kahneman, “Perspective on Judgment and Choice,” American Psychologist, 2003.
We know a lot about the various attributes of an object that make it more or less accessible. We can increase the accessibility of thought processes through training — so we can perform highly complex activities such as playing a violin, competing in martial arts, or typing on a keyboard without conscious thought. Training to this level, however, requires repetitive effort over an extended period of time.

As the tower example in Figure 6 shows, relative comparisons are more available to us than absolute comparisons. It’s faster and easier to evaluate one concrete thing directly against another than via an abstract unit of measure. Compare the three data-representation formats shown in Figures 7–9.
Figure 7 - Data as text
Figure 8 - Data in a table
Figure 9 - Data in a graph
Relative comparisons are inherently more available than absolute comparisons because of the way our brains work. It’s faster to assess data in a table than in text format because the layout makes it easier to compare similar values directly against each other. A graph format is better still, because relationships among the data are even more obvious. Good data visualizations make the relationships in data more cognitively available.

Structure

“The skeleton might define the arrangement of navigational items allowing the users to browse categories of books; the structure would define what those categories actually were.”—Jesse James Garrett, in The Elements of User Experience: User-Centered Design for the Web
“We employ structure to help people experience and benefit from a design without consciously thinking about it.”
We employ structure to help people experience and benefit from a design without consciously thinking about it. Information architects use card-sorting exercises to develop categorization systems reflecting organizational models users already have in their heads. Interaction designers create and test prototypes to learn what swipes, pinches, and other gestures feel more natural to users.

There is a gap between doing and thinking. Doing is driving home; thinking is having to compensate for a loose steering wheel. Doing is serving to your tennis opponent; thinking is being mindful not to irritate your elbow injury while you serve. Doing is changing the TV channel; thinking is having to be careful not to hit the wrong tiny button among many tiny remote-control button.

Psychologists and philosophers draw the line between doing and thinking in various ways. We see it in Kierkegaard’s existential versus aesthetic spheres of morality, Dewey’s ideas of recognition versus perception as ways of seeing; Heidegger’s concepts of ready-to-hand versus ready-to-hand modes of being; and Csikszentmihalyi’s concepts of flow versus non-flow activities.


Doing Thinking
hammer example driving a nail buying a new hammer
Kierkegaard existential aesthetic
Dewey recognition perception
Heidegger ready-to-hand ready-at-hand
Csikszentmihalyi flow activity non-flow activity

On the doing side of the line, the tools of interaction becomes psychologically invisible, as if they were an extension of your self, the way your car brake pedal is not in your mind as you stop at a red light.
A well-formed structure makes its possibilities available for use without thought.
Moving through a well-designed structure — whether a web site or an umbrella stand — is a matter of doing rather than thinking. People can avail themselves of the possibilities without concerning themselves with the thing itself. This is the essence of the “without thought” approaches to design of Naoto Fukasawa, IDEO, and Jane Fulton Suri. The "thing" moves out of the way.

The line between doing and thinking is not sharp. It's more a matter of gradation and degrees. The concept of availability allows us to grade structures, including information schemas, menus, controls, and tools in general, according to the amount of explicit attention required to user them. A highly available tool (a working brake pedal, for example) requires no explicit attention, you need focus only on your goal (stop at the red light). However, a tool with poor availability (a malfunctioning TV remote control, for example) demands your full attention. A well-formed structure makes its possibilities available for use without thought.

The Doing/Thinking split applies to the two main approaches to Physics. Experimental Physics is on the Doing side, Theoretical Physics is on the Thinking side. Colliders vs. Chalkboards. I think the practice of Design should be more like Experimental Physics. We should bang things together and analyse the damage.

Please see my article on Map and Territory if you are still curious about the Thinking/Doing divide.

Scope

“art is aesthetic; design is existential.”
Scope describes the range of features, functions, and elements that a design comprehends. The concept of availability points to two key design principles in this respect: simplicity and coherence.

Simple describes what users can grasp immediately, which is much the same as the definition of available: handy, easily coming to mind. As discussed earlier, the more elements there are in a design, the less cognitively available the design. Less is more. Minimalism.

Coherent describes the relationship of parts that hold together to form a whole. In a strong design, each element should suggest the others. Within the holistic context of using a design, users should immediately recognise a feature’s role and how it relates to the whole.

Elements beyond the essential minimum should be ruthlessly pruned from scope. Every remaining element should relate to each other and the whole.

The context for judging what is in and out of scope, is doing not looking. We create our designs for practical experience, not art exhibits. To use Kierkegaard’s distinction: art is aesthetic; design is existential.

Strategy

The job of a product’s design is to create value for both the people who use it and the business that provides it.
A strategy answers the question What is the purpose of this design? and gives us a frame of reference for decisions about scope.

For example, the strategy of Amazon might be to sell you something now and get you to come back for more. The strategy of a car dashboard might be to improve performance and safety by decreasing your reaction time and cognitive load. All elements of a design exist to serve the strategy.

Strategy determines the goals of a design, the value it must deliver, and who should benefit from it. UX design centres on users, but business goals usually drive strategy. Successful design strategy takes into account financial and marketing value — such as price, brand, and demographic market — as well as user value.

The job of a product’s design is to create value for both the people who use it and the business that provides it. But design is responsible for only part of that value. Algorithms, code, hardware, marketing, supply chains, and employees who deliver services are also key to value creation. The specific, strategic job of design is to make all this value available.

Conclusion

Availability asks us to keep a design’s value in mind.
I have proposed to discuss design in terms of availability, rather than intuitiveness. The best argument for this is that — unlike intuitiveness — it leads us to keep in mind the value that a product must deliver at all levels.


Please share this post. If you comment, I'll reply. Thanks for reading!

If your interests extend to theory and philosophy, please check out my other blog.

No comments:

Post a Comment

don't hold back!