What Is The Most Underrated Word In Web Design?

Advertisement

An “affordance” is a perceived signal or clue that an object may be used to perform a particular action. A chair sits at around knee height and appears to provide support. It affords sitting. A toothbrush has a handle a little longer than the human palm. It affords gripping.

All of the objects that surround us have affordances: some are explicit (the “Push” sign above a door handle), and others are hidden (a chair could be used to break a window or used as a weapon). The term was first coined by psychologist James G. Gibson, then introduced to human-computer interaction by Donald Norman in his book The Psychology of Everyday Things1, required reading for budding industrial and product designers everywhere.

Interface designers use affordances all the time. They have to. Unlike physical objects — which often have affordances based on their size, shape and weight — web and mobile interfaces must gain all of their affordance through design. For most designers, this is intuitive and instinctive, based on the thousands of design patterns we see every day. But have you ever thought about the qualities that make an object afford clicking, sliding, pulling or pushing?

By deeply understanding how affordance works, you’ll better master interface or product design. You’ll be able to use affordance as a tool to make your designs easier to use and encourage users to undertake the actions you want, like signing up for a product, generating content or connecting with another user. Better affordance can have a dramatic impact on conversion rates, registration rates and the user actions that matter most to the website, app or product you’re designing for. This is why “affordance” is the most underrated word in web design.

Can you count the number of actions a user can take on Tumblr2’s home page?

tumblr-500px-opt3

Though it appears to be a very simple screen, you might surprised that eleven actions are possible on Tumblr’s home page:

  1. input an email address,
  2. input a password,
  3. click the question mark icon (which leads to a password-recovery screen),
  4. click the “Log in” button,
  5. click the “Sign up” link,
  6. click the “Terms” link,
  7. click the “Privacy” link,
  8. click the “Posted by blvcktrip” link,
  9. click blvcktrip’s avatar image.
  10. click the ‘Search Tumblr’ input field
  11. hit enter to search for the inputted term

If you were able to guess any of these actions, you did so by recognizing affordance, which is the way that an interface “affords” its capabilities to the user. All you had to work with was a flat screenshot of Tumblr’s page. By recognizing patterns and explicit affordances, you were able to survey the capabilities of the interface.

Not all affordances are equal, and some are stronger than others. Understanding the types of affordances one can use in an interface is important. Affordances are generally categorized into one of the following types: explicit, pattern, metaphorical, hidden, false and negative. We’ll delve into each of these categories for the rest of this article.

Explicit Affordance

Explicit affordance is signaled by language or an object’s physical appearance. Text that reads “Click here” explicitly affords clicking. A button that appears raised from the surrounding surface seems tactile and affords pushing. A door handle with the word “Push” above it affords pushing. An input field that reads “Write a comment” explicitly affords a comment being written.

These affordances are explicit because any human being could guess at how to interact with the element, even if they have never been exposed to the interface before. These affordances do not rely on patterns. An object that looks pushable invites pushing, whether on screen or off. A link that says “Click here” invites clicking even if the user has never seen a link before. As long as the user knows how to click or push, the affordance will be discoverable.

paypal-opt
This UI element on PayPal is a good example of explicit affordance. The raised appearance of the button affords pushing down. The text explicitly signals the result of the action.
video-opt
This video on Copyblogger4’s website uses explicit affordance with its “Click to play the video” instruction.

Explicit affordance is especially important in the following cases:

  1. When an interface’s users are unlikely to have been exposed to many affordance patterns in the past
    This occurs most commonly with users who are not tech-savvy or who do not regularly interact with web or mobile interfaces. These users are less likely to recognize affordance through design patterns. This might also hold true with unique or innovative interfaces. The first mobile apps made heavy use of explicit affordance for actions like tapping or swiping.
  2. When no patterns have been established to signal the affordance of an action
    It might be unclear how to visually communicate that an object in a mobile interface affords pinching inwards to close and outwards to expand. In this case, the designer would probably use explicit affordance (i.e. by adding “Pinch to expand” text to the object).

