Interface language-a trio of icons and text

The importance of text in interface design is self-evident, but such an important part still has no exclusive job and has to say that there are some regrets. Today, we will talk about the importance of "Copy-writing" based on our work summary during this period and a previously compiled article.

The difference between Facebook's "like" and Google's "+ 1" seems insignificant, but it is enough to influence users' behaviors and choices. Defining controls with appropriate texts is the most important part of interface design. Jason. as early as the book "Getting Real", Jason Fried explained the importance of the text, however, five years later, the text is still a common "Achilles Heel" in the interface design ".

　　

 

　　Clear first, clever second

Reasonable words can make your design clearer. The icon is like a hard-to-be-Tame horse: You can freely express your intentions and actions when it is warm, and once it is violent, it will be difficult to control or even hurt users. A magnifier can indicate amplification or search; a downward arrow can indicate download, storage, or simple "Drop"; a backward arrow cannot explicitly tell the user whether the modification will be saved; X may be disabled by one user, but another user may consider it as canceled, and even some users may delete it. Therefore, when creating icons, designers should follow the quasi-things principle as much as possible-using the equivalent actions or objects in real life to express the operation most clearly.

　　

 

Danish designer Peter Steen hø genhaug has carefully studied the icons that indicate "Join links" in some well-known websites and applications. You may think that their designs have rules to follow, however, this is not the case.

　　

 

As you can see, most website management (CMS) systems and applications use the chain pattern in the icons. The only difference is that Facebook uses a sticker and a pin, which Peter thinks is less reliable than the chain. In the next test, he specially arranged a series of different tasks for the lab object to complete, one of which was to add a link. The experiment also includes some other commonly used icons:

　　

 

Some test objects interpret the chain icon as "bind things together" or "connect different elements ". This understanding is not an error, but the problem is that they do not really know what the "things" bound together are, so the icon button cannot express the meaning exactly as the text button. For example, there are many different interpretations of "you can access the Internet", "Search", and "upload to the Internet" in the comprehension of "link 2" Earth icon buttons.

　　

 

In general, only 35.29% of the experimental objects can correctly understand the chain icon, and only 25% of the objects can understand "link 2 ". Although the experiment does not set a minimum value that represents availability, obviously 25% means a poor user experience in any situation. In the interview, an experimental object even asked:

"Why not use WWW? Everyone on Earth knows this !"

Indeed, as he said, "WWW" can be understood as "accessing the Internet" or similar actions. In subsequent experiments, it was also confirmed that each lab object could correctly understand the "WWW" text icon. It may not be the best solution in many applications and designs, but it is the best choice for expressing links in experiments.

　Clear first, clever second

As in the above example, although you can try a combination of envelopes and arrows in visual design, however, there is nothing more intuitive to express the meaning of this action than the word "Send message. This does not mean that the interface based on the icon control must be poor. In the long run, they sacrifice the smoothness and consistency of the user experience for the first time in order to make the interface beautiful. This is the tough decision you make as a designer based on the scenario and budget.

When designing a control button, I encountered the following situation: button operations on a specific interface can be best expressed only by text, however, icons can make the interface more beautiful and unified. Considering that there is not much time left in this project cycle, we provide two solutions, first using the most intuitive text button, in future iterations, if you can visually make beautiful and clever icons, we will use the icon button in the second solution. Because good icons cannot be squashed out, they need not only the designer's inspiration, but also a little bit of luck = P.

　　

 

　　From the user perspective, truly user-centric

When designing a synchronous interaction between bookmarks of QQ browser for Mac, the local bookmarks on the Bookmarks Bar will be replaced by Web bookmarks after the user logs on. For users who have many local bookmarks or have used QQ browsers for a while before registering or logging on to the QQ account, the changes in the previously familiar bookmarked column will definitely affect the user experience. We hope to provide users with a prompt that they can merge the local bookmarks into the Web bookmarks. With such a simple yellow note, my copywriting almost broke my head:

　　

 

The above is only part of the alternative scheme of the current text. For the designer, some problems may be clearly explained and clarified, however, in principle, we do not want to emphasize the difference between local bookmarks and network bookmarks, thus increasing the user's cognitive burden. (Some may ask, is it as bad for users to use local or network bookmarks like Chrome? Unfortunately, for various reasons, the current QQ browser does not adopt the synchronization logic of Chrome.) At this time, it is clear that the first and second principles are not applicable? Let's start with the user!

In this case, the user sees that the favorites on the original Bookmarks Bar disappears and replaces it with the Web bookmarks. At this time, the user may be Panic. Where are my bookmarks !? None of the previous texts can well appease users, but it may lead to more questions: "What is network/local bookmarks ?" "Can I use a local bookmarks ?" Wait...

　　

 

Now let's take a look at the text used by the QQ browser. "Why can't I see my local bookmarks after login? You can merge local bookmarks to the network ." This may still not be the best solution, but compared with the previous text, this write gives users a reassurance when they need to appease the most: the familiar bookmarks are gone? Don't worry, we know and provide solutions to merge local bookmarks into the network. As a result, most users will choose "merge ", after the merge, the Web bookmarks will also contain the original local bookmarks. This has also achieved the previous design goal.

　Not just text

Ogilvy (British advertising magnate) once said, "When you write down the title, you have spent 80 cents of a dollar ". This famous saying in the advertising industry also applies to the interface design. I believe most designers who read this article know Dribbble. I am not an image designer, so I cannot tell exactly how the light source of some works Works works is used, where adjustments should be made gradually, etc. But when I see beautiful buttons or drop-down menus, even some UI elements I have never seen on the Internet. The first idea is whether the meaning of these works is clear if they are used on a certain interface. Controls such as buttons, drop-down, navigation, labels, and icons must be clearly and clearly understood by users. When I browse Dribbble to find the icon inspiration, I often ask: "Can this work clearly express the action, meaning, or help on the interface ?"

Finally, if there is a special DRIBBBLE =]

　　

 

Reference from: http://contrast.ie/blog/the-language-of-interfaces/#more-2402

(This article is from the Tencent CDC Blog. Please indicate the source when reprinting)