Basic UI Design Elements - 101

A good user interface is simple, clean and focuses on what functions the user needs to perform. A good design ensures that the interface components are easy to use and understand. The user interface (UI) integrates the concepts from the functional design, graphic design, user experience and the information architecture in a unified single pane of glass for the user.

Important Note: An evolutionary transformation has occurred to product user interfaces in the last ten years. The simplicity, ease of use and lack of previous knowledge required to perform a specific task and been greatly diminished.

The User Interface Revolution

The general populous's understanding and expectations of how software applications should look and work has become standardised. The ease with which a task must be performed has become user expectation. Software products that do not support simple task paths and easily repeatable functionalities are simply discarded and replaced with another similar application that the user finds easier to use and provides them with instant gratification.

With the board introduction of the smart phone as the main form of computing for the masses, many computing tasks have become simple and sexy functionality flows or "click sequences".

The user can perform a broad range of tasks within the confines of a simple product user interface and the required knowledge and learning curve required to achieve a high level of accuracy, success and understanding have become almost childlike.

Basic Concepts and UI Components

The following article will introduce you to the basic design concepts and component building blocks for creating a software product user interface, commonly referred to as the products UI.

User Interface Building Blocks

Before you start to design a user interface you should first become familiar with the basic building blocks that are common to all software application interfaces. These UI design components all have specific purposes and are used for performing very specific tasks.

Their position on the screen and their interactivity are all carefully measured and placed. 

Selecting the Correct UI Component 

The objective of each UI component is to facilitate a specific task, enhance the design efficiency and provide user satisfaction. The user interface elements also include the page and screen dimensions as the starting point which define the user interface real estate.

Whether you are designing a standard desktop page layout or a mobile device screen the design principles remain the same, as well as the UI component library that you use to construct your masterpiece. 

User interface elements include: headers, main body, footers, dialogs, buttons, text fields, checkboxes, sliders, icons, tags, message boxes, tables and pagination mechanisms just to name a few. 

All UI's are built using the same finite palette of components.

User Interface Data Handling

In addition to the UI components that comprise your application, your interface design may also have to consider data handling capabilities and features such as lazy loading, bulk loading, scrolling sections, search and data retrieval mechanisms and data ingestion technologies. This means that you must have an understanding of the "back-end" under the hood side of the application and not just the sexy front end interface.

Standard Practices and Designs

As you start to design your “user interface” there are a few technical and design limitations that must be fully understood before you can get started. These are framework elements that act as a container for all UI/UX designs. You must start with these UI components as they represent the way that your user interface connects and communicates with the browser, operating system, the server, the database and the underlying commuter and communication technologies. 

Once you understand the standard page layout components you can then start to populate your design with individual UI components and work flows. 

Standard Page Layout

The first standard UI elements that underlie all interfaces are the rudimentary framework elements. They are the following components and layout positions. You can pretty much count on your design to have to support the following layout designs and panel functionalities. 

Interface Elements Used - Application header, footer, navigation sidebar, main body and side panel elements. 

Compact Sidebar

In order to allow for multiple resolutions and different screen sizes certain elements should be collapsible to maximise the interface real estate.

Interface Elements Used - Application header, footer, navigation sidebar and main body elements. 

Hidden or Collapsible Sidebars and Panels

To further simplify the UI and reduce the amount of screen elements further elements can be hidden from the main body view pane.

Interface Elements Used - Application header, footer and main body elements. 

Example Screen

The following screen example illustrates the use of several UI components such as header, footer, main body pane, extendable side navigation bar, drop menus, tab dialogs, table lists, world map, overtime bar graphs and icon buttons.

UI Component Usage

You can use the UI components anyway you like, but there are some expected design standards that users have come to expect. As computer software has become far more prevalent in our society for performing many different types of day to day tasks, so too does the user interface understanding and workflow sophistication increase. User expectations are constantly on the rise.

UI Component Positioning

In addition to the specific component functionalities, each dialog and its subsequent UI components also contains certain inherent border spacing, component spacing and positioning layout standards

Required User Interface Compliance Standards

These industry design and layout standards are also required when designing a UI that must support cross platform compatibility, different browser types and standard screen resolutions. Not to mention multiple language support and ADA interface provisioning required for government websites and software interface designs for enterprise solutions.

Utilising Third Party Components in Your UI

A great way to quickly increase and improve UI functionality is by carefully utilising third party technology vendors.

There are many UI component libraries available on the market, and the online availability of these libraries is constantly gowning and improving in quality,

These libraries also have another very important benefit. They have been thoroughly tested for almost all available browsers, screen types and resolutions. So, they are a great, good quality starting point for any new project.

The interface example shows an implementation of the Keylines graph component.

?See - Keylines - Graph Visualisation Technology

Cambridge Intelligence - Keylines Graph Component

I have used the Keylines topological graph component in many projects and on a number of my interface implementations and they have never failed to deliver incredible usability, functionality and add amazing animations to the UI. They do require a certain level of developer skill and understanding to fully utilise Keylines toolbox and functionality.

As with all third party plug-ins they require some tweaking and customisation to fully benefit from their extensive set of libraries, but it's worth the extra effort.

Keylines have a great support team and help your developers create customised functionality when needed.

Example Screen

The screen example utilises an application header, drop menus, a button toolbar and counter widget, multiple extendable side navigation bars, a topology graph component (Keylines - third party component), LED status controls, duel use buttons and a navigation and center screen control.

UI Component Types 

The following section will briefly describe the various types of UI component available in your design palette. I have tried to keep the controls that I have listed to the basic root UI component types. Obviously, there are multiple variations of these controls, but the basic categories and control types remain the same. 

UI Component States

