Introduction to UI

Before we look at the history of the user interface and where it derived from, let's first clarify what the term UI means and the different aspects of it.

A user interface (UI) is an interactive layer between the person (user) and technology (device).

This interactive layer can be manipulated with features and functionality that are driven by development and visual elements rooted in established design guidelines. By finding the perfect balance between these two pillars, the UI of a digital product will not just increase the usability and accessibility, but also enhance the overall UX of the product.

UI design is thus the practice of creating the GUI of a digital product. In this book, we will be looking at websites specifically, by using visual elements that combine an accessible color palette, style elements such as borders, backgrounds, and icons. All visual elements have a color, and the color of an element can greatly impact the interaction of the user has with the UI of a website.

In the previous chapter, we looked at the history of UX and how a basic interaction between a person and a physical tool has evolved into a complex interaction between a person and a device. In between the Toyota production system in the 1940s and the Xerox PARC experimental project in the 1970s, the first touch screen was conceptualized by Eric Arthur Johnson, an engineer from England between 1965 and 1969. Johnson wanted to create a touch screen for air traffic control and wrote Touch Displays: A Programmed Man-Machine Interface, Ergonomics, in which he explained the working of the touch screen with diagrams and photos of a prototype. In 1969 he was granted a US patent for his invention:

Although Johnson conceptualized the first touchscreen, it was a Danish engineer, Bent Stumpe, who actually built the first touchscreen device, called PLATO (Programmed Logic for Automated Teaching Operations).

An ergonomic man-machine interface incorporating an adaptive pattern recognition-based control system, US 8046313 B2
PLATO IV (1972)

Around the same time, the Xerox PARC experimental project developed the first GUI, called Xerox Alto, which was built for non-commercial use in 1973. The Xerox Alto offered WYSIWIG (What you see is what you get) editing with a mouse. Remember, during that time the mouse was also the first of its kind! The Xerox Alto GUI was quite unconventional, and Xerox didn’t commit to drive this invention as they didn’t have the vision for this technology.

In 1979, Steve Jobs saw potential in the GUI and traded $1 million of Apple’s stock for the Xerox GUI technology:

Steve Jobs has taken the GUI technology from Xerox and created technology we cannot fathom our lives without. Mobile phones, laptops, smart TV's electronics, microwaves, and more, are all devices we wouldn't be able to interact with without a GUI. Now that we know what a UI is and how it came into existence, let's look at the different aspects of UI we can use to create a great user experience.