Web software testing checklist application series, Part 1: Color and font

Categories included in color and font tests

Users can use Web products to obtain a large amount of data information. The information is displayed in two ways: graphics and text. Color and font play a very important role in the process of presenting images and texts to users. Reasonable and appropriate color and font settings can ensure that users can obtain the required information in the most efficient and clear way. If the color and font settings are inappropriate, the user will spend more time to obtain the same amount of information, resulting in a reduction in the user's efficiency in obtaining information.

In this article, we will list some precautions for Web product development. By avoiding these issues, we can eliminate these problems to some extent and bring users a poor experience, this improves the customer satisfaction of the product. This article also provides examples of some specific Web product defects.

Back to Top

Color Test Checklist

Table 1. Color Test checklist Summary

Serial number	Checklist
1.1	Check the hyperlink color
1.2	Make sure that the background color of all pages is tested
1.3	Check whether the color of the warning message complies with the specifications.
1.4	Make sure the colors of similar pages are consistent.
1.5	Make sure that the foreground and background colors are readable.
1.6	Do not highlight active components in red.

1.1 check the hyperlink color

The color of a hyperlink is usually displayed in three forms: default color, color when there is a light mark, and color after access, as shown in 1.

Figure 1. display of three colors of a hyperlink

According to the above consistency requirements, users can ensure consistent user experience and experience when switching between different products, which is helpful for users to smoothly apply new products.

1.2 make sure that the background color of all pages is tested

The background color of all pages must be consistent for a webpage product that users use to ensure consistent user experience.

Figure 2. instances with inconsistent page background colors

As shown in figure 2, when the horizontal scroll bar appears in this instance, drag the horizontal scroll bar to view the content on the right side. You can see that the background color of the pages on both sides is inconsistent, this reduces the user experience and is a defect of the product.

1.3 check whether the color of the warning message complies with the specifications

Warning messages need to be eye-catching reminders and warnings to users, which can be easily discovered by users. Therefore, the color of the warning message is usually set to pink, as shown in 3.

Figure 3. Warning Message instance

During webpage product development and testing, developers need to check whether the color of the warning message is consistent and whether it meets the above color specifications.

1.4 ensure that the colors of similar pages are consistent

In order to maintain the consistency of webpage product page design and provide users with consistent experience, the colors of similar pages must be consistent.

Figure 4. instances with inconsistent background colors of similar pages

The example shown in 4 is a previous case where the background color of similar pages is inconsistent. In this instance, when no data is displayed in the left-side options and the right-side reports window components, different background colors are displayed. in the user's opinion, both cases reflect the absence of data. The two window components should display the same background color at this time, which is a defect of the product.

Figure 5. instances with inconsistent background colors of similar forms

In Example 5, the background color of the headers without columns in the same table is different. The title form of the first column is displayed in a uniform color, while the rest of the columns on the right appear in an uneven color jump, which is also a defect of the product.

1.5 make sure that the foreground and background colors are readable

Due to the sensitivity of human eyes to color contrast, in order to ensure the user's ease of display content, it is necessary to ensure that the foreground and background colors are different to a certain extent to achieve a certain contrast. Otherwise, if the foreground color is too close to the background color, it will bring great reading difficulties. For example, the foreground color is blue. If the background color is blue, the foreground and background will be mixed together, making the user unable to distinguish.

Figure 6. instances with a very close foreground color and background color

As shown in section 6, the background color of the displayed table content is very similar to that of the foreground color, which is very difficult for users to read. This is a defect of the product. You need to increase the contrast between the foreground and background colors.

1.6 do not highlight active components in red

Because many people are red-green blind, do not use red to highlight active components. According to statistics, the proportion of male in the world is about 8%.

Back to Top

Font test Checklist

Table 2. Summary of font test Checklist

Serial number	Checklist
2.1	Make sure that the font settings of the entire web product are consistent.
2.2	Make sure that the page layout is not damaged when the font is enlarged
2.3	Make sure all fonts are easy to use.
2.4	Make sure that different types of content are displayed on the same page.

2.1 ensure consistency of font settings in the entire web Product

In order to provide users with a consistent experience, consistent setting rules must be adopted for fonts across the Web product. Consistent font settings are required for similar content in different places.

2.2 make sure that the page layout is not damaged when the font is enlarged

When you need to enlarge the font of a webpage, you must ensure that the page layout of the product is not damaged and you can still provide all functions for you. In this case, make sure that the components on the page are not blocked.

2.3 make sure all font settings are easy to use

Ease of use and ease of use are important content in the design of web products. The problem of easy color settings is mentioned above. Here, the ease of font setting is also important. Reasonable font settings can make content presentation more efficient and hierarchical.

2.4 make sure that different types of content are displayed on the same page.

When multiple types of data are displayed on a page, try to distinguish different types of content with different fonts, and use bold, italic, and underline in combination, in order to make the data more hierarchical, more conducive to user reading.

Figure 7. Display instances with different types of data

As shown in 7, the displayed content includes different hierarchies, but all of them are displayed in the same font. This will make the user look more difficult. If you can use different fonts for different content, the user looks much easier and quicker. For example, you can use a slightly larger font size for "How often" and "occurs on", and use a different font for "weekdays" and "Weekends, the effects of italics can be differentiated because they are related to the total score in seven days of a week. This makes it easier for users to identify the total category and the specific number of days.

Back to Top

Summary

Color and font display are directly associated with the user experience. The proper and reasonable color and font settings in Webpage products will bring great convenience to users. If the settings are unreasonable, users will feel that the product is difficult to use, this reduces user satisfaction. In the process of webpage product development, we should think more from the user's perspective and think about how to make users get the required information most efficiently.