What is the most underrated in web design?

Guidance: Affordance refers to an object or object that has some kind of manipulation or functional implication. For example, a chair that is above your knee height can imply that you are seated. The handle of the toothbrush is slightly longer than the human hand, suggesting that it can be used to hold.

All the objects around us are apocalyptic: some are explicit (such as the "Push" message written on the door handle), and some are implicit (such as a chair can be used to break glass or used as a weapon). This concept was first proposed by psychologist James Gibson, and was then introduced into the field of human-computer interaction by Donnald Norman in the Book of Design Psychology.

Interaction designers often use revelation. They have to do this. Physical objects are based on their shape, size, weight and other attributes to provide enlightenment. Unlike physical objects, Web pages or mobile phone interactions must be designed to get all the inspiration. For most designers, this is the intuition we get from the thousands of design patterns we can see every day. But have you considered the texture of an object that can be clicked, slid, pushed, stretched?

By deeply understanding how the revelation works, you can better understand the interaction and product design. You can use revelation as a tool to make your design more accessible and encourage users to do what you want them to do, such as registering a product, generating content, or contacting other users. Better revelation has a significant impact on conversion rates, registration rates, and user actions that are important to your website, applications, and products. This is why the revelation is most underestimated in web design.

Can you count how many actions a user can perform on the Tumblr home page?

　　

Although it looks like a very simple interface, you'll be surprised to find that there are 11 things you can do on the Tumblr home page.

1 Enter your email address

2 Enter password

3 Click the question mark icon (point to Password recovery interface)

4 Click the login button

5 Click to register link

6 Click terms Link

7 Click the Privacy link

8 views "Posted by Blvcktrip" link

9 Click Blvcktrip's avatar Image

10 Click "Search Tumblr" to enter search terms

11 press ENTER to search for the entry

If you can guess all of the above, then you are already aware of the revelation. It is the way that interactions provide specific functionality to the user. All you have to do is on a flat screenshot of a Tumblr page. Through the re-recognition mode and explicit revelation, we can examine the interactive function.

Not all revelations are equal, and some of these revelations are stronger than others. It is important to understand the types of revelations that can be used in interactive design. The revelation is generally divided into the following types: explicit, stereotyped, metaphorical, implicit, false, and negative. Let's cover each of these types of revelations in detail below.

The revelation of the outward manifestation

Explicit revelation is manifested by the physical representation of text or object. The words "Click here" are clearly prompting you to click. The protruding button from the surrounding surface appears to touch, suggesting that you can press down. It says "push" on the door handle prompting you to push the door. An input box that says "Please enter a comment" clearly prompts you to perform a comment on this action. These revelations are explicit, as anyone can guess how to interact with these elements, even though they have never been exposed to such interactions before. These revelations do not depend on cognitive patterns.

　　

PayPal's interface elements are a good example of explicit revelation. The appearance of the protruding button prompt moves down, while the text message clearly indicates the result of the operation.

　　

The Copyblogger ' s website uses a way of revealing: text prompts to play a video.

Explicit revelations are particularly important in the following situations:

1. When interactive users are less likely to be exposed to many revelation patterns in the past.

This is often the case with users who have no technical savvy or often do not use web pages or mobile phone interactions. These users are rarely able to recognize the revelation through design patterns. The same applies to those unique, innovative interactions. The first mobile phone app used a lot of explicit revelations on operations such as tapping and swiping.

2. Have not explicitly set a specific pattern to convey the revelation of a particular operation

For example, an interactive object on a cell phone: extrude inward, extrude outward. When we are not sure how to convey this interactive revelation, the designer will adopt the way of explicit revelation.

Whether to use explicit revelation depends on the design background. Too obvious a revelation will bring design redundancy. If each link reads "Click Here," the page becomes monotonous. How to get the audience to understand the revelation of an object without explicit instructions is a question to be considered. For example, a user of an app is a technology entrepreneur who has already known the input box, and when the app interface also uses text to indicate "click and enter email address" it will appear to be two.

Stereotypes of the revelation

This is the most common type of revelation in modern interactive design. For example, we vaguely know that an entry that is not contained within a sentence or is located outside the main content of the page is generally clickable. We know that the bar at the top of the screen, which contains a disjointed entry, is usually the navigation, and the entry above provides navigation. We know that a single word or word that looks like a button background is usually a button that you can use to perform an action. We will guess a word or word with a drop-down arrow below to expand the drop-down menu.

