Segari micro-interaction

DOWNLOAD SEGARI.ID

✦ MAIN ISSUE

Having been spoiled (experience-wise) by app & tech giants like Apple, Instagram, etc., other app experience that doesnt offer the same experience will quickly raised an annoyance, at least for me. These seemingly 'invisible' experiences, turns out, were something deliberately placed by the designer and not always something pre-built/default in the development phase.

To put in context, Segari's transition between the initial white screen to the content load was janky. The content was abruptly "snapping" from one place to another and everything was seen suddenly appearing. This creates the perception of the app looking laggy and broken, even though everything was fine -- fast load, images are loaded, etc.

✦ DESIGN PRINCIPLE

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

✦ EXECUTION & IMPLEMENTATION

I took the opportunity to improve the workflow between the design and development teams by communicating and deep diving a little bit learning their tools. Since the language between motion and development are now more standardized, (stuff like 'easings', 'bezier-curve', etc.), collaborations can be much more easier.

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. And for the prototyping, tool-wise I mainly used Principle^↗ and the handover is usually done by providing the recordings with the requirements above.

From the showcase above, I added a combination of what is called a "Y-axis translation" or simply "move up a bit" and subtle opacity change. When the content appeared, a slight movement can be observed alongside a fading animation. This creates a whole lot smoother loading experience and is more natural for the human eye to perceive.

In addition, showcase 1.2 & 1.3 above shown the implemented gesture features enhancing the navigation experience. These include:
• The rubber band scroll,
• Swipe gestures for efficient navigation,
• Haptic feedback on certain key customer actions - such as add to cart, payment confirmed, etc.

✦ GALLERY OF EXPLORATION