With the advancement of the smart phones, the applications that runs on them have evolved over the years. Phone apps now do much more than just running the primary functions. The user interface has been improved day by day with regular updates which provide the app with either more functions and/or beautiful and cool UIs.
I am a digital animation student graduating from Art, Design and Media School in Nanyang Technological University, Singapore. I explore from creating motion graphics films and informative videos to designing website and app UIs using animation. The animations of the objects and transitions within the app play an important part in improving user experience. It also highlights the purpose of the app’s features. Sometimes we don’t notice those small little details that the app does that make it more meaningful and user friendly. But once you start noticing it, you will be amazed at how it progresses with every updates. Besides, there is dribbble.com where many designers showcase their cool UI concepts, some of which are yet to be in the market. I have decided to document some deliberately animated UIs of the apps both from the app market and dribbble to appreciate the details that the developers and designers crafted.
UIs with masking animation
Masking is the most useful tool in designing. It uses a shape to crop out unwanted part of the image or design without loosing its content. Masking can be used in revealling things in animation. In UI, masking is useful in transitioning from one feature to another. The player app UI example shown below has a circular-shaped disc-like element rotating while the song is playing. It uses masking to show the rectangular-shaped full album art upon pausing the song. In this case, the usage of the masking for the disc-like shape is relevent for the music app. It gives the app a touch of nostalgic feel since we used to listen to the physical CD on the disc player back in the day.
The Uber app also uses masking to morph from its logo to the map upon opening. It gives an app a nice consitency without a sudden flickering in transitioning between the pages. The U-shaped Uber logo is also inspired by the location pointer that is used in the map which most of us don’t realise. By this animation, we get to know the story behind the the Uber logo.
UI with a cartoon animation
We all have seen the “send” icon of the Google mail. It is in a shape of a paper plane. The action of folding the letter into a paper plane and flying it off to the receiver serves as a metaphor for sending the mail over the internet. The app demo shown below uses that principal and making it into a short cartoon animation upon holding down and releasing the “send” button like how you would shoot the plane with a rubber band. The paper plane icon flys through the landscape before it gets back to its position to tell the user that the mail has been sent. Or this function can also be used when you want to check the arrival of a new mail. With this UI animation, we won’t be so bored waiting for the mail to be sent.
UIs with pull-to-refresh animation
Refreshing is what we do most of the time with the social media apps to see newer real time feeds. Nothing bothers us more than a rotating loading icon upon refreshing. With the use of animation in pull-to-refresh function, not only it is interactive but also entertaining. And it is also important that the feed refreshes without loosing the previous content but with the smooth animated arrival of newer feeds added into the list.
UI with interactive animation
We use app to avoid doing the physical stuffs and reduce the usage of physical objects which are wasted in the process. We used to print paper tickets for flights, movies and car parkings, etc. With the arrival of booking apps, we don’t have to waste paper anymore but we surely miss the interaction we do to get the paper ticket. It feels good to tear the ticket along the seam line. The UI concept shown below brings back the interaction within the app. Now we can save the paper as well as not forgetting how the physical world works.
Below is the animated UI for trip planner app that I have done for one of my assignments. It tells the user to walk to the destination with the flowing line animation from one point to another instead of using arrows. The direction of the flowing is the direction that the user should head to.
There are many more principles regarding designing UIs. Hopefully I will be able to research more and post article often about my findings and thoughts on the UI concepts. Till then.
