Does your user experience cross the border? Check 3 key elements.

Today by Grace big sister to the students to introduce embarrassing encyclopedia founder Wang Jian "net" a book reading notes, focus on the user experience design of the most critical three elements: Don't let me wait! Don't make me think! Don't make me sick! Daniel Handwriting, absolutely no water, words are dry goods, take to use, brutal effective. If you don't say much, read it.

@ embarrassing things encyclopedia Wang Jian: User experience three elements: Don't let me wait! Don't make me think!

　　Don't make me wait.

A number of studies have shown that users most satisfied with the open Web page time is 2-5 seconds, if waiting for more than 10 seconds, 99% users will close the page. Perhaps this way, you will not have too many feelings, next, I enumerate a set of data: Google Web Access speed per 400ms slow, resulting in user search request down 0.59%; Amazon's 100ms web site delay will result in a 1% drop in revenue; Yahoo if there is a 400ms delay will lead to a drop in traffic 5-9%.

How do you feel now? Is it time to do the test work right away?

At this point you may ask: What causes the website to open slowly? What can be solved? Don't worry, I'll come in one by one. There are some technical aspects of the following, you need to be patient to read.

　　1, reduce the number of HTTP requests

When the user opens a webpage, the background program responds to the user's time not much, the user waits the time mainly spends in downloading the webpage element, namely HTML, CSS, JavaScript, Flash, picture and so on, statistics shows, each additional element, Web page loading time increases by 25-40 milliseconds (depending on the bandwidth of the user).

So, to improve the speed of web pages, we need to reduce the number of HTTP requests, there are 3 ways:

1 reduce unnecessary HTTP requests, such as using CSS fillet instead of fillet picture, reduce the use of pictures.

2 merge files, for text files, you can merge content directly. For example, multiple JS (JavaScript abbreviated) files are merged into one, and multiple CSS files are merged into one.

3 optimize the cache, for the unchanged page elements (such as the page header, footer, etc.), the user again visit the time there is no need to download, directly from the browser cache read it.

　　2. Use CDN (Content Delivery Network, contents distribution network)

The CDN consists of a series of Web servers dispersed across geographically different locations, which specify a server to respond to user requests based on how close the user is to the network. When your site pictures a lot of things, just like to use CDN, such as the current electronic business site, almost all using CDN.

　　3, compressed page elements

The smaller each element in a Web page, the less time it takes to download it, which is well understood. Now more mature and process of the compression of the Web page way, is through gzip, my own experience in practice, can generally reduce the content of the Web page text more than 70%.

　　4, the style sheet is placed in the Head section of the page

This is also my actual operation of the case, the style sheet (CSS file) moved to the head of the page, you can improve the loading speed of the page, so that the page element order display.

　　5, put the JS file to the bottom of the page

When a Web page is open, all elements are displayed sequentially. Because of the specificity of the JS file, compared to other elements, it will load very slowly, in the JS file download complete, the other elements of the sequential display will be blocked, so the JS file as far as possible on the bottom, meaning that the content can be quickly displayed.

　　6, the style sheet and JS script into the external file

Although writing style sheets and JS scripts directly into Web page HTML can reduce the number of external file calls, doing so increases the file size of the page. Overall, the style sheet and JS script in the external file, perhaps the first time the user will be a bit slow, but the subsequent visit to the site, users directly through the browser cache can be used, so as to reduce the number of HTTP requests for the best practice.

　　Summary:

One problem that is often overlooked in raising the speed of Web page opening is responsiveness. For users, each operation, whether the return result is slow, or fast, should be timely response, the most typical example is: When users click to open a picture, whether there is a percentage of the progress bar, is a typical response design.

First-class website user experience is definitely not overnight, to conduct adequate usability testing, collect user feedback, continuous improvement.

Don't make me think.

Users will not use a site is not the user's fault, he will turn on the computer, will use the keyboard and mouse, will open the browser to the Internet, after such steps eventually reached your site, and then found the site is a mess, do not understand what it is, what it is, also lazy to learn how to use Then you will close your website without blinking. This is a very realistic user behavior.

The next important question that site operators face when they can quickly reach users is how to retain users?

　　First, the packing your website

1, who are you

We identify a person, do not need to remember him from head to toe all the details, look at his face OK; when we identify a site, the same reason, the site's logo is the face. Logo allows users to easily know who the site is, regardless of browsing to any page in the site, you can know which site is in the provision of services.

2. What do you do?

With the website logo, but also to tell users, what the site is to provide services, shopping sites, news sites, or social networking sites. Especially for a new website, a clear statement of the word is essential.

3. What benefits can you bring

This is the site's differentiation advantages, compared to peer competition site, users use your site, what is the advantage, can and "What do you" integration into a sentence as to the logo below.