Whether to use explicit affordance depends on the context. Being too explicit can introduce redundancy into a design. If every link reads “Click here,” the page will become monotonous. Consider how likely your audience would understand the affordance of an object without explicit instruction. For example, users of an app for tech startup founders have probably seen an input field before. They might feel patronized if the interface instructs them to “Click to enter an email address.”

Pattern Affordance

This is the most common type of affordance in modern interface design. For example, we implicitly understand that words not part of a sentence and located outside the main area of content on the page are usually links that afford clicking. We recognize that a strip across the top of the screen containing disjointed words is usually a navigation bar and that the words afford navigation. We recognize that a single word or phrase on a button-like background is usually a clickable button that performs an action. We guess that a word or phrase with a downwards arrow beside it usually expands into a drop-down menu.

A pattern metaphor is an established metaphor for communicating a particular set of affordances. For example, email is often represented by an envelope icon (even though sending an email has never involved physical envelopes). This metaphor is effective because it is an established pattern. We will discuss this in more detail in the section on metaphorical affordance.

Pattern affordance is elegant in that it allows a complex interface to quickly signal many affordances to the user. As we interact with a greater variety of websites and apps, we become better at quickly parsing the myriad of affordances available on a given screen.

Here’s my list of the pattern affordances on Envato Studio’s home page:

Element Affordance type Affords
Navigation bar Pattern Navigating the website
Links Pattern Clicking
Logo Pattern Returning to home page
Link in top-right corner Pattern Managing account
“Categories” drop-down Pattern Accessing more options
Magnifying glass icon Pattern metaphor Searching
Content modules Pattern Clicking modules
envat_studio-500px-opt5
The home page of Envato Studio6, a freelance services marketplace, is full of pattern affordances. Can you list them all? (View large version7)

To understand a design’s reliance on pattern affordances, ask yourself, if you had never interacted with the web or a smartphone before but you knew how to perform basic actions like clicking and tapping, would you understand the actions afforded to you by this interface?

Patterns provide us with wonderful shortcuts to easily communicate affordances. Remember that they rely on the wealth of time already spent interacting with apps, websites and other interfaces. When you’re designing for a tech-savvy audience, pattern affordance will make up the bulk of your design. When designing for an audience that might not have this wealth of experience with interfaces (such as children, the elderly and people in areas where Internet access is minimal), then you’ll want to rely less on pattern affordance.

Hidden Affordance

A subtler form, hidden affordance becomes apparent only once a certain condition has been met — for example, link text that affords clicking only when it has been moused over (and responds by changing color). On an iOS device, each screen of app icons affords being swiped only when you have tapped and dragged on the home screen. On Pinterest98, a pinned item affords favoriting only when it is hovered over. By default, an element’s affordance isn’t revealed until the user has taken some action to activate a hint.

pinterest-unrevealed-opt
The affordances of images on Pinterest98 are hidden by default and revealed only on hover.
pinterest-revealed-opt
Once you hover over an item, three new actions for that item are revealed.

Hidden affordance is commonly used in complex interfaces where making every single affordance immediately apparent would clutter the interface or confuse the hierarchy of available actions. Hidden affordance can be cleverly used to de-emphasize less important actions. It’s great when a capability is rarely necessary (for example, reporting an image as being inappropriate).

The risk is that a user might not intuitively know how to reveal the affordance.

Lastly, never use hidden affordance for vital actions. Instead, reduce clutter around vital actions by fading less essential actions into the background.

When considering whether to use hidden affordance, ask yourself, could a user happily use this interface without ever knowing about this action? If the answer is yes, then hidden affordance would be suitable for this action.

For example, enabling users to “like” an item in a gallery by hovering over it is acceptable. A user could happily visit the gallery every day without feeling the urge to like it. But granting access to the gallery’s images only by hovering over a certain part of the website would be a barrier for many people.