Stereotyped metaphors are a set of metaphors that can convey certain specific revelations. For example, e-mail is usually represented by an envelope icon (although sending an e-mail address never touches a physical mailbox.) This metaphor is very effective because it is already an established pattern. We will discuss this in more detail in the metaphorical revelation.

The pattern metaphor is elegant, because it can quickly convey many revelations to the user in a complex interface. When we interact with a large number of websites and applications, we become more adept at quickly analyzing these multifarious revelations on the screen.

Here is a list of the stereotypes that I have on Envato Studio's home page:

Features provided by the element revelation type

Navigation bar Mode Browse Web page

Link Mode click

Logo mode back to homepage

The link mode management account in the upper right corner

Category drop-down mode access more options

Magnifying Glass mode metaphor search

Content module Mode Click Module

　　

Envato Studio's homepage, a freelance market, full of model revelations, can you list them all?

To understand the designer's reliance on model revelation, you can ask yourself if you have never interacted with a website or a smartphone, but you know how to perform some basic operations, such as tapping and tapping, can you understand what the interface reveals to you?

The pattern provides a lot of wonderful shortcuts to easily convey some operational revelations. The premise to keep in mind is that users have spent a lot of time interacting with websites, apps, and other interfaces. When you are designing products for some highly skilled users, schema revelation can form most of your designs. When users do not have the experience of interacting with the interface (for example, children, the elderly and some people who rarely have access to the Internet), you cannot rely too much on schema revelation.

Implicit revelation

Implicit revelation is a subtle form that appears only under certain conditions. For example, the link text that prompts for a click is displayed only when the mouse hovers over it (and the color changes). On an iOS device, the app icon can slide only if you tap or drag on the home screen. On Pinterest, the pin button (which provides a "like" function) appears only when your mouse hovers over it. By default, the revelation of an element is not displayed until the user performs an action to activate the hint.

　　

The image revelation on Pinterest is hidden by default when the mouse hover is displayed.

　　

Once you hover over an item, three new action buttons appear in the entry.

Implicit revelation is often used in the following situations: In a complex interactive interface, the immediate presentation of each interaction revelation can make the interface look mixed or clutter the level of the interaction. Implicit revelation can be smart to weaken (not emphasize) those less important operational functions. It is good to use hidden revelations when a function is not core or necessary (such as to report an inappropriate image).

The risk of implicit revelation is that the user may not be able to visualize the revelation.

Finally, don't use implicit revelation on important operations. Instead, you can reduce the clutter around important core operations by dissolving some of the less important operations into the background.

When you're thinking about using implicit revelation, ask yourself if the user doesn't know if the operation will be enjoyable to use the product? If the answer is "yes", then implicit revelation is appropriate for this operation.

Clear, a to-do application, relies heavily on implicit revelation in design. However, its design has received a lot of praise.

　　

Is it beautiful? However, its design relies mainly on implicit revelation. When you pull down an item list, the top of the screen is folded down, prompting you to pull to create a new entry. Understanding these instructions requires experience. Swipe left to delete entries, swipe right to mark as completed, squeeze two entries apart creates a new entry in the middle and squeezes inward to close the list.

These implicit revelations do not represent a poor user experience for clear. Once you open the app for the first time, you'll see a scrolling tutorial on some of the features of the app. If you forget the feature description in the tutorial, these to-do items look like a panel that you can physically try to modify, and you'll understand that the to-do app allows you to add items, delete items, or mark them as complete. This panel looks like it can be manipulated. By insisting on completing the initial learning curve, in return, users will be able to use the application comfortably, and the interface will be concise and minimized.

However, the design philosophy embedded in clear does not apply to all interfaces. The steeper the learning curve (the more users need to learn), the higher the percentage of user abandonment. Clear requires money to buy so that users have reason to spend time learning the interface. Imagine another situation: when a user logs in to your product interface, there's no reason for users to spend time searching for implicit revelations. In fact, when the available actions are not displayed immediately, the user is likely to leave the interface to go somewhere else.

Implicit revelation only applies when the user agrees to learn. In order to quickly guide users to perform the actions you want them to perform, users agree that the smaller the degree of learning, the more obvious the revelation of the product will be.

Metaphorical revelation

Sometimes the simplest way to convey a revelation is to use a real object as a metaphor. For example, most of the interface icons rely on this metaphor to convey the message of revelation. Envelope icon Apocalypse sends email, house icon Apocalypse back to "home", Phone handset icon Apocalypse call, printer icon Apocalypse print file, chain icon Apocalypse build link.

　　

Some metaphors are based on the background. In document viewing applications, Magnifier is most likely to inspire amplification. However, the magnifying glass next to the input box of the website is most likely to reveal the search.

