Web Design tips: User experience design and UI design

Web page Production WEBJX article introduction: recently because I want to do a small web site, but also struggling to find a suitable art and design, can only own up. So I read some books about the user experience and the UI.

Recently because I want to do a small web site, but also struggling to find a suitable art and design, can only own up. So I read some books about the user experience and the UI.

This should be a reading note.

1, the general layout of the page

Generally speaking, we divided the page layout according to the number of columns into a column, two-column and three-column style.

For a column page layout, generally put an impact on the page of the picture or flash to impress the user, but such a page can hold a very limited amount of information. So often used in corporate websites, as well as a number of small web site home, used to let users remember your station. In addition, for more functional than a single page, also generally use a column layout, such as search engines, registration and login page and so on.

Two-column layout is the most common layout, the second column is divided into Zoquan right narrow and left narrow right wide. The choice of these two modes is determined by the nature of the website. For the user, his browsing focus is left to right, so the narrow part is generally the navigation bar, and the wide part is the main content part, then in which way will depend on your station is the content of the main or navigation, in other words, content-driven navigation or navigation to drive content.

For example, take Dangdang, the average user to buy things have a clear purpose, he knows what they want to buy the category, and the main station content is only a recommendation to the user. But for Cnblogs, obviously the content should be greater than the navigation. So in fact, in my opinion, the design of Blog Park is not reasonable.

Dangdang Home

Cnblogs Home

For the three-column layout, the biggest advantage is that the amount of information is large, but the focus is not prominent, reducing the user's controllability of the site, so the general sense is not recommended.

Of course, if users need to be more diversified, you can also allow users to design layout, more common in personal blog.

2, the permeability of the page

The permeability of the page refers to the whole page as far as possible to unify the module, at the same time, through lines, color and other visual elements to increase the distinction between the modules, so that the user's line of sight can be regularly through each module, and will not be interrupted by irregular intersection between the modules.

In addition, according to the "F" principle, you should also try to place important, user-related content in the upper-left corner of the page.

3, the color scheme of the page

Each site must have its own main color, the main color refers to the main color of the page, the overall trend, other color combination can not exceed the main color of 50% (except white background).

When choosing colors, we should not only consider the meaning of the color itself, such as security, romance and so on, but also consider the following factors.

A. Target user groups. Different groups of users have different tastes and understandings of color, including gender, age, occupation, etc.

B. Local cultural customs. such as China's red as a festive color, and most of Europe but the red as a symbol of killing.

C. Type of website. such as E-commerce stations generally use warm tones to stimulate users to buy, and SNS station to create a relaxed atmosphere. and the vertical class website generally is related to own domain characteristic.

D. Brand image. I summed up a word is based on their own logo and corporate image to choose colors. IBM, for example, will definitely choose blue as the main color.

4, the page head and the end of the page

The head of the page is divided into design head and simple head. The general large-scale website, because already has the certain website popularity, therefore does not need to be in through the rendering head to enhance the website to the user's attraction, deepens the impression. Therefore, the general use of simpler simple type of head, such as Sina, Tencent, are the effect of such. For some small sites, the use of the design of the head to impress the user, creating a brand effect, but when the design of the head is too complex, but to allow the content of small quantity, resulting in a top-heavy feeling. So this requires a compromise of the designer.

The most important on the page is the logo, in the design of the modern website, the logo played two functions, one is the logo, one is to let the user back to the home page.

The end of the page is generally not important and the user has fewer opportunities to get there, so try to simplify it and avoid taking up the position it occupies.

5. Search area

Now the site generally with the function of site search, there are two ways to design.

One way to dilute the search, because search is just a means to browse the Web site, I do not encourage you to search, but I hope you see it one by one. such as watercress. I want you to see the dynamics of the community instead of wanting you to come to the watercress to find someone.

One is search-oriented, the simplest is Taobao. Generally speaking, users come to E-commerce stations have a clear purpose, so search is the user to find the most important way he wants the goods.

In addition, for the search box, if you encourage users to use the search box, when the page is just opened, you can have the cursor on the search box, so that users can search the content directly, without a single operation. But if that's not the case, don't let the cursor be on the text box, because the user will not be able to use the keyboard to move the entire page down.

6. Login and Registration

The first is whether to dilute the login registration or to emphasize login registration, depending on the purpose of the site. Two typical is Sina and watercress. For Sina, the need for the site is only the amount of browsing, and whether the registration is not very small, so it will only weaken the landing, no login can enjoy the basic rights, including "anonymous" comments and other functions. And watercress and many SNS sites need to be registered through the user to expand the relationship between friends, so in the watercress first of all is the landing registration in the most conspicuous position, and then use some advantages to incite user registration.

But personally think with the SNS site gradually bigger, although not like Sina and other information stations, such as weakening the user's login registration, but will not be in the login to browse, posting and other necessary one, but will be anonymous as an optional. Sina and other information stations along with the development, will gradually move to social networks, thereby reaching a network of information stations and SNS compromise.

7. About Advertising

Advertising has always been one of the main means of profit for the Internet. But I have to admit, no one likes to watch ads. Therefore, there is always an unavoidable direct contradiction between the advertiser and the user, and in a sense, there is no restriction on the network advertisement, which leads to the confusion and irrationality of the website advertisement.

However, when we are interspersed with ads in our website, we should ensure that our own site does not affect the user's browsing.

First of all, according to the survey, the most acceptable form of advertising users are mobile advertising and banner ads, and pop-up ads and mail ads are the most annoying users.

Secondly, from the layout, we can not let the ads cut off the content of the page, because many users once see the ads will habitually think that the content of the page has been aborted, not to continue browsing, so this will affect the entire content of the site's relevance.

Then, we want to avoid too many ads appearing at the same time. Also want to standardize the size of the site ads.

8, the form layout design

This is the most typical form in terms of registration.

The layout is divided into three ways, including vertical alignment, left alignment, and right alignment.

The advantage of vertical alignment is that it can reduce the time of the eye to move and fill in the form, but the disadvantage is to increase the vertical space, when the registration item is more, will increase the scrolling of the page. The information and information applied to the collection is familiar and requires less time to finish.

Left alignment makes it easier for users to browse labels while reducing vertical space. However, if a label is too long, it will cause text to be too far away from the text box. is not familiar to the required information, and the label text is not too long.

The right alignment makes it difficult for users to quickly retrieve what the form wants to fill out by making the ragged left blank packets.

In addition, at design time, it is best to group the items associated with the registration, so that users can be separated by the smallest possible visual elements to avoid visual noise.

For many options, you might want to provide a default option to minimize the user's actions. and give appropriate tips to give users help, remember it must be appropriate, not too much.

In addition, you can also use some larger fonts and spacing, do not allow users to create a sense of constraint.

9. Module label

Module label, which is used for a module in the page, in the top of the content using a list of labels in the form of a link to switch.

When using module tags, first of all must have a basic premise, the content should be relatively independent, can not exist in the context of the relationship.

When designing the module tag and the following module content, I summarize it as two points: highlighting contrast and enhancing correlation.

Highlighting is the contrast between the highlighted and unchecked labels, and the enhanced correlation is the enhancement to select the relationship between the label and its content module.

10, Button

The first step is to use a larger button that contrasts with the background color to make the button that you want to focus on to jump out of the Web page.

Second, we need to selectively emphasize and weaken a button based on the primary and secondary button. But the weakening of the same approach may be emphasized in another respect. This needs to be based on experience to combine the prior knowledge to consider.

Also pay attention to the placement of buttons, such as the user's view from the top down, from left to right, so that users will be in accordance with this order to make a choice.

11, Feedback

One of the important principles of the Nielsen Usability principle is that the system must provide the necessary feedback. This includes success hints and failure prompts.

The success hint is the simplest hint that he should only act as a hint and not interrupt the user's actions. We should just have to let the user know. The user should not be allowed to do any unnecessary operations, such as the bomb layer is a very stupid way.

The failure hint is a very important hint, theoretically divided into two ways, one is directly on the Web page with text prompts, one is pop-up warning box to prompt. But I personally think the pop-up warning box is very undesirable, because the most important point is that alert when the sound, so the user experience is very poor, so it is a compromise to do a pop-up layer.

There is also a very important error page, such as 404 pages, excellent 404 pages should be able to improve the user's bad experience, reduce the frustration of users, but also should be directed to the user he intended to go to the associated places to reduce the user's loss rate.

With regard to the progress bar, according to the study shows that more than 1 seconds to provide appropriate information, such as progress bar, and more than 10 seconds will not only need to prompt information, but also to provide the percentage of completion.

12. Other personal thoughts about verification code

For example, verification code is used to prevent malicious registration, but not to prevent the normal user, we should not let the user because of the verification code frustration. If I were to design a CAPTCHA, I would exclude the English "O" and the number "0", the English "L" and the number "1" from the verification code.

In addition, I have the idea that, first of all, the password is in the post back in the process is unable to save the original state, so the only way is Ajax postback verification. But when is Ajax, only when the focus is lost. So I think it's best to put the validation on the top of the page so that users can easily leave the focus and trigger Ajax validation.