Let’s get philosophical for a second. Pretend you’ve never seen a hammer before, but now there’s one in front of you. You see a hard metal part, with weird shapes, spikes, and knobs. Then you see a long wooden part, smooth, and a little bigger than the size of your hand. Which part would you grab when you pick it up? And what is a hammer for, anyways?
The hammer applies force to objects, but you only know that because of its signifiers. The hammer’s handle tells you that you can grab it. Its size, shape, and look are all subtle cues to its use, and even if you don’t know what a hammer is for, you can at least guess how to pick one up.
While affordances might not be a top priority for tool-makers, for interaction designers they are absolutely essential – otherwise users wouldn’t know what they can and cannot interact with.
Let Form Suggest Function: Affordances vs. Signifiers
Affordances are what a product can do. For instance, a website affords navigation. But how does the user know that function is possible? A perceived affordance is therefore how the user thinks the navigation might work, which of course must match the actual affordance.
The beauty of signifiers is that, when they’re used properly, the product feels intuitive and familiar, as if the user already knows what the feature is for. As Andrew Maier, co-founder of UX Booth, points out, the effectiveness of perceived affordances depends upon signifiers. A signifier can be anything that suggests meaning, whether a word, a shape, a color, or a movement.
Let’s look at an example from Behance. Their use of infinite scroll is one way to afford navigation. As you scroll downwards, a loading circle appears before more content loads, signifying that the content stream is dynamic. Without the signifier, you might be disoriented as to why a bunch of new content appeared (when it seemed as though the page was finished).
In this case, the subtle touch of a signifier provides a split-second interaction that results in an immediate understanding of the affordance.
If we look at the above screenshot from a higher level, you can also see other signifiers: the thumbs-up icon signals that liking content is possible, the arrow icon in the navigation signifies a dropdown, etc. None of these affect the functionality, but simply suggest that these interactions are possible.
Signifiers come in different types, each serving different purposes, and we can organize them into five groups:
- Explicit Signifiers – Obvious signifiers, such as words or appearances.
- Pattern Signifiers – Trends and customs that have been popularized to the point of common understanding.
- Hidden Signifiers – Signifiers that do not become apparent unless certain conditions are met.
- Metaphorical Signifiers – Using a metaphor to signify its meaning, for example, an envelope icon representing email.
- Negative Signifiers – Signifies something is unavailable or not working.
Knowing when and how to use these types of signifiers will provide a layered feel to your interaction design. Let’s go into detail for each.
Explicit Signifiers
The most obvious of the types, explicit signifiers include language or appearance to show function. Something as blatant as text reading “Click Here” would certainly belong in this category.
Explicit signifiers should only be used when necessary. Imagine how wordy (and annoying) your page would be if every link read “Click Here.”
In below the screenshot from Copyblogger below, the “click to play the video” instructions are an example of when an explicit signifier isn’t necessary (because the play symbol is so universally understood).
So what are the correct criteria for using explicit signifiers? Natasha Postolovski believes that it all depends on the context of use. Because they run the risk of making your product monotonous or even condescending, they should only be used in the following situations:
- Users are likely unfamiliar with common UI patterns – If your target users are not tech-savvy, or if your technology is new or uncommon, being explicit will remove some of the learning curve.
- No patterns exist for an action – If there’s no other way to explain an action, spell it out for your users. A good example would be a mobile app that requires a pull to refresh: it might be best to just say something like, “Pull to Refresh.”
In brief, only use explicit signifiers when subtler options aren’t as effective.
In the below example from Interaction Design Best Practices, the call-to-action is an explicit signifier. Using the text “Start using it now!” is a simpler way of conveying that information. An icon representing that message would be too obscure, and it’s not exactly a “Log In” because that implies you need to create an account beforehand. Since providing your email directs you immediately into the app, it’s best to keep the language explicitly clear.
Pattern Signifiers
No one really knows why clicking on a site’s logo takes you back to the homepage, but most of us know that it will. This is so common on most sites that it’s become an established trend, or pattern. Below we’ve listed some common patterns, most or all of which you’ll recognize:
- Blue/underlined links
- Logos returning to homepage
- Gray text in form fields
- Account manager in upper-right corner
- Accented and grayed dots showing position in multi-step tasks
- Arrows for scrolling image carousels
- Navigation bar across the top
- Search field with magnifying glass
Hulu makes excellent use of pattern signifiers on their homepage. In the picture below, you’ll notice the clickable logo for the homepage, the top navigation menu, the magnifying glass search field, the account manager in the upper-right, the standard video play button, and the image carousel with both arrow controls and dot positioning indicating that the user can cycle content. Since other video sites like Youtube and Netflix use similar patterns, this tactic increases familiarity (and therefore learnability) for the user.
Pattern signifiers allow meaningful interactions to happen at the speed of thought. For example, we intuitively know the magnifying glass indicates a search functionality. As such, these should be used whenever possible (especially if you’re designing for tech-savvy audiences).
The greatest strength of pattern signifiers, however, is also their weakness. Because its effectiveness depends upon familiarity, you’ll want to use these less if you’re designing for younger audiences (like children) or less technically adept people (such as the elderly, or those with limited technological access).
Hidden Signifiers
Have you ever accidentally moved your cursor over a piece of text and suddenly it changed color, revealing that it was a link? This is an example of hidden signifier, a subtle but useful way to illustrate a feature’s function. If you’re familiar with Pinterest, you’ll recognize how the options to Pin, Send, and Like a photo appear only when you hover over them.
The appeal of hidden signifiers is that they save space. You give the users the controls they want without sacrificing screen real estate – having your cake and eating it, too. But, hidden signifiers can be risky (you don’t want to hide important info), so they should be used carefully.
When to use hidden signifiers:
- Complex interfaces – If including every single signifier clutters the interface, hidden signifiers are a great way to simplify everything.
- Invested users – When your users are already invested in your product (i.e., if they’ve already bought the app, or your content sits behind a log-in wall), hidden signifiers are not much of a risk. But if they are still on the fence about whether or not they like you, it’s better to be explicit to quickly win them over.
When not to use hidden signifiers:
- Vital actions – Any functions that are necessary to use the product should not be hidden deeply; otherwise, you’re risking the user never knowing about your product’s essential features.
As a rule of thumb, ask yourself if the user could enjoy your interface without ever knowing about the action in question. If they can, you’re safe to use the hidden signifier. For example, selecting “Add to Favorites” for an item is an interaction that helps users prioritize content or products, but it isn’t a non-negotiable. Therefore, it’s acceptable to put the “favorite” function as a hidden signifier.
If you’d like to learn more about balancing minimalism with discoverability, check out this helpful piece by Dan Saffer, Founder of Kicker Studio.
Metaphorical Signifiers
A simplistic house icon means homepage, an envelope means email, a folder means folder. These are all examples of metaphorical signifiers, and rely on a user’s common sense (and familiarity with everyday objects) to draw a connection.
Metaphorical signifiers are closely linked with patterns; because metaphors have been so successful, they have been used repeatedly by hundreds of companies until they became established patterns. That’s why you most often see envelopes representing email instead of, say, the mailbox from the AOL era. But as technology advances, new functions require digital representation, and so metaphorical signifiers still live on the frontier of design.
You’ll find most metaphorical signifiers as part of an app or site’s navigation (as either icons on the page or menu items). As shown in the below example from the Chicago Works app, it’s not a bad idea to include some text next to the metaphors when you have only a few items. Combining text with visual cues will help users understand functions even faster.
One of the most important things to remember about metaphorical signifiers is context. A magnifying glass, for example, might indicate a type of search function on a website. However, in an image editor, that same icon might signify zoom in/out. Keep in mind your context when designing, and if you think there might be confusion, there’s nothing wrong with communicating more explicitly.
Negative Signifiers
Signifiers can also show that features are not available, at least not at the moment. In this case, the form suggests a lack of function. While not as common as the other types, a negative signifier is just as useful in explaining without explaining.
Typically, the most common negative signifier is grayed-out text, as with the Photoshop example above. A skillful use of negative signifiers will draw attention away from itself and back onto more usable options; the gray text seems to fade into the background, while the black clickable text stands prominent. Using grayed-out text to show unavailability has been so effective and popular, it has become a UI pattern.
Takeaway
Speed and ease-of-use are two of the biggest goals in interaction design, and signifiers create both. Knowing how to properly use signifiers is as relevant to a designer as knowing how to use colors is as relevant to a painter; the strengths of the different signifier types are akin to the differences in colors, and the skilled designer/painter knows the best time to use each, and when to mix them.
It’s a shame that something as useful as understanding affordances can be easily overlooked, but don’t make the mistake of ignoring them. Experiment with signifiers until you can confidently apply them; you’ll discover they can be one of the most powerful weapons you have in your design arsenal.
Featured image: ggv_neX.
Related posts:
- 25 Useful Free Tools & Apps For Web Designers
- 50 Essential Cheatsheets, Guides & Docs for Web Designers
The post Affordances: The Designer’s Secret Weapon appeared first on Envato.
envato.com coupon from Envato http://ift.tt/2cOfpOf
envato.com coupon
Tidak ada komentar:
Posting Komentar