In complex tasks, we can convey the message of revelation more quickly than by using the explicit means of revelation, using metaphors extracted from real-world objects. For example, if you have to add a button in the interface that allows users to call, but you can't use the phone icon or use the text-"call", how do you convey this feature revelation?

It is very important to choose the best metaphor because it is very powerful to use the metaphor of real things. Consider the following iphone App Ness:

　　

Interface icons for mobile app Ness

Do you think the above icon requires a text label? If they are taken away, can you understand the car icon to share the route? If you're not driving to your destination or sharing your route with someone on the public transport, you need to think about the icon. In this case, a more general pattern metaphor might be a map marker.

Pattern metaphor

Pattern metaphor refers to some of the established metaphors that convey certain specific revelations. For example, most designers now use the old Phone handset icon to communicate the revelation of a call, use an envelope icon to convey the message of sending an email, and use the heart icon to convey the revelation of something like it. If designers believe that better metaphors exist, they can break the existing paradigm. But keep in mind that the user has learned this existing pattern. Think of the rich revelation that the heart icon can convey, as follows:

Click on the icon "like" an entry

Allow me to save my favorite entries

I may be able to access all the collections of my favorite items in my account

When a user adds an entry, they may be notified that they have "liked" the entry

For this article, it's a positive gesture.

The heart is often understood as a symbol of love or affection. By being consistently used to convey certain and like-related revelations, it begins to communicate these metaphors in interactive design.

Also, it needs to be carefully considered before changing some of the established pattern metaphors. Look at the WYSIWYG editor in Tumblr below. Can you identify the icons that create links and delete links?

　　

The established pattern metaphor for the link is two or three connected ring chains where you can't find the icon. The closest icon is the left number fourth icon, which looks like an infinite glyph of tilt. Next to it is a slanted infinity character with a strikethrough added. Are these icons more aesthetically pleasing than ring chain icons? Maybe it is. Does understanding the implications of these icons require a little more mental effort? I think so. Is this change worthwhile? I'm not sure. This new icon looks very much like an infinite character. Some may argue that it is the network link that extends the connection of people to infinity, and the linkage of a ring chain is a more abstract metaphor.

A false revelation

A false revelation looks like a revelation of a particular function, and in fact it reveals another function or does not perform functions at all. For example:

An element protrudes from the surrounding background, which makes it appear to be either pressed or clicked. But actually it can't.

A logo image cannot be used to return to the root realm.

An entry that shows a schema revelation (shaded or underlined) is not actually a link.

A green button (a schema revelation that creates something) is actually used to delete the data.

A grayed-out entry, which seems to inspire no interaction, is actually a link.

An envelope icon, which seems to inspire the sending of an email, is actually used to send a text message.

　　

A green "delete" or "close" button on the Icon Finder.

In interactive design mode, the green button inspires saving or creating data. Using the green button to induce destructive actions, users are likely to accidentally delete data when they want to save the data.

　　

What revelations can you find in this interface element of dribbble?

In the above dribbble interface element, you will be surprised to find that, in addition to the number of views, each element can be clicked to perform an interactive action. They are gray, the background is gray, there is no underline, no bold. They are false to show a lack of revelation, and in fact they contain a rich function (see who liked this entry, which is placed under what name of the label, download color scheme)

While the subtleties of these interface element designs give more attention to other parts of the design, designers must consider whether this balance is worthwhile. For example, if the share link is bold, and the click is more clearly revealed, is it possible to share the entries on the dribbble more often?

A simple principle: if you really want people to perform a function, then add more revealing signs.

The revelation of negation

Sometimes it is necessary to indicate that an interface element does not provide any operational functionality at this time. The most common way is to turn this element gray. Take the input box in the Rdio app:

　　

The Password entry box is grayed out because it does not currently provide a click or input data, in order to show these revelations, you must click the "Change" button next to it.

　　

In this interface element, the "Save Changes" button is dimmed because you haven't made any changes, so you can't save them. This style indicates that the current button does not provide any operational functionality.

Below the design of the dimmed button through the "Browse our Design Product List" text indicates the obvious revelation of the click. But the design style of this button follows the pattern of negative revelation (flat, gray, and background). Because the gray button usually indicates a lack of revelation so that the user can not be aware that he can be clicked.

　　

Gray is also often used to indicate a non-linked word or word. Not in the following Google homepage interface. It seems that my email address cannot be clicked, but clicking on it will surprise you with a drop-down menu with my account information.

　　

Judicious use of negative revelations can make it easier for users to navigate to parts of the interface that have useful functionality.

