Animation & User Interface- A New Motion Picture

Out with the Old, In with the New

In the former half of the twentieth century, UIs or user interfaces were of limited use as they were only for a work purpose. When the computer finally arrived during the latter half of the twentieth century, the nature of UIs changed. With the advent of the internet in the 1990s, UIs became user friendly.

As soon as the twenty-first century arrived, Steve Jobs, the founder of Apple Inc., originated the ideas of products which are tangible- iPhone, iPad and iPod Touch- and intangible- iTunes and iBooks. With the invention of these products, he added one more ingredient to the concoction- animation. For Steve Jobs was not only a computer pioneer, he was an animation pioneer as well. He co-founded the era of CGI or computer-generated animation. With this technique, he has made UIs more user friendly and more entertaining.

Animation plays a pivotal role in UIs today as:-

  1. Interaction between users and UIs is easier and much faster.
  2. It enables transitions between dashboards and web pages.
  3. It provides easy access to web pages, software, and apps.
  4. Motion graphics, such as moving images, effects, and transitions, as well as colorful fonts help make the interface look more appealing and more convincing to the user.

Bearing these advantages in mind, animation has not only transformed UIs into a rapid user-friendly environment, but has also defined a whole-new trend in UIs.

If we were to combine the first and fourth advantage, we could very much understand how animation has helped the user interface. As we all know, animation consists of graphics- shapes, vectors, images and, if necessary, illustrations. These elements have all come together not just to make the user interface a more breath-taking and more presentable experience, but have also helped popularize the use of ergonomics, including cognitive ergonomics, which is the study of interaction between humans and other elements. One golden example of cognitive ergonomics that can easily be applied on this topic is Human-Computer Interaction. Human-Computer Interaction(HCI) focuses mainly on the interfaces between humans and computers.

The iPhone….

…..the iPod Touch,..

…and the iPad…

…….introduced a touch-screen style in the late 2000s. This style is an interesting way to encourage users to interact with a mobile device or access an app with just a touch of the finger. With the exception of the iPod Touch, the iPhone and iPad make use of GUIs or graphical user interfaces, which allows users to interact with electronic devices through graphical icons.

Gaming

Animation, especially, has played a big role in the video game industry. Video games encourage the interaction between players and animated characters, with the usability of an appealing video interface. Now, with the advent of hand-held devices such as mobile phones, smartphones and tablets, video games are represented in the form of game apps, and can be played anywhere, any time.

Navigation

Animation has also helped improve the use of navigation, both online and offline.

  1. Online: Today, people can search for places on the internet with the help of digital satellite maps. The user(s) can either search for the place, using the arrows given on the side of the screen to pan left, right, up and down or simply type the name of the place in the “Search” tab at the top of the screen and the user will be automatically directed to that place on the map.

One such example of online navigation is Google Earth.

Maps are also represented in the form of apps on smartphones and tablets.

2. Offline: Places on the map can be searched, even without the help of the internet. Driving exemplifies this. If a motorist is driving on the road and trying to find the post office, he/she can take the help of the automation navigation system.

The automation navigation system is a roadmap presented on a monitor screen, which bears resemblance to that of a computer. The navigation controls are displayed on the screen itself, thereby enabling the motorist to find his/her way to the post office.

Business

Animation in user interfaces also helps improve marketing strategies. Today, organizations from all fields employ animation for their websites not just to make themselves look presentable, but, more importantly, to make their goods and services look presentable in order to meet consumer needs. This method is also a profitable sign for businesses as it eases up advertising and encourages consumer satisfaction.

For example, if a person wants to purchase a hair dryer of a certain brand, she can access the website of that brand….

….Once the person enters the site, she will find it impressive and user friendly as it’s interface might contain some form of animation…..

…..Therefore, the person is encouraged to purchase the hair dryer.

Development

Sometimes, when you are accessing websites or apps, you wonder how these things are created. What really goes on into the making of something that requires a lot of interaction between humans and devices? What are the necessary steps taken to accomplish such a complicated task?

……Well, we, of RapidGems, know the answer.

We are a team of artists, illustrators, UI/UX designers and animators, that have all the “ingredients for the recipe”:

  1. Our goal is “whatever the client asks for, the client gets”.
  2. We arrange a meeting to discuss the app with our team leader and project manager. We plan out how it will be presented by exchanging ideas and concepts.
  3. Once it is decided on how to present the app, the UI designers start creating the app pages on the software, Adobe Illustrator.

4. When the intro and other pages of the app are ready, the UI designers approach the animators for this task.

5. By the time the animators are given the job of animating the pages of the app, the UI designers have arranged the pages in such a way that they have been split into different layers in Adobe Illustrator- text, text patches, icons, etc.

6. Before the app pages need to be animated, the animators convert each of the layered items into a symbol, which is also done in Adobe Illustrator. The kind of symbol each item is converted into, depends on the style of the animation.

7. Once this is done, the animators export the Illustrator file to the animation software, Adobe Animate, and start animating.

8. During the process, we keep reaching out to our client(s), to get their approval of the website or app.

9. Another way of presenting apps or websites to our clients, is by making explainer videos, which elucidate the usability and accessibility of them.

10. Our explainer videos are short one-minute or two-minute animations, which is a method of visual storytelling.

Conclusion

So we have seen how animation plays an important role in the user interface, in today’s world.

It has helped increase the use and popularity of the internet, with websites that have colorful, if not vibrant, dashboards and other web pages; helped improve the fashion of mobile phones, with the creation of apps, and the usability of the computer with the creation of tablet computers; the versatility of video games through game apps and several gaming brands, like PlayStation and Xbox, to name a few; as well as the versatility of podcasts, with the emergence of the iPod and, later, iPod Touch.

With breath-taking visual effects, motion graphics and transitions, be them two-dimensional or three-dimensional, not only has animation made UIs more user-friendly, but has helped build a strong relationship between humans and interfaces, as well. From the point of view of the aforementioned HCI, it is an icing on the cake.

All in all, no matter where we are, no matter what we do, the user interface has played a vital role in everyone’s lives. It has become a digital playground for fun, exploration and communication, thanks to this one technical art form called animation.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.