Application Design Ⅱ / Task 2: Micro-interactions and Micro interaction Prototype

26.9.2023 - 7.11.2023 (Week 1 - Week 11)

Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media

Application Design Ⅱ

Task 2: Micro-interactions and Micro interaction Prototype

---

LECTURE

All in-class lectures from week 1 to 7, including HTML/CSS Recap Exercise, and JavaScript Exercise are described in Task 1: App Design 1 Self-Evaluation and Reflection.

---

INSTRUCTION

Process Work

Task 2 is to create a prototype from the design revised in Task 1 and finalize the interactive animation to be used in the app.

And the design in Figma, with all changes completed, is shown below.

Fig.2-1: New Design on Figma (26/9/2023)

Interaction Design Planning

The first step is to create the user flow from the application startup to the achievement of the objective. Figma board was used for creation.

Fig.2-2: Interaction Design (Startup Screen)

Screen transitions and animations are distinguished between Macro and Micro interactions. The URL of the reference video will be inserted later, as the creation of the animation has not yet been started at this stage.

I have compiled the flow of the application I am producing in the following five main flows.

• Startup Screen
• Main Features
• Purchase Plan
• Payment Method
• Tools

Fig.2-3: Organize user flow

There is no need to present video examples for general interactive animation, such as slide-ins, so it's just mentioned which direction the screen appears from in the description.

Fig.2-4: Main Features

Fig.2-5: Purchase Plan

Screen transitions within a basic application are done with slides. Payment-related interactions appear prominently as a new window from the bottom, and the entire screen goes dark.

Fig.2-6: Payment Methods

Fig.2-7: Tools

As Fig.2-6&7, basic animations in the application follow the same as the main feature. More detailed explanation will be provided in the presentation video bottom of this post.

Interactive Animation

Fig.2-8: Converted Logo to SVG

I couldn't find "Celcom Life" logo online, so I traced and created a vector image using Illustrator.

Fig.2-9: Layer Separation

The logo shape and typography were divided into layers, one character at a time so that each shape can be animated individually. The total of logo svg is now 11 layers.

Fig.2-10: Transparency Design

I handled the loading animation by rotating an image I created in png. However, I think there is actually a way to do everything in only coding.

Fig.2-11: Check Mark for "Payment Completed"

Like the logo, the check mark was simply divided into 2 layers.

Fig.2-12: Animation Script using GSAP Timeline

A series of animations are created on the GSAP timeline. This can be easily moved to the final application. Animation samples displayed in a browser can be viewed at the following URL;

1. Logo Animation

https://app-design2-animation.netlify.app/

2. Payment Completed Animation

https://app-design2-animation.netlify.app/index2

3. Loading

https://app-design2-animation.netlify.app/index3

Storyboard

Then I returned to the Figma board and started on the storyboards in each page (each section).

Each story is specified in three sections: On Enter, On Page Loaded, and On Exit. The three are when you open the page, idle state, and when moving to another page respectively.

Fig.2-13: Story of Startup Pages

Fig.2-14: Story of Purchase Features

Fig.2-15: Story of Inquiry Form

Fig.2-16: Story of Payment Methods

The Final Outcome section below includes a video presentation explaining progress of page flow, animation, and storyboarding mentioned earlier, and my entire Figma board.

---

FINAL OUTCOME

Fig.3-1: Micro-interactions and Micro interaction Prototype on Figma (7/11/2023)

https://www.figma.com/file/uBFmbeWkG2vYyPireAHifi/Task-2%3A-Micro-interactions-and-Micro-interaction-Prototype?type=whiteboard&node-id=0%3A1&t=B5fqKzEvwLSwknkB-1

Fig.3-2: Video Presentation (4/11/2023)

---

REFLECTIONS

Experiences

This task required showing micro-interactions, including animation, along with prototypes. We students have considered and presented how to use the techniques I have learned so far on how to add elements, decorations, and movement to a website in HTML, CSS, and JavaScript to create detailed front-end animations.

Observation

On a technical note, I found that GSAP, especially with the use of timelines, makes it very easy to implement complex movements. With the illustrator I had been using, I had only routinely created data for print or as image data even if for the Web, and I was surprised at the flexibility of the SVG format.

Findings

In creating the interaction animations for the components, I created SVG files and moved them into separate layers. In my case, the most complicated animation was the logo design, but since an overly ornate animation is not suitable for the startup screen, I set it up so that all letters appear in sequence, albeit in a simple. After checking several existing apps, I have found that logo animations longer than 2 seconds are irritating. In terms of overall interaction, "feedback" like indicating where you are now, being sure you push a button or confirmation of payment success is very important, but I felt that too much of it would detract from operability. It was concluded that the ideal approach would be to use minimalistic and agile animations in the right places so as not to compromise usability, especially the feel of the operation.