Enhance Your Vocabulary: 24 Mobile UI Elements Every QA Engineer Should Know
A bigger button, a smaller button, a bar at the top or dots on the side….
I’m sure you’ll agree that, after reading this, it’s hard to understand exactly what’s going on. To avoid such uncertainties when writing bug reports, let’s understand what different UI elements of the mobile application interface are called.
So, you open the application. The first thing you see is the Splash Screen. In other words, it is the loading screen.
Usually, this is the image with the logo and the name of the application.
After the loading process is complete, we can switch between the main sections. These are located on the TabBar, the bar at the bottom of the screen.
Note the blue indicator showing you the number of unread letters; this is the Counter.
Now let’s see what is located at the top of the screen.
At the very top of the screen we see the Status Bar. It contains information about the device (time, network, battery level, etc.).
Below the status bar is a toolbar with various control buttons.
On the screenshot, you can also see the search bar with PlaceHolder – a text (“Search apps & gam…”) that tells you what you can enter in the bar.
Further down are the tabs, which you can switch between.
When we enter a search query, we may be offered a Suggest List.
A separate item from this list is Suggest.
In addition to the search bar, there may be other elements in the toolbar.
For example, the Action Bar is a button in the form of three dots, which, when clicked, opens a list of available Actions.
You may also see a similar button, but in the form of three horizontal bars – Hamburger.
When working with an application, you may see a bar that pops up at the bottom of the screen – that’s Bottomsheet.
This is a panel that appears on top of the existing screen and offers additional actions. In our example, you can specify filters for search in the bar.
Several types of elements are used for these purposes:
- Bubble – a button to select gender;
- Dropdown (to select age and relationship status);
Another element in the form of a horizontal scale is the Progress Bar, which shows the degree of completion of some action.
In the settings you will often see Radio Buttons – element that allows the user to choose only one of a predefined set of mutually exclusive options.
And Toggle Switches – on/off status switches.
And in the sections where you are asked to make a choice, there are Checkboxes – an interface element that allows you to select multiple options.
When a new feature is added to an application, the user should be introduced to it. In such cases, Onboarding is shown – a small tutorial that is shown when the feature is launched for the first time.
If there are several pages in a section, as in our example on the screenshot, then at the bottom of the screen you may see an element in the form of dots – Page Controls. This shows the number of available screens and our current position in the list.
Another element that can appear on the screen is a Popup. Its peculiarity is that it appears spontaneously, not after any actions and requests.
It is important not to confuse a Popup with a modal window – Alert.
Alert appears most often after certain actions and necessarily requires a response – without pressing one of the buttons the alert cannot be cancelled.
Toast continues the marathon of pop-up elements.
Like golden bread from a toaster, it “pops up” in the application, shows a small piece of text information and disappears on its own. Unlike the alert, it does not block the application’s functionality.
This is an Offline State Screen. It appears when there is a problem with the Internet connection and takes the place of other elements that have not been loaded.
Knowing the names of the main interface elements, you will be able to clearly and concisely describe where the bug occurred and what it is related to, as well as understand the reports of other testers. It’s high time to put your new knowledge into practice!
Our journal will continue to provide valuable insights, ranging from testing theories to hands-on tutorials with various testing tools.
Stay tuned and happy testing!
Russian 
English