APPLICATION DESIGN 2 - TASK 3: MICRO INTERACTION PROTOTYPE
Madeline Ordelia Tjahjadi (0376920)
Bachelor of Design in Creative Media
Task 3: Micro Interaction Prototype
Table Of Content
1. Lectures
2. Instructions
3. Process Work
4. Feedback
5. Reflection
1. Lectures
Week 8
This week we learn about micro and macro interaction. We given a tutorial
how to create simple interactions, based on the given tutorial, I tried the
form validation and input shake.
Figure 1.1: Given Tutorial.
After I tried the tutorial, it's not working, so I tweak it and eventually
made it works. I will put the explanation in process work.
Week 9
no classWeek 10
We learn to create some subtle animation for micro interaction. Additionally, we also learn to use Lottie animation for macro interaction.
Week 11
This week, Ms. Nurul sick so she gave us tutorial in mytimes. We basically can create a working search bar, alert dialog and also put AI inside. I tried the alert dialog since i have log out feature.
Figure 1.2: Attempt for alert dialog.
2. Instructions
3. Process Work
In this task, we need to integrate micro and macro interaction into our app. Micro interaction means subtle and small functional animation that acknowledge user's action, while Macro means large-scale user interface transitions that help user maintain structural context.
Micro Interactions
For micro interaction, I put 4 subtle animation. Below is the process:
1. Notification
I use animation feature that will triggered when user click the notification. For the animation itself, I use shake, so when user turn on the notification, there will be a subtle shake animation that confirm user action.
Figure 2.1: Animation feature.
Figure 2.2: Action panel.
Below is the animation preview:
2. Hero animation (shared element transitions)
For this animation, it's a very simple action. I choose one of the picture from movies page that will lead to showtimes page. To create the shared element transitions, I use hero animation. I toggle on it in the first and second page and create a tag that will be shared between the two picture.
Figure 2.3: Hero animation activated.
3. Input shake (login and signup)
To create this, I use action editor. Below is the screenshot of my action flow:
Figure 2.4: Action flow.
So, basically I create page state for each of my text field. After that I called it in conditional action. If it's true, I will have 2 actions which is the animation for each of my text field: shake. After that it will end there. But if it's false, it will create an account or logging in and will lead to my splash screen before eventually goes to my homepage.
Below is the preview:
4. Glow state trigger
Last one is the subtle glow trigger. This is to gives a sense of exclusivity. Since there is a tier in the membership of the app, giving a subtle glow make the tier looks distinct than other yellow color in the app. I simply apply glow animation on page load and put it in the action.
Below is the preview:
Macro Interactions
large scale animation, I put 2 things.1. Lottie animation
For this animation , I use lottiefiles to search for the animation that people already created before. After that, I use lottie animation widget and upload the animation that I already edit and download: the JSON. file. After that I will need to link it to other pages such as loading page to go to the homepage and the booking successful animation.
Loading page
Booking successful
2. Confirmation dialog
I use component to create a confirmation dialog. I create separated component that will link to a button. I use this for 2 things: log out and cancel ticket, since this is a major and risky decision that user need to make, so a confirmation dialog is needed. I use on tap --> alert dialog --> custom dialog, and select the component that I made in action editor. Below is the preview:
Log out
Cancel Ticket
4. Feedback
Week 8
no feedback
Week 9
no class
Week 10
no feedback
Week 11
no class
5. Reflection
This task is actually quite easy since we need to incorporated micro and macro interaction in the app. Some of it I already made it before and some of it I just added it. I learn more about what is micro and macro interaction that help me to notice some of the apps that also have the interactions. Overall this task is not as bad as task 2, where I encountered more errors along the way.
Comments
Post a Comment