How to effectively enhance the user experience with UI-assisted instruction text

Sunday home, sleep to wake up naturally, bask in the sun and eat and drink to do the content again play some old games, a perfect day.

The main topic of this translation is how to design and use the auxiliary explanatory text of the UI elements reasonably. Posture focuses on the traditional web page to say things, but theoretically the same applies to mobile applications.

This article's original author Connie Malamed, has the visual Language for designers a book, appears the domestic has not done has introduced. Her blog has many excellent articles on visual design that are worth reading and learning. Next we go to the text.

The user's behavior in the Web site is highly target-driven. People always have goals to do, whether it's shopping, finding solutions to problems, or simply browsing content information. Therefore, an important mission of user experience design and UI design is to help and guide users to complete specific behaviors through reasonable design elements. For example, if you are designing a button that puts a product into a shopping cart, adding a shadow effect will make the button look more prominent and help the user understand that it is a clickable button element.

In addition to the common processing methods for these visual elements, we often need to add some additional explanatory text to the UI elements to help the user understand their role and to direct the user to do the right thing in the right place.

Mental model

In the UI design process, write and design the text is science is also an art, requires the designer to master the necessary copywriting skills and design capabilities, more importantly, the "User Mind" understanding.

The mental model is the assumption, the image and the story (what is the mental model) that deeply rooted in our hearts about ourselves, others, organizations and the world around us, a broad concept involving causal behavior and action. In the face of new things, people will use mental models to connect them with what they know, and try to conduct what they have learned and become accustomed to.

Through experience, users will gradually build mental models for the work of different types of websites in their hearts, and they will learn about a range of behavioral patterns in E-commerce sites and the differences between the various ways of doing things in a photo-sharing site. When faced with a site that has not been contacted before, users will first classify it in their mind and assume a set of behavioral patterns for the type of Web site.

This is the importance of the UI instruction text. If the site's operation, interface elements, etc., do not conform to the mental model of expectations, people will have unpleasant experience, such as frustration, feel that they do not have the ability to achieve a goal. They will go to websites that are more user-friendly and fit their mental models.

Writing Easy-to-understand UI notes and presenting them in an aesthetically pleasing manner can effectively reduce the difference between user expectations and actual functionality. Even if the site does not match the user's mental model in some way, a good copy can also guide the user through the correct actions to achieve the goal.

In the course of many years of web design and usability research, I have summed up some of the more typical methods that will be shared with you next. I hope these experiences will help you to better use the UI instructions to improve the usability of the website.

1. Understand the characteristics of the user base

We need to understand the general characteristics of the site's target audience and write a UI introduction using the appropriate language style. Unless you know for sure that your users are savvy, savvy people, it's best to assume that they need accurate guidance in accomplishing their goals.

Based on an understanding of the general characteristics of the user base, think about how most users will understand and react to our copywriting, and will they understand the informal idioms? Are some of the seemingly light-hearted statements accepted by the target audience?

This is one of the things that we often see as "proving you are human", which seems to be a standard for verifying code in the years. But, to be precise, this style is more applicable to the relatively professional and experienced Internet users; Inexperienced users do not understand the connection between the verification code and the real person operation, "why do a simple operation and prove me first?", even if they accept this statement, they may not know how to prove it. For this type of user base, a copy of the style "Please enter the right character" is more useful.

2. Concise

Pay attention to the balance between the length of the copy and the degree of detail. We want the UI description to help the user understand enough details to guide the operation, but too much detail is not good for the user to understand and continue the operation process. People can only handle a small amount of information at a time.

The purpose of this presentation is to give the user the fastest speed to get information and perform the right actions. If you can, try to split the long sentences into phrases.

3. Get rid of irrelevant information

We can take a look at it again after we have initially identified the copy, and pay special attention to examining what information in the copy is irrelevant to the main goal, removing them and making the information more accurate and compact.

As you can see in the example above, the main purpose of the current process is to guide the user to register; you should not use so many copywriting here to explain the concept of book wish list.

