Recently, I watched a video on YouTube where a game-specific UI designer explained the evolution of game UIs. At that moment, I realized that while studying UI design, I was mostly exposed to trendy UIs and didn't have many opportunities to touch on old UI designs or to think about why they have evolved.
Now, I believe we are using the screens and applications that you are looking at, and that you use daily, without being taught by anyone. The ease of use of these is also packed with the history of UI.Therefore, as the title of this article suggests, I would like to focus on the history of UI design and summarize how UI design has evolved into its current form and how it will develop in the future.
First of all, what is UI?
UI stands for User Interface, and it plays the role of facilitating interaction between the user and the device (such as smartphones and PCs).
While many might think of UI in terms of the quality of the screen layout, it also includes the improvement of usability, such as the ease of use of menus and buttons.The mechanism by which users and devices exchange information has changed over time.There are various types, but this time I will introduce four major ones.
What is CLI (Command Line Interface)?
I opened the terminal on my Mac and took a screenshot
CLI is a user interface that displays information to the user in text and performs all operations using a keyboard. (Quote: https://e-words.jp/w/CLI.html)You can operate by entering commands and characters. You can check the command sent immediately before with the ↑ key. CLI is also known as CUI (Command User Interface), and as mentioned above, it operates commands with a keyboard.
It is a UI far from the UI we are used to today, where it is impossible to command (instruct the execution of a specific function) using a mouse or touch screen.When you turned on the power, a black screen like the one introduced above was displayed, and you had to type commands with the keyboard to operate it. Because the work is text-only, intuitive work like modern UI is difficult, and if you don't remember the command in the first place, it won't be a story, so it takes time to learn how to use it, and it is considered to limit user considerably.
However, because it is text-based, it is good at quickly reading and displaying a lot of information at once, and it has advantages such as reducing the load on storage and CPU, and it is a UI that is still used as the origin of UI. Also, in an era when the information that can be shown was limited, it might have been different from the present in terms of the weight of information because it focused on conveying the most important information.
GUI is one of the classifications of computer display and operation systems (user interfaces), which makes extensive use of images and shapes in presenting information, and most basic operations can be performed by indicating positions on the screen with a mouse or touch screen etc. (Quote: https://e-words.jp/w/GUI.html) GUI stands for Graphical User Interface, which replaces information and icons with graphic elements close to real objects, and not only with a keyboard, but also with a mouse or finger, intuitive operation became possible.
Thanks to GUI, smartphones, websites, car navigation systems, ticket vending machines, etc. have developed, and anyone can easily operate and obtain information immediately.GUI changes its trend over the years, so I would like to dig a little deeper in chronological order.
Skeuomorphism (Around 2007-2012) Many people may have seen this screen before, right? The design that imitates the things in the real world is called skeuomorphism, and it led the design industry from around 2007 to 2012.
Because the shadows and light and dark are clear, there is a sense of depth, and it is a design close to the real thing.However, the description is quite detailed, and when many icons are lined up, the information overflows at a glance, and it seems to take a little time to understand the screen and reach the necessary information.
Flat Design (2012 - Present) Flat design, which evolved into a simple design by removing the shadows of skeuomorphism, not only improves visibility but also solves the speed of loading, and has permeated the world as a user-friendly design that is easy to convey to users.
The design used in current smartphones is this design.In fact, in recent years, many companies' logos have also changed from skeuomorphism to flat design. Given that logos, which can be said to be the face of a company, are being changed, it is clear that flat design is quite pervasive in society.
Neumorphism (2020 - Present)
Neumorphism is a design that combines the three-dimensionality of skeuomorphism and the simplicity of flat design, and its etymology is New (new) + Skeuomorphism.
It is a bumpy style that matches the background. As you can see from the image above, all the designs have a distinctive design with bumps in contrast to the background. At first glance, it's hard to tell which information is prioritized. One of the advantages is that it is easy to switch between light and dark modes because it uses basically one color and has a small number of colors.
However, as you can see from the image above, the boundaries are hard to understand because of the small number of colors and the same as the background color, and it gives the impression that it is hard to understand which information is prioritized at first glance. Therefore, it was hardly used as a UI design for apps.
Glassmorphism (2020 - Present)
Speaking of stylish design, we can't forget this one, it's a UI called "Glassmorphism".This design became popular around the end of 2020 and allows you to create a sense of transparency and glossiness as if looking through a semi-transparent glass background.This design is said to be trendy after Neumorphism, and because the background is transparent, there is a depth in the hierarchy and a three-dimensional effect.
It was used in iOS7 in 2013 and reappeared in macOS Big Sur in 2020, making it a design that is once again attracting attention.So far, I've dug a little deeper into GUI.Looking back like this, aren't they all designs that we have become familiar with?From these, I think it's clear that UI is evolving daily, taking into account not only design but also usability.
What is NUI (Natural User Interface)?
NUI is one of the computer or software operation methods (user interfaces) that use a method that is natural and intuitive for humans. Touch operations and gesture inputs are often cited as examples. (Quote: https://e-words.jp/w/NUI.html)Gestures such as body language, touch operations directly on the screen, FaceID, digital cards that are settled by holding them up, voice recognition functions, etc. can be operated remotely. It seems that even research on taste and smell is progressing now!The name "natural" comes from the fact that it can be operated with natural human actions.
The sight of sending gestures in the air and the machine reading and operating them was a world seen in SF movies, but nowadays it can be seen everywhere in the city. Nowadays, NUI and GUI are common, and a fusion of GUI and NUI can be seen in various devices and apps.
OUI (Organic User Interface) is a type of user interface that uses non-flat displays, where the user controls objects by manipulating actual physical shapes. (English translation: Techopedia)OUI is a UI with a display device that is not flat, and it is something that can change physically.For example, have you ever seen a device that can fold a display like the image above on a TV, movie, or at a home electronics retailer's smartphone corner?
Currently, Samsung is focusing on this foldable smartphone, and it is said to become mainstream and flood the market by 2026. At present, OUI is not yet widely adopted, and research and development are being promoted.
Conclusion
Looking back at the history of UI, I think you can feel that UI has made great progress while improving convenience along with the history of computers.Please watch this video at the end. The video below is what Microsoft predicts for 2040.The unrealistic world we used to see in science fiction movies is becoming a reality.
It's a scene you would see in a science fiction movie, and it's technology that seems to have evolved the OUI we introduced earlier.
Doesn't it excite you to imagine that we might be living in a world like this video in the not-too-distant future?
If we apply the UI summarized in this article to this video, mainly flat design and glassmorphism are used. Also, don't you feel that the flat design in the video is more flat than it is now? It can be inferred that flat design will continue in the future.
While we can experience the evolution of UI in familiar things like smartphones, we may not understand how it has evolved if we are not conscious. The world of UI that is blending into our lives, we want to keep checking it in the future.
I have also written about UI/UX in a separate article in the past, so please take a look.Also, if you are interested in the UI/UX design that is being done at JIITAK.
We specialize in product development, launching new ventures, and providing Digital Transformation (DX) support. Feel free to contact us to start a conversation.
.svg)
.svg)
