Ten tips and tips for improving website availability

Ten tips and tips for improving website availability
Author: oncoding Source: Tianji net responsibility Editor: Sheng Xiaoying

Whether it's a corporate website, a personal blog, a shopping website, or a game website, we all want to attract visitors and give them a pleasant access experience.

Availability is a measure of user experience. It can be described with the convenience of visitors to complete website functions-whether through their own knowledge or by learning new ways. I think Jakob Nielson is very well explained, he said:

Availability is an attribute used to evaluate the ease of use of a website. At the same time, the term "availability" also refers to a way to improve usability during the design process.

In this article, I want to provide an availability list covering visual design and simple navigation prompts that can be used in any project.

1. Current location navigation

Users should know at any time which module they are in or which category they are browsing. This can greatly improve availability for any website. At this point, creating the current location navigation is the most effective way to improve availability.

The ideal method for the current location navigation is to create it on the server, which saves a lot of HTML and CSS code. If it is not convenient to create a navigation on the server side, it is also a good way to use CSS to manipulate your body element to define each navigation label directly.

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

Note that the navigation style of your current location should be different from that of the mouse sliding style, which is not paid attention to by many websites.

　　

2. available form labels and buttons

Using the label attribute of HTML allows users to activate form elements by clicking the annotation tag. This is a great built-in function of HTML, but unfortunately few users know this.

How can users understand this function? You can remind users by changing the shape of the mouse pointer. This only requires one or two lines of code.

　　

After this is done, the user can easily know that this label can be clicked, I often think that the HTML standard does not set the elements that can be clicked as small-handed pointers. Therefore, I usually define them as follows:

Label, button, input [type = "submit"] {cursor: pointer ;}

3. Link your LOGO to the homepage

I think it is frustrating that the logo is not linked to the homepage of your website. Many websites do not. User Research shows that this is necessary and users need it!

Today, more and more websites are realizing the importance of adding links to logos. The user is no longer satisfied with a text link marked as "Homepage". The user wants to click the logo to return to the homepage.

Taking Facebook as an example, it adds the "ref" attribute for each navigation element to track user clicks. For example:

　　

4. Increase the click area of The Link

About a year ago, Ryan Singer of 37 Signals wrote an article about how they increased the clickable area of links in the Basecamp project. This is also a small detail for improving website availability. It only requires you to increase the padding value around the link to effectively increase the click area.

For any website, This is a method worth trying. It can be used by users by mistake or by not clicking the link. It is also more important for the design of mobile Web pages, because many users use their fingers to click the link on the touch screen, increasing the area can help them more easily browse the Web page.

　　

5. Form element focus display

Adding focus display for form elements in the active state is becoming a trend in uidesign. It allows users to understand what they are doing and what they are doing. This is a simple but effective way to transmit useful details to users.

6. provide a useful 404 error page

It is unpleasant to make the website present a large Apache error message to users. Creating a friendly and useful 404 error page is a good solution. For non-developers, the "404" number does not have any meaning or value. Users only want to find the information they need on the website.

Create an error prompt page that helps users find the information they need correctly, for example, adding a search box, a recommendation article, or a homepage link while displaying some apologies, try to keep the user on the website, instead of pushing all the responsibilities to the user and entering an incorrect link.

Here are some excellent 404 page views: the very creative 404 error page views

　　

7. Create a comfortable text Environment

Today, website copywriting has become a big topic, and more details need to be considered for website creation.

From ancient times to the present, the discussion on website text content has never been interrupted and its standards have been changing. Steve Krug once claimed to cut down half of the text content and then present them in the form of a list.

But now it is different. We need to write a text in a conversation with our friends, so that users can feel a comfortable and warm atmosphere. In this way, the user will feel less uncomfortable. Even if they encounter problems in use, he will be happy to find a solution in the help of the website.

　　

8. Adjust the line spacing to enhance readability

Line spacing is one of the elements that can be directly transferred from traditional media such as newspapers, magazines, and so on to the webpage. The research and improvement of these content has been carried out for centuries and has accumulated a lot of excellent experience. So before you design it, you can flip the magazine to find inspiration.

The line spacing is often overlooked or abused in web design. I usually design it from 1.4 times the line spacing and adjust it based on the design and content.

　　

9. Use blank spaces to differentiate and classify elements

Categorizing and combining content elements is a way to display content. You can use images, borders, or just blank spaces to classify and differentiate. The use of blank content elements can create a natural and harmonious user experience, even a quick glance, the content will be clear at a glance.

When a user browses a webpage (for example, when reading the top 10 list), he or she will first pay attention to the title. First of all, we hope that our website content is interesting and will attract users to read it further. However, correct guidance for users will promote and complement the content presentation.

　　

10. Accessibility

This does not refer to section 508 (US law, namely section 508). It is generally described as: when some special user groups, such as the disabled, browse a website, if you cannot obtain the expected information normally, you can file a lawsuit against the website in accordance with relevant regulations. ) "Accessibility" refers to allowing your users to easily find what they need by considering all aspects.

If you want to ensure that browsing is not accessible, so that your users will not get angry and leave without leaving your sleeves, then "Quick Response" is the last line of defense for you to retain users.

If you have the determination, you can perform all the tests you can think of, and then refer to the user's trial comments from multiple parties. The purpose is to retain users to the maximum extent, because there are differences between the user's individual consciousness and habits, it is difficult to find a way to satisfy all users.

When talking about "accessibility browsing" and "Quick Response", you may first think of people with visual impairment, but the meaning is far greater than that. For example, you must adapt your website to your bandwidth restrictions (dial-up Internet access, mobile Internet access, slow network speeds, etc.) and earlier browsers (some companies will not allow employees to upgrade their browsers ).

If we do our best to eliminate obstacles to website use and quickly respond to website problems, we can establish a complete user experience, this gives the user a good impression and will return again.