WEB Software Test Checklist Application series (3) Colors and fonts

Areas of color and font test inclusion

Users use Web products to obtain a large number of data information, the display of this information, including graphics and text two parts. In the process of rendering graphics and text to the user, colors and fonts play a very important role. Reasonable color and font settings ensure that users get the information they need in the most efficient and clear manner, and if the color and font settings are not properly set, users will spend more time getting the same amount of information, resulting in a decrease in the efficiency of user access.

In this article, we will enumerate some matters needing attention in the development of WEB products, by avoiding these things, we can eliminate the bad experience that this kind of problem brings to the user, and improve the customer satisfaction of the product. Examples of specific WEB product defects are also illustrated in this article.

Color Test Checklist

1.1 Check the colors of hyperlinks

The color display of a hyperlink usually renders in three forms: the default color, the color with the cursor, and the color after the access, as shown in Figure 1.

Figure 1. Three Colors of hyperlinks display

Consistent with the above requirements, you can ensure that users switch between different products, can have a consistent user experience and the user fluent application of new products is very helpful.

1.2 Make sure all the background colors of the page are tested

For a user with good web products, all the background color of the page needs to be consistent to ensure that the user to provide a consistent user experience.

Figure 2. Page background Color Inconsistency instance

As shown in Figure 2, in this instance, when the horizontal scroll bar appears, drag the horizontal scroll bar to view the right side of the page, you can find that the left side of the pages background color is inconsistent, which will let the user experience drop, is a product defect.

1.3 Check if the color of the warning message conforms to the specification

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

Figure 3. Warning message Instance

In the process of web product development and testing, the development tester needs to check that the color of the warning message is consistent and that it conforms to the above color specifications.