A UI Component state, communicates to the user the status of UI elements. You should try to maintain the similarity for each of your UI elements. Each element (buttons) should have clear affordances that distinguish it from other states and the surrounding layout.

True innovation comes from having to create something new, fresh and innovative from the limited set of components available. 

Input Controls

Input controls are interactive elements in your application interface that enable the user to input data into the application. 

Checkbox

Allow the user to select one or more options from a set. It is usually best to present checkboxes in a vertical list. More than one column is acceptable as well if the list is long enough that it might require scrolling or if the comparison of terms might be necessary.

Radio Button

Are used to allow users to select one item at a time.

Drop Menu

Drop menu lists allow users to select one item at a time from the list, similarly to radio buttons but are more compact allowing you to save space. Consider adding text before the drop menu control, such as "Select One Item" to help the user recognise the necessary action. Some people consider them rather irritating than useful. But this really depends on a purpose and context.

List Box

Like checkboxes, allow users to select multiple items at a time, but are more compact and can support a long list of options if needed.

Buttons

A button indicates an action upon touch and is typically labeled using text, an icon, or both. 

Drop Down Buttons

The Duel Purpose dropdown button consists of a button that when clicked displays a drop-down list of mutually exclusive items.

Toggle Switch

A toggle button allows the user to change a setting between two states. They are most effective when the on/off states are visually distinct.

Input Field

Text input fields allow users to enter text. It can allow either a single line or multiple lines of text. 

Date Picker

A date picker allows users to select a date and/or time. By using the picker, the information is consistently formatted and input into the system. The same picker is used for time

Navigational Components

Navigation enable the user to move between screens of an application interface to complete tasks.

Breadcrumb

Breadcrumbs allow users to identify their current location within the system by providing a clickable trail of proceeding pages to navigate by.

Search Box

Basically, the search box allows users to enter a keyword or phrase (query) and submit it to search the index with the intention of getting back the most relevant results. Typically search fields are single-line text boxes and are often accompanied by a search button.

Pagination Carousel

Pagination divides content up between pages and allows users to skip between pages or go in order through the content.

Slider Control

A slider, also known as a track bar, allows users to set or adjust a value. When the user changes the value, it does not change the format of the interface or other info on the screen.

Tags and Chips

Tags allow users to find content in the same category. Some tagging systems also allow users to apply their own tags to content by entering them into the system.

Symbol Font Usage - Button Icons

Icons - An icon is a simplified image serving as an intuitive generic symbol that is used to help users to navigate the system regardless of language.

Symbol fonts are now being used to replace blocky raster images for smooth vector images in your HTML. By utilising a symbol font for your buttons means that you can use an icon font for all your application interface needs. This makes your HTML page packet size much smaller, meaning that the page will load faster into the browser improving user experience. Vector image (fonts) can scale endlessly up or down for any resolution, so they are automatically compatible for all screen resolutions.

Image Carousel

Carousel - Image carousels allow users to browse through a set of items and make a selection of one if they so choose.

Information Components

Information components provide the application with a means of communicating with the user. These information popup tooltips and status icons are universally used throughout almost all application on the market today. Their generic nature makes them easy to understand for most people regardless of their personal amount of "flight time" or experience.

Tooltip - A tooltip allows a user to see hints when they hover over an item indicating the name or purpose of the item.

Status Icons

These icons provide the user with the information about the current status of an object, service or state of an interface item or object. They also provide indicative information about what might happen if the user activates a certain feature of function. There are generic icons used for all software applications.

Progress Bar

A progress bar is a time relative control that indicates to the user the amount of time a specific task should or will take. These controls are usually not time accurate. They can also be used to show where a user is "relative to a whole process" as they advance through a series of steps. Typically, progress bars are not clickable.

Notifications

A notification is an update message that announces something new for the user to see. Notifications are typically used to indicate items such as the successful completion of a task, or an error or warning message.

Message Box

A message box is a small window that provides information to users and requires them to take an action before they can move forward.

Modal (Popup) Window

A modal popup window is a graphical control element, it is subordinate to an application's main window. When opened or activated, it creates a mode that disables the main window but it remains visible, with the modal window as a child window object in the active forefront of the application. A modal popup window requires users to interact with it in some way before they can return to the applications main interface.

Containers

A container is the most basic layout element. A container is a UI element designed to display a page component to the maximum width of a user's screen. Containers contains other UI components such as tables.   

Tables

It is essential to fully understand the importance of the table, as it is the main building block for all user interface design, both visibly to the end user and as the main construction element for the user interface developer.

It is the  common language that both a competent UI designer and front end software interface developer must understand in order to interact with one and other. 

Tables display sets or packets of data, when they are implemented correctly they can be fully customised. Data tables display information in a way that's easy to scan, so that users can look for patterns, insights and understandings. 

Accordion

An accordion is a vertically stacked list of items that utilize show/ hide functionality. When a label is clicked, it expands the section showing the content within. There can have one or more items showing at a time and may have default states that reveal one or more sections without the user clicking.    

Conclusion

I have tried to cover all of the main UI component types that exist in most application interfaces. These are of course an endless amount of variations to all of the basic controls that I have discussed.

In addition, I have also touched on Interface Compliance Standards, Data handling and Third Party Components. These are huge topics and areas of expertise that themselves require in-depth understanding. I hope that I have triggered your curiosity to learn more about them.

Remember, when creating your application UI make sure to keep it simple and focus on the user requirements and don't go overboard with your designs. Remember the importance of correct spacing pixel accurate alignment between controls and leave breathing space between elements.

And, don't forget to to have fun and get excited....

Related Articles

Read the following article to learn about the latest UI and UX trends for 2020: