Shulou(Shulou.com)06/01 Report--

This article mainly introduces "what are the three elements of user experience in building a site". In daily operation, I believe that many people have doubts about what are the three elements of user experience in building a site. The editor consulted all kinds of materials and sorted out simple and useful methods of operation. I hope it will be helpful for you to answer the doubts about "what are the three elements of user experience in building a site?" Next, please follow the editor to study!

Three elements of user experience: don't keep me waiting! Don't make me think! Don't bother me!

Don't keep me waiting.

Many studies have shown that the most satisfactory time for users to open a web page is 2-5 seconds, and 99% of users will close the page if they wait for more than 10 seconds. Maybe you won't feel too much about this. Next, I'll list a set of data: every slow 400ms of Google website access leads to a drop of 0.59% in user search requests. Amazon every increase in 100ms website delay will lead to a 1% drop in revenue; Yahoo! has a 400ms delay that will lead to a 5-9% drop in traffic.

How's it going? How do you feel now? Should I go to the test right away?

At this point, you may ask: what causes the website to open slowly? Is there any way to solve it? Don't worry, I'll come one by one. The following content is a bit technical, you need to read it patiently.

1. Reduce the number of HTTP requests

When a user opens a web page, the time required for the background program to respond to the user is not much, and the time the user waits for is mainly spent downloading web page elements, such as HTML, CSS, JavaScript, Flash, pictures, etc. Statistics show that each additional element increases the loading time of the web page by 25-40 milliseconds (depending on the user's bandwidth).

So, if you want to increase the speed of opening web pages, you need to reduce the number of HTTP requests in three ways:

1) reduce unnecessary HTTP requests, such as using CSS rounded corners instead of rounded corners, and reduce the use of images.

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

3) optimize the cache. For web page elements that have not changed (such as header, footer, etc.), there is no need to re-download when the user visits again, just read it from the browser cache.

2. Use CDN (Content Delivery Network, content delivery network)

CDN consists of a series of Web servers scattered to different geographical locations, which specifies a server to respond to users' requests according to their proximity to users on the network. When your website pictures a lot of things, it is the same to use CDN, such as today's e-commerce sites, almost all use CDN.

3. Compress web page elements

It is easy to understand that the smaller each element in the page, the less time it takes to download. Now the more mature and process way to compress web pages is through Gzip. According to my own practical experience, I can generally reduce the text content of web pages by more than 70%.

4. Put the style sheet in the Head section of the web page.

This is also a case I have actually done. Moving the stylesheet (CSS file) to the Head section of the page can improve the loading speed of the page and make the page elements appear sequentially.

5. Put the JS file at the bottom of the page

When a web page opens, all elements are displayed sequentially. Due to the particularity of the JS file, compared with other elements, it will load very slowly, before the download of the JS file is completed, the sequence display of other later elements will be blocked, so put the JS file at the bottom as far as possible, meaning that the content can be displayed quickly.

6. Put stylesheets and JS scripts in external files

Although writing stylesheets and JS scripts directly to the web page HTML reduces the number of external file calls, doing so increases the file size of the web page. To sum up, putting stylesheets and JS scripts into external files may be a little slow for users to visit the website for the first time, but later, users can use them directly through the browser cache, so as to achieve the purpose of reducing the number of HTTP requests, which is the best practice.

The words written at the end:

One of the problems that is often overlooked in improving the speed of opening web pages is response. For users, every operation, whether the result is slow or fast, should respond in a timely manner. The most typical example is whether there is a progress bar showing a percentage number when the user clicks to open a picture. Is a typical response design.

The first-class website user experience is definitely not achieved overnight, it is necessary to conduct full usability testing, collect user feedback, and continue to improve.

Don't make me think.

It is definitely not the user's fault that the user will not use a website. he will turn on the computer, use the keyboard and mouse, and open the browser to surf the Internet. after this step, he finally arrives at your website, and then finds that the site is a mess. I don't understand what it is, and I don't bother to learn how to use it, so I shut down your site without blinking an eye. This is a very realistic user behavior.

After the website can reach users quickly, the next important question that website operators face is: how to retain users?

First, pack your website

1. Who are you

When we recognize a person, we don't need to remember all the details from head to toe. We OK by looking at his face. When we identify a website, the same is true. The Logo of a website is face. Logo makes it easy for users to know who the site is, and no matter what page they browse to, they can know which site is providing the service.

2. What do you do

With the website Logo, you should also tell users what services the site provides, whether it is a shopping site, a news site, or a social networking site. Especially for a new website, a clear one-sentence introduction is crucial.

3. What benefits can you bring

