Web software testing checklist application series, Part 1: content, images, and buttons

Scope of content, images, and button tests

In Web products, text content ("content" for short) and images are two important sources for users to obtain data. The content mainly uses text as the main body to transmit information, while images provide information to users in a more eye-catching manner in the form of charts. The two parts are both indispensable. Buttons are used to perform related operations on user clicks to achieve interaction with users, which plays a very important role in user experience.

In this article, we will list some checklist entries that are widely used in Web product testing. These entries must be noted during development and testing. Some examples encountered during the test are also listed for your reference.

Back to Top

Content test Checklist

Table 1. Summary of content test Checklist

Serial number	Checklist
1.1	Check whether the content is properly arranged
1.2	Check whether tags are properly arranged
1.3	Make sure all words are in correct case
1.4	Make sure that all error messages do not contain spelling errors.
1.5	Check whether redundant information exists on the product page.
1.6	Make sure that the uneditable area is displayed as black text, gray background, and Black Label.
1.7	Make sure that the product is correctly displayed at maximum, minimum, and optimal resolution.
1.8	Ensure that the content is clear and accurate

1.1 check whether the content is properly arranged

In order to provide users with a good user experience, and to comply with the industry's common UI design standards, the text content should be arranged neatly and orderly, and easy to read. Otherwise, the unordered text content will leave users with an unprofessional impression.

The following example shows a type of defect instance caused by no alignment in the number bar.

Figure 1. Number of non-aligned defect instances in the display bar

In this instance, the number on the Left vertical axis of the chart is not aligned. It can be seen from the figure that the display of the integer 1,000,000 and the integer 2,000,000 is not in the same vertical line as that of other numbers, which is a display defect of the product.

1.2 check whether tags are properly arranged

Similar to the content arrangement mentioned in section 1.1 above, labels must be properly and neatly arranged. Regular and tidy arrangement makes tags look more regular and user experience better.

The following are examples of problems with the two tags.

Figure 2. misaligned vertical labels

In the instance in Figure 2, the content of the Left entry and the input box on the right cannot be aligned in the vertical direction, and there is a dislocation. This is a defect of the product. This defect occurs only when the browser size of the web page is reduced, but cannot be reproduced when the browser size is maximized.

Figure 3. Horizontal label Mismatch

3. There is no direct relationship between the two component labels shown in the red box, one for the selection list and the other for the progress bar. However, the space between the two is located in the same horizontal position. Only when the two are aligned horizontally can they comply with friendly design specifications and make the user look more comfortable.

1.3 make sure all words are in correct case

According to the common web UI design standards in the industry, words are case-sensitive. The most basic requirement is to ensure consistency of all similar expressions in the product.

During the test, we encountered the following window component description in the test product: "variable-length segment splits". In this description, from the perspective of consistency, obviously, the last word "splits" should be capitalized and should be "variable-length segment splits ".

1.4 make sure that all error messages do not contain spelling errors

The error messages provided by the product play an important role in the user experience, because the error message not only prompts the current error, but also provides the corresponding solution to the user at the same time, tells the user how to deal with it. Therefore, clear and accurate expression of error messages is crucial for improving user experience.

Figure 4. instances with inconsistent information in error messages

In the instance shown in figure 4, an error message is displayed on the user name logon page. The summary message is "invalid user ID or password. ", when you click the summary message, the error message is displayed, showing a detailed explanation message" error: the username or password you entered is incorrect. more details ". The summary message and the detailed explanation message should be consistent, and the two expressions of user names are inconsistent here. In the summary message, "User ID" is used, and in the detailed explanation, the word "username" is used. Here, the description of the same object must be consistent, this is a product defect.

1.5 check whether redundant information exists on the product page.

Web products need to provide users with sufficient information, but they should also try to eliminate redundant functions and information, because redundant useless content is a disturbance to users.

Figure 5. Redundant navigation focus

5. When you press the tab key to move the cursor to the position marked by the Blue Circle in the figure, the cursor position at this position does not provide users with any useful functions and information. It is a redundant function. For product defects, the cursor focus position should be removed.

1.6 make sure that the uneditable area is displayed as black text, gray background, and Black Label

For areas that cannot be edited, you should use explicit display features to inform users that the areas cannot be edited. Normally, the area cannot be edited to display foreground text in black, a gray background, and a Black Label. In this way, when you see such a region, you will know that the region cannot be edited, and you will not try to edit or change it.

1.7 ensure that the product is correctly displayed at maximum, minimum, and optimal resolution

Due to the diversity of environments and platforms for users to use products, in order to provide users with consistent services at all resolutions, the products must be correctly displayed at the maximum, minimum, and optimal resolution.

Figure 6. Display Error instances in the case of low resolution

The error shown in Figure 6 is displayed when the resolution is 1024*768. This is the minimum resolution supported by the product. In this resolution, the display in the label bar on the top of the product overlaps, some content cannot be normally displayed due to occlusion, which is a defect of the product.

1.8 ensure clear and accurate content

The information presented in Webpage products is directly oriented to users and provides valuable information services to users. Therefore, it is necessary to ensure that the information displayed in the product is accurate and clear, and there cannot be ambiguous or even wrong information.

Figure 7. Displaying instances with inaccurate content

In the above example, the message in the window component of the webpage mentions that no relevant sensing information is found in this period of time, but the specific time period refers to how long it is ambiguous. The actual situation is that the default time period here refers to the past 90 days. In this way, the product should clearly inform the user of the lack of relevant sensing information in the past 90 days, make it clear.

Back to Top

Image test Checklist

