Within modern web design, the use of UI elements has become an essential part of most websites. UI stands for ‘User Interface’ and a UI element is something on a website that creates interaction with users and visitors.
We thought it would be useful if we explained some of the more common UI elements and to provide you with some guidance as to how and when they might be used within the design of any new website. UI elements can be broken down into 4 different types, and within each of these are the specific UI elements.
Input Controls
These are the most basic and most common. They are used so that visitors can input information which may then cause your website to react in a certain way.
- Buttons: Used to upload, send, download, confirm, select, ‘Buy Now’ and so on.
- Text Fields: Quite simply these are spaces where the users type in requested information such as their name, email address, etc.
- Icons and Images: These are used to give further clarity as to what a specific function is for. They can hyperlink to another page or section.
- Checkboxes: Another easy one where the website’s visitors click in a box to select or confirm a choice they have made. Often used with lists of options.
- Radio Buttons: These have a similar function to checkboxes, but instead of a tick appearing, a small circle goes from empty to filled with a solid colour.
- Lists / Download Lists: Used to provide visitors with multiple options, but they tend only to allow one option to be chosen at a time.
- Toggles: The online equivalent of a light switch in that they have two positions. Visitors move a toggle to the ‘On’ position to select an option.
Navigational Components
As the name suggests, these are a group of UI elements that allow visitors to navigate throughout a website.
- Navigation Bars: Usually seen at the top of the page, it has buttons that click through to other pages.
- Drop Down Menus: Visitors move their mouse pointer over a menu, and a dropdown list of options appear which they click to open another page.
- Tree Menus: Shows the visitor’s navigational options in a hierarchical format so that every option can be seen.
- Sidebars: Normally located on the right or left side of the page, it will include buttons or images with hyperlinks to navigate elsewhere.
- Carousels: Similar to a sidebar in that it usually contains images, but this appears across the full page.
- Accordion: A stacked list of options usually with a ‘+’ icon to expand each one in order to reveal further options.
- Breadcrumbs: Uses text and arrows to indicate the path that a visitor has followed to get to a specific page within the website.
- Search Fields: Allows visitors to search for a specific page or section by typing in what they are looking for.
- Tags: Often used for blogs they help to locate content and pages relating to the same subject.
Informational Components
These UI elements are used to provide useful information to website visitors
- Progress Bars: Fairly self-explanatory in that they indicate the progress a visitor has made, for example, with an order they are placing.
- Notifications: These are used to indicate an update, change or even an error and are often effective at pushing the user to complete a task.
- Tool Tips: When the visitor’s mouse hovers over these, a text box containing further information appears.
Containers
Used to hold or group together content of a similar kind or which relates to the same subject, and are often used to improve the layout of a website’s pages.
- Cards: Square or rectangular in shape, they often contain text, graphics, or photos.
- Scroll Boxes: These contain content with a scroll bar at the side to allow users to access more content by scrolling down.