After the foundation of the site packaging, we are finished to retain the user's first step, next, we want users to make further attempts in the site, how to do it?

　　Second, focus on users and their tasks, give clear guidance

For users, landing any one site, must have its purpose. Shopping site is to buy things, door-to-door site is to see the news, SNS site is to share information, contact friends, to achieve these goals, it is necessary to carry out a series of operations. If the user can be the most convenient and quickest way to complete these operations, the smooth completion of the task, no doubt, the user will certainly stay.

For example, if it is an electric business site, whether there is a clear site search function tips, clear product classification navigation, eye-catching purchase button, as well as flexible payment settlement system, these are around the user and their tasks (online shopping). Therefore, in the design of the site, we must give users eye-catching, clear operation guidelines to help users quickly and smoothly into the next step, the next step, until the final completion of the task (order payment).

Satisfy the user, in fact very simple, do intimate, attentively, the heart, the user will naturally close to you.

Don't make me sick.

Users are like lazy, if your site operation efficiency is very low, will make users irritable, and then lead to bad experience, and even bad word-of-mouth. A rough word is that the difficulty of accomplishing tasks is proportional to the square of the steps needed, so shortening the completion path is a good user experience.

Give a positive example of the Web site to illustrate. Landing in the U.S. Amazon, when you enter a product page can not refresh the switch product specifications, for example, I want to buy an Apple laptop, I opened the product page (everyone login to try), the product right there will be a version of the option to switch, where I can quickly see the different configuration of the computer prices, Simply move the mouse up, merchandise pictures, prices and other information will be automatically changed. This humanized design, to compare the product of multiple versions of users to provide a very high operating efficiency, users naturally like.

　　Target information to be eye-catching and close

In the focus on shortening the completion path of the problem, the optimization steps are the first, because we first want to simplify the user's task. Next, we need to optimize the trajectory of the pointing device (mouse or finger) and the trajectory of the eye movement within the task. According to the Fitzpatrick Law, the time to reach a target using a pointing device is related to the following 2 factors:

1. The distance between the device's current position and the target location is shorter and the time spent is shorter.

2. The larger the area of the target, the shorter the time spent.

In layman's terms, if we want the user to notice or click on an element (such as text, pictures, buttons, etc.), the element should not be too far away from the current position of the pointing device (for example, on the right side of the screen), and its area should be large enough. Along with the Web2.0 heat wave, website design also has a series of innovation, one of the biggest innovation is "to big for the United States", big logo, big picture, big buttons, they not only look more impact, but also more user-friendly identification and click.

　　Be gentle and timely in the way you remind

In addition to simplifying the task process, the site sometimes needs to provide help and guidance to users as they complete their tasks. Before the common practice is to use the frame way to prompt, users need to close the dialog box to continue their task, virtually reduced operational efficiency.

The best way to remind yourself should be to move to the gentle way and cut the interruption to the minimum, for example: When you sign up for a mailbox, when the user name, the best way to check is to automatically query whether the user name is available, if not available, should give suggestions, Yeah.net mailbox to do very well, Tullo (you can login to try )。

In fact, sometimes the efficiency of the operation is reduced, not because the function design is not good enough, or tips and suggestions are not handled well enough, but because of forced to cram some users do not want information or tasks. For example, the user is reading an article, suddenly floated out an advertisement to block the user want to read the part, how can users not annoyed?

Operating the website, although the profit-oriented, but too much do not pay attention to the user experience, ignore the user feel, be careful of the food and clothing parents away from you, and gone.

　　When a user makes a mistake, how do you do it?

After we do all the operation optimization, there is a situation that requires additional attention, that is, users will make their own mistakes.

When the user is wrong, he will also be very upset, he does not think it is his own problem, but will put the responsibility to the site, so to minimize the user's chance of error.

For example, when a user logs on to a Web site, the first is to enter a username, and now the most common username is to use the mailbox. When the user entered the user name in the input box, the inevitable error will occur, such as less than 1 letters, or write less than 1 digits, or the mailbox suffix write wrong, the result must be landing does not go in. Users must be annoyed, what should be the best way to remind them?

When the user enters the user name, the cursor leaves the input box, the website should automatically verify that the user name has been registered (usable), if the user fills in the error, should give the reminder in time, for example: the user name does not exist, the mailbox format is not so, lets the user's error in the

Give me another example of a non-web site. The laptop power cord may stumble and the laptop will fall to the ground, which is probably not covered by the warranty, which is bad. To see how Apple did it, Apple unveiled a power connector called MagSafe to reduce this error, magsafe the power cord and notebook in a magnetic way, and automatically disengage from the laptop when the power cord is externally powered. Isn't that a very intimate design?

There are many more examples of such cases, which are not listed here. Remember: Whether users like a site, not only depends on his use of the site to obtain the benefits, but also depends on his experience in the site, both are user value, indispensable.