Table 2. Summary of image test Checklist

Serial number	Checklist
2.1	Make sure all charts are neatly arranged
2.2	Make sure that no invalid images exist in the product.
2.3	Check the image size.
2.4	Check all title areas and their dimensions
2.5	Use text in charts as few as possible
2.6	Make sure all charts match their descriptions and titles

2.1 make sure all charts are arranged neatly

Like the text content and label arrangement mentioned above, when multiple charts are displayed simultaneously on a page, you need to ensure that all the icons can be neatly arranged in terms of appearance and ease of use. In general, misplacement may lead to poor user experience, or even cause users to fail to find the information they need accurately.

2.2 ensure no invalid images in the product

Images are an important way for products to provide information to users. As a product developer, you must ensure that all images designed in the product are valid. When the image fails, timely and appropriate handling is required. As you can imagine, when a user looks forward to obtaining the relevant image, the user experience will certainly not be satisfactory if the user sees a red forks and invalid images. Therefore, in the development and testing process, we need to try our best to prevent the existence of invalid images. At the same time, we must also consider that the images may become invalid during later use, we also need to provide effective processing methods for this.

2.3 check the size of the image used

In a webpage product, the image source may be generated by the product or uploaded by the user. Regardless of the image source, the product needs to check and limit the image size.

Image Display is subject to several restrictions:

1. Images of small sizes are not easy to read and contain a small amount of information.
2. Large images may cause performance degradation due to the upload speed and user download speed restrictions.
3. Check whether the uploaded image is valid and the image format is supported.

From the above analysis, we can see that the inspection of the image size is very important for the performance and user experience of the product. Developers and testers should ensure that the product can correctly handle various situations, including uploading and displaying valid size images and processing illegal content uploading.

2.4 check all title areas and their dimensions

The title area is usually in the most prominent position of the product, and the problem should be minimized. Once a problem occurs, it is very easy for the user to pay attention to and has a strong impact on the user experience.

Figure 8. Title area text size display problems

In the instance shown in 8, configuration and support are two feature labels displayed in the title area. When a user clicks configuration, the text display will be reduced, which is significantly different from the support label next to it. This is a product defect.

2.5 use text in charts as little as possible

The information transmitted by charts is directly transmitted through graphs. Excessive addition of text content may affect the user's efficiency in obtaining the original Chart content. Of course, necessary text descriptions and descriptions are also indispensable in some application environments.

2.6 ensure that all charts match their descriptions and titles

Charts provide richer information than text, and are generally accepted by users at a faster speed. However, you must also ensure that the content transmitted by the chart is consistent with its description and title. Otherwise, it will not only not deliver clear information to the user, but also cause problems to the user.

Back to Top

Button test Checklist

Table 3. Button test checklist Summary

Serial number	Checklist
3.1	Ensure that all the maximize, minimize, and restore buttons work properly
3.2	Make sure there are no blank lines at the bottom of the drop-down list box
3.3	Trigger all the scroll bars and make sure all contents are visible
3.4	Make sure all buttons are properly named and consistent with the operation.
3.5	Make sure that the cursor is displayed as a hand above and only above the activated button

3.1 ensure that all maximize, minimize, and restore buttons work properly

The maximize, minimize, and restore buttons are essential to almost all pages and are the most widely used buttons. Therefore, ensuring that such buttons work properly is the most basic requirement for Web products.

3.2 make sure there are no blank lines at the bottom of the drop-down list box

A drop-down list is an important component in web design. It is used to provide users with an optional list. To ensure that each row in the list is a valid option, pay special attention to whether there are empty rows at the bottom.

3.3 trigger all the scroll bars and make sure all contents are visible

The scroll bar is very important in Web products. It ensures that users can still browse all content when the content to be displayed exceeds the display area of the browser. During the test, the tester tries his best to trigger all the scroll bars and make sure they work properly. Generally, there are many ways to trigger a scroll bar, such as adjusting the size of a Web browser and generating more content.

Figure 9. the scroll bar does not work.

In the example shown in, the height of the displayed content exceeds the upper and lower display areas of the web browser, but no scroll bar is displayed on the right. As a result, users cannot view and operate on the content and functions that are not displayed, this is a product defect.

3.4 ensure that all buttons are properly named and consistent with their operations

The button name should be clear and consistent with its corresponding functions. In this way, you can see the button name clearly.

Figure 10. Invalid button name instance

"OK" is displayed for the "OK" button name. Although there are no syntax errors, the first letter of the "OK" button name is usually in the English name of the button. This is a small problem, but too many similar small problems will also greatly reduce the user's recognition of product quality.

During the test, we encountered many similar small problems. For example, we have encountered a webpage Logout button named "log out", which is also the same problem. It should be "log out ". Don't underestimate these small problems. from the user's point of view, can the product quality be reliable even if such small problems are not corrected?

3.5 make sure that the cursor is displayed as a hand above and only above the activated button

To provide a valid reminder to the user, when the cursor moves above the activated button, it must be displayed as a hand icon to remind the user that the corresponding operation of this button can be performed now. When the cursor is located above the inactive button, the original shape should be maintained to inform the user that there are no executable operations.

Except for the active button, the cursor should be displayed as a hand, and above all hyperlinks, the cursor should be displayed as a hand, prompting the user.

Back to Top

Summary

In Web products, text content and images are important sources for users to obtain information, and buttons are equally important as an important means to perform diversified operations. This article introduces the checklist corresponding to the above aspects in combination with examples to serve as a reference list for Web product developers and testers.

The next article in this series will introduce the application of checklist in testing the user availability and access control of Web products.