So, we have already learned the concept of UI elements. In this topic, we will take a closer look at examples and common errors for popular UI elements.
Examples of text UI elements
Text UI elements are essential components of user interfaces that primarily deal with displaying and entering textual information. They serve as the means of communication between the application and the user.
Labels are used to display text that provides information or context to the user. Visually, <labels> does not show itself in any way, so you can only tell if it is activated or not by the text. If clicking on the text moves the focus to a text field, selects a checkbox, or activates a neighboring form element in some other way, then <labels> works.
Example of HTML code: a label next to an input field that describes what should be entered, e.g., "Username."
<label for="username">Username:</label>
<input type="text" id="username" name="username">
Text areas are similar to text fields but are designed for larger blocks of text. They are commonly used for capturing comments, longer addresses, and other messages.
Example of HTML code: a text area for writing a current address.
<textarea id="currentaddress" name="currentaddress" rows="4" cols="50"></textarea>
Buttons with text combine textual labels with clickable functionality. They trigger actions or navigate to other parts of the application.
Example of HTML code: a button labeled "Submit" for submitting a form.
<button onclick="submitForm()">Submit</button>
Text UI elements should be designed with clarity and readability in mind to ensure a smooth and user-friendly experience. Proper use of these elements contributes to effective information exchange between the user and the application.
Graphic elements
Graphic UI elements are visual components within a user interface that serve to enhance esthetic appeal, provide visual cues, and engage users through images and icons.
Images are used to illustrate content, provide context, and enhance the visual appeal of the interface.
Example of HTML code: adding valid images to a website.
<img src="example-image.png" alt="Example Image">
It often happens when an image is not displayed on a website for some reason. As a rule, instead of it, we see such an icon:
Icons are graphic symbols that represent actions, features, or concepts. They are often used to save space and create a more intuitive interface.
Example of HTML code: using icons for actions like "Save," "Print," or "Settings."
<i class="fas fa-save"></i> <!-- Using Font Awesome for a save icon →
Buttons with icons combine graphical icons with clickable elements. They serve as both visual cues and interactive controls.
Example of HTML code: a button with a "plus" icon for adding a file of any script.
<button onclick="addItem()"><i class="fas fa-plus"></i> Add script</button>
Progress bars visually indicate the progress of a task or process. They are used to keep users informed about ongoing actions.
Example of HTML code: showing the progress of a file upload or a software installation.
<progress value="50" max="100"></progress>
Interactive elements
Interactive UI elements are components within a user interface that enable users to engage with the application by responding to their actions and providing feedback.
Checkboxes and radio buttons. Checkboxes allow users to make multiple selections from a set of options, while radio buttons enable single selections from a group of options.
Example of HTML code: checkboxes for selecting multiple items.
<input type="checkbox" id="option1" name="option1" value="option1">
<input type="checkbox" id="option2" name="option2" value="option2">
Example of HTML code: radio buttons for choosing one option from a list.
<input type="radio" id="choice1" name="choice" value="choice1">
<input type="radio" id="choice2" name="choice" value="choice2">
Sliders allow users to adjust values interactively. They are often used for settings like volume control, brightness adjustment, or numerical input.
Example of HTML code: a slider for adjusting the volume of a media player.
<input type="range" id="volume" name="volume" min="0" max="100">
Dropdowns allow users to select options from a list that is hidden until the user activates it.
Example of HTML code: a dropdown menu for selecting one option.
<select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
Example of a dropdown menu for multi-selecting:
A date picker allows users to interact with the application by selecting a date from a calendar or date input field. Date pickers are commonly used for tasks such as entering birthdates, scheduling appointments, or selecting event dates.
Example of HTML code: a data picker for choosing a date.
<body>
<h1>Date Picker Example</h1>
<label for="datePicker">Select a Date:</label>
<input type="date" id="datePicker" name="datePicker">
</body>
Navigation elements
Navigation UI elements are components within a user interface that facilitate the movement and exploration of an application. They help users navigate through different sections, pages, or content, making it easier to find and access the information they need.
Navigation bars are typically located at the top of a page or app and contain links or buttons to essential sections of the application, such as home, settings, or user profile.
Example of HTML code: a navigation bar with links to "Home," "About Us," and "Contact."
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
Tabs are used to organize content into multiple sections, allowing users to switch between them without leaving the current page.
Example of HTML code: tabs for "What," "Origin," and "Use" on a page.
<div class="tabs">
<button class="tablink" onclick="openTab(what)">What</button>
<button class="tablink" onclick="openTab(origin)">Origin</button>
<button class="tablink" onclick="openTab(use)">Use</button>
</div>
Pagination is used to divide and navigate through lengthy content or lists, allowing users to move between pages or sections.
Example of HTML code: pagination links at the bottom of a search results page.
<div class="pagination">
<a href="#page1">1</a>
<a href="#page2">2</a>
<a href="#page3">3</a>
<!-- More page links... -->
</div>
Conclusion
We have only looked at a fraction of the UI elements. More elements can be found at https://demoqa.com/ or any other website.
Understanding the types of user interface elements and when to use them is fundamental to creating user-friendly and efficient applications. By leveraging text elements, graphic elements, interactive elements, and navigation elements, you can test elements more efficiently.