An iPhone application that relies heavily on hidden affordance is Clear10, a to-do app. Yet, it has been lauded for its design11.

flat-design-clear-opt

Is it beautiful? Yes. Yet, it relies mainly on hidden affordance. When you pull a list of items down, the top of the screen folds down, instructing you to “Pull to create an item.” Unlocking these instructions requires experimentation. Swiping left deletes an item, while swiping right marks it as complete. Pinching two list items apart creates a new item between them. Pinching inwards closes a list.

These hidden affordances don’t mean that Clear has a poor user experience. Upon first opening the app, you can scroll through a tutorial on some of its capabilities. In case you forget the instructions from the tutorial, the to-do items look like physical panels that invite experimentation. You’d understand that a to-do app probably allows for items to be added, deleted or marked as complete. The panels look like they can be manipulated. By sticking it through the initial learning curve, the user is rewarded with the ability to comfortably use and interact with a clean, minimal interface.

The design philosophy embodied in Clear isn’t appropriate to all interfaces, however. The steeper the learning curve, the greater the rate of drop-off among users. Clear costs money to buy, and so the user has a reason to invest time in learning the interface. Consider the other end of the spectrum: a user who has found themselves on the landing page for your product. They have no reason to spend time searching for hidden affordances. In fact, if the available actions aren’t immediately clear, they will most likely go somewhere else.

Hidden affordance is suitable only when the user has some buy-in. The less buy-in they have, the more explicit your affordances must be in order to quickly direct them to the actions you want them to undertake.

Metaphorical Affordance

Sometimes the easiest way to communicate affordance is by using a real-world object as a metaphor. Most interface icons, for example, rely on such metaphors to communicate affordance. An envelope icon affords sending an email. A house icon affords going “home.” A handset icon affords making a phone call. A printer icon affords printing the document. A chain icon affords creating a link.

cloud-opt

Some metaphors are contextual. A magnifying glass icon in a document-viewing app most likely affords zooming. However, a magnifying glass icon next to an input field on a website most likely affords searching.

By using metaphors drawn from real-world objects, we can communicate affordance much more quickly for complex tasks than we could using explicit affordance. For example, if you had to include a button in your interface that allows users to make a phone call but you couldn’t use a phone icon or use the text “Make a phone call,” how would you communicate this affordance?

Because real-world metaphors for affordance are so powerful, choosing the best metaphor for the job is important. Consider the iPhone app Ness1312 (recently acquired by OpenTable):

ness-opt
Icons in the UI of the Ness1312 mobile app

Do you think the icons above need descriptive labels? If they were taken away, would you understand that the car icon affords sharing directions? If you weren’t driving to the location or you wanted to share directions with someone on public transportation, you’d have to think about this for a second. A more common pattern metaphor in this case would be a map marker.

Pattern Metaphor

A pattern metaphor is an established metaphor for communicating a particular set of affordances. For example, most designers now use an old-school handset to signal the affordance of making a phone call. Most use an envelope icon to signal the affordance of sending an email. Most use a heart icon to signal the affordance of favoriting something. The designer can break a pattern if they believe a better metaphor exists, but remember that your users will also have learned the established pattern. Consider the rich set of affordances communicated by a single heart icon:

  • “Clicking this will ‘favorite’ an item.”
  • “This allows me to save an item I like.”
  • “I will probably be able to access a collection of my favorites somewhere in my account area.”
  • “The user who added this item might be notified that it has been favorited.”
  • “This is a positive gesture towards the item.”

A heart is usually understood to be a symbol of love or fondness. By consistently being used to communicate the same set of affordances associated with favoriting, it has begun to communicate these affordances in interface design.

Also, think carefully before changing the style of an established pattern metaphor. Look at Tumblr’s WYSIWYG editor. Can you identify the icons to create a link and remove a link?

