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. One 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
There also come the situations where we 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 we 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 the 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 an 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.