Tag: animation

Animation in UI and UX

 

UI stands for user interface and it is anything that the user interacts with. UX stands for user experience and it the overall experience the users have with a product (Preece, Rogers, & Sharp, 2014). UI would be the visual, auditory, and kinesthetic elements of a product, while the UX would be the journey a user has with the product, that is how it is used, what it is used for, and how it makes the customer feel.

An example of great UI is the iPhone’s ever-evolving iOS. The UI of the screen (visual), Siri (audio), and gestures (kinesthetic) is very intuitive and creates a UX that makes it seamless to do multiple activities. For example, want to listen to music or have a question answered? Just say “Hey Siri…” and add a command.  Want to pull up a calculator or take a photo? It literally takes one swipe and a tap to activate these apps, even when the screen is locked.

Apple has an official developer’s website dedicated to UI called Human Interface Guidelines (n.d). On the site they emphasize, three primary themes:

Screen Shot 2018-05-11 at 8.57.09 AM

Apple has made it easy for their users to purchase music and apps (just ask Siri), and with their biometric technology, one no longer needs to enter long passcodes. These attribute to Apple’s bottom line as it creates fast quick purchases, minimizing the time to second guess a purchase. 

So how do UI and UX relate to animation? Simple it enhances the UX by matching animation elements with UI commands. For example, just ask Siri a question and an animation will pop up:

Siri_5067f7768c557c34ff93b1de25963e12-xl

This helps the user to know that the command was activitated and it also allows the app to load in the background.

Developers have used animation to minimize wait times, specifically to loading, downloading, or installing (Frost, 2016).  My animation can be used on an app as the app begins to download and install updates. It also be used as an animation that users watch while the app begins to load on a device. It can also be used as on a websites. Instead of watching a boring loading screen (while all the images are loading or the site is connecting to a server, or updating a shopping cart , users can watch a short animation. The animation can also help deliver and reinforce my brand image to my clients.

When I think about how animation can minimize load times I think about Resident Evil for the Playstation. This was a great design choice as it added to the effect of the eeriness and scare of the game along with masking the load time that was happening in the background. Could you imagine Resident Evil without these animations? 

References:

Frost, A. (2016,  January 28). How to make your users enjoy waiting. Retrieved from https://www.sitepoint.com/make-users-enjoy-waiting/

“Human Interface Guidelines.” (n.d). Retrieved from https://developer.apple.com/ios/human-interface-guidelines/overview/themes/

Preece, J., Rogers, Y., & Sharp, H. (2015). Interaction Design (4th ed.)

“Human Interface Guidelines.” (n.d). Retrieved from https://developer.apple.com/ios/human-interface-guidelines/overview/themes/

 

What is an animatic?


An animatic is a collection of storyboards placed together in a sequence, on a timeline, using a movie editing software. When placing the storyboard on a timeline, we can make each board shorter or longer to see how the timing works for the animation (Plursight Creative, 2014). These timed storyboards can also be timed to the music or dialog. The purpose of this is to view one’s entire animation and make any needed changes more quickly or easily and much less expensively. 

Animatics is a preproduction tool that is actually both used in film and animation (Chew, 2018). Its helpful in creating because the elements that are hard to grasp on a storyboard are the timings and audio involved in the final production. An animatic can precisely communicate how long each shot is and can also communicate when an action happens in relation to camera moves or dialogue. 

One can also create more complex animatics where there are elements separated from the storyboard so that they [elements] can move independently of the background (Plusight Creative, 2014). For example, there can be two elements in on animatic shot, the background and foreground. A ball in one shot [foreground] can move across the screen to show which direction and it moves. The complexity of animatics depends on much detail one wants to add, the more detail, the more complex, but the better it will communicate on what the final product should look like.

In nutshell, an animatic is an animated storyboard used to determine the timing of each shot with key pieces such as sound effects, dialogue, and music added to give a good representation of what the final product should be. Animatics help bridge this gap between post-production and the final production. The next time one is working with storyboards, think about the working out the timing with an animatic.

References: 

Plursight Creative, (2014, February 22). CG101: What is an animatic? [Video file]. Retrieved from https://youtu.be/3sE5ox9kkUg.

Chew J. (2018, January 17). Learn how animatic is used in film and animation. Retrieved from https://www.lifewire.com/what-is-an-animatic-4058250.

%d bloggers like this: