Affordance refers to the affordance of an object or object that affords some indication of its operation or function. For example, a chair that is above your knee height can signal you to sit. The handle is slightly longer than the palm of a human hand and suggests it can be used to grip.
All the objects around us are revelatory: some are explicit (like the “push” message written on door handles), some are implicit (like chairs that can be used to break glass or as weapons). This concept was first developed by psychologist James Gibson and later introduced to the field of human-computer interaction by Donald Norman in his book Design Psychology.
Interaction designers often use revelatory. They have to. Physical objects offer revelatory properties based on their shape, size, weight and so on. Unlike physical objects, web or mobile interactions must take all their cues through design. For most designers, this is an intuition based on the thousands of design patterns we see every day. But have you considered the texture of an object when it can be clicked, swiped, pushed, stretched?
By understanding how revelation works, you can better understand interaction and product design. You can use revelation as a tool to make your design easier to use and encourage users to do what you want them to do, such as sign up for a product, generate content or connect with other users. Being more revelatory can have a significant impact on conversion rates, sign-ups, and user actions that are important to your website, app, or product. This is why revelatory is one of the most underrated in web design.
Can you count how many actions a user can perform on Tumblr’s homepage?
Although it looks like a very simple interface, you’ll be surprised to find that you can perform 11 actions on the Tumblr homepage.
1 Enter the email address
2 Entering a Password
3 Click the question mark icon (pointing to the password recovery interface)
4 Click the login button
5 Click the registration link
6 Click the terms link
7 Click the privacy link
8 Click the “Posted by blvcktrip” link
9 Click on the blvckTrip profile picture
10 Click “Search Tumblr” and enter the search term
11 Press Enter to search for entered terms
If you can guess all of the above, then you already know revelatory. It is how an interaction provides a user with specific functionality. All you have to do is take a flat screen shot of a Tumblr page. Interactive functions can be examined through recognition patterns and explicit Revelations.
Not all Revelations are created equal, and some Revelations are stronger than others. It is important to understand the types of Revelations you can use in interaction design. Revelation is generally divided into the following types: explicit, patterned, metaphorical, implicit, false, and negative. We describe each type of revelation in detail below.
Explicit revelation
Explicit revelation is expressed through signals such as words or physical representations of objects. The words “Click here” clearly prompt you to click. Buttons protruding from the surrounding surface appear to be touchable, indicating that you can press down. A handle that says “push” prompts you to push. An input box that says “Please enter a comment” clearly prompts you to comment. These Revelations are explicit because anyone can guess how to interact with these elements, even if they have never had such interactions before. These Revelations are independent of cognitive patterns.
PayPal’s interface elements are a good example of explicit revelation. A protruding button prompts you to press down, while text messages clearly indicate the result of the action.
Videos on Copyblogger’s site are explicitly revealed: text prompts you to click to play the video.
Explicit Revelations are particularly important in the following situations:
1. Interactive users are unlikely to have been exposed to many revelation patterns in the past.
This is often the case with users who are not tech-savvy or don’t normally interact with the web or mobile. These users rarely see the implications of design patterns. The same goes for unique, innovative interactions. The first app made heavy use of explicit revelation for things like taps and swipes.
2. Specific patterns have not been explicitly established to convey the implications of specific operations
Take an interactive object on your phone: squeeze inward to close, squeeze outward to unfold. When it is not clear how to visually convey this interactive revelation, designers resort to explicit revelation.
Whether or not to use explicit revelation depends on the design context. Too obvious a revelation can lead to design redundancy. If every link says “Click here,” the page gets boring. How to make the audience understand the revelatory nature of an object without clear instructions is a problem that needs to be considered. For example, the users of an app are tech entrepreneurs who already know the input box, and it will look silly if the interface of the app still uses text indicating “click to enter email address”.
Patterned revelation
This is the most common type of revelation in modern interaction design. For example, we vaguely know that an entry that is not included in a sentence or outside the main content of a page is generally clickable. We know that the long bar at the top of the screen that contains disjointed terms is usually the navigation bar, and the terms on it provide navigation. We know that a single word or phrase on a button-like background is usually a button that can be used to perform an action. We would guess that a word or word with a drop-down arrow would expand the drop-down menu.
A stereotype metaphor is an established metaphor that can convey some specific revelation. E-mail, for example, is often represented by an envelope icon (although sending an E-mail never involves a physical mailbox). This metaphor works because it’s already an established pattern. We will discuss this in more detail in metaphorical revelation.
Pattern metaphors are elegant because they can quickly convey many implications to the user in a complex world. As we interact with a large number of websites and apps, we become better at quickly analyzing these various Revelations on the screen.
Here’s my list of patterned Revelations on Envato Studio’s home page:
| The element | Revelation type | Functions provided |
|---|---|---|
| The navigation bar | model | Browse the web |
| link | model | Click on the |
| Logo | model | Return to the home page |
| Link in the upper right | model | Management accounts |
| Category drop-down | model | Access more options |
| A magnifying glass | Mode of metaphor | search |
| Content module | model | Click on the module |
Envato Studio’s home page, a freelance marketplace, is full of pattern Revelations. Can you list them all?
To understand designers’ reliance on pattern cues, ask yourself: If you’ve never interacted with a website or smartphone, but you know how to perform basic actions like taps and taps, can you understand what the interface tells you to do?
Patterns provide a number of nice shortcuts to easily convey operational implications. The premise to keep in mind is that users already spend a lot of time interacting with websites, applications, and other interfaces. When you’re designing for a tech-savvy audience, pattern inspiration can make up the bulk of your design. You can’t rely too much on pattern revelation when users don’t have a lot of experience with interface interaction (for example, young children, the elderly, and people with limited access to the Internet).
Implicit revelation
Implicit revelation is a subtle form that manifests itself only under certain conditions. For example, the text that prompts you to click on a link appears only when the mouse hovers over it (and the color changes). On IOS devices, app ICONS can only slide when you tap or drag on the home screen. On Pinterest, the pin button (which provides a “like” feature) only appears when you hover over it. By default, the revelatory nature of the element is not displayed until the user performs an action to activate the prompt.
Pinterest image Revelations are hidden by default, and are displayed when the mouse hovers over them.
Once you hover over an item, three new action buttons appear in the item.
Implicit Revelations are often used when, in a complex interface, presenting each revelation at once can clutter the interface or confuse the hierarchy of interactions. Implicit revelation can be clever enough to de-emphasize less important operational functions. Hidden Revelations are good when a feature is not core or necessary (such as reporting an inappropriate image).
The risk of implicit Revelations is that users may not intuitively find them revelatory.
Finally, do not use implicit Revelations for important operations. Instead, you can reduce the confusion around important core actions by blending some of the less important actions into the background.
When you consider whether to use implicit revelation, ask yourself if the user would be happy to use the product if they didn’t know about it. If the answer is “yes,” then implicit revelation is appropriate for the operation.
Clear, a to-do app, relies heavily on implicit revelation in its design. Yet its design has received many compliments.
Is it beautiful? Yes. However, its design relies heavily on implicit Revelations. When you pull down a list of items, the top of the screen folds down, prompting you to pull to create a new item. It takes experience to understand these instructions. Swipe left to delete an item, swipe right to mark it as done, squeeze to separate two items and create a new one in the middle, and squeeze inward to close the list.
These implicit Revelations don’t mean that Clear’s user experience is bad. Once you open the app for the first time, you can see a scrolling tutorial of some of the app’s features. If you forget the tutorial’s features and the to-do list looks like a physically modifyable panel, you’ll know that the To-do app allows you to add items, delete items, or mark them as done. This panel looks like it can be manipulated. By sticking to the initial learning curve, in return, users are comfortable using the app and the interface is simple and minimal.
However, the design philosophy embedded in Clear does not apply to all interfaces. The steeper the learning curve (the more the user has to learn), the higher the rate of user abandonment. Clear costs money to buy, so that users can justify spending time learning the interface. Imagine another situation: when a user logs into your product interface, they have no reason to spend time looking for implicit Revelations. In fact, when available actions are not immediately displayed, users are likely to leave the interface and go somewhere else.
Implicit revelation only applies to user identity learning. In order to quickly guide users to do what you want them to do, the less recognition they have to learn, the more revealing the product will be.
Metaphor revelation
Sometimes the easiest way to convey a revelation is to use real objects as metaphors. For example, most interface ICONS rely on this metaphor to convey a message. The envelope icon indicates sending an email, the house icon indicates returning to “home,” the phone handset icon indicates making a phone call, the printer icon indicates printing a document, and the chain icon indicates establishing a link.
Some metaphors are contextual. In document viewing applications, a magnifying glass is most likely to inspire magnification. The magnifying glass next to the site’s input box, however, is most likely to inspire a search.
In complex tasks, we can convey apocalyptic information faster by using metaphors drawn from real-world objects than by using explicit apocalyptic methods. For example, if you had to put a button in your interface that lets you make a phone call, but you couldn’t use a phone icon or text — “Call” — how would you convey that message?
Because the use of metaphors for real things is so powerful, it’s important to choose the best metaphor. Consider the following iPhone app Ness:
The interface icon of Ness for the mobile app
Do you think the above ICONS need text labels? If they were taken away, could you understand the car icon inspired to share the route? If you’re not driving to your destination or sharing your route with someone on public transportation, you need to think about this icon. A more general pattern metaphor in this case might be map markers. Mode of metaphor
A pattern metaphor is a set of established metaphors that convey a particular revelation. For example, most designers now use the old phone handset icon for making a phone call, the envelope icon for sending an email, and the heart icon for liking something. If designers believe that a better metaphor exists, they can break the mold. But keep in mind: users have learned the established pattern. Consider the rich implications of the heart icon as follows:
Click the icon to “like” an item
Allow me to save the items I like
I might be able to access a collection of all my favorite items in my account
When a user adds an item, they may be notified that they have “liked” it
This is a positive gesture for this item
The heart is often understood as a symbol of love or affection. It began to be used to convey these metaphors in interaction design by being continuously used to convey certain specific and like-related Revelations.
Also, you need to think carefully before changing some of the established model metaphors. Check out Tumblr’s WYSIWYG editor below. Can you identify the ICONS for creating and removing links?
The established pattern metaphor for links is two or three circular chains linked together, and you won’t find that icon on this interface. The nearest icon is the fourth icon from the left, which looks like an angled infinity symbol. Next to it is the slant infinity with the strikeout. Are these ICONS more aesthetically pleasing than the ring-chain ICONS? Maybe they are. Does it take a little bit more mental effort to understand the implications of these ICONS? I think so. Is the change worth it? I’m not sure. This new icon looks a lot like the infinity symbol. It could also be argued that it is Internet links that extend human connections to infinity, and that a link in a circular chain is a less abstract metaphor.
False revelation
A false revelation appears to reveal a particular function when in fact it reveals another function or fails to perform a function at all. For example:
An element bulges out of the surrounding background, making it appear clickable or clickable. But it can’t.
A Logo image does not return the user to the root domain.
A term that shows pattern revelation (colored or underlined) is not actually a link.
A green button (a schema revelation for creating something) is actually used to delete the data.
A grayed entry, which seems to indicate no interaction, is actually a link.
An envelope icon that seems to suggest sending an email is actually meant to send a text message.
A green “Delete” or “Close” button on Icon Finder.
In the interaction design pattern, the green button prompts you to save or create data. By using the green button to induce destructive actions, users are more likely to accidentally delete data when they want to save it.
inDribbbleWhat do you see in this interface element?
In the above Dribbble interface element, you’ll be surprised to see that in addition to browsing numbers, each element can be clicked to perform an interaction. They are grey, with a grey background, no underline, no bold. They pretend to be revelatory when in fact they are rich in functionality (see who liked the item, what label it was placed under, download the color scheme).
While the subtlety of the design of these interface elements draws more attention to the rest of the design, the designer must consider whether the balance is worth it. For example, would Dribbble entries be shared more often if shared links were bolded to more clearly indicate clicks?
A simple rule of thumb: If you really want people to implement a feature, add more revelatory signs.
Negative revelation
Sometimes it is necessary to indicate that an interface element does not provide any operational functionality at the moment. The most common way to do this is by graying the element. Take the input box in the Rdio app:
The password entry box is grayed out because it currently doesn’t offer clicking or input data, and in order to be revelatory, you have to click on the “change” button next to it.
In this interface element, the “Save Changes” button grays out because you haven’t made any changes yet, so you can’t save. This style indicates that buttons currently do not provide any action.
The grayed button in the design below clearly indicates the click through the text instructions “Browse our design product list”. But the button’s design style follows the pattern of negative revelation (flat, gray, blending into the background). Because gray buttons often indicate a lack of revelation, the user may not be aware that he can be clicked.
Gray is also used to indicate an unlinked word or phrase. Not so in the following Google home page interface. It looks like my email address can’t be clicked, but clicking on it will surprise you with a drop-down menu with my account information.
Judicious use of negative Revelations can help users more quickly locate parts of the interface that have useful features.
A revelatory roundup: Weather apps for IOS 7
The default weather app in IOS 7 is a lot of revelatory. Which of the following six Revelations does it have? What does it not have?
explicit
Patterns of
The metaphor
The implicit
“No”
Let’s examine them one by one.
Explicit revelatory
The app home screen is not explicitly revelatory. There are no elements that look clickable. There are no words to tell you how to interact with the interface. Except for the navigation elements at the bottom of the screen, which are pattern-based, the app’s interface looks like a flat display of data.
Pattern revelatory
In this weather app I can identify two pattern Revelations, both located at the bottom of the screen.
A line of white dots at the bottom of the screen indicates the number of screens that can be swiped in IOS design Mode. The highlighted white dots represent your current location. Use this design mode only when there are several screens of app ICONS on the IOS home screen.
The Yahoo icon is another illustrative example of patterns. Users who interact with web pages often know that clicking on an icon usually takes them to the home page of a company or organization. In this case, it points to Yahoo search results.
Metaphorical revelatory
There are a few metaphors in the app, but only one is revelatory. All weather signs are metaphors. The sun icon peeking from behind a cloud does not mean there is a sun behind a cloud, it means the weather is sunny and cloudy. The sun icon doesn’t mean the sun, it means the weather is clear. However, tapping on these ICONS provides no operational function, they simply communicate weather information.
The only metaphorically revelatory element of the interface is in the bottom right corner. This icon looks like a list of items or a menu. Tapping on the icon opens a menu of weather locations, allowing you to add or remove items. The icon uses a visual metaphor to convey its revelatory function.
Implicit revelatory
There are two implicit Revelations in the screen interface. The temperature is reported hourly, but the window shows six hours. Small pieces of data imply that you can get more data. If we swipe left at the hourly temperature display, more time temperatures will come into view from the right side of the screen. This allows us to obtain temperature data for all time periods (hourly) on a small screen space.
Although there are no clues, clicking on the top of the screen replaces temperature data with details such as humidity, wind speed, probability of rain and perceived body temperature. I’ve been using the app a lot before, and for this article I tried to find the implicit revelation in the app by tapping all over the screen.
I suspect that most users of the app are unaware of this feature. In this case, is this implicit revelation a good design? That’s a problem. There are many better designs to increase this functionality, such as making the temperature number stand out from around to make it clickable, underlining the temperature number, adding an icon, or displaying those details to the left and right of the temperature and location.
Fake revelatory
The app has no problem being fake revelatory. Users may tap on other dates of the week to see if they can see specific weather information, but the app only provides specific weather information for that day. The user may also want to click on the lowest temperature of the day to see a view of the lowest temperature (rather than the highest temperature). But there are no misleading clues in the interface that suggest this is possible.
Negative revelatory
This application doesn’t use negative revelatory very strongly. The “Monday” is bolded, and the “Today” next to it is smaller and fuzzy, suggesting that “Monday” has a higher level and that “Today” simply conveys information. You tap on either word, however, and detailed data appears at the top of the screen (just as it does when you tap on the top of the screen).
Revelatory summary
| type | advantages | disadvantages | usage |
|---|---|---|---|
| explicit | Clear, clear, the user will not miss the revelatory | The interface is cluttered and, for some users, underestimates their capabilities | Low tech users; Some non-intuitive Revelations need to be explained |
| model | Convey the message quickly and clearly | Relying on prior experience with similar interfaces | A solid established pattern has been established; Users are tech-savvy |
| implicit | Clean interface | Functionality may not be found | A less important function; Users have enough approval to learn (try) the application |
| metaphor | The simplest way to convey complexity is revelatory | The same metaphor means different things to different people | Interpretation becomes too complicated without metaphors |
| fake | There is no | Indicates no revelatory waste of user time | Avoid fake revelatory |
| “No” | Avoid frustration in user interaction by indicating that the element is not revelatory | If an element is not revelatory, what it may not be is unnecessary | When auxiliary information or elements are required but do not provide functionality |
Although you may not realize it, you may have used many types of revelatory in your design. Identifying revelatory may seem intuitive to both users and interaction designers.
By carefully using revelatory, we can help users quickly understand the interface and subtly encourage them to move from one action to another.
Understanding revelatory, we can evaluate the following interface. It soon became clear that creating an account on Dunked.com was essential, and users would hit the “Start” button without hesitation. You can use this revelation to add the same level of action buttons to your own design.
In conclusion, one of the most underrated things in web design is revelatory.
Translated by @Gyro from Smashing Magazine
