Application Design II / TASK 3: Micro Interaction Prototype
Daphne Lai Yu Cheng / 0366380
DST 61004 / Application Design II / Bachelor of Design (Honours) in Creative Media / Taylors' University
LECTURES
INSTRUCTIONS
Task 3: Micro Interaction Prototype
Figure 1.1 Task 3 Brief
Micro Animations (Action & State Feedback)
1) Button shake animation
For the first micro animation, I made the sign up and sign in buttons have a subtle shake animation that only happens when users do not key in their details to indicate when there is an error.
Figure 1.2
Firstly, I added animation to the button and set it to on action trigger then customised the animation. Next, I add conditional action > true: button animation / false: user authentication.
Figure 1.3
2) Image Shimmer Effect
To make the beverage image stand out more and make the page more engaging for users, I added a shimmer animation effect on the image.
Figure 1.4
To make it work, I selected the image and added animation. Then, I set it to on page load and customised the speed of the animation.
Figure 1.5
Macro Animations (Structural & Navigational Flows)
1) Loading Indicator Lottie Animation
I added a loading indicator lottie animation to ensure a smoother user flow because the overall user authentication flow looked rigid at first.
Figure 1.5
I first uploaded the JSON file and set it to auto animate on loop. Next, I applied wait/delay action then navigate to home page.
Figure 1.6
2) Delete/Trashcan Lottie Animation + Pop up
To alert users when they delete an order in the cart page, I added a trashbin lottie animation that will pop up when users click on the trashcan icon button.
.
Figure 1.7
I first created a blank component and uploaded the JSON file, then added an alert dialog action and selected the pop up component as the alert dialog type for the trashcan icon button in the cart page.
Figure 1.8
SUBMISSION
-
Comments
Post a Comment