4. Use the most accurate and effective words

This requires that we have a precise discernment of the words that express similar meanings. Many usability tests come to the same conclusion--people are more "scanning" than real "reading" when browsing the page. With this in mind, copywriting must be precise enough to get the most accurate information, even if the user is quick to glance over it.

Give a few concrete examples. "Click on a Date" will be more accurate than "choose a date". Also avoid double negative sentences, such as "I Don't want to unsubscribe (I don't want to unsubscribe.)". In addition, try not to use industry terminology, whether it is the Internet, or other relevant industry technical terminology; Not everyone understands what they mean.

5. Use active voice

The active voice can tell the user clearly what they should do. Do not use the passive voice, this practice will add unnecessary burden to the user's understanding ideas. Compare the following two kinds of statements:

Active Voice: "Click the log link to view the article"

Passive voice: "To view the article, log links need to be clicked"

6. Put the description of the copy in a beautiful and reasonable position

As I said at the outset, the UI demonstrates that copywriting is a challenge to both text and design capabilities. You must understand the hierarchy of the text in the information structure and reflect it on the visual structure. While descriptive text needs to be noticed by the user, they cannot be visually overly prominent, after all, the role of the UI caption is to guide the user's behavior rather than the important content to read.

As a page element, the copy should be coordinated with the surrounding elements. We had better in the early stage of the page design, will explain the copy to consider, in the layout and so on to do a full estimate.

7. Control the spacing and maintain the correspondence between the elements.

To control the spacing between the copywriting and the UI elements, visually identify their corresponding relationships. When the copy needs to fold lines, to adjust the line spacing to the appropriate size-that is, to leave a certain spacing, easy to read, but also not too large, to avoid the user to understand two lines of text as a separate two sentences.

For a multiple-row table in the step description, there should be enough spacing between each piece to represent the split, or you can use a list symbol at the beginning of the sentence to represent the separation between entries.

8. Use the appropriate text style to ensure readability

It is an important thought in page design to handle text as a visual element. For the UI description copy, in the Text style processing, that is, to maintain the consistency with the global content text, but also in the local to do enough prominent, easy to read. Font, font size, color and so on are all needs to be carefully scrutinized.

Try to use plain text rather than text as a picture, and be careful to avoid using absolute units to define the font size of the description text;

9. Use the schematic when necessary

In some cases, it is difficult to use as few words as possible to describe a concept clearly. We can use a schematic, with a small amount of descriptive text, so that the user can leave the most accurate and profound impression.

10. More Humane

We can add a bit of individuality to the UI introduction and system hints to make the user's experience more enjoyable and natural. Personalized text requires us to devote more effort to consider and test, a lot of inappropriate tone will cause users misunderstanding.

The copy in this example is personalized and appropriate. "Forgot the password?" Never mind, who hasn't forgotten the password. Just fill in your username or email address. "Let the user feel relaxed, not because of their own mistakes in the sense of being degraded or frustrated."

11. Guaranteed Accessibility and readability

This is actually a web design and development of a general principle. For UI text, however, its relative "helper" role is often overlooked in terms of accessibility and readability.

As we have always known, those common rules also apply to the design and implementation of UI captions: Avoid using text-style pictures (as mentioned in the 8th above), add ALT attributes to the schematic, and ensure the contrast between text and background, and so on.

12. Test

In usability testing, add the UI instruction text to observe the user's identification and understanding of the UI instructions when performing the test task. Keep track of where users can cause ambiguity or confusion, and revise the tests repeatedly.

Summarize

We have learned a lot about the rationalization of the UI note copy. When you perform in a practical project, you may find that the time and effort required to do this work is beyond your imagination, but this work is worth the effort and is an important part of a successful UI design. In addition to the improvements we've mentioned in the previous article on user experience design, the most important thing is that we can make users feel that we really care about them.

This article is compiled from C7210, the original address.

The source of the translation: be for Web reprint, please indicate the source link.