Task 3 | Interactive Component Design & Development

 Application Design II / Week 01 – Week 4

Task 3 | Interactive Component Design & Development

Low J- Yin / 0352888

---

Introduction

---

Exercise 

Students will build upon the knowledge gained in Task 2 to create micro-interactions and animated micro-interactions for their app. This will greatly elevate the user experience of the app. The aim of this task is to get the students to explore and make creative decisions on the type of interactions they would want to integrate into their app.

Here is what i am going to do with Interactive Components/Elements:

• Button Hover Effect
• Responsive Dropbox
• Checkbox Interaction
• Navigation Menu Bar with interaction icons
• Add-On Interaction
• Loading Bar

Sign Up Page

For this page have three interactive components:

1.Button Hover Effect

-The "Get Code" button changes color to red when the mouse hovers over it."

2. Responsive Dropbox

-A country code dropdown (+60) and a mobile number input field are visually grouped together for clarity.

3. Checkbox Interaction

-A checkbox allows users to confirm that they’ve read and agreed to the terms of service.

Loading Page

A clean, rotating spinner appears during loading, signaling that content is on its way.

Payment Page

1.Payment Timer

 - The remaining time shown on the page could decrease every second, updating dynamically.

2.Confirmed Button

-The button is initially disabled and can be enabled once a payment method is selected.

3. Select Interaction

-A select button to pick what platform users would like to use for payment.

Ordering Page

1. Add-On Item Interaction

- (+) (-) for users to add on or minus the item.

Menu Navigation Bar

The bottom menu will have a floating animation for each navigation item, starting from Home and going to Profile. When a page is active, its corresponding icon will slide up, become red colour, and have a circular background to indicate that it’s the current page.

Walk-Through Prototype:

Next, i will move on with Home Page:

---

Reflection

For my animation prototyping, I explored how to key in coding to enhance user interaction and interface fluidity. Using css and javascript, I created index.html for button effects, interaction, and indicators. These animations are designed to improve usability and add aesthetic appeal, creating a cohesive and engaging experience.