7min read

The evolution from the physical to the digital dimension in the UI

Find out how the interface has evolved over time and how the man-environment relationship has influenced the man-machine relationship. Follow the natural progression of the User Interface in its stylistic variations and how technology, intuition, familiarity, and mental models have prompted more intuitive and engaging user experiences.

Arbjola Toska - Extendi Designer

By Arbjola Toska

Designer

4 April 2023

Brief history of the user interface

The first interface we know about is the surrounding environment, each object is designed and is part of our daily life, of the way we interact or relate with the environment and nature. A means of communication between us and the analogue world we live in. The interface slowly expanded from the physical to the digital dimension with the advent of the first machines. Today electronic devices are everywhere and wherever user interfaces are applied, evolution and the new technological era relates us to a new environmental interface.

The evolution of the User Interface began with the advent of simple applications using the command line interface, with the introduction of mini and micro calculators. This interface required the user to know the commands that would be needed, requiring the user to have prior knowledge of how the system worked.

Since then the use of the computer was not widespread, primarily reserved for research laboratories; having a learnable user interface was not a requirement back then.

With the increase in the use of computing devices it has brought the masses towards a more extensive interaction with software, suggesting an easily predictable interface; this requirement is subject to public notions and preferences.

Designing for people

The idea of designer Henry Dreyfuss, to "adapt the machine to man rather than man to machine" (1955, "Designing for People") promoted and guided the way of looking at the human relationship with technology to a new perspective. Dreyfuss gave rise to ergonomic design as we understand it today and to describe space in

where man and machine meet as an 'interface'. The new perspective has expanded to become what we now call interaction design and is currently the basis of the design methodologies of "human centered" environments: user-centered design, easy and satisfying to use.

The first software needed a user interface model that was easy to adopt, the designers were inspired by the behavior of people who already had a mental model of a typewriter keyboard; they knew already like typing, so the natural progression was to start interacting with text on digital screens in the same way.

An attempt has thus been made, through metaphors of the sensory world, to recall commonly used objects iconically, such as the folder icon to represent the file directories, the trash can icon for deleting, floppy disk for saving, calendar, block notes etc. (This also applies to mobile keyboards that look like mini versions of them keyboards and typewriters.). But the overall aesthetic was pretty flat and linear.

Keyboard

The First draft of Graphical User Interface (GUI) we see in Xerox 1973, designed by Palo Alto Research Center and followed by the First Personal Computer (1983, IBM) which required users to type command prompts that would perform specific tasks on their PC. Forcing users to remember many commands to complete tasks and a pre-knowledge of the device.

It wasn't until 1984, when Apple introduced the Macintosh, that a GUI was designed to simplify the way users used the PC. Users started using the PC not just because they had to, but because they "wanted" to.

Xerox 1973 - Macintosh 1984


The evolution of user interface design has been influenced by common analogies: technology - intuition - familiarity and mental models. The best practice for adopting a new visual language is to include and align with people's mental models; and maintain a connection with the ambient world.

The rise of the touch-screen era (2000s) opened up new ways for users to interact with their devices. The GUI started drawing even more real-life references to real-life objects and textures. This type of design was known as Skeuomorphism.

The Skeuomorphism style uses real-world symbol-based design elements to create an interface that looks familiar to the user. Designers created user interfaces with digital controls that resembled their physical counterparts to make them more intuitive. One of the leading psychologists who have dedicated themselves to the study of visual perception, James Gibson, explained how this solution makes it possible to make action with objects in a "new" space more immediate. In practice, by creating a visual and operational proximity, people have been brought closer to an environment that they would otherwise have considered too cold and distant.

Skeuomorphism represents perceived “affordances”; objects whose shape suggests use and fits our natural interpretation of objects, but in a digital world:

Microsoft gave Windows a glossy transparent glass-like theme, while Apple introduced more skeuomorphic materials and cues into its desktop and mobile operating system, textures and finishes differing materials (Digital wood libraries and realistic page-turning effects in the reader, 3-dimensional blocks with squared sheets, metal knobs with hands and lights like in 50s radios, surfaces and cover in stitched leather, etc...)