This is the website differentiation advantage introduction, compared with peer competitive sites, users use your site, what are the benefits, can be integrated with "what do you do" into a sentence under the Logo.

After the basic packaging of the website, we have completed the first step of retaining users, and then, we hope that users will make further attempts in the site, how to do it?

Pay attention to users and their tasks and give clear guidance

For users, landing on any website must have a purpose. To go to the shopping website is to buy things, to go to the portal website is to watch the news, and to go to the SNS website is to share information, contact friends, etc., in order to achieve these goals, a series of operations must be carried out. If the user can complete these operations in the most convenient and fastest way and complete the task smoothly, there is no doubt that the user will stay.

For example, if it is an e-commerce website, whether there are clear prompts for on-site search, clear classification and navigation of goods, eye-catching purchase buttons, and flexible payment and settlement system, these are all around users and their tasks (online shopping). Therefore, when designing the website, we must give users eye-catching and clear operation guidelines to help users move on to the next step as soon as possible and smoothly, until the final completion of the task (next order payment).

Meet the user, in fact, is very simple, to be considerate, attentive, attentive, the user will naturally be close to you.

Don't bother me.

Users like to be lazy, and if your website is inefficient, it will upset users, leading to a bad experience and even bad word-of-mouth. There is a rough saying that the difficulty of completing a task is proportional to the square of the steps required, so shortening the completion path is to help users be lazy, which is a good user experience.

Give a positive website example to illustrate. When you log on to the American Amazon website, you can switch product specifications without refreshing after entering a product page. For example, if I want to buy an Apple laptop, I open the product page (everyone log in and try it). There will be a version switching option on the right side of the product, where I can quickly check the computer prices of different configurations, just move the mouse up. Product pictures, prices and other information will change automatically. This humanized design provides high operational efficiency for users who want to compare multiple versions of goods, and users naturally like it.

The target information should be eye-catching and close.

When focusing on the problem of shortening the completion path, optimizing the operation steps is the first priority, because we need to simplify the user's task first. Next, we need to optimize the trajectory of pointing devices (mouse or fingers, etc.) and eye movements within the task. According to Fitz's law, the time it takes to reach a goal using pointing equipment is related to the following two factors:

1. The distance between the current position of the device and the target position, the shorter the distance, the shorter the time taken.

two。 The larger the area of the target, the shorter the time it takes.

Generally speaking, if we want users to pay attention to or click on an element (such as text, pictures, buttons, etc.), then the element should not be too far from the current location of the pointing device (such as appearing on the right side of the screen). And its area should be large enough. With the heat wave of Web2.0, website design also has a series of innovations, one of the biggest innovations is "big for beauty", big LOGO, big pictures, big buttons, they not only look more powerful, but also more convenient for users to identify and click.

Reminders should be gentle and timely

In addition to simplifying the task process, the website sometimes needs to provide users with help and guidance in the process of completing the task. Before the common practice is to use a pop-up box for prompts, users need to close the dialog box to continue their tasks, virtually reducing the efficiency of the operation.

The best way to remind should turn to a gentle way, to minimize interruptions, for example: when you register a mailbox, when entering a user name, the best way to verify that the user name should be automatically checked to see if the user name is available, if it is not available, give suggestions, yeah.net email will do very well, picture outline (you can log in to try).

In fact, sometimes the operational efficiency is reduced, not because the function is not well designed, or the tips and suggestions are not handled well enough, but because some information or tasks that users do not want are forced into. For example, when a user is reading an article, an advertisement suddenly floats out and blocks the part that the user wants to read. How can the user not be annoyed?

Run a website, although it is profit-oriented, but too little attention to the user experience, ignore the feelings of users, be careful that your parents leave you, and never return.

How do you do when a user makes a mistake?

After we have done all the operational optimization, there is another situation that requires attention, that is, users will make their own mistakes.

When the user makes a mistake, he will also be very upset, he will not think that it is his own problem, but will put the blame on the site, so it is necessary to minimize the chance of users making mistakes.

To take an example of a website, when a user logs on to a website, the first thing is to enter a user name, and now the most common user name is the mailbox. When the user enters the email address in the user name input box, there will inevitably be errors, such as missing a letter, or missing a number, or the mailbox suffix is written incorrectly, and the result must not be logged in. Users must be annoyed, what should be the best way to remind them?

When the user enters the user name and the cursor leaves the input box, the website should automatically check whether the user name has been registered (available). If the user enters the user name incorrectly, it should be reminded in time, such as: the user name does not exist and the mailbox format is not equivalent. Let the user's mistakes be corrected in the bud.

At this point, the study on "what are the three elements of user experience in building a site" is over. I hope to be able to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.