DesignAday

Design Vocabulary: Affordance

An affordance is a quality of an object or environment that allows one to perform an action. For example, in the physical world, a light switch affords flicking in two possible directions, but only one based on its current state.

Affordance is a term that quite a lot has been written about. Both Wikipedia and Interaction-Design.org have thorough explanations of its origins and tell the history of its adoption by HCI and design. In brief, the psychologist James J. Gibson published The Theory of Affordances in 1977, which he further explored in his book The Ecological Approach to Visual Perception in 1979. His wife, Eleanor J. Gibson, continued studying affordances in her own book, An Ecological Approach to Perceptual Learning in Development.

Don Norman introduced the term to the field of Interaction Design in his book, The Design of Everyday Things. In the process, he inadvertently broadened the meaning by not making a clear enough distinction between real and perceived affordances. He later corrected this in an article titled Affordances and Design.

I should have used the term “perceived affordance,” for in design, we care much more about what the user perceives than what is actually true. What the designer cares about is whether the user perceives that some action is possible (or in the case of perceived non-affordances, not possible).

The correction came too late, however, and we now use the term loosely as a suggestion or invitation. For example, we might say that the hover highlighting on a button affords clicking. Technically, that is incorrect usage. The highlight indicates that the button is clickable, sure enough, but we understand that due to past experience. It is a perceived affordance.

In 1991, Bill Gaver’s paper, Technology Affordances, appeared in the Proceedings of CHI. Therein, he described false affordances: perceived affordances that do not have any real function, leading the actor to believe that an action is possible when it is not. For example, if I were to style a word in this sentence blue with an underline, you would expect that clicking on it would open another web page.

For further reading on the subject, besides the links above, I recommend Joel Spolsky’s Affordances and Metaphors, which has several illustrated examples, and Dan Lockton’s post, Un-hiding an affordance, on Design with Intent.

Design Vocabulary: Combo Box

A combo box is a graphical user interface widget that combines a text field with a drop-down list. It allows the user to select an option from the list or type in their own. It is common to hear people refer to a drop-down list as a combo box, but this is technically incorrect. Unfortunately, the combo box is not one of the standard web browser form widgets, so designers have developed a number of patterns to replicate its functionality.

• It is possible to overlap a drop-down list with a text field so that it looks like a combo-box and then use JavaScript to enter selections from the menu into the field.
• A graphic can be placed to the right of a field, visually mimicking a combo box. In this case, clicking the graphic will cause a previously hidden div to be displayed under the field, resembling a drop-down list, and clicking text within the div will enter it into the field.
• Rather than mimicking a combo box, a drop-down list and field can be used in concert by including an “other” option in the list. When “other” is selected, the field is displayed or enabled.

Combo boxes are often enhanced with dynamic behaviors, such as auto-complete or the ability to learn custom entries and include them in the list.

Mind Your Ps and Qs

I had Christmas music playing this afternoon, and my elder daughter heard the following line from an old song titled Santa Claus Blues by Jimmy Boyd and Mitch Miller:

…be sure to mind your Ps and Qs, or wake up Christmas morning with the Santa Claus blues.

She asked me what your Ps and Qs are, and I was more than happy to enlighten her. It gave me the opportunity to explain how books, magazines, and advertisements used to be printed on a machine called a letter press by lining up little blocks of metal with letters on them. I described how the letters had to be backwards on the blocks so they would come out correctly on the page. Then I told her to think about the lowercase p and q, and she quickly realized how confusing it could be to remember that they are reversed when looking at the little pieces of metal.

She later had the opportunity to repeat what she had learned to her mother, who didn’t know the origin of the phrase either. I was so proud that she even remembered that the descenders of the letters are referred to as “stems.” It further led to a more detailed discussion about what exactly I do at work. I love seeing those wheels turn!

Note: There is no proof that this is the correct origin of the phrase, and other possible origins have been suggested, but I believe this one to be the most likely.

Design Vocabulary: Learnability

Having written about both Discoverability and Findability, I feel obligated to address Learnability as the next vocabulary term.

Learnability is not a term specific to Interaction Design. Dictionaries will provide definitions such as “the condition of being learnable” and “the ease with which something can be learned.” That’s clear enough, but the term does have more specific meaning when used in the context of Interaction Design. Here’s a definition from Usability First’s glossary:

a measure of the degree to which a user interface can be learned quickly and effectively. Learning time is the typical measure. User interfaces are typically easier to learn when they are designed to be easy to use based on core psychological properties, and when they are familiar. Familiarity may come from the fact that it follows standards or that the design follows a metaphor from people’s real world experience.

Tristan Louis breaks learnability down into five components:

1. familiarity
2. consistency
3. generalizability
4. predictability
5. simplicity

While I would consider learnability to be a component of usability, it is often discussed in contrast to usability. For example, Jeff Atwood’s article, Usability vs. Learnability, quotes a passage from Joel Spolsky’s book, User Interface Design for Programmers:

It takes several weeks to learn how to drive a car. For the first few hours behind the wheel, the average teenager will swerve around like crazy. They will pitch, weave, lurch, and sway. If the car has a stick shift they will stall the engine in the middle of busy intersections in a truly terrifying fashion.

If you did a usability test of cars, you would be forced to conclude that they are simply unusable.

This is a crucial distinction. When you sit somebody down in a typical usability test, you’re really testing how learnable your interface is, not how usable it is. Learnability is important, but it’s not everything. Learnable user interfaces may be extremely cumbersome to experienced users. If you make people walk through a fifteen-step wizard to print, people will be pleased the first time, less pleased the second time, and downright ornery by the fifth time they go through your rigamarole.

Sometimes all you care about is learnability: for example, if you expect to have only occasional users. An information kiosk at a tourist attraction is a good example; almost everybody who uses your interface will use it exactly once, so learnability is much more important than usability. But if you’re creating a word processor for professional writers, well, now usability is more important.

Now, I get what Joel is saying here, but I don’t believe he has his terminology quite right. I think he is using learnability where he should be using intuitiveness, and that may just have to be my next Design Vocabulary entry. If you sit somebody down in front of a UI for the first time, you will be testing how intuitive it is to use. If you want to test for learnability, I suggest that the test must be repeated over a number of sessions. Michael Wilson corroborates this claim in his informative article on the subject, When is Learnability More Important than Usability? That said, intuitiveness could really be considered as the ultimate achievement of learnability: the shortest possible learning time.

Michael also lists the factors that will most likely result in a user spending the time required to learn a given user interface:

1. Importance
2. Frequency
3. Cost
4. Alternatives
5. Simplicity

All of these cited articles are useful in understanding learnability, but Justin Mifsud has the most complete perspective. In The Difference (And Relationship) Between Usability And Learnability, he explains that many writers “tend to over-emphasize on highlighting the distinction, yet they fail to discuss the relationship that exists between usability and learnability.” He goes on to site definitions put forth by IEEE and ISO, which classify learnability as a sub-characteristic of usability, on par with understandability, operability, and attractiveness, as well as Jakob Nielsen and Ben Schneiderman’s classification, which lists learnability as one of five parameters that define usability, its siblings being efficiency, memorability, errors, and satisfaction.

Design Vocabulary: Discoverability

Unlike the word findability, which I covered last week, discoverability can be found in the dictionary as “The quality of being discoverable.” Also unlike findability, it doesn’t have its own Wikipedia entry, but instead is included as a section under usability. This section doesn’t really explain discoverability, asking questions that are more about learnability, which I’ll address another day. 

So if Wikipedia is no help, and the dictionary only states the obvious, where can we find a relevant definition of the word? I found a deck on SlideShare posted three years ago called Designing for Discoverability by Steve Mulder and Joanne McLernon of Molecular. Just as my discussion that touched off this series on design vocabulary, they define it in contrast to findability.

Findability = the quality of a known item to be locatable on a web site

Discoverability = the quality of a known or unknown item to be noticeable on a web page

They are drawing a distinct line here between the two. Findability is about searching for something within the scope of an entire site (or other body of content, like the entire web), while discoverability is about noticing something within the scope of a single page (or screen). They go on to list the components of discoverability:

• Position
• Context
• User Expectations & Conventions
• Design
• Text & Labeling

Design is further broken down into:

• Real Estate & Size
• Visual Miscommunication
• Color & Imagery
• Typography
• Animation

That all makes sense to me, but if we’re going to accept this dichotomy, we need more evidence of its general acceptance within the UX community. Scott Berkun, author and speaker, wrote an essay in August of 2003 titled The myth of discoverability, in which he begins by stating that “Discoverability is often defined as the ability for a user of a design to locate something that they need, in order to complete a certain task.” After dispelling the myth that a good user interface makes everything extremely discoverable, Scott goes on to explain how you decide what to make discoverable, the difference between discoverable and discovered, and how you make something discoverable. He has his own, quite similar list:

• Real Estate
• Order
• Expectation & Flow
• Consistency

More recently, in March of 2011, Suzanne Ginsburg, consultant and author, published an article in UX Magazine titled The Evolution of Discoverability. Her definition is near identical to Scott’s: “the ability for users to locate something they need to complete a certain task.” Suzanne takes an inventory of strategies for improving discoverability as found in iPad apps.

Given the evidence, I think Dan Saffer’s postulate is correct. Findability is regarding content, while discoverability is regarding functionality. 

Design Vocabulary: Findability

Findability is not a word you will find in a standard dictionary. It does, however, have a Wikipedia entry, where it is defined as “a term for the ease with which information contained on a website can be found, both from outside the website and by users already on the website.” Wikipedia gives credit for coining the term to Alkis Papadopoullos in his article, Findability: The Key to Enterprise Search, published in April of 2005. I don’t believe that is correct; read on.

Wikipedia goes on to say that the term was popularized by Peter Morville, who defined it as “the ability of users to identify an appropriate Web site and navigate the pages of the site to discover and retrieve relevant information resources.” In fact, a few months after Alkis’ article, Morville published the book Ambient Findability: What We Find Changes Who We Become. One would presume he had been writing the book for longer than five months. Peter maintains his own blog on the topic at findability.org, where he says, “Findability refers to the quality of being locatable or navigable. At the item level, we can evaluate to what degree a particular object is easy to discover or locate. At the system level, we can analyze how well a physical or digital environment supports navigation and retrieval.” It is also on his blog that I found a prominent link to his article, The Age of Findability, which is dated April 29th of 2002. In this article, Peter states that, “Findability isn’t limited to content. Nor is it limited to the Web. Findability is about designing systems that help people find what they need.”

What I’ve found in my research is that the common use of the word is in relation to searching for content. It is used heavily in discussions about Search Engine Optimization (SEO), writing for the web, and various content-searching user interface approaches. This is how Jakob Nielsen uses it in his article Use Old Words When Writing for Findability, and there are many related articles to be found on Boxes and Arrows. However, it is also used in reference to functionality of user interfaces that provide access to content, as is the case in the article Findability, Orphan of the Web Design Industry by Aarron Walter, available on A List Apart.

Design Vocabulary

I had a brief discussion over Twitter today with Dave Malouf triggered by a question tweeted by Dan Saffer:

“Is it safe to say FINDABILITY is regarding content, while DISCOVERABILITY is regarding functionality?”

I agreed with him, as long as visual design was being included as part of “functionality.” Dave, however, thought we were making an arbitrary distinction. The disagreement, as it turned out, was based on a contextual understanding of the use of these terms within Interaction Design and Information Architecture literature. I, and I assume Dan as well, based on his postulate, generally understand findability to be dependent on attributes of content, such as its structure, vocabulary, and metadata. These attributes make it easier or harder to find specific, desired information within a larger body. The term is most often used in relation to search and filtering of content. Discoverability, on the other hand, is more often used in reference to the discovery of functionality within a user interface. Dave did not have the same associated meanings with the terms, which rather surprised me, as I expect we have a fair amount of overlap in the design knowledge we’ve been exposed to.

This got me thinking about design vocabulary, especially in the context of the IxDn00b series I’ve started. There are a lot of terms, like findability, that didn’t used to be words, but were invented to allow us to more clearly discuss our domain. I’m going to begin a series here on DesignAday that will explore design vocabulary, from today’s technical jargon to our terminology from the origins of our trade. I think I’ll have fun doing the research, and I hope you will enjoy the fruit, and perhaps learn something.