pattern_metaphor-opt

The established pattern metaphor for a link is two or three links in a chain, joined together — nowhere to be found in this interface. The closest match is the icon fourth from the left, which looks kind of like a tilted infinity symbol. Next to it sits a tilted infinity symbol with a strikethrough. Are these icons stylistically more beautiful than a linked chain? Probably. Is an extra ounce of mental effort required to understand the affordances they communicate? I think so. Is it worth it? I’m not sure. The new icon looks very much like an infinity symbol. While one could argue that a web link connects people to the infinity that is the Internet, a link in a chain is a much less abstract metaphor.

False Affordance

A false affordance seems to afford a particular capability but actually affords a different capability or none at all. For example:

  • an element that looks like it can be pushed or clicked because it is raised from its surroundings, but can’t be;
  • a logo image that does not return users to the root of the domain;
  • a word that displays the pattern affordances of a link (colored and underlined) but isn’t a link;
  • a green button (a pattern to signify the affordance of creating something) actually deletes data;
  • a grayed-out word, which seems to afford no action, is actually a link;
  • an envelope icon, which seems to afford sending an email, actually sends a text message.
green_delete-opt
A green “Delete” or “Close” button on Icon Finder14

An interface design pattern is that green buttons afford saving or creating data. By using a green button to trigger a destructive action, users might accidentally delete data when they mean to save it.

dribbble-opt
What affordances do you see in this UI element on Dribbble15?

It might surprise you that every single element in Dribbble’s UI element above, except for the view count, can be clicked to perform an action. This is because the elements don’t signal their affordance for clicking. They are gray against a gray background, not underlined, and unbolded. They falsely signify a lack of affordance, when in fact they have a rich set of capabilities (viewing who has liked the item, viewing the buckets that the item is in, downloading the color scheme).

Though the subtlety of these UI elements yield more attention to the rest of the design, the designer must consider whether the trade-off is worth it. For example, if the “Share” link was bolded and more clearly afforded clicking, would Dribbble items be shared more often?

A simple rule: If you really want people to do something, add more signals of affordance.

Negative Affordance

Sometimes it’s necessary to signal that a UI element does not afford any capabilities at the moment. Most commonly, this is achieved by graying out the element. Take the input field in Rdio16’s app.

password-opt

The password-input field is grayed out because it does not currently afford clicking or inputting data. To unlock these affordances, you have to hit the “Change” button.

you_are-opt

In this UI element, the “Save changes” button is grayed out because we haven’t made any changes yet; therefore, we can’t save them. The style signals that the button does not currently afford any capabilities.

The grayed-out button in the (otherwise beautiful) design below explicitly affords clicking with its instructions to “Visit our list of design services.” But the way that the button is styled follows patterns of negative affordance (flat, gray, faded into the background). Because grayed-out buttons so commonly signify a lack of affordance, users might not realize it can be clicked.

negative_affordance-opt

Gray is also sometimes used to signify that a word or phrase that is usually a link, isn’t. In Google.com’s UI shown below, it looks like my email address cannot be clicked. Yet, clicking it somewhat surprisingly opens a drop-down menu with account options.

negative_2-opt

Smart use of negative affordance can help your users more quickly home in on the parts of the interface that bear useful capabilities.

An Affordance Review: iOS 7’s Weather App

iOS 7’s default Weather app has a variety of affordances. Of the six types, which ones does it have and which are missing?

  • explicit
  • pattern
  • metaphorical
  • hidden
  • false
  • negative

Let’s examine each of these.

ios_weather-opt

Explicit Affordance

This app’s primary interface has no explicit affordances, no elements that look particularly clickable, no verbal instructions on how to interact with the interface. Besides the navigation elements at the bottom of the screen, the app’s interface looks like a flat display of data. Even the navigation elements at the bottom rely on patterns.

Pattern Affordance

I can identify two pattern affordances in Weather’s interface, both located at the bottom of the screen.

