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:
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:
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/
Dru's Desk 