Micro-interaction

DOWNLOAD SEGARI.ID

✦ MAIN ISSUE

The transition between the initial white screen and the content load was off. The content was abruptly "snapping" from one place to another because they were pushing each other vertically. Additionally, the content was loaded independently with no deliberate sequencing on which should load first.

✦ DESIGN PRINCIPLE

My principle of micro-interaction design is rooted in the use of existing mental models of natural physics. Meaning that the interactions should feel intuitive and behave in a way that customers expect based on real-world experiences. When it comes to loading sequences, it's also important to be deliberate and prioritize the content that is being loaded. Typically, the most important content is revealed last to draw attention to its significance.

In addition, I also suggested to implement specific features to enhance the customer experience. These include the rubber band / inertial scroll, which gives customers a visual cue when they reach the end of a scrolling area rather than abruptly stopping it, swipe gestures for intuitive navigation, and haptic feedback to provide tactile confirmation of customer

✦ EXECUTION & IMPLEMENTATION

I also took the opportunity to improve the workflow between the design and development teams by communicating with them and deep diving a little bit learning their tools.

As most of the requirements for the micro-interaction were already supported by the dev tools without additional libraries, the next step came down to merely translating the interaction prototype to development. Requirements of which part goes first, durations, delays, easings, etc. For the prototyping, I mainly used Principle and the handover is usually done by providing the recordings and the requirements above. The animations are done purely using native code

I added a combination of what we called a "Y-axis translation" and subtle opacity change. When the content appeared, a slight movement can be observed alongside a fading animation.

✦ GALLERY OF EXPLORATION