Web Design Theory: A comprehensive design of various elements in the page

Web design has navigation, links, form design, font spacing, blank, form focus, 404 error pages and so on elements. It can be said that each page is composed of the above elements, so for the study of Web user experience, is to study how to combine and design these things.

How to improve the usability of web products?

Excellent product availability, has always been product managers and user experience designers to pursue the goal, today we talk about how to improve the usability of the website products, for everyone to do for reference. Whether it's a corporate website, a personal blog, or a shopping or gaming site, we all want to attract visitors and leave them with a pleasant experience.

Usability is a measure of the user experience that can be described by the ease with which a visitor completes the site's functionality-whether through their own knowledge or by learning a new way of doing it. I think Jakob Nielson's explanation is very much in place, he said:

Usability is an attribute that assesses the ease of use of a Web site. The term "usability" also refers to ways to improve usability in the design process.

In this article I want to be able to provide a list of availability that covers multiple aspects, from visual design to simple navigation tips that can be used in any project.

1. Current position navigation

Let the user know at any time which module they are in, or browse the classification. For any site, this can greatly enhance usability. At this point, creating the current location navigation can be considered the most effective way to enhance availability.

The ideal way to navigate the current location is to create it on the server side, which can save a lot of HTML and CSS code. If it is not convenient to create navigation on the server side, it is also a good idea to use CSS to manipulate your body elements to directly define each navigation tag.

In addition, you can easily use JavaScript to create the current location navigation menu.

Be aware that your current location navigation is best and the mouse over the style to stay different, this is a lot of web site shrinking attention.

2. Available form labels and buttons

Using the HTML Label property allows users to activate form elements by clicking on the Annotation tab, which is a great built-in feature of HTML, but unfortunately few users know about it. How to let the user understand this function? You can alert the user by changing the shape of the mouse pointer, which requires only one or two lines of code.

After this, the user is very easy to know that the tag can be a point, I often feel that the HTML standard does not put these can point to the elements of the uniform set to small finger needle is very inappropriate, so I usually I will be such a unified definition:

Label, Button, input[type= "Submit"]{cursor:pointer;}

3. Link your logo to the home page

I think the logo does not link to your home page is a frustrating thing, just a lot of sites do not do so. User research has shown that doing so is very necessary for users to need it! Today more and more websites are aware of the importance of adding links to logos. User has not satisfied with a marked "Home" text link, users want to point to the logo can return to the home page.

Take Facebook for example, which adds a "ref" attribute to each navigation element to track user clicks. The following figure:

4. Increase the click area of the link

About a year ago, 37Signals Ryan Singer wrote an article about how they can increase the clickable area of the link in the Basecamp project. This is also a small detail to enhance the usability of the website, it only needs you to increase the padding value around the link can effectively increase the click area.

For any site this is a worthwhile way to try, it can be the way users are late or not point to the link. and the design of mobile Web pages is more important, because many users use their fingers to click on the touch screen link, increase the area can help them more convenient browsing the web.

5. Form Element Focus Display

Adding focus to the active form element is increasingly becoming a trend in UI design. It lets the user know what they have done and what they are doing. This is a simple but effective way to deliver useful details to the user.

6. Provide a useful 404 error page

To create a page that can help users find the information they need correctly, such as displaying some apologies, adding a search box, a referral article or a homepage link, and so on, try to keep the user on the site instead of pushing the user into the wrong link.

Here are some excellent 404 pages to enjoy:

Highly creative 404 error page Appreciation

7. Create a comfortable text environment nowadays, the website Copywriting has become a very big topic, do the website have more and more details to consider.

Throughout the ages, discussions about the content of Web sites have never been interrupted and their standards have been changing. Steve Krug once advocated cutting down half of the text and presenting them in a list.

But now it's different, we need to use the way of dialogue with friends to write copy, so that users feel a comfortable and warm atmosphere. So users will be less cramped, even if they encounter the use of problems, he will be happy in the site to help find solutions.

8. Adjust line spacing to enhance readability

Line spacing is one of the elements that can be directly overused from traditional media such as books and magazines to Web pages, which have been studied and improved for more than hundreds of years and have accumulated a great deal of good experience. So the next time you design, you can turn the magazine to find inspiration first.

Line spacing is often overlooked or misused in web design, and I usually start with 1.4 times-fold spacing and then adjust according to design and content.

9. Use whitespace to differentiate and categorize elements

Grouping content elements is a way to display content. You can use pictures, borders, or just use whitespace to categorize them. Using whitespace to categorize content elements can create a natural and harmonious user experience, even a hurried glance, the content will be at a glance.

When a user scans a Web page (for example, when reading a TOP10 list), it first notices the title. Our first hope is that the content of our website is very interesting and can attract users to read further. But the correct guidance to the user, will be the content of the display to promote and complement each other role.

10. Barrier-Free Browsing

This does not mean "508 Act" (that is, Section 508, American law, generally described as: some special user groups, such as people with disabilities, when browsing a website, if not normal access to the expected information, it can be based on relevant laws and regulations, the site to prosecute the law. The "barrier-free" point here is to think about everything for your users so they can easily find what they need. If you can make sure that browsing is easy to keep your users from getting angry and not throwing their sleeves away, then "quick response" is the last line of defense to keep your users.

If you have the determination, you can do all you can think of the test, and then a variety of references to the user's trial comments. The goal is to keep users to the maximum, because the user's individual consciousness and habits are different, it is difficult to find a way to satisfy all users.

When it comes to "barrier-free browsing" and "quick response," You may first think of people with visual impairments, but that means far more than that. For example, you must allow your site to adapt to user bandwidth limitations (dial-up, mobile internet, slow speed, etc.) and older browsers (some companies will not allow employees to upgrade their browsers).

If we do our best to eliminate the obstacles to the use of the site, and the problem of the corresponding site quickly, we can build a perfect user experience, give users a good impression and will come back again.