In modern GUIs, users can point to images or words on the screen with the mouse cursor. Most of these choices migrated from the users’ heads to the screen, eliminating any need to memorize them. Using the buttons on the mouse, users can click, double-click, or click and drag. The keyboard is used for data entry, but not typically for command entry or navigation. The number of atomic elements in users’ input vocabulary has dropped from dozens (if not hundreds) to just three, even though the range of tasks that can be performed by GUI programs isn’t any more restricted than that of command-line systems.
18_084113 ch13.qxp 4/3/07 6:06 PM Page 281
Chapter 13: Metaphors, Idioms, and Affordances
281
The more atomic elements there are in an interaction vocabulary, the more time-consuming and difficult the learning process is. A vocabulary like that of the English language takes at least 10 years to learn thoroughly, and its complexity requires constant use to maintain fluency, but it can be extraordinarily expressive for a skilled user. Restricting the number of elements in our interaction vocabulary reduces its expressiveness at the atomic level. However, more complex interactions can be easily built from the atomic ones, much the way that letters can be combined to form words, and words to form sentences.
A properly formed interaction vocabulary can be represented by an inverted pyramid. All easy-to-learn communications systems obey the pattern shown in Figure 13-3. The bottom layer contains primitives, the atomic elements of which everything in the language is composed. In modern GUIs, these primitives consist of pointing, clicking, and dragging.
The middle layer contains compounds. These are more complex constructs created by combining one or more of the primitives. These include simple visual objects such as text display, actions such as double-clicking or clicking-and-dragging, and manipulable objects like pushbuttons, check boxes, hyperlinks, and direct manipulation handles.
Input
Idioms
Output
delete, create,
Application specific
scrolling, sorting,
draw
commands and feedback
dialogs
Compounds
double-click,
Generic input and output
edit fields, checkboxes,
buttonclick, selection
actions and symbols
highlighting
Primitives
point, click,
Indivisible actions and
cursor, text
drag, keypress
feedback mechanisms
Figure 13-3 One of the primary reasons that GUIs are easy to use is that they enforce a restricted interaction vocabulary that builds complex idioms from a very small set of primitives: pointing, clicking, and dragging. These primitives can build a larger set of simple compounds, which in turn can be assembled into a wide variety of complex, domain-specific idioms, all of which are based on the same small set of easily learned actions.
18_084113 ch13.qxp 4/3/07 6:06 PM Page 282
282
Part II: Designing Behavior and Form
The uppermost layer contains idioms. Idioms combine and structure compounds using domain knowledge of the problem under consideration: information related to the user’s work patterns and goals, and not specifically to the computerized solution. The set of idioms opens the vocabulary to information about the particular problem the program is trying to address. In a GUI, it includes things like labeled buttons and fields, navigation bars, list boxes, icons, and even groups of fields and controls, or entire panes and dialogs.
Any language that does not follow this form will be very hard to learn. Many effective communications systems outside of the computer world follow similar vocabularies. Street signs in the United States follow a simple pattern of shapes and colors: Yellow triangles are cautionary, red octagons are imperatives, and green rectangles are informative.
Similarly, there is nothing intuitive or metaphoric about text messaging on a phone. The compound interactions involved in tapping numeric buttons in specific sequences to write in alphabetical characters is entirely learned, and when combined with predictive text capabilities, forms an incredibly effective idiom for writing brief notes from a mobile phone.
Manual Affordances
In his seminal book The Design of Everyday Things, Donald Norman gave us the term affordance, which he defines as “the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used.”
This concept is absolutely invaluable to the practice of interface design. For our purposes, the definition omits a key connection: How do we know what those properties offer to us? If you look at something and understand how to use it —
you comprehend its affordances — you must be using some method for making the mental connection.
Therefore, we propose altering Norman’s definition by omitting the phrase “and actual.” By doing this, affordance becomes a purely cognitive concept, referring to what we think the object can do rather than what it can actually do. If a pushbutton is placed on the wall next to the front door of a residence, its affordances are 100%
doorbell. If, when we push it, it causes a trapdoor to open beneath us and we fall into it, it turns out that it wasn’t a doorbell, but that doesn’t change its affordance as one.
18_084113 ch13.qxp 4/3/07 6:06 PM Page 283
Chapter 13: Metaphors, Idioms, and Affordances
283
So how do we know it’s a doorbell? Simply because we have learned about doorbells and door etiquette and pushbuttons from our complex and lengthy socialization and maturation process. We have learned about this class of pushable things by being exposed to electrical and electronic devices in our environs and because —
years ago — we stood on doorsteps with our parents, learning how to approach another person’s home.
But there is another force at work here, too. If we see a pushbutton in an unlikely place such as the hood of a car, we cannot imagine what its purpose is, but we do recognize it as a finger-pushable object. How do we know this? Undoubtedly, we recognize it because of our tool-manipulating nature. We, as a species, see things that are finger-sized, placed within reach, and we automatically push them. We see things that are long and rounded, and we wrap our fingers around them and grasp them like handles. This is what Norman was getting at with his term affordance.
For clarity, however, we’ll call this instinctive understanding of how objects are manipulated with our hands manual affordance. When artifacts are clearly shaped to fit our hands or feet, we recognize that they can be directly manipulated and require no written instructions. In fact, this act of understanding how to use a tool based on the relationship of its shape to our hands is a clear example of intuiting an interface.
Norman discusses at length how [manual] affordances are much more compelling than written instructions. A typical example he uses is a door that must be pushed open using a metal bar for a handle. The bar is just the right shape and height and is in the right position to be grasped by the human hand. The manual affordances of the door scream, “Pull me.” No matter how often someone uses this diabolical door, he will always attempt to pull it open, because the affordances are strong enough to drown out any number of signs affixed to the door saying Push.
There are only a few manual affordances. We pull handle-shaped things with our hands or, if they are small, we pull them with our fingers. We push flat plates with our hands or fingers. If they are on the floor we push them with our feet. We rotate round things, using our fingers for small ones — like dials — and both hands on larger ones, like steering wheels. Such manual affordances are the basis for much of our visual user-interface design.
The popular simulated-3D design of systems like Windows, Mac OS, and Motif relies on shading, highlighting, and shadows to make screen images appear more dimensional. These images offer virtual manual affo
rdances in the form of buttonlike images that say “Push me” to our tool-manipulating brains.
18_084113 ch13.qxp 4/3/07 6:06 PM Page 284
284
Part II: Designing Behavior and Form
Semantics of manual affordances
What’s missing from an unadorned, virtual manual affordance is any idea of what function it performs. We can see that it looks like a button, but how do we know what it will accomplish when we press it? Unlike mechanical objects, you can’t figure out a virtual lever’s function just by tracing its connections to other mechanisms — software can’t be casually inspected in this manner. Instead, we must rely either on supplementary text and images, or, most often, on our previous learning and experience. The affordance of the scrollbar clearly shows that it can be manipulated, but the only things about it that tell us what it does are the arrows, which hint at its directionality. In order to know that a scrollbar controls our position in a document, we either have to be taught or learn through experimentation.
Controls must have text or iconic labels on them to make sense. If the answer isn’t suggested by the control, we can only learn what it does by one of two methods: experimentation or training. Either we read about it somewhere, ask someone, or try it and see what happens. We get no help from our instinct or intuition. We can only rely on the empirical.
Fulfilling user expectations of affordances
In the real world, an object does what it can do as a result of its physical form and its connections with other physical objects. A saw can cut wood because it is sharp and flat and has a handle. A knob can open a door because it is connected to a latch.
However, in the digital world, an object does what it can do because a programmer imbued it with the power to do something. We can discover a great deal about how a saw or a knob works by physical inspection, and we can’t easily be fooled by what we see. On a computer screen, though, we can see a raised, three-dimensional rectangle that clearly wants to be pushed like a button, but this doesn’t necessarily mean that it should be pushed. It could, literally, do almost anything. We can be fooled because there is no natural connection — as there is in the real world —
between what we see on the screen and what lies behind it. In other words, we may not know how to work a saw, and we may even be frustrated by our inability to manipulate it effectively, but we will never be fooled by it. It makes no representations that it doesn’t manifestly live up to. On computer screens, canards and false impressions are very easy to create.
18_084113 ch13.qxp 4/3/07 6:06 PM Page 285
Chapter 13: Metaphors, Idioms, and Affordances
285
When we render a button on the screen, we are making a contract with the user that that button will visually change when she pushes it: It will appear to be depressed when the mouse button is clicked over it. Further, the contract states that the button will perform some reasonable work that is accurately described by its legend. This may sound obvious, but it is frankly astonishing how many programs offer bait-and-switch manual affordances. This is relatively rare for pushbuttons, but all too common for other controls, especially on many Web sites where the lack of affordances can make it difficult to differentiate between controls, content, and ornamentation. Make sure that your program delivers on the expectations it sets via the use of manual affordances.
18_084113 ch13.qxp 4/3/07 6:06 PM Page 286
19_084113 ch14.qxp 4/3/07 6:07 PM Page 287
14
Visual Interface Design
Regardless of how much effort you put into understanding your product’s users and crafting behaviors that help them achieve their goals, these efforts will fall short unless significant work is also dedicated to clearly communicating these behaviors to users in an appropriate manner. With interactive products, this communication commonly happens visually, through a display (although in some cases you must communicate product behavior through physical properties such as the shape or feel of a hardware button).
Visual interface design is a frequently misunderstood discipline, largely because of its similarities to visual art and graphic design. It is also commonly mischaracter-ized as “skinning” the interface; we’ve even heard people refer to it as “hitting the product with the pretty stick.”
In our practice, we’ve come to recognize that visual interface design is a critical and unique discipline, and it must be conducted in concert with interaction design and industrial design. It has great power to influence the effectiveness and appeal of a product, but for this potential to be fully realized, visual design must not be an afterthought (i.e., “putting lipstick on a pig”), but should be thought of as an essential tool for satisfying user and business needs.
Visual interface design requires several related skills, depending on the product in question. To create an effective and engaging user interface, a designer must
19_084113 ch14.qxp 4/3/07 6:07 PM Page 288
288
Part II: Designing Behavior and Form
have a command of the basic visual properties — color, typography, form, and composition — and must know how they can be used to effectively convey behavior and information and create a mood or visceral response. Interface designers also need a fundamental understanding of the interaction principles and interface idioms that shape the behavior of the product.
In this chapter, we’ll talk about effective visual interface design strategies. In Part III, we will provide more detail about specific interaction and interface idioms and principles.
Art, Visual Interface Design, and
Other Design Disciplines
Practitioners of fine art and practitioners of visual design share a visual medium.
However, while both must be skilled and knowledgeable about that medium, their work serves different ends. The goal of the artist is to produce an observable artifact that provokes an aesthetic response. Art is a means of self-expression on topics of emotional or intellectual concern to the artist and, sometimes, to society at large.
Few constraints are imposed on the artist; and the more singular and unique the product of the artist’s exertions, the more highly it is valued.
Designers, on the other hand, create artifacts for people other than themselves.
Whereas the concern of contemporary artists is primarily self-expression, visual designers are concerned with clear communication. As Kevin Mullet and Darrell Sano note in their excellent book Designing Visual Interfaces, “design is concerned with finding the representation best suited to the communication of some specific information.” Visual interface designers are concerned with finding representations best suited to communicating the specific behavior of the interactive product that they are designing. In keeping with a Goal-Directed approach, they should endeavor to present behavior and information in such a way that it is understandable and useful, and supports the branding objectives of the organization as well as the experience goals of the personas.
To be clear, the design of user interfaces should not entirely exclude aesthetic concerns, but rather should place such concerns within a functional framework. While there is always some subjective judgment involved in visual communication, we endeavor to minimize questions of taste. We’ve found that clear articulation of user experience goals and business objectives is invaluable even when it comes to designing the aspects of a visual interface that support brand identity, user experience, and visceral response. (See Chapter 5 for more about visceral processing.)
19_084113 ch14.qxp 4/3/07 6:07 PM Page 289
Chapter 14: Visual Interface Design
289
Graphic design and user interfaces
Graphic design is a discipline that has, until the last 20 years or so, been dominated by the medium of printed ink, as applied to packaging, advertising, and environmental and document design. Traditional graphic designers are not always accustomed to dealing with the demands of pixel-based output. However, a new breed of graphic designer has been tr
ained in digital or “new” media and is more comfortable applying the concepts of traditional graphic design to the new medium.
While graphic designers typically have a strong understanding of visual principles, they usually lack an adequate understanding of the key concepts surrounding software interaction and behavior . Talented, digitally fluent graphic designers excel at providing the sort of rich, aesthetically pleasing, and exciting interfaces we see in Windows Vista, Mac OS X, and the more visually sophisticated computer-game interfaces and consumer-oriented applications. They can create beautiful and appropriate surfaces for the interface which establish a mood or connection to a corporate brand. For them, design is first about the tone, style, and framework that communicate a brand experience, then about legibility and readability of information, and finally (if at all) about communicating behavior through affordances (see Chapter 13).
Visual interface designers share some skills with new-media-oriented graphic designers, but they must possess a deeper understanding and appreciation of the role of behavior. Much of their work emphasizes the organizational aspects of the design and the way in which visual cues and affordances communicate behavior to users. They focus on how to match the visual structure of the interface to the logical structure of both the users’ mental models and the program’s behaviors. Visual interface designers are also concerned with the communication of program states to users (i.e., read-only vs. editable) and with cognitive issues surrounding user perception of functions (layout, visual hierarchy, figure-ground issues, and so on).
Visual information design
Visual information designers are concerned with the visualization of data, content, and navigation rather than interactive functions. Their skill set is particularly important in visual interface design, especially as it relates to data-intensive applications and some Web sites, where content outweighs function. The primary focus of information design tends to be on presenting data in a way that promotes proper understanding. This is largely accomplished by controlling the information hierarchy through the use of visual properties such as color, shape, position, and scale.
Alan Cooper, Robert Reinmann, David Cronin - About Face 3- The Essentials of Interaction Design (pdf) Page 40
