Earlier this week, I came across this animated loading state on Twitter from Apple Face ID processing. As a product designer, I'm always interested in how micro-interactions improve the overall user experience.
One key thing we can extract from Apple's design approach is the efficient use of elements by making them undertake action related transformations. For example, we can see the Face ID icon turn into loading states and validation states. In this case, Apple is using a single icon to achieve multiple states within the same component.
By utilising our existing icon, we're able to achieve the same result and turn the modal icon into a UI element that the user identifies as a feedback signal. This is the final result
If good design is invisible, one way to do it may be to allow visual elements to fill both roles: aesthetic and function
Modals are very common element in e-commerce websites, apps, etc. Every time users interact with a modal, it's important to deliver a clear feedback about their actions to prevent frustration of waiting for the action to finish.
A loading state is a placeholder that shows the user something is currently happening while they wait, and informs them how long it will take. It's an important part of most applications. The main purpose of this state is to inform the user that something is happening, so they don't think it's frozen or broken.
This animation caught my eye and I knew I had to figure out how to adapt it to more generic use cases — especially since I knew it would come in handy someday if I ever needed to create an animated loading state.
