Task 2 | Interaction Design Proposal & Prototype
Application Design II / Week 01 – Week 4
Task 2 | Interaction Design Proposal & Prototype
Low J- Yin / 0352888
.jpeg)
Introduction
Exercise
Students are required to develop a comprehensive interaction design plan for their final web-based mobile application, including detailed wireframes, user flow diagrams, and prototypes of both micro and macro animations. The goal is to visually and conceptually prepare the interaction design and animations that will enhance the user experience of their application.
Welcoming Message Animation/ Macro Animation
The welcoming message appears as a playful, bouncy pop-up to immediately engage users. After a brief moment, it dissolves smoothly, transitioning users seamlessly to the sign-up page.
Button Micro Animations
Phone Number Field:
The “Get Code” button initially displays a subtle grey hover effect if the phone number field is empty, guiding users to complete this step. Once the phone number is entered, the button transitions to a vibrant red hover effect, signaling readiness to proceed.SMS Code Entry:
After users enter the SMS code, pressing “Enter” activates a lively hover effect on the button, providing immediate visual feedback and reinforcing their progress in the sign-up process.
Loading Page
Micro Animations
A clean, rotating spinner appears during loading, signaling that content is on its way. Its smooth and simple motion keeps users engaged without overwhelming them, adding a polished and professional touch to the waiting experience.
Home Page
- Favourite Button Hover:
The favorite button changes to a brighter tone (e.g., red for a heart icon) when hovered over, providing an appealing interaction cue. - Page Navigation Buttons:
Hover effects on navigation buttons subtly highlight them, enhancing discoverability and interactivity.
- "My Favourite" Section Reveal:
The section remains hidden by default and is revealed through a drag gesture, keeping the screen clean and interactive. - Menu Slide-In Animation:
Menu items appear sequentially in a staggered animation, adding dynamic flow to the interface. - Page Navigation Transitions:
Clicking a navigation button triggers a smooth transition animation between pages, ensuring a seamless user experience.
- Add-On Button Hover:
The “Add-On” button shifts to a red tone when hovered over, signaling an actionable option. - Delivery/Pick-Up Button:
The selected button changes to a contrasting color, with a sliding animation bar and descriptive text reinforcing the selection.
- Payment Loading Check:
A central circular animation with dynamic motion appears post-payment, signaling progress while keeping the user engaged.
- Progressive Loading Bar:
A dynamic bar gradually fills to represent order preparation progress. - Menu Animation Bar:
Switching between pages triggers a sliding animation where the new menu glides in smoothly.
Comments
Post a Comment