"The way that you accomplish tasks with a product – what you do and how it responds – that's the interface" – The genius HCI expert Jef Raskin defines an interface this way!”

Being a UX Enthusiast working mostly on the web, the web UI terminologies and interactions patterns are obviously a part of my daily work life, where I build user experiences by creating wireframes and interfaces which help the user accomplish a task easily. The various interaction patterns have always fascinated me and have left me wondering how closely a human-computer interaction is being related to some obvious real-time objects that we interact with, in real-time – enter the metaphors in Human-computer interaction.

As humans, we learn new concepts when they are correlated to some existing systems, which we are already accustomed to and this is the base principle followed by HCI experts while giving birth to new interaction patterns and UI elements which help the user to interact with the system much better.

Here is an effort to list some of the UI elements/terminologies which were heavily inspired from real-life objects, to make things simpler for the user.

The 'Mouse', and 'Mother of all Demos'

The Metaphor: Mice
The Concept: Hardware resembling the mice which enables point and click on a computer screen based on x and y coordinates

The starting of the 'Graphic Interfaces' era was marked towards 1968 when Douglas Engelbart of Stanford Research Institute, presented a direct manipulation on a computer screen, a standard typewriter keyboard, and a rolling box called 'Mouse'. The term mouse was obviously coined due to the appearance of the device, which resembles a mouse. This presentation finally became the turning point for the whole generation of computers, and was called 'The Mother of All Demos', and paved the way for richer and usable GUI based applications.

The 'Desktop' metaphor

The Metaphor: Desktop
The Concept: Desktop refers to the area behind the windows in a GUI using this metaphor

A term which you would not miss using in an average day at work! The ubiquitous 'Desktop' metaphor, which was introduced way back in the 1970s at the Palo Alto research center, still persists because of the human tendency to easily recall something when related with a real-time object.

The main reason for this introduction was due to the fact that most of the users of computers at that time didn’t have a computer science background, and they were using the system for accomplishing tasks like producing, distributing and presenting business documents. Hence, the term 'Desktop' instantly clicked among the users and was adopted as standard terminology up to now.

Pull-down menus and Dialog Boxes

The Metaphor: Pull-down menu / Dialog box
The Concept: The type of interaction where a list of items will be displayed as if they are pulled down when clicked on a single element. Dialog box refers to a single forced window which communicated a message to the user.

In 1984, Macintosh – The first Graphical UI computer terminal, was released by Apple and two new elements were also born – 'Pull-down menus' and 'Dialog boxes'. Larry Tesler with Bill Atkinson worked together to introduce this really useful interaction to the world.

Pull-down menus/Drop-down menus play an important role in defining the information architecture of high-scale applications with huge amounts of data. This element is literally inspired from the way they interact with the user when clicked on them.  Similarly, 'Dialog box' which actually enables a 'dialog' between the computer and user, is yet another example of literal inspiration implemented in UI element terminologies.

The Dock

The Metaphor: Dock (a platform built out from the shore into the water and supported by piles; provides access to ships and boats)
The Concept: UI element that typically provides the user with a way of launching, switching between, and monitoring running programs.

By 2000, Apple was back with some out-of-the-box innovations in UI. 'The Dock' concept was introduced in the Mac OSX by that time, which was actually an area docked to the bottom of the screen with the launch icons commonly used applications, which helps switching between applications.  The dictionary meaning of 'Dock' is 'a platform built out from the shore into the water and supported by piles; provides access to ships and boats'. This is one of the trademark interactions of a Mac OSX machine still.

Spotlight and Dashboard

The Metaphor: Dashboard of a vehicle, where all the controls are laid out.
The Concept: A section where all the important functions of an app or a system are laid out upfront.

Later on, Mac OSX saw the addition of a couple of more new concepts – 'Spotlight' and 'Dashboard’. Spotlight was the global search spot for the entire OS located at the top right of the Mac OSX screen. It is designed to allow the user to quickly locate a wide variety of items on the computer, including documents, pictures, music, applications and lots more. With the literal meaning 'spotlight', this was yet another addition to a UI element which related to a real life object / metaphor.

