As “First impression is the last”, so GUI (Graphical User Interface) does matter and creates a lot of difference about how interesting & interactive a user finds your application. The importance of decent and attractive GUI can be felt more significantly in smart devices environment where screen size is far smaller as compared to laptop or desktop screen.
GUI testing can be the toughest part especially while testing on the smart device. You should pay full attention to the GUI while testing on smart devices. This is surely a critical task that deserves significant time and resource allocation.
Practical Tips for Testing GUI on Smart Devices:
For me, while doing GUI testing, all the controls are accused. I raise questions why they are there on the screen and then I try to find an answer for these questions. I argue in opposition and favor of the controls one by one and I do all this without discussing with someone else. It is the time when I’m wearing multiple hats. Controls are accused and I’m the Prosecutor, I’m the Defense Lawyer and I’m the Judge as well. During all the process a control must have valid and solid reasons in its favor to be present there on the screen and consume space. I suggest you try this method. It will definitely help you to decide which controls to display on the screen.
There also arises the situations where you are given an already built GUI to test. In such situations, you need to also think about the missing controls – the controls that will add value to the screen. Compare the importance of such missing controls with the ones that currently exist on the screen. If you think that you need to make a change and add the missing control on the screen, then go ahead.
Once you have decided which controls will be shown on the screen, think thoroughly about size, style and location of the controls on the screen and most important – how the user will interact with them?
3 important factors to be considered while testing GUI on Smart Devices:
There are too many variations in screen sizes and available resolutions. In smart devices especially, controls sizes are not static, they have relation to the available screen size.
While testing, make sure that controls size looks esthetically good and control is completely visible on the screen without any scrolling. Test the GUI on different devices with different screen sizes and resolutions.
Emulators are good for this purpose but nothing matches the real device. So make sure that you test on at least two or three real devices. Also, don’t forget to test on landscape and portrait orientations if the device supports it.
You must test the application under commonly used resolutions to ensure its usability.
Few things that you must understand here are:
- The difference between screen size and resolution: The screen size is the length of the screen in inches measured diagonally or from one corner to another corner of the screen. The screen resolution is the width and height, example 640w × 480h that represents the number of pixels going across the screen multiplied by a number of pixels going down.
- Some standard screen resolutions:
- 640 × 480
- 800 × 600
- 1024 × 768
- 1280 × 800
- 1366 × 768
- 1400 × 900
- 1680 × 1050
Definitely, your application has a specific design. And the style of the controls should match with that design. You might have seen many applications where some controls e.g. panels have round edges and other controls e.g. text boxes have sharp edges. Although these type of issues doesn’t affect the usability or functionality of the app, still a consistent look of the application helps to build a friendly relation between the application and the user.
One of the most important thing in style is the font of the different pages. The font should be tested well in order to avoid any inconsistency in the look and feel of the application.
Most of the times, we focus the text that is visible in normal situations and ignore the text that appears in specific situations. Success and Failure messages are an example of such type of text.
Another factor which important in style is a relation between the font colour and the situation in which text is displayed.
For example, Red colour is used for Error messages, Green for success, Yellow for warnings and Blue for hyperlinks.
Location and position are the two words that are used alternatively and it is interesting that they are further used to convey two different concepts that are explained below:
1) Sometimes it is the area on the screen where a control appears.
For example, Header is located on Top of the page, Labels are Left Aligned, and Text boxes are Right Aligned etc. Here, ‘top’, ‘left Aligned’ and ‘Right Aligned’ are relative positions of the controls.
2) Sometimes it is the order of a control among the other controls.
For example, while getting personal info, First Name is followed by the last name. Or, the format of controls to ask for a US address should be in order– ZIP, City, State.
For both these situations, we are talking about the location of the controls.
While testing for location and position of controls, make sure that everything is logically placed on the screen and shows a good aesthetic sense.
There are situations where one or more controls appear on more than one screen. In this situation, you must make sure that they appear in the same location and in the same relative order on all the pages.
Checklist – Testing GUI on Smart Devices
Below is the checklist for testers to ensure that the GUI is tested completely well on smart devices:
|✅||Test overall color scheme and theme of the app on the device.|
|✅||Check the style and color of icons.|
|✅||Test the look and feel of the web content across a variety of devices and network conditions.|
|✅||Test for multi-column layout – check if columns are aligned correctly and viewable even on a lower resolution.|
|✅||Test if progress indicators are visible when pages are loading.|
|✅||Check the Menus and how they are invoked.|
|✅||Check the Items contained in the Menu.|
|✅||Screen Orientation is tested in both portrait and landscape mode.|
|✅||Check the use of virtual keyboard while changing the screen mode.|
|✅||Check the pinch-to-zoom effect through touch screens and trackballs – details should not be distorted on the zooming.|
|✅||Test the sliding effect – should work in a single stroke; next screen must into the screen resolution without distortion|
|✅||Test the buttons sensitivity – should be clickable with any kind of touch (a large fingertip or stylus).|
|✅||Virtual keyboard opens up automatically when the user wants to enter text in any text field.|
|✅||Test if the application is integrated well with the mobile hard keys- start, home, menu, back buttons.|
|✅||Check if the page navigation and scrolling are working fine through the trackball.|
|✅||Test the overall responsiveness of the application on the device.|
Tip: Before beginning the GUI testing, get sound knowledge about the flow and functionalities of the device in the application is going to be tested. And keep these functionalities in mind while doing the testing.
A Bad GUI is an unpleasant experience for the user. The GUI testing is highly recommended and important especially when it comes to smart devices because here the screen size is comparatively small and a lot of variations of the devices are available in the market. Your application may look and behave differently on different devices. So, it is important to test the app on at least some standard sizes and variations of devices.
- 35+ Best GUI Testing Tools with Complete Details
- TestComplete Tutorial: A Comprehensive GUI Testing Tool’s Guide For Beginners
- 58 Best Mobile Testing Tools You Can’t Live Without
- Websitedimensions – check this out for smart phones and table screen resolutions & sizes.
This is a guest post by Uzair Baloch. If you want to write one, please read the guidelines.
About Author: With an industry experience of 3+ years, Uzair Baloch is currently working as Sr. SQA Engineer for a Canadian organization in their offshore office.
Hope these tips will help you testing GUI on any smart devices. If you have more ideas, please share with us in below comments.