weather_detail-opt

The dots in a row at the bottom are an iOS design pattern to signify the number of screens to swipe through. The highlighted dot represents your current position in the chain. This pattern is also used at the bottom of the iOS home screen when multiple screens of app icons are available.

The Yahoo logomark is another example of pattern affordance. A person who uses web interfaces regularly would know that clicking on a logo will usually take them to a page about that business or organization (usually the home page). In this case, it takes us to some Yahoo search results.

Metaphorical Affordance

While a few metaphors are used in this app, only one is an affordance. The weather icons are all metaphors. The icon of the sun peeking out from behind a cloud doesn’t mean that there will be one cloud with the sun behind it; it means the weather will be sunny and cloudy. A sun icon doesn’t represent the sun, but is a metaphor for sunny and clear weather. Yet, tapping on these icons does not afford any capability. They are purely informational.

The only affordance metaphor in this interface is in the bottom-right corner. The icon looks like it represents a list or menu of items. Tapping it opens a menu of weather locations, allowing you to add and remove items. The icon uses a visual metaphor to describe its affordance.

Hidden Affordance

Two hidden affordances are on this screen. The temperature is reported hourly, but only within a six-hour window. The small slice of data hints that more might be available. If we swipe the hourly temperatures to the left, more hours slide into view from the right, enabling us to review all available hourly temperatures in the small screen space.

The interface gives no clue of this, but tapping the top of the screen replaces the temperature with several detailed readings of humidity, wind speed, chance of rain and the “feels like” temperature. I frequently use the Weather app, but I discovered this only after tapping all over the screen, looking for any hidden affordances for this article.

I suspect that a large proportion of the app’s users have never discovered this functionality. In this case, it is questionable whether this hidden affordance is good design. Adding affordance to the top of the screen would have been better — for example, by making the temperature appear raised to afford clicking, by underlining the weather reading, by adding an icon, or by displaying the details to the left and right of the temperature and city name.

weather_white-opt

False Affordance

This app does not have a problem with false affordances. A user might try tapping on other days of the week to see if they bring up a detailed view, but a detailed view is available only for the current day. A user might also try tapping on today’s low, thinking it might switch to a view of all lows, rather than highs. But the interface does not have strongly misleading cues that suggest this functionality.

Negative Affordance

The app does not make strong use of negative affordance. The bolded “Monday,” accompanied by the thinner, fainter “Today,” suggests that Monday is higher in the hierarchy and that “Today” is informational. Tapping either switches to a detailed view at the top of the screen (as does tapping any part of the top of the screen).

Summary Of Affordances

Type Pros Cons Use case
Explicit Unambiguous; low risk of user missing the affordance Messier interface; might seem patronizing to some users Low-tech audience; to explain unintuitive affordances
Pattern Communicates affordance quickly and cleanly Relies on previous experience with similar interfaces When patterns are firmly established; when audience is tech-savvy
Hidden Clean interface Capabilities might not be discovered Inessential capabilities; when user has enough buy-in to experiment
Metaphorical Easiest way to communicate complex affordances Metaphors mean different things to different people When affordances are too complex to explain without metaphors
False None Wastes the user’s time by suggesting affordances that aren’t there Avoid false affordance
Negative Helps prevent frustration by signalling that an element has no affordance If an element has no affordance, it might not be necessary When supporting information and elements are necessary but do not have capabilities

Conclusion

You’ve most likely designed interfaces with many of these types of affordance, perhaps without realizing it. Recognition of affordance, for both users and interface designers, is usually instinctual.

By using affordance deliberately, we can help users understand our interfaces more quickly and subtly encourage them to take one action over another.

By understanding affordance, we could evaluate the interface below and quickly see that it is imperative to the founders of Dunked.com that users “Get Started” without delay. You can use affordance to add a similar hierarchy of actions to your own designs.

dunked-500px-opt
17