Dashboard, on the other hand, is an application for Apple’s Mac OS X operating systems, used for hosting mini-applications known as widgets. Inspired from the real world 'dashboard' for vehicles, which is the control panel having all the controls and knobs needed to keep the vehicle in control, this term is also now commonly used in applications, where all the main functionalities are grouped in a single page and termed 'Dashboard' (a very common example is the WP Dashboard ).

Carousel

The Metaphor: The Carousel machine for children which rotates.
The Concept: UI element where the contents are rotated in a timely basis.

With the usage of jQuery in front-end engineering, this term has become very common in modern day web design. Carousel is a jQuery plugin which facilitates the display of images/blocks in a rotating pattern similar to the large rotating machine with seats for children to ride. This plugin is very widely used to showcase photos and items on a webpage.

Accordion

The Metaphor: The music instrument which is played by compressing and expanding.
The Concept: UI element with compressible and expandable list of items.

Accordion is a vertically stacked list of items (e.g. labels or thumbnails). Each item can be “expanded” or “stretched” to reveal the content associated with that item. There can be zero or more items expanded at a time, depending on the configuration. With the wide adoption of jQuery, Accordion has gathered popularity in web UI. The inspiration comes from the musical instrument 'Accordion'. It is played by compressing or expanding a bellows whilst pressing buttons or keys, causing valves, called pallets, to open, which allow air to flow across strips of brass or steel, called reeds, that vibrate to produce sound inside the body.

Widgets

Wikipedia says Widget is an element of a graphical user interface (GUI) that displays an information arrangement changeable by the user, such as a window or a text box. The defining characteristic of a widget is to provide a single interaction point for the direct manipulation of a given kind of data. The term has a direct relation with the term 'Gadget'. When used in computer terminology, the term 'Window gadget' was gradually converted to 'Widget', and once ruled the roost in desktop applications. Still widgets play an important role in many OS’s, and is a popular term in web and desktop apps.

Breadcrumbs

The Metaphor: The trails of pieces of bread.
The Concept: A navigational guide denoting the current hierarchy level in which the user is.

This is an integral part of an application, and plays an important role in the information architecture of the same. This little element keeps the user informed about his current location in terms of the web application. Especially while exploring a huge web site/app, having multiple levels of navigation, the user often gets lost after digging deep into some specific page. With a breadcrumb, the user can easily understand the hierarchy of the page which he/she is browsing and can navigate between levels easily. Now the story of origin of breadcrumb dates back to your nursery school times :D! Yes… Do you remember the 'Hansel and Gretel' fairy tale and how they escaped from the wicked witch? The breadcrumb trail that Hansel left for their family to follow is the actual inspiration for our little 'breadcrumb' UI element.

Radio Buttons

The Metaphor: The buttons in old-time radios.
The Concept: A UI element used to receive input from user, where the input is a boolean value.

This little button, which stands for a Boolean value has a story of its own to tell. Back in the day, the car radio had toggle buttons, ie., when one of the buttons was pressed, other buttons would pop out, leaving the pressed button the only button in the “pushed in” position. Yet another inspiration!

Progress Bar

Once adoring the flash pre-loaders, the progress bar is everywhere. This component, that conveys the progress of a task, was inspired from something that was created way back in 1896, by Karol Adamiecki, popularized by Henry Gantt around 1910-1915s. The Gantt Chart – used to represent work breakdown structure of a project and dependency relationships between various activities is the primary inspiration for the progress bars which is prevalent all around on computer based UIs.

These are just a few of the numerous relationships that exist in the world of computer based UI, and all these point to the intellect of the human mind, which always pushes the limits and discovers new ways to better our world. Please feel free to share your thoughts on these and suggest other elements which you have come across at any point of time in your career. The domain of UI is expanding with more and more media burgeoning day by day, like the mobile space, virtual reality, gaming and much more, and lets keep our fingers crossed and witness some groundbreaking concepts in days to come.