An apocalyptic overview: The weather app for IOS 7

The default weather app in IOS 7 has a lot of inspiration. Of the following six types of revelations, what does it have?

The outward manifestation of

Mode of

of metaphor

Implicit in

It's fake.

Negation of

Let's check each of them individually.

　　

The revelation of the outward manifestation

The application of the main interface has no explicit revelation. There are no elements that appear to be clickable. No words dictate how you interact with the interface. In addition to the navigation elements at the bottom of the screen (dependent on schema revelation), the app's interface looks like a flattened display of data.

Model of Revelation

In this weather application I can identify two modes of revelation, which are 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 slid in iOS system design mode. The highlighted white point represents where you are currently located. This design mode is used when the app icon has several screens in the iOS home screen.

The Yahoo icon is another example of a modal revelation. Users who interact frequently with the web will know that clicking on the icon usually takes them to the company's or organization's homepage. Here, it will point to Yahoo search results.

Metaphorical revelation

Although some metaphors are used in the application, only one metaphor is instructive. All the weather signs are metaphors. The sun, which is peeping from behind a cloud, does not mean that the sun is behind the clouds, which means the weather is sunny and cloudy. The Sun icon does not represent the sun, it means the weather is clear. However, tapping these icons does not provide any operational functionality, they simply convey weather information.

The only metaphorical element in the interface is the lower-right corner. This icon looks like a list of items or a menu. The tap icon expands a list of weather-friendly menus that allow you to add or remove entries. This icon uses a visual metaphor to convey its functional implications.

Implicit revelation in Nature

There are two implicit revelations in the screen interface. The temperature is reported hourly, but the window is displayed for six hours. Small pieces of data suggest that you can get more data. If we swipe left at the show hourly temperature, more time will go from the right side of the screen to the field of view. This allows us to get temperature data for all time periods (hourly) in a small screen space.

Although there is no clue, if you click on the top of the screen, the temperature data will be replaced by details such as humidity, wind speed, rain probability, and somatosensory temperature. I've used this app frequently before, in order to write this article I try to find the implicit revelation in the application, I hit the screen everywhere, this found this feature.

I suspect that most of the users of this app have not found this feature. If so, is this implicit revelation a good design? This is a problem. There are many better designs to add to this feature, such as a temperature figure projecting from the periphery, which looks like it can be clicked, underlined under the temperature number, added an icon, or displays the detail data at the left and right sides of the temperature and location.

　　

The false revelation of

There is no problem with this app in terms of false revelations. Users may tap on other dates in the week to see if they can view specific weather information, but the app only provides specific weather information for the day. Users may also want to hit the lowest temperature of the day, thinking they can see a view of the lowest temperature (not the highest temperature). However, the application interface does not show misleading clues with this function.

The revelation of negation

This application does not have a strong and powerful use of negative revelation. The "Monday" in the interface is bold, and the font of "Today" next to it is more subtle, suggesting that "Monday" has a higher level, and "Today" is just a message. However, if you click on any of the two words, detailed data will appear at the top of the screen (the same as at the top of the screen. )

A revelation of the summary

Type Advantage disadvantage use case

Explicit, clear, users will not miss the revelation of the interface clutter, for some users is their ability to underestimate the low-tech users; need to explain some of the non-intuitive revelation

The pattern quickly and clearly conveys the revelation that the previous experience, which relies on similar interfaces, has formed a solid established pattern; The user is technically skilled

The hidden clean interface may not be able to identify functions that are not very important, and the user has sufficient recognition for learning (trying) applications.

The simplest way for a metaphor to convey a complex revelation is that the same metaphor represents different things for different people. Explaining the revelation becomes too complicated when there is no metaphor.

Fake no show no apocalypse waste user time avoid false apocalypse

Negation by indicating that the element has no revelation to avoid setbacks in the process of user interaction if an element is not enlightening, which it may be unnecessary when auxiliary information or elements are required, but do not provide functionality

Conclusion

Although you do not realize that you may have used many types of revelation in your design. Whether you are a user or an interaction designer, it seems intuitive to recognize the revelation.

By carefully using the apocalypse, we can help users to quickly understand the interface and subtly encourage them to move from one action to another.

Understanding the implications, we can evaluate the following interactive interface. We will soon understand that creating an account in dunked.com is essential, and users will not hesitate to click on the "Start" button. You can use this revelation to add an action button of the same level to your own design.

　　

In summary, the most underestimated in web design is the "revelation."

This article @natasha Postolovski translation: @gyro from: Smashing Magazine

What is the most underrated in web design?