For these reasons, the most underrated word in web design is “affordance.”

(al, il)

Footnotes

  1. 1 http://www.amazon.com/The-Psychology-Of-Everyday-Things/dp/0465067093
  2. 2 https://www.tumblr.com/
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2014/06/tumblr-opt.jpg
  4. 4 http://www.copyblogger.com/
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/06/envat_studio-opt.jpg
  6. 6 http://studio.envato.com/
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2014/06/envat_studio-opt.jpg
  8. 8 https://www.pinterest.com/
  9. 9 https://www.pinterest.com/
  10. 10 http://realmacsoftware.com/clear/
  11. 11 http://thenextweb.com/apps/2012/12/25/12-most-beautiful-mobile-apps-of-2012/
  12. 12 https://likeness.com/
  13. 13 https://likeness.com/
  14. 14 https://www.iconfinder.com/icons/14751/button_delete_green_icon
  15. 15 https://dribbble.com/
  16. 16 http://www.rdio.com/
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2014/06/dunked-opt.jpg

↑ Back to topShare on Twitter

Natasha writes words and software in her spare time, and works as the Brand Manager at Envato.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    There. You just took the definition of a signifyer and forever solidified it in history as the incorrect term of accordance. The affordance of a touch screen is to touch it, drag on it, tap it. The signifyers tell you where and how. Thanks for ruining science.

    • 2

      Exactly what he said.
      Donald Norman mentions it in his book and explicitly outlines the differences.

    • 3

      Harsh bobanon! But accurate.

      For those interested, Norman wrote about the confusion between signifiers and affordance in an issue of Interactions; the article is available on his personal website @ http://jnd.org/dn.mss/signifiers_not_affordances.html

      • 4

        bobanon’s message is harsh and while not incorrect doesn’t help the situation and he is certainly not helping “science” with his message.

        As Jeff said Norman wrote about this and he does direct some comments directly at designers misusing the term.

        He states “The perceivable part of an affordance is a signifier, and if deliberately placed by a designer, it is a social signifier.”

        Instead of being negative try promoting and helping understanding along.

    • 5

      And the affordance of a door is to touch it and apply pressure?

      The affordance of a “mute” button is to prevent audio from coming out of the speaker, not “to tap glass”.
      If you think of computer-system based affordance as “I can touch the screen or click when an arrow is pointing over something”, then what’s the point of building features into a system, when the consumer’s only perception of doing anything is “I have the right to touch glass”, regardless of whether or not the glass (or capacitors/cameras nearby will allow a visual response to that touch).

      The affordance of a system is the perceived (or not), expected (or not) behaviour of that system, as alluded to by signifiers (explicit, inferred, or the lack thereof), not “the socially-understood contract of the mute-button is that I can tap glass/a TFT mesh”.

      What’s the point of a system where all functionality boils down to “I can tap it”, regardless of what all of the buttons, prompts, sounds and other queues say you should be able to do?

  2. 6

    Great article. Not to be picky, but if I am not mistaken there are 11 actions you can take on the tumblr page: you can also enter a search term and you can submit the search term.

  3. 9

    I think you missed an action on the Tumblr example. You can also “Search Tumblr”, using that pretty obvious form at the top right. +1 for getting all the small details, -1 for missing a pretty big detail.

  4. 10

    I don’t know why, but I get the feeling that if this had been a male author, there wouldn’t be so much ego-centric better-than-thou scrutinizing going on here.

    Natasha, it was an excellent article. I absolutely love the intricacies of the Human/Computer Interaction model. It’s really amazing when you delve down into the psycho-analytical aspects of how we perceive and utilize our interfaces. Design plays a major part in this. Before I’ve read into it, I knew THAT my eyes would be drawn to large areas of highest contrast in a composite, but not WHY. Exploring the why has been an amazing journey for me. It’s true that design acts as a great guideline, but not a ruleset.

    If I may also recommend a book, 100 Things Every Designer Needs to Know About People by Susan Weinschenk. It is a short, summary-based read on the how’s and why’s of major aspects of HCI. I just bought “Universal Principles of Design” and am enjoying the learning process, amazed by how many times I’ve said to myself, “You know, that’s true! I just never thought about it that way!”

    • 11

      Natasha Postolovski

      June 25, 2014 3:29 am

      Appreciate the kind words Aaron. Will check out the ‘100 Things’ book. Thanks!

    • 12

      You get the wrong feeling.

      I got the same “bs” vibe a few paragraphs in, far from the author’s name.

      “Because she’s a woman” is the new “is it cause I’m black?”

  5. 13

    What a great read! I just can’t wait to see more of the same :)

  6. 15

    All I can say is: “What a worthful article!!!”

  7. 16

    Great article!

  8. 18

    Thank you for this great article, Natasha. Writings like this really get me into design psychology.

  9. 19

    I like the article; a lot of the advice is sound.
    As has been pointed out, the semantics of the article are a little off, compared to the source material, but that still doesn’t really change the spirit of the message.

    As a developer who is much better with the elegance of system architecture, than with the flair of visual design (my head can only do one at a time, apparently), it’s important to remember the spirit of this particular message, as I build apps for clients.

    As one of those pedant software guys, I would argue that the concept of “affordance” is “authenticating”, “saving”, “favouriting”, “navigating”, “opening”, “downloading”.

    These are the verbs of your app; the “killer-features”, or just the “necessary features”. Every feature, or ability to change state, really.

    As a logged-in user, I am afforded different abilities on different pages.
    If I’m logged in, and there’s a post, I can like it.
    If I’m reading an e-book, I can save my spot, so I don’t have to start from scratch, the next time I open it.
    If my progress is being auto-saved, in the background, or if the app has been cached for offline browsing, later, or if web-workers are spun up to offer extra number-crunching and improve performance on the main thread, those are all affordances, whether they are perceivable or imperceptible, because an “affordance” was described as an ability of an agent to enact upon their environment; basically, “if X, then Y is possible”, whether you know it or not.

    The argument, then, is that “signifiers” are the visual /audio /tactile /written /”understood” cues, clues and ingrained behaviours which *allow* for the affordances to happen.

    If you see a post and you don’t see a button that signifies that you can up-vote, or “like” or “+1″, et cetera, then it’s an implicit (“accidental”, though I’d prefer “incidental” or “inferential”) signifier that you are not granted the affordance to “like”, in this exact environment, as you, in your exact state (does the app support likes? does it support likes if I’m logged in? can only certain people like? are likes available on other kinds of content in this app, but not this type of content?… These would be questions of affordance and not of the cues, explicit or otherwise, that such an affordance is available).

    It’s no wonder, then, that “forget affordance” is a plea to designers; affordance is a question of an app’s ability to empower or appease a user, both through feature-design and the architecture to support it (XHR+localStorage+Canvas+WebRTC+etc…), while signifiers are ways of simply and elegantly enabling the user to find and use those affordances.

    But regardless of the distinction between the abstract “submit comment”, which enacts a [POST http://smashingmagazine.com/…/comments {my comment}], and a tangible button “Submit Comment”, which sets the wheels in motion, this article, while really about signifiers, is great to have, simply because it’s something that people like myself rarely think about, as they’re hammering out apps full of pages and pages full of widgets and widgets full of context, tied to services full of content.

    Someone has to remind people like me that context and content aren’t enough, and that they also need symbols and interaction paradigms which lead the user, without ever overwhelming the user with either too many interactions to access content, or too much content, per interaction.

  10. 20

    Great article, good reading, never really thought about these things before… but have secretively always used them!

  11. 21

    John Richardson

    July 4, 2014 3:10 pm

    A new word to add to my dictionary. Great concept!

  12. 22

    Worthy reading, thanks Natasha.

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top