Language of the interface: duet of icons and Copywriting

The importance of copywriting in interface design is self-evident, but such an important part still has no exclusive position to say there are some regrets. Today, especially in conjunction with their work summary of this time and compiled a previous article to talk about the importance of "copy" (copy-writing).

The difference between Facebook's "likes" and Google's "+1" seems trivial, but ultimately it is enough to affect the user's behavior and choices. Defining a control with the right text is the most important part of the interface design. Jason Fried The importance of copywriting in the "Getting real" book, but 5 years later the copy is still a common "Achilles heel" in the design of the interface, "he said."

Clear first, ingenious second

A reasonable use of words can make your design more clear. The icon is like a boisterous that is hard to tame: when docile, it can express intention and action freely, and it is difficult to control or even hurt the user once it is irritable. A magnifying glass can indicate amplification or search; A downward arrow can indicate a download, save, or simple "whereabouts"; a backward arrow does not explicitly tell the user whether the modification will be saved; X is likely to be turned off by one user, but another user will interpret it as a cancellation, even in the eyes of some users. So when creating an icon, the designer should try to follow the principle of the object--with the most explicit expression of the action or objects in real life.

Danish designer Peter Steen Høgenhaug has studied a number of well-known Web sites and applications that represent the "Add Link" action icon, and you may think that they are designed to be rule-based, but not the case.

As you can see, most Web site management (CMS) systems and applications use chain patterns in icons. The only difference is that facebook– uses a post-it note and a pin, and Peter thinks it's not as reliable as the chain. In a subsequent test, he specifically arranged a series of different tasks for the subjects to complete, one of which was to add a link. The experiment also includes some other common icons:

Part of the test object is to interpret the chain icon as "binding things Together" or "connecting different elements together." That's not a bad idea, but the problem is they don't really know what the "thing" is, so the icon button doesn't exactly mean what the text button does. For example, the test object's understanding of the "Link 2" earth icon button has many different explanations such as "You can access the Internet," "Search" or "upload to the Internet".

Overall, only 35.29% of the subjects were able to understand the chain icons correctly, and only 25% of them understood "link 2". Although the experiment did not set a minimum value for availability, it is clear that 25% in any case would mean a bad user experience. In an interview, one of the subjects even asked:

"Why not www?" he said. The people of the Earth know! "

Indeed, as he said, "www" can be understood as "access to the Internet" or similar actions, and in later experiments it was also confirmed that each subject could correctly understand the "www" text icon. It may not be the best solution in many applications and designs, but in experiments it is the best choice for expressing links.

Clear first, ingenious second

As in the example above, although you can try a variety of envelopes and arrows in visual design, there is nothing more intuitive than the four words "send a message" to express the meaning of the action. This is not to say that the icon control-oriented interface is not necessarily bad, in the long run, in order to the appearance of the interface slightly sacrificing the user's initial use of experience fluency and consistency. And that's what you need as a designer to make a tough decision based on the scenario and the budget.

When I design a control button, I encountered the situation: a specific interface button operation only in words to the best expression, but the icon can make the interface more beautiful and unified. Considering the duration of the project cycle is not much time, we gave two solutions, first use the most intuitive text button, in the future iterations if the visual can make beautiful and clever icon we followed the second set of options using the icon button. Because good icons cannot be a pinch, they need not only the inspiration of the designer but also a little bit of luck =p.

From the user point of view, the real user-centric

When designing a bookmark for a QQ browser for Mac synchronization, because the user is logged in, the bookmark on the bookmarks bar will be replaced by the bookmark. For local bookmarks more or use a period of time after QQ browser to register or login QQ account users, the original familiar bookmarks bar changes will be used to experience a bad impact. We want to give the user a hint at this point that they can merge the local bookmark file into the network bookmark. Such a simple little yellow tip, its copy almost let me scratch the scalp:

It was just part of the Copy option, and some of the designers themselves might have explained the problem clearly and clearly, but in principle we didn't want to emphasize the difference between local bookmarks and web bookmarks to increase the user's cognitive burden. (Some students may ask, like Chrome, users, whether local or online bookmarks are the same bad?) Unfortunately, for a variety of reasons, the current QQ browser will not take the synchronization logic of chrome at this time clear first, clever second principle is not suitable? Let's move on to a different angle, starting with the user itself!

In this case, the user is looking at the original bookmark on the bar of the collection disappeared, replaced by a network bookmark. At this time the user may be panic, my bookmark where to go!? The previous copy is not very good to appease the user, may also bring more questions "what is a network/local bookmark?" "I want to use a local bookmark, can I?" Wait a minute...

Take a look at now QQ browser to use the copy, "Landing after the local bookmark did not see?" You can merge local bookmarks into your network. "This may still not be the best solution, but compared to the previous copy, it's reassuring when users need it most: are the familiar bookmarks missing?" No hurry, we understand and also provide solutions to merge local bookmarks into the network, so that most users will choose to "Merge", after merging in the network bookmark will also contain the original local bookmark files. This also achieves the previous design goal.

Not just words

Ogilvy, a British advertising tycoon, once said, "When you write the headline, you've spent 80 cents in a dollar." The famous quotes in the advertising industry also apply in the interface design. I believe most of the designers who read this share know dribbble. I'm not an image designer, so I'm not exactly sure what the lighting of some works is good or bad, where it should be adjusted incrementally, and so on, but when I see pretty buttons or pull-down menus, even some UI elements I've never seen on the web. The first idea is often whether the work is clearly meaningful if used in an interface. Control elements such as buttons, Drop-down, navigation, tags, or icons need to be clearly understood by the user. When I browse the dribbble looking for icon inspiration, I often ask: "Can this work be clearly expressed in the interface of action, meaning or help?"

Finally, if the copywriting also has a special dribbble =]

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

Article Source: Tencent CDC