Web software testing checklist application series, Part 1: navigation and links

Scope of navigation and Link Testing

In web development and testing, navigation and links provide users with a rich operation experience. Users can access various types of data through navigation and links. Navigation: In the basic sense, when a user triggers this navigation operation, the user interface is directed to another target page of the current system. In other words, navigation implements the process of changing from one data page to another data page in the system, which helps users access the associated data content more conveniently and quickly. Link. Here we refer to a hyperlink that connects directly from the Web product to an external destination address.

The navigation and link mentioned in this article can be understood as follows: navigation is a jump and movement within the web product, and the link is an access to external addresses from the Web product.

Back to Top

Navigation Checklist

Table 1. Navigation checklist Summary

Serial number	Checklist
1.1	Check whether the scroll bar is correctly displayed as needed
1.2	Verify that all operations on the webpage can be completed through the keyboard
1.3	Does the bread navigation exist?
1.4	Make sure that a user prompt is displayed when the current page is not saved.

1.1 check whether the scroll bar is correctly displayed as needed

The display of the scroll bar plays an important role in Webpage navigation. When necessary, it is necessary to properly display the scroll bar. The following example shows some examples of defects that a scroll bar may encounter in Web products.

Figure 1. Redundant scroll bar display

As shown in figure 1, the page does not display any content beyond the window display range, but the scroll bars in both horizontal and vertical directions are still displayed. At this time, the two scroll bars are redundant and a defect of the product.

Figure 2. The size of the scroll bar in the window must be changed accordingly.

Generally, the scroll bar is located at the edge of a display area. When the size of another area on the edge changes, the position of the scroll bar also needs to change. As shown in 2, when the size of the preview window in the lower part of the image changes, the upper-end scroll bar does not follow the corresponding move to the upper boundary of the preview window, leading to a blank area in the middle, this issue is a product defect.

1.2 verify that all operations on the webpage can be completed through the keyboard

Considering the wide range of users of software products, it is necessary to ensure that all functions of Web products can still be fully used only when the keyboard is operated. That is to say, you can use only the operations on the keyboard, such as press enter, text input, Tab key, and space, to smoothly apply product functions.

Figure 3. The drop-down box content instance cannot be selected for keyboard operations

As shown in figure 3, when the cursor is moved to the box "select one" by pressing the tab key on the keyboard, no response is returned when you try to select the content from the drop-down list through the up or down key. Apply this entry. Since you can select a list item by clicking the mouse, you can also use the keyboard operation. This problem is a defect of the product.

1.3 is there a bread navigation?

Bread navigation means that you can obtain the current location on the website during access and know how to return the result. This checklist needs to check whether the location and path displayed on the page are correct and valid, and does not contain redundant information.

Figure 4. Examples of bread navigation problems

As shown in figure 4, when a user clicks a resource, the product displays information about the resource as needed during data access, and display the name in the Top "breadcrumb. However, on the displayed page, When you click this resource multiple times in a row, multiple duplicate resource creden。 will appear, but there is only one truly displayed data. The redundant display information is a defect of the product and will cause problems to users.

1.4 make sure that a user prompt is displayed when the current page is not saved.

On the user input page on the webpage, if you need to leave the current page but do not save the data after entering part of the information, the product prompts the user that the data entered on the current page is not saved. Check whether the data needs to be saved. From the perspective of using products, when a user inputs a large amount of information on an input page, the user may leave the page after clicking a button due to incorrect mouse operation, this is a very bad experience for users and should be avoided during development.

Back to Top

Link checklist Introduction

Table 2. Link checklist Summary

Serial number	Checklist
2.1	Check all links in the site map and check for any damaged links.
2.2	Make sure that the destination address of all links matches the Title Description.
2.3	Make sure there is no orphan page (no link points to it)
2.4	Check whether hyperlinks are added to all network sites and email addresses.
2.5	Make sure that the cursor is displayed as a hand when placed above the hyperlink
2.6	Make sure all links are underlined.
2.7	Make sure that the link of relevant information appears at the bottom of the content or near the top of the content

2.1 check all links in the site map and check for any damaged links

Generally, various external links are provided on the webpage so that users can easily obtain information other than the associated website. We need to check all the external links that are displayed, find the damaged links and fix them.

Figure 5. Damaged linked instance

5. The page is displayed after an external link is clicked. The link is damaged and cannot point to the correct page.

2.2 ensure that the destination address of all links matches the Title Description

Generally, each hyperlink has its own title description. The description should be as clear and concise as possible to describe the destination address it points. During the development and testing process, we need to ensure that the description is consistent with the actual target address, so as to avoid inconsistent user experience.

The title of a hyperlink is the first road sign to guide the user to click. Whether the description is clear is related to whether the user can clearly understand the role of the link and the target address information. At the same time, the Title Description of the link should be as concise as possible, and contain necessary information prompts. Do not use words such as "Click here" or use more meaningful words.

2.3 make sure there is no orphan page (no link to it)

We need to ensure that there is no orphan page on the product page, that is, there is no link to its page. This type of page has no value for users and is a waste of resources. It should be avoided in the design phase.

2.4 check whether hyperlinks are added to all referenced network sites and email addresses

Under normal circumstances, a hyperlink is required for all referenced network sites and email addresses, so that users can easily know that these sites and email addresses are hyperlinks, by clicking these hyperlinks, users can easily access different destination addresses. Otherwise, the user will be able to copy these links and mailboxes to the browser, which will greatly increase the complexity of the operation and cause inconvenience to the user.

2.5 make sure that the cursor is displayed as a hand when placed above the hyperlink

When the cursor is placed above the hyperlink, the cursor changes from the original icon to the hand shape, which helps remind the user that the current region is the hyperlink range. Click to trigger the hyperlink jump. If the hand shape is not properly displayed, it will be a defect of the product. In addition, when the cursor is above the button that can be clicked, it should also be displayed as a hand icon to remind users that they can click to jump to the area.

Figure 6. hyperlink cursor not displayed as hand instance 1

As shown in figure 6, when the cursor is in a highlighted hyperlink area, it is not displayed as a hand. When you click the mouse, the target page displayed in the description is displayed.

Figure 7. hyperlink cursor not displayed as a hand instance 2

Figure 7 shows a Help button page. When the cursor is above the Help button, a prompt "click the help icon to learn more" appears ". You can click the help icon to jump to more help pages, but when the cursor is above the help icon, the cursor is not displayed as a hand, which is also a defect of the product.

2.6 make sure all links are underlined

To give users a clear reminder, all links need to be underlined, so that users can clearly know the scope of the hyperlink on the page, where is not. Of course, the font color of the hyperlink is usually different from that of the surrounding area. The accessed link and the unaccessed link color are also different. The definition of specific colors varies by product, but all links are underlined.

2.7 ensure that the link of relevant information appears at the bottom or near the top of the content

Generally, "related information" is used to help users get more in-depth information about the current page content, usually at the bottom of the current content page or near the top. This helps users locate and find relevant information. It is assumed that if the link of relevant information appears in the middle of the content, it will be confused with the hyperlinks inherent in the content, and the user will be difficult to locate and find the desired links.

Back to Top

Summary

As an important tool for users to use web products, navigation and links are objects directly operated by users and play an important role in improving user experience. The design of the two should be concise and efficient. While providing users with convenient navigation and mobility, they should also strive to eliminate redundant information.

This article discusses the application of navigation in Web products and checklist in links respectively, and provides some application examples in actual testing, demonstrating the specific product defect scenarios. The purpose of this article is to enable webpage product developers and testers to provide efficient products in terms of navigation and links, and eliminate product defects based on the checklist items mentioned in this article.