How the information passed to the user does not fail

In the process of designing a product, one of the responsibilities of the Product manager and the designer is to deliver the information to the user effectively. In the Internet product, the operation guidance, the result feedback, the interface present element, the size, the color and so on, can be regarded as the information transmission.

Efficient and accurate information delivery is the basis of a good user experience. Here is a summary of several simple principles for effective information delivery:

Use a language that users can easily understand

The process of information transfer is like a conversation, which requires language. Language may be the form of text, pictures, may also be flashing, discoloration, size contrast, but no matter what form of "language", a basic requirement is to ensure that users can "listen" to understand. For example, you should try to avoid using jargon that users don't understand, symbols that are ambiguous, and animations that are inaccurate.

Design: Icon

Icons are a classic way of conveying information, and good icon design allows users to know at a glance what the program behind it is for, vivid and intuitive. So now in the popular system, many have adopted the way of icon to identify the program.

As shown above, even without text, we can guess what these icons represent.

The list interface for the Design:ibooks

In ibooks, the interface to display a list of books doesn't feel like a regular list, instead of using the method of the object, the image of a bookshelf is presented, the bookshelf is full of the book cover that the user has downloaded, just like you are really facing a bookshelf, it is full of books. In this way, it is easy for users to realize that as long as the book is "Down", you can read it.

Bad design: A mobile operator's online business Hall tip Information

The following illustration is an action tip on a mobile operator's website:

For the contents of this dialog, my feeling is that, although the Chinese characters I know all (well, numbers are fully known), but I do not know what it is saying, I do not even know how to punctuation. Well, there seems to be faulty and typos ...

In fact, I guess for a long time, combined with my entire operation process, I feel this dialog box to tell me may be: "Can not shut down the GPRS service, because it has not been turned on" ...

Bad design: The total area of real estate advertisement

In recent years the domestic real estate market is unusually hot, advertising overwhelming. For the general buyers, the point of concern is different in all aspects, for example, someone concerned about the area, price, huxing, some people concerned about traffic, environment, education and so on. Good advertising should be able to hit the user's pain point, the user most concerned about the information accurately expressed to the user.

For example, the above real estate ads, from top to bottom, the message is expressed in order: the size of the house, relatively cheap prices and relatively good environment. In general, information is expressed in a concise and clear way. But sometimes in these real estate ads there are often some ambiguous, or not enough image of the statement, such as:

The advertisement expresses the overall size of the property. However, 1.8 million square meters is how big, as well, such a large community for home buyers have what good, many people do not have the concept. It is not as easy to understand as the size of the house, the price, the environment, etc. So it may not be an "effective" way of delivering information.

Ii. Timely interpretation

Sometimes we are limited to objective conditions, and we may not be able to communicate directly with the user in a "user-understood language". At this point, apply Don t make Me the words: "If you can not do it self-evident, then at least let it explain itself." ”

Set items for the Design:iphone

If we need to fill out or set up a form, we first need to understand the meaning of each item on the form to be able to accurately fill in or set. There are some routine items, such as "name", "Phone number", and so on, no need to explain too much, everyone can read it, but some options are not so easy to understand. At this time, you may be confused when the user to provide users with the answer.

In the iphone's network settings interface, there is an option called "Data roaming." For the average user, looking at the literal meaning of this option does not seem to be clearly aware of what will happen when it is turned on or off. So, underneath it, there is a text note that prompts the user that this option is used to prevent a high roaming fee from traveling in a different place. It also lists some of the most common behaviors that can generate data traffic, such as Web browsing, e-mail, and so on. In this way, even if the user is completely unaware of the "data business" of the handset, he can realize that the use of these features during roaming may be "heavily deducted".

Design: Bus stop in Shenzhen

In the busy sections of the city, there are often lots of buses. When you stop at a certain stop, if you happen to catch more than one car at the same time (the probability is very large), it will make the road near the station crowded. In this case, the usual method is to set the station of the same station name 2 or more stations separately. This alleviates the congestion problem and creates another problem, as shown in the figure:

The bus station near Tencent is called the "Deep North Gate". This is a busy road, with a maximum of nearly 50 bus routes. So the station's platform was divided into a construction. Also known as the "Deep North Gate" of the 2 platform, 300 meters apart.

