For those old enough to remember the pixilated graphic interfaces of the 1990s, we know how far UI animation has come. Younger generations have been fortunate enough not to have to suffer through the AOL login screen. The smooth, beautifully designed animations that accommodate modern user interfaces are taken for granted if you don't reflect on the past.
This post is dedicated to the history of UI animation. We cover:
- The purpose and goals of UI animations
- The early days of the graphic user interface (GUI)
- Iconic UI animations of the past
After reading, you will have an appreciation for how far we've come, whether you are old enough to remember Windows 1.0 or not. But first, let's go over the basics.
What is UI Animation?
UI animation is the practice of adding movement to elements within a user interface to increase engagement and interactivity.
Web designers utilize UI animations to create a more enjoyable experience and carry out the goal of the website or application.
How UI Animation is Used
Animations can be used to guide visitors through sales funnels, organize page elements, give directions, notify users of the change, and other functions that promote engagement.
Since the early days of the GUI, designers have found creative ways to incorporate animations to improve their UI. As you will learn, many have been restricted by the interface and technological capabilities but manage to utilize animation to enhance the user experience.
The goal of UI Animation
UI animations can be used to provide functionality or improve the aesthetic of a page. In either case, the main goal is to get the user to where we want them to go and enjoy the journey. Therefore, the purpose of the animation should directly reflect the intent of the web page or application.
Static web pages without any movement, engagement, or stimulation are boring. Animation makes pages fun and while also carrying out a task. Boring pages have high bounce rates and don't convert visitors into customers.
5 Different Types of UI Animation
There are many instances where UI designers can utilize animation to improve the user experience. The most significant are described below:
Micro-interactions – The subtle animations that we take for granted. They tell you your download is complete, your phone is on silent, or that you've reached the bottom of a web page.
Loading and Progress – Back in the 80s and 90s, we spent much more time loading pages. Progress bars and downloading icons were some of the first UI animations.
Navigation – Animations that guide users through a web page are critical to organizing elements and incentivizing visitors to engage with the content.
Storytelling – UI designers use animations to welcome visitors and communicate value propositions through storytelling.
Branding – Animations can be used to create cohesive branding through logos and corresponding page elements.
The History Of UI Animation
The history of UI animation begins with the graphic user interface. Before GUIs were introduced in the 1970s, tasks performed on computers were done from the terminal. Thus, minimal user engagement was required. The introduction of the graphic interface opened the door for UI/UX evolution and animations.
Xerox Alto (1973)
The Alto by Xerox was the first computer designed to support an operating system with a graphic user interface. Xero released one of the first computers made for public use that included a maneuverable screen with a cursor.
While Alto didn't feature animations, it laid the foundation for how content would be consumed in the future.
Apple's Lisa
The first examples of animations on a GUI come in the early 1980s with Apple's release of the Lisa. Even though the computer was a massive failure (discontinued in 3 years with only 100,000 units sold), it has become an essential piece of UI history.
Lisa's animations were subtle micro-interactions that helped the user navigate the interface. Here are a few:
- When you clicked on a file, directory, or application, the cursor would turn into an hourglass.
- After clicking an application, a pre-roll animation would run to communicate that a new window was opening.
- A scroll icon would let you know your position in the content.
- Hover icons to indicate clickable buttons.
Windows
Microsoft is credited with creating the first accessible operating system built for a GUI. Windows 1 featured subtle navigation and micro-interactions like the Lisa. However, the most significant advancement early Windows interfaces brought to the evolution of UI animations was the welcome logo in Windows 3.1.
The Internet and UI Animation
Apple and Microsoft continued to feature UI animations in their OS. Once the internet became available for consumers in the late 90s, we began to see UI/UX design take off. As commerce shifted online, businesses needed websites to sell their products and services. As a result, demand for web development increased, and an entire industry dedicated to designing how users interact with web pages was born.
Mobile Phones
Steve Jobs has a huge part in the history of UI animation. He was involved in the Lisa project in the 1980s, was famously kicked off the design team to work on the Macintosh, both massively important for GUI development. However, his most significant achievement in his life and related to UI animation was the iPhone.
Offering an unwatered-down version of the internet to mobile devices changed content consumption forever, maybe for the worst. In addition, the iPhone is responsible for mobile apps, another critical component in modern content creation.
The smartphone shifted how we consume the internet from larger screens to much smaller interfaces overnight. Today UI development is hyper-focused on mobile phones, and animations must be built with smaller screens in mind.
5 of the Most Important UI Animations of All Time
The history of UI animation is demonstrated with the graphics that significantly impacted our relationship with interfaces. Below are five of the most iconic animations.
The Blinking Cursor (1967)
Before Alto, the user experience was limited to the command line. The blinking cursor is the genesis of UI animation and is still used today to identify your location in a cursor-less interface.
The AOL Connection Page (1995)
Early internet users will remember the ear-piercing screeches of dial-up internet accompanied by AOL's animated progress screen, followed by a "WELCOME" and, if you are lucky, "YOU'VE GOT MAIL!"
Windows XP Download Screen (2001)
Microsoft changed UI animation with the download screen. Any interaction on a computer at the time took patience but watching an animated piece of paper glitch it's way from a globe to a file folder made the wait tolerable.
The Mac Beach Ball Loading Icon (2001)
Apple's solution to keeping users calm while their computer crashes was a colorful rotating beach ball; if you had a Mac in 2001, you likely spend a significant amount of time staring at cute design feature.
Available Uber Cars (2010)
By 2010, smartphones and mobile have integrated into our everyday lives. Mapping proved to be one of the most valuable features on mobile, and few companies took advantage of the smartphone feature as successfully as the ride-sharing app Uber. Ordering a car with just a few taps revolutionized how we interact with our phones.
One of the coolest elements of Uber is the use of UI animation. Opening the app to see a map of where you are located with available rides nearby dramatically improves engagement and incentives users to book a car.
Final Thoughts
Animation has played a significant role in our relationship with computer screens. UI designers have utilized animation to keep us entertained and engaged, from the first operating systems to highly intuitive mobile apps. The history of UI animation shows us how rapidly technology has evolved over the past 50 years. Looking ahead, we expect animations to help bridge the gap between real life and the interface of the future.
If you are interested in utilizing animation in your UI design, visit Creattie for an extensive library of Lottie and UI animations available free to download.
