As “First impression is the last”, so GUI (Graphical User Interface) does matter and creates a lot of difference. Importance of decent and attractive GUI can be felt more significantly in smart devices environment where screen size is much small.
GUI testing can be toughest part especially while testing on smart device. You should pay full attention to the GUI while testing on smart devices and surely it is an important task that deserves significant time and resource allocation.
Practical Tips for Testing GUI on Smart Devices:
For me, while testing GUI, all the controls are accused. I raise questions why they are there on the screen and I try to answer 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 and during all this process a control must have valid and solid reasons in its favor to be there on screen and consume space. I suggest you to try it and it will help you to decide which controls to display on the screen.
There also come the situations where you are given an already built GUI to test. In such situations also think about the missing controls, the controls that will add value to the screen and compare their importance with the current ones. If you think you need to make a change 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 more important how 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.
Definitely your application has a specific design. And 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 text boxes in them have sharp edges. Although this type of issues don’t affect the usability or functionality but still a consistent look of the application helps to build a friendly relation between the application and the user.
Relatively more important thing in style is font on the different pages. 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, important in style is relation between the font color and the situation in which text is displayed. For example Red color is used for Error messages, Green for success, Yellow for warnings and Blue (now a day occasionally) 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 text in bold 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 format of controls to ask for a US address should be in order ZIP, City, State.
For both these situations, make sure that everything is logical and shows a good aesthetic sense.
Forgot something even more important. There are situations where one or more controls appear on more than one screen, in this situation make sure that they appear on same location and in the same order on all the pages.
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.