How do I design a copy link in a Web page?

"User Research Perspective Design" series is Taobao's user research team in the usability of the test after a bit of thinking. In each of the direct contact with Taobao users, observe the user's operation, as experience analyst we will always feel: "Why some details of the design seems to be very conspicuous, the user is not noticed?" "and" Why do users have to understand that? "," Why is the user in that process confused, even unable to complete the task? "And then, we'll think about the reason behind the interface, what the user was saying, what caused the user to understand that ... This process requires very rigorous thinking because any word that is fed to the designer can lead to different designs. At the same time, this process also makes us very enjoyable, if the design is to solve the problem, the usability test after the analysis time is the analyst's "Design" time.

We hope that through the user research perspective, to give designers a little inspiration, and we found in the study of the problem, solidified in the design pattern library, so that the same problem will not occur in the future. Of course, as experience analysts, we don't know much about interactive design and visual design, and can't grasp the constraints of the project like designers, so the contents of this series may be more superficial, more emphasis on the direct idea of "user" in "Business-technology-user" three.

In addition, our thinking from Taobao or other web site designers design, so, sometimes may be taken as a counter example, but also ask you to forgive designers. We try to take examples of our own website as a negative example, if in the anti-case involved in your site, but also please forgive me.

Let's start with the first story--

There is a typical detail on a Web page, and it's so subtle that sometimes designers remember to squeeze a position to it at the last minute of the project, but it is so common, in a number of Web site details page inadvertently appeared; we don't see it in software, but in hypertext, in the world of friends, it flashes It is "copy link", the English alias is tell a friend, send to a friend, tip a friend, share, e-mail to a friend or directly is the URL (Figure 1). As a designer, have you ever noticed it?

(Figure 1: YouTube） when does it appear more appropriate?

When you want to share a Web page (or the main content of a Web page) with someone else , it can save users time .

Typically, it appears on a site's content details page, such as video site playback video page, blog site blog post page, photo site Photos Details page, Shopping site Merchandise page, and so on. Take the blog site for example, it appears to say, "Maybe your friend will be interested in this article Oh, click Me, and then share with friends to see it!" ”

What to pay attention to when using it

1. Do not have to appear on a page multiple times

Designers should remember it in the design process, but don't miss it too much. Provide it only when it is needed, even if the page is very long, there is no need to appear two times on the first and last screen of the page like the "Buy Now" button, because "Buy Now" allows the user to go to the next step to complete the purchase, while the "Copy link" is only a minor task, mostly used by people interested in it.

2. Similar functions have the same visual weight

Flip through your site personas (or the site's click Logs), what they often share to friends-through IM, email or other, then highlight the most important one, if multiple similar functions are tiled together, I am afraid will violate the "Don't let me think" principle. Look at the first few links in the second row below the player in Figure 2: "Outbound references," Send Friends "," forward ", three features share the meaning, and mixed in 9 links, I had to stop to think," I want to click which one? " ”

(Figure 2: a video site)

3. Don't let it seem too noisy

The process of designing it, it is important to remember to make the user aware of it, or to know where to look when the user is looking for it. For example, if it is a blog page, do not let the "copy link" text size exceeds the content of the blog body, also do not let the replication link area too obvious, so that interferes with the core content of the article.

Figure 3 is a counter example of the Taobao community, input boxes and buttons appear in the form, this component is always more obvious than ordinary text, it appears at the bottom of the community content, may interfere with the user's reading of the last few paragraphs of text.

(Figure 3: Taobao community )

In addition, in the use of the input box to copy the design, it is not possible to consider when the user clicks on the input box, with the script automatically select the entire input box content (example 1), rather than let the user from left to right, drag the left mouse button to select all.

<input type= "text" id= "foo"/>

<script type= "Text/javascript" >
document.getElementById (' foo '). onfocus = function () {this.select ();}
</script>

(Example 1)

Where does it appear on the page?

In the preparation phase of usability testing, we looked at this with the question: "When a user is interested in something, does he know where to find it?" "and" when the user clicks on it, what does he clearly do (copy or share)? "The previous question means whether its findability is good enough, and the latter question means that the position can be linked to what he wants to do."

For example, if a user wants to share an article with a friend, it is more appropriate to place the feature near the post rather than the comment. That said, some people might think, "It's better to be around the article, who's going to design it around the comments," but sometimes it's more like a comment than an article after a banner ad is added underneath the article.

What Chinese words do you use to describe it?

I personally think that in different situations should be used in different Chinese words, but the interface does not have other words to interfere with the user's understanding, Figure 4 is a blog an article part of the screenshot, you can immediately say, up and down two "sharing" what is the difference?

(Figure 4: a portal blog)

I think you have guessed that the above "sharing" is a noun, and the following "sharing" is a verb, so be cautious when using a word that can be either a verb or a noun. In addition, I suggest that designers always take into account the moment of "this moment", imagine the user is from the search engine, he did not know your site's structure, function, he came to your design a page, he came, his time is limited, he is not willing to think too much, your website through that moment let him at a glance?

Don't use any words.

1. "Sharing":

Sharing contains the meaning of shared editing, often used in wikis. So using it may create ambiguity.

(Figure 5:Google Docs )

2. In some cases, words without clear meaning:

I personally think that "copy link" is a contextual link, Peter Morville in the Web information architecture, "contextual links must be very direct and meaningful ... If you pick it up, you know what you're going to see. Such highly representative labels will be clearer through their scenarios: descriptive text, clear headings, and a direct, straightforward use of the site itself. ”

"Copy link" is just the title of this type of link in this article, and do not recommend the direct use of this name, only 4 Chinese characters difficult to express what to do after replication, users will think "why I can not directly copy the address bar or click the right mouse button to copy it?" "I clicked what it could bring for me?" ”。 In some situations, "copy picture links to friends" may be more direct and clear. Further, if you through the survey, found that a lot of users through the Taobao Wang Wang to send the image address, then, better expression may be "Copy the picture address sent to Wang Wang friend."

I think, there is no best answer, text and your website temperament and user use scene is closely related, text is also one of the designer's sharp weapon.

What happens after you click on it?

1. To consider the content of the "copy link"

When you carefully consider the user's use of the scene, you should be very clear how to design a copy link. The inclusion of content topics in shared information, as shown in Figure 6, is really good for those who share through IM.

(Figure 6: Sina blog )

2. Let the content of sharing meet the needs of users:

If users have multiple needs for a replication link, you might want to design a variety of replication paths. Learn about Flickr's design (Figure 7, Figure 8), how it maintains a clear logical relationship among a variety of replication links. (Of course, the default of the first item by mail sharing may be more common to Americans, for Chinese users is another matter)

(Figure 7: Flickr Site, before users click to share)

(Figure 8: After users click and share)

3. To help users think more:

Share an example of a photobucket (Figure 9), when the mouse is moved to the picture, there will be a gray floating layer (this is the modified design, originally the gray layer always exists), let the user copy. Click the mouse to include the address of the input box, the system will automatically copy the link, and in the input box before a few seconds of "copied" hint. This approach can provide feedback, without the alertbox of a blunt sense.

(Figure 9: photobucket.com） Summary

When designing the Copy link feature, first think about the user's usage scenarios and what the user might do with it, and then make sure that the user understands what this feature can do. Finally, the excellent design should also give the user a surprise. In my collection of examples, Photobucket's "copy address" design did give me a big surprise.

What are some of the better examples you've found, please tell me!