Skeumorphic icons

It was only after users learned about the skeuomorphic design that the more popular style slowly evolved into a flattering style. The world was ready to make the leap to less literal signals and could now appreciate the simplicity of a minimalistic interface, and drive simplicity to aesthetic success.

The "flat" style manifests the desire for greater synthesis in design: the desire to curb superfluous decoration to focus on the content by eliminating 3-dimensional elements and the excessive use of shades, textures and external shadows; focusing on typographic combinations, elements and flat colors.

Skeumorphic vs flat

2-dimensional objects are easier to store and resize within responsive designs that scale to different screen or browser sizes, adopted with the advent of the mobile web.

The cohesion between the skeuomorphic and lat styles is reworked in Google's Material Design (2014); which combined the best components of skeuomorphism and Flat Design, reworking and improving them.

Flat / Material design

Material Design, just like in skeuomorphism, takes its design inspiration from real-life objects but does not copy them completely: It is inspired by the physical aspects that give objects a sense of shape and depth such as shadows, lights, defined edges, color variations and other for the construction of the digital elements. Google's new style relies on the synthesis of flat design, but the elements behave as in real life.

Material UI

This added element of form and depth allows us to design apps and sites that respond more naturally to users' intuition and have predictable tactile patterns. Users can easily distinguish the parts of a Material Design UI that are interactive and static just by looking at it.

Present and Future Interfaces

- Voice User Interface (VUI)

Platforms like Siri, Google Assistant, and Alexa are some examples of VUIs. The main advantage of these devices allows for very smooth and realistic interaction and grants users more control over their environment without the need to physically interact with a device.

Vocal User Interface - Google Assistant

- Air Gesture control

Is a technology that allows you to control electronic devices with gestures, no need to touch a touch panel or other input device. Since the pandemic, there has been a great deal of attention to interfaces that require minimal contact. The benefits of Air Gesture control include immediate interaction and control, and greater physical and digital accessibility.

Air gesture control - Project Soli

- Augmented Reality (AR)

AR augments the real-world environment by adding simulated or virtual perceptual material via computer-generated input, transforming objects in our environment into an interactive digital experience. It has expanded into a variety of industries including healthcare, retail, gaming, entertainment, hospitality, tourism, education, design and many more.

Augmented Reality

- Virtual Reality (VR)

Virtual reality offers a new experience by generating a 3-dimensional artificial environment that is explored and with which an individual interacts. The virtual environment is presented in a way that makes the user feel as if it were a real environment.

Virtual Reality

- Artificial Intelligence (AI)

AI has the ability to think, learn and perform tasks autonomously: it learns from human behavior in the context of its surroundings.

- Brain Computer Interface (BCI)

Also known as a direct neural interface or brain-machine interface, is a tool that allows a person (her brain) to communicate with a system (an external technology). Neurons in our brains send and receive signals from other nerve cells. These neurons produce brain waves, which operate the system at the interface, brain-computer. The BCI captures brain waves and transmits them to a computer system to complete the job at hand. The brain generates electrical impulses in response to our ideas, and each thought has its own brainwave pattern. The wave signal is used to control an object and express a concept.

- Holographic Interfaces

Is a form of display that creates a virtual 3-dimensional representation of an object through the diffraction of light. Holograms differ from other types of 3D imaging in that they do not require the use of special glasses or other external equipment to view the image.

Olographic user interface

Conclusions

The concept of digital experience has changed many courses in recent years and is still on the verge of reaching new achievements. We are and will see the change in human-machine interaction and interface. Technology will overcome all limitations and dependencies, offering us more intuitive and engaging user experiences.


Share

About Author

Arbjola Toska - Extendi Designer

Arbjola Toska

Designer

Passionate about art since she was a child, she began her journey in the visual arts with painting. The attention to detail of traditional drawing, the abstraction of design are the scenario of his way of connecting ideas to representations.

Extendi logo

Enabling Digital Innovation

Products

Language

Italiano

|

English

Copyright © 2024 · Privacy policy · Cookie preferences

P.iva 06304560482