What are the usual User Interface Components

Common User Interface Components

You could notice the same visual patterns and common User Interface Components everywhere. It doesn’t matter the programming language, library or framework, the building tool, IDE, util, the operating system, screen size or the form factor. The Graphical User Interfaces may have different names in the different places. The end result could be archived with variety of ways – with drawing shapes 2D/3D, drawing or repeating pictures or a section of a picture (9-patch), with all kinds of instructions that each new / and old / platforms decides to reinvent the same user interface concept – just – with different programming interfaces that may or may not get optimal usage of the hardware or bring somehow the next “big” user experience.

Anchored or Pined layouts

Pined Layouts are Containers sealed to some part of the screen. In many cases they do not move while the other parts of the screen changes. Sometimes there are listeners or flags that trigger the sticky element to hide while navigating to an opposite direction of the pined element’s location.

Top

The components that stick on the top are called – Nav Bar/Navigation Bar, Action Bar, Tool Bar – depending on the user interface framework, library or platform.

Bottom

To the bottom is placed – so called Bottom Navigation Bar. On the earlier versions of Android to the bottom was allocated the extended menu. On the Web it is often called footer.

Left / Right

Anchored components are called – Navigation Drawer, Side Menu, Navigation Rail, “aside” element or so on. In the touch environments these components are often opened/triggered by swipe touch gesture by some of the corners or edges of the screen.

Center

It is common user interface – user experience – visually emphasizing to place the content to the center of the visual component. This is implemented in so many ways on all the different platforms. You could get a headache trying to learn the specific programming instructions – text alignment to center, parent instructing the children (that occupies minimal space) to be in the center, having a percentage distance from some of the edges, placing a components absolutely on a screen by calculating screen size, widget size and placing equal distance left plus right and top plus bottom, etc.

Vertical Layouts

All User Interface Frameworks have components that append items in a container each one at new “line”. In some of them – this is the default way and in others, the appending direction is an attribute.

List Item

Probably all UI frameworks have some way to display lot of information that is of the same (one) Data Model, or of very few variations. In these situations, the way a record is visualized is defined in one place – the list item component.

Card

Cards is very popular list item design that outlines and separates the different records

Horizontal Layouts

There are fewer cases when – the components of a container are ordered in one row. The natural user experience is a vertical orientation and rarely horizontally to have so many items that a scroll to appear. Probably the horizontal layout is seen in specific apps – spreadsheets with a lot of columns of data, multiple books in multiple shelves, time/date selectors, tab bars.

Tab Bar

Tab Bars are a special type of horizontal layouts that have swipe gesture navigation between views. The difference with a plain horizontal layout is – in most cases only one tab item is allowed to be visible to the user interface, there are also indicators of the selected bar (title/image/icon/something else)

Windows/Dialogs

Usage of popup windows on the WEB (and in the Mobile Platforms) has been deprecated because of hacks, tricks and general misuse of the Internet Content Creators. Many legacy systems still use them, but they are blocked have bad user experience. The more modern way is to create dialogs  (in HTML – with divs with position absolute and higher z-index). There is limitation of the use of dialogs because they decrease the user experience if more than one dialog is required.

Drawer

Navigation drawers are dialogs that pop-up from the left or from the right and shadow the other content.

Input Fields

In whatever platform, operating system with screens, there are input fields.  There are a lot:

  • Single line
  • Multi line
  • Password field
  • Numbers (Integers, Decimals), Phone Numbers
  • Pickers – file, image, date, time
  • Select/Combo Box
  • Autocomplete (open/closed to free text input)
  • Check Boxes / Radio Buttons

Text Label

The most basic, essential and widespread element. Titles, paragraphs, bullets, lists, tables – all kinds of data is displayed in every type of web site or app. It has also endless options for customization – Font (Family, Size, Style), Color, Background Color, Semantic Wrap up (Title, Paragraph), Interactivity or Positivity, etc.

Image/Icons

Image Components are very basic and popular element in every graphical toolkit. Many items are visualized by some painted, visual representation. I’m putting the icons in the same category as images, because they are just better, optimized images. In a lot of cases optimizations on images is impossible. Some of them are Progressive JPEG, loading thumbnail and then – loading the full image, preload or after-load caching offline, etc.

Buttons

Buttons are essential and present everywhere – in every platform and user interface. The latest – material design recognizes several types.

Flat Button

The flat button looks like normal label while inactive. But, when you click, tap, mouse cover or generally speaking – activate it, a border appears.

Raised Button

It is flat button, but with contrasting inactive color.

Icon Button

In many places of apps, menus, sections – there is not enough space for text. In these scenarios Icons are popular choice. They perform better and they scale up and down without getting pixelized. Also, the Icons occupy a lot less space on the disk. The platform, the program or the framework paints them – SVG, predefined shapes, custom font family symbols ,etc.

Floating Action Button

FAB is a material design variation of a button anchored in some end of the screen. It has the idea that, on touch devices – there are places of the screen that are more easily accessible for the finger.

Interact-able or display only Notification Components.

In many platforms there are elements that notify the users about some executed action – form action or validation, internet or sensor connection changes and interactivity, new item coming from the server, etc.

Tooltips/Toast

These are the components that the user cannot actually interact with. They have only informing purpose.

Snack bars/Notifications.

In the past many visual themes had a concept of a Notification. In the Material Design – there is a concept of a Snack bar. Designers figured out to place it in the right – top or bottom – side of the screen. The difference with the tooltips is – that they are intractable. The user may click on them or on some button in them and that will trigger some additional logic.

Responsive Layouts

Rearranging layouts depending on screen size orientation. Having a Media Query was a big thing ten or more years ago – adding a possibility a site to rearrange the components – semi-automatically (with CSS), or with JavaScript Listeners. Many Frameworks popped up from the concept – Bootstrap, Material Design, etc. The Android Layout Architects implemented the same responsive user interface concept. The Layout Manager picks different XML layout depending on various parameters of the environment. Some of the items are – the screen size, resolution, language, screen orientation, etc. This transforms the apps into responsive and intuitive tools for the end user.

 

Leave a Reply

Your email address will not be published. Required fields are marked *