A Lite Checklist for UI (User Interface) Testing

The software testing stage is a crucial step to take if your objective is to pass a ready highly reliable project to your customer with minimum errors. There are different types of testing, and in this article, I want to consider the type which is related to software product UI testing.

UI testing is a process of verifying the GUI for its compliance with specifications, general principles, and specific project requirements.

It involves simulating user actions like clicking buttons, following links, and other similar actions. In this way, developers check the product for its correct operation, mutual interaction of components, and the UI usability as a whole.

Main Criteria for a High-Quality UI: A Short UI Checklist

It has somehow come to pass that developers now pay more attention to the functional testing since the task “to make everything work” is considered to be of greatest importance. However, the product’s visual aspect is as important as its correct operation, right?

The logical question then arises: what criteria should the UI correspond to in order to be considered “nice”?

This is precisely the point when you angrily ask yourselves the questions “What is good, anyway?” “How do I measure nicety?” and “What bugs need documenting?” Here are some key points, by going through which during the UI testing process you can be sure your UI will provide a positive user experience.

The product UI matches the prototype. The visual correspondence, the position of the elements, and the distance between them should be similar to those designated in the wireframe.

Typography. The text should be clearly readable against the background and on other elements. Users should also clearly see the difference between headers and main text content. Never use more than two fonts (headers and main text).

Style conformity. Your customer may have a corporate identity or a brand book that includes a certain color scheme, fonts, and other standardized or related items. In this case, you have to check if the product design meets these requirements.

Adaptability. Check how all UI elements are displayed on screens of different sizes and in portrait and landscape orientations.

Compliance with standards. Check your app UI for compliance with Google and Apple requirements (human interface guidelines for iPhone/iPad). There are certain elements necessary for normal operation in one OS environment but not needed in the other.

The functionality use. Make sure that the UI interactive elements behave properly: all buttons respond to clicks, app settings operate correctly, etc. All elements must be sufficient in size allowing users to easily manipulate them.

Check the spelling. Check the text for spelling mistakes because if there many, it can spoil the developers’ reputation. In addition, users may misinterpret this or that UI element designation due to these errors.

Check fields and standard items. Test how a field behaves: when filled in with incorrect data; if a long name is entered; when data is selected; etc. Check how radio buttons, checkboxes, fields for specific information (e.g. credit card number), and other elements look, are positioned, and respond.

Information elements. Check how error messages, notifications, and other elements related to this category look and are positioned.

These are versatile steps relevant for virtually any app UI testing.

Main UI Testing Advantages and Criteria for a Quality UI

We can emphasize three main arguments in favor of such work:

1. UI testing covers most of the user’s actions and allows developers to comprehend the quality of the interaction between the potential audience and a mobile app.
2. This provides the opportunity to test the mutual interaction of components and services in practice.
3. The app reliability increases and the flaws found can be verified long before the release.

There is one obvious drawback, though. To perform the task, a lot of time is required.
Always remember about the main criteria for a quality UI, which we can reduce to the following key principles:

• To complete the tasks, the user has to spend the minimum time;
• When working with the app, the number of possible errors should be reduced to a minimum;
• It is necessary to make sure that users completely understand the UI and to remove any ambiguity it may have;
• The amount of data entered by the user should be minimal;
• The UI should be easy to understand and visually appealing.

Examples of User Interface Testing in Practice

1. You can see two bugs in the screenshot below. The one is that the username is shown in a smaller font when compared to others, which can be perceived as disrespect for all users. The other one is that we have two different font colors in the header and the page body:

2. The next example shows that media and components are not correctly aligned among themselves in the UI:

3. In the third example, we see the same drop-down lists applied to the same page, but having different styles:

4. The same screenshot shows that the authorization page uses too many different fonts and styles:

Let Us Summarize

When designing the UI for any product, remember to provide usefulness and convenience for the end user. After all, the person’s willingness to continue using the app or not depends on how good the UI is.

In many cases, testing the UI is a must. If you skip testing the system yourselves, users will most certainly do it anyway. Consequently, if there were errors at a design stage, you could get negative feedback, complaints, and reputational losses instead of the expected profit.

Use my checklist, provided in this article, when testing the UI and you will be able to achieve a really good result.