Dictionary of the Basic UI/UX Elements

Most of the applications and sites that we use have a convenient, clear and interactive design. This is due to the merit of the site developers and web designers who use UI/UX elements. Not surprisingly, UI/UX elements have become a key tool in the business policy of building websites and online stores – after all, who would want to use a website with an incomprehensible and complex design?

Knowledge of UI/UX elements is important for a web designer, and even more important for a tester, who will be the first to check the developed site for errors and bugs in the layout. After all, if the tester doesn’t understand the nature and the features of UI/UX elements, he may miss obvious bugs, or, conversely, determine the correct operation of the element as a bug.

We have compiled a glossary list of the most common UI/UX elements which testers, web designers and developers should know.

Before moving on to reviewing our glossary, you need to familiarize yourself with the categories of UI/UX elements.

UI elements have several categories:

1. Input controls – elements, which help to enter information into the system. If you want users to indicate, for example, in which city they are located, then an element of this type will come in handy.
2. Navigation Components – components that allow users to navigate an application or website. Common navigation components include tab bars on iOS devices and hamburger menus on Android.
3. Informational Components – components that contain information about a product.
4. Containers – components that contain related content.

Short glossary of UI elements:

Checkbox – one of the most common elements that allows the user to select one or several elements, for example, when selecting product parameters. As a rule, checkboxes are displayed in a vertical column, although sometimes two columns are used for comparison or in case the list of the options is very long.

Radio Button – an element that is very similar to checkboxes, but differs in that only one of several options can be selected and is usually indicated by a circle.

Dropdown List – an element that allows users to select one element, just like radio buttons do, although it takes up less space because it is more compact. When adding this element it is also necessary to add the «Select» function to a number of options to coordinate the user for further actions.

As well, the variation on List boxes allows the user to select multiple options from a dropdown list.

Button – the simplest element that allows the user to interact with forms on the site. Since a button on a website (softkey) is analogous to a button in engineering, it is displayed in a similar way, and performs similar functions as well. When you click the button, the programmed action associated with the click is performed, for example, submitting a form.

In a broad sense, a button is any on-screen element with a delineated border, clicking on which leads to an action.

A button has two states – «clicked» and «released», the state can also be fixed (the current state is fixed after the completion of clicking). For keyboard control, a button can be provided with a controlled input focus: upon gaining focus, keyboard input (usually «Enter») initiates a click on the button.

The change in the state of the button can be displayed on the screen. Depending on the visual style, the button can have a convex, concave or flat appearance. Also, when «clicked», pressing into the surface is most often visually simulated.

The mouse cursor changes its shape to a «pointer» (hand) after hovering over the button.

Dropdown and animated buttons are also varieties of buttons.

Toggle – a checkbox that allows the user to choose between «Yes» and «No», or indicates that some functionality is turned off or on.

Input Field – elements that allow the user to enter text information into one or more lines.

A typical text box is a rectangle of any size, often with borders that separate it from the other interface. Text fields can also contain one or two scrolls. An activated field usually displays a text cursor (vertical line flashing) to indicate the current area of the text being edited. The mouse cursor changes its shape to text after hovering over the field.

Picker – an element that allows the user to select several related values at once with a single choice. It is commonly used in calendars to select a date or period of dates, in clocks, and to select currencies/countries.

The advantage of using pickers over input fields is that all the data selected by users is stored in the desired format in the database. This makes information more accessible and easier to manage.

Search Field – a search box that allows the user to perform the search by entering a keyword. The results are displayed after filling it out. There is usually a search button with a magnifier symbol in the center placed next to this field.

BreadCrumbs – navigation chain – a site navigation element that represents the path from the home page of the site to the page where the user is located. Breadcrumbs are usually shown as a strip at the top of the page, most often under the header.

Pagination – an element located at the bottom of the page that makes it easy to switch between the pages of the site searching for the page the user needs. It is common for blogs and product catalogs.

Tag – an element that helps to label and categorize the content. Tags are usually made up of relevant and key words that make it easier to find and view the relevant piece of content.

Slider Controls – a common user interface element used to select a value or a range of values. By moving the slider with a finger or mouse, the user can adjust values slowly and accurately – for example, volume, brightness, or a desired price range when shopping.

Stepper – a control element that allows the user to adjust values. However, unlike a slider, it allows the user to change the value only within predefined ranges at a configured step.

Icon – a simplified image that intuitively demonstrates a particular symbol and helps users navigate the site. Usually icons have hyperlinks. Here you can see a detailed list of icon names in accordance with the topic of the content.

Bento Menu, Döner Menu, Hamburger Menu, Kebab Menu, Alt-burger, meatball – types of menu icons on different devices and platforms, named after the dishes.

However, in addition to the aforementioned «tasty» icon names, there are icons of similar types, but with different names. They can also be used to describe the interface of the application:

Carousel – an element that allows users to view content, and the image or cards itself, often links to a large number of content or sources as well. The carousel can flip through automatically or forcibly by using the arrows. The biggest advantage of using such elements in UI design is that they allow multiple fragments to occupy the same area on a page or screen.

Notifications – an element, the appearance of which can be customized by the user. Typically, notifications are displayed to the user to inform of an application update, status, or message arrival.

Notifications help the user understand that there is something new, such as a new system action.

Progress Bar – an element that helps in visualizing where the user’s or download’s progress is. They are usually displayed during downloads of content, checkouts, downloads of applications, games, and the like.

Tooltip – a small informational message that helps the users understand the purpose of the element or process in an interface.

Popup – a block that contains content or a message, which requires the user to interact with it before they can close it and return to the main content.

Comment – a text message that can be left under certain content. Usually, comments are aimed at discussing or evaluating something. Commonly, only users authorized on the site or in the application can leave comments.

Feed – an element without which it is difficult to imagine such social networks as Facebook, Twitter, Instagram and the like. The content of the feed ranges from plain text to images and videos.

Form – an element that is used to fill out information about the user by themselves, which will be used in their account later, for example, in an online store. Forms can consist of input fields, radio buttons, checkboxes, drop-down lists, and the like. Typically, a completed form is submitted with a confirmation button.

Loader – an element whose main purpose is to reflect the loading indicator while a certain action is taking place in the background.

Sidebar – an element for displaying additional content, menus or settings that are not intended for the main unit.

Tab Bar – an element that is displayed at the bottom of the mobile app and allows users to quickly navigate between sections of the app.

Accordion menu – menus that allow the user to group, expand and collapse the content. They help the user quickly navigate the content of the site, and allow the designer to fit more content and a bigger amount of information into a limited space. A good example of the accordion menu is the mobile version of the Wikipedia site.

In this article, we looked at the basic UI and UX elements that are used in almost every application that is installed on your mobile phone, or on the sites that you visit every day. The list of such elements is much longer, because there is a large number of variations within one type and completely different elements. Therefore, in addition to the fact that the product developer must correctly select them, they must also be understandable for testers in order to ensure quality testing.