UI and layout testing

UI (user interface) – is the point of interaction between a person and a product. The design of buttons, input fields, etc. is where the user interacts with the system. It is the design of touchpoints through which the user can interact with the system. 

User interface testing is carried out together with the following types of testing:

1. Testing for compliance with the standards of graphical interfaces. 
2. Testing with different screen resolutions. 
3. Testing cross-browser compatibility or compatibility with different Internet browsers and their versions. 
4. Testing localized versions: translation accuracy (multi-language, multi-currency), checking the length of interface element names, etc. 
5. Testing the graphical user interface on target devices (smartphones, tablets).

The main elements of the graphical interface: 

1. Window (browser window, dialog box, modal window, floating window). 
2. Menu (main, pop-up, context, system). 
3. Widgets/controls (button, radio button, checkbox, icon, list, toolbar, tree, scrollbar, slider, status bar, tooltip (hint), etc.). 
4. Tab. 
5. Interaction elements: mouse cursor, text cursor, pointer (“palm”), drag cursor, etc.

Basic checks when testing UI: 

1. Location, size, color, width, length of elements; the ability to enter letters or numbers. 
2. Whether the functionality of the application is implemented using graphic elements. 
3. Placement of all error messages, and notifications (as well as the font, color, size, location, and spelling of the text). 
4. Whether the font used is readable. 
5. Whether the cursor switches from text to pointer when hovering over active elements, whether selected elements are highlighted. 
6. Alignment of text and shapes. 
7. Image quality.
8. Check the location and display of all elements at different screen resolutions, as well as when resizing the browser window (check if a scroll appears). 
9. Check the text for spelling and punctuation errors. 
10. 10.Whether tooltips appear (if necessary). 
11. Design unification (colors, fonts, message text, button names, etc.).

When designing a high-quality UI, attention is paid not only to the appearance of the interface, but also to its logical structure, so that the user can easily, quickly, and easily interact with it and achieve the desired result. But in order to clearly understand how to create a high-quality user interface for a particular product, it is necessary to study the behavior, emotions, and reactions of users when interacting with this product, conduct testing, and collect data. A person, interacting with any system, experiences sensations and reacts in a certain way in the process of using it. This is called user experience, or UX.

User Experience – the feeling experienced by the user while using a digital product, while the User interface is a tool that allows interaction “user – web resource”. UX is what the user feels and remembers as a result of using a program, application, or website. UX is taken into account when developing UI, creating information architecture, and usability testing. Having determined the target audience and the characteristics of the main user, you can make a list of requirements for the project.

The UX design process includes the study of behavioral patterns and psychological reactions of users, the development of information architecture, interaction design, user interface design, interactive prototyping of the layout, and usability testing.

User interface designers should have skills in visual design, iconography, and typography, but their job responsibilities do not necessarily include conducting user research or building the information architecture of a web resource. But user experience designers must additionally understand target market research, information architecture, interaction design (which automatically implies a basic knowledge of behavioral psychology), etc.

Usability is more of a measure of the friendliness of a site or program interface, as it helps to make the site understandable and natural to the user.

Usability Testing is a testing method aimed at establishing the degree of usability, learnability, understandability, and attractiveness for users of the developed product in the context of given conditions. 

We can distinguish the stages of testing the usability of the user interface:

1. Research – carried out after the formulation of requirements and specifications for the system, as well as after the development of a prototype interface. The main goal at this stage is to find out if it allows you to solve user tasks with a sufficient degree of efficiency.
2. Evaluation – carried out after the development of low-level requirements and a detailed prototype of the user interface. Evaluative testing deepens exploratory testing and has the same goal. At this stage, quantitative measurements of the characteristics of the user interface are already being carried out: the number of calls to the help system in relation to the number of completed operations, the number of erroneous operations, the time to eliminate the consequences of erroneous operations, etc. are measured.
3. Validation – is carried out closer to the stage of completion of development. At this stage, an analysis is made of the compliance of the interface of the software system with standards governing the convenience of the interface, and general testing of all components of the user interface (from the point of view of the end user) is carried out. Interface components here are understood as its software implementation, as well as the help system and user manual. Also at this stage, the absence of defects in the usability of the interface identified in the previous stages is checked.
4. Comparative – this type of testing can be carried out at any stage of interface development. Benchmarking compares two or more user interface implementations.

It follows from this that UI testing involves testing based on the requirements for the appearance of the user interface and forms of user interaction. What are the requirements to pay attention to when UI testing:

• Requirements for placing controls on-screen forms. 
• Requirements for the content and design of output messages. 
• Input format requirements. 
• Requirements for the response of the system to user input. 
• Requirements for response time to user commands.

It is important to pay attention to: 

• Ease of use of the site or interface. 
• Efficiency of use. 
• Memorability. 
• Errors, their number, and severity. 
• User satisfaction (subjective).

GUI testing includes:

1. User Interface (UI) Testing – testing performed by interacting with the system through a graphical user interface: 

• navigation; 
• colors, graphics, design; 
• the content of the output information; 
• cursor behavior and hotkeys;
• display of the different amounts of data (no data, minimum and maximum amount); 
• resizing the window or screen resolution.

1. Usability Testing – testing to determine the degree of understandability, ease of learning and use, and attractiveness of the software product for the user, provided that it is used in the specified operating conditions: 

• visual design; 
• navigation; 
• Logic.

1. Compatibility testing is a testing process to determine the possibility of interaction of a software product, checking the performance of an application in various environments (browsers and their versions, operating systems, their types, versions, and bitness)

Types of tests: 

• Cross-browser testing (different browsers or browser versions). 
• Cross-platform testing (different operating systems or versions of operating systems).