Imagine this user scenario: I'm going to visit a friend who called me and said, "You're leaving the company, right?" then you go to the Deep North gate to take bus B line, to XX stop on the line. "Good, the weather is very hot, I started from the Tencent mansion, went east, found the" Deep North gate "station. I was trying to find a bus for the B line I was looking for for a long time. I'm sweating. At this time, I did not know that there is actually another platform nearby. Or even if I knew, I couldn't figure out which direction the other platform was, should I go East or go west.

Bad user experience, isn't it? But the solution is really simple, look at the picture:

First, we find the station name followed by a number. For example, the picture shows the "Deep North gate ②". At this point, I will realize that there should be a "Deep North gate ①" platform.

Immediately thereafter, a "warm tip" was placed. Tell me the exact location of the other platform and list of lines docked on another platform. So far, the problem has been solved.

Third, another angle

Sometimes what users really care about is not the information itself, but the meaning behind it.

Design: Line chart in Analysis tools

What should we do if we need to tell the user how a certain value changes over time? Do you want to make a table?

The data in the table is clear and we can easily see more days and fewer days. However, it is not very intuitive to see the trend of these data changes. At this time, may wish to change the angle to express it, such as line chart:

Remember what we were going to say about the trend of this data over time? Therefore, the data value itself is not so important, the line chart can not be very accurate to see the specific data of the day, but the trend at a glance.

Design: Yesterday's temperature

For a weather app, showing the day's temperature is one of its most important features. But perhaps not everyone is able to properly prepare the clothes according to the temperature. For example, can you react immediately, 28 degrees or 32 degrees, what kind of clothes to wear?

At this point, we may want to guide users to another way of thinking to solve the problem.

In some weather app, not only provides the recent temperature data, but also provides the "Yesterday" temperature synchronously. By all means, yesterday had passed, telling me what the temperature of yesterday meant?

In fact, yesterday's temperature, combined with today's temperature, conveys an important message: "It's hotter today than it was yesterday." Imagine, if I told you, today's temperature is 2 degrees lower than yesterday, so that you can according to yesterday's dress, to decide today's clothing increase or decrease. Would that be easier to understand and manipulate than I told you today, 32 degrees?

Iv. Application of Contrast

What information is more important? which operations are dangerous? which are the ways we recommend? These can be expressed in contrast.

Design: The operation button of the network disk

When there are important or risky operations involved in the interface, we can visually separate these operations to prompt users for their importance or risk.

In the Micro Cloud app, the Delete button is designed to be red. In most users ' perceptions, red represents warning, danger, and so on. Such a design can reduce misoperation to some extent and protect the user's data.

Design: A list interface for a news app

For a news app, how do you express "important news" or "hot" messages to your users? Front-page headlines, of course, can be solved; the number of readings behind each piece of news is OK. However, there may be more vivid and natural ways, such as:

The size of the block to express the heat of the news. The more people pay attention to the headline, the larger the area it occupies and the larger the size. Is this more vivid?

V. Noise reduction

Sometimes we may need to express a variety of information to the user at the same time, the information that is useful to the user is like a "signal" in the communication process, while the redundant, useless information is like "noise". In the design, the general need to maximize the signal to reduce noise.

Design: Album List

In general file management applications, we are accustomed to using file names to identify files. But for picture files, many times the file name is automatically generated when shooting (similar to img_0932.jpg this), which itself is meaningless, and thumbnail is the simplest way to retrieve the image. So if we're going to design a list of pictures, do we want to give a long string of filenames?

Obviously, in this case, the filename has become "noisy". So we can simply omit the filename and only show thumbnails.

Bad design: A bank app remittance interface

Imagine if I needed to send someone a remittance, what information should I fill out? Maybe there is the other person's account number, username, remittance amount. If I have more than one account in my name, I may also need to choose which account to draw the money from. However, if you click a button called "Transfer remittance", there is an interface:

Will you suddenly become overwhelmed? Perhaps you will have many questions, such as: "Real-time transfer" and "ordinary transfer" What is the difference? It sounds as if "real time" would be quicker, but how slow is the average? Do you need another charge in real time? Cross-row transfer "What does that mean?" sounds like you're going to get paid? But I don't want money, I'll give it to someone else. What is the mobile phone number transfer?

Therefore, this interface is more like a "Portal encyclopedia", all the "responsibility" to the user, rather than to guide the user to complete the task.

There are a number of ways and techniques for the transmission of information, and this article is difficult to elaborate. But one thing is clear: we have to think from the user's point of view. In the excavation of the user in the actual operation process will encounter problems, reasonable deduction, accurate and clear to provide users with the information he really needs.