Application Design II / Task 2
19.5.2024 - 13.6.2024 (Week 5 - Week 8)
Application Design II / Bachelor of Design in Creative Media
Task 2 - App Animations Prototype
Instructions
Task 2: App Animations Prototype
Refining
Fig 1.1 Update blank box
For the categories blank box, it is filled in with vectors / illustration from Freepik, then open in Adobe Illustrator to change the colour or take the only elements needed.
The images from the clinic also updated. This to help the user visualizing the content.
In this task, we are required to create
I aim to create an app with seamless and logical animation and transition between elements and pages. Therefore, it is important to make sure to follow some guidelines that can enhance the overall user experience. Interaction Design Documents
Create detailed flowcharts and wireframes that map out the user journey and key interaction points within the application.
Animation Prototyping
• Micro Animations
Prototype small-scale animations that enhance the user's interaction with the application. These might include button effects, hover animations, loading indicators, and feedback messages.
• Macro Animations
Develop concepts for larger-scale animations that significantly affect the user interface, such as transitions between different app states or animated introductions.
- Fade in and out with opacity
- Scale to add liveliness
- Maintain consistent directionality
- Balance speed
- Prioritize, order, and group
- Establish spatiality
While it may be challenging to apply all of these principles flawlessly due to the limitations of current proficiency with Figma's prototyping and animation tools, the information provided serves as a valuable guide to ensure a smoother transition process throughout the app's development.
Fig 1.2 App Flow
Fig 1.3 Masterplan
The majority of the app's flow follows a straightforward approach, primarily relying on fade-in and slide-in transitions. These transitions are designed to create a smooth and seamless experience for users as they navigate through the different sections and pages of the app.
For most of the app's screens, the transition animations occur vertically, with elements either fading in or sliding in from the bottom of the screen. This vertical directionality helps maintain a consistent and predictable flow, allowing users to develop an intuitive understanding of how the app's interface behaves.
However, there are a couple of exceptions to this vertical transition pattern. The introduction page, which likely serves as the app's initial screen or splash screen, may incorporate transitions that deviate from the vertical norm. Similarly, the side bar menu, which is a common user interface element for providing navigation options, may also employ transitions that differ from the vertical standard.
These exceptions allow for a more dynamic and visually engaging experience during specific points of the app's flow, such as the initial introduction or when accessing the side bar menu.
Micro & Macro Animations
Loading Screen
Macro:
- Fade in
- Fade out
- Page swipes up upon offloading
Micro:
- Logo scaling and app name fade in is a loading indicator
Fig 2.1 Loading Screen Animation Pages
Onboarding Screen
Macro:
- Tap the next button to next page transitions (slide left)
Micro:
- Irregular line on top left indicate page number
- Words fade in
- Vectors slide left
Fig 2.2 Onboarding Screen Animation Pages
Upon completing the prototyping process, I realized that the transitions on the onboarding screen lacked the desired level of smoothness. The current transition sequence involves the text fading in first, followed by the vector graphics sliding in. However, from a user-centered perspective, this order may not be the most optimal, as users tend to focus on visual elements before textual content.
To enhance the user experience and create a more natural flow, you propose reversing the transition order, with the vector graphics appearing first and the text fading in afterward. This approach aligns better with typical user behavior and expectations, providing a more intuitive and engaging introduction to the app's features.
Additionally, the current interaction methods, which rely solely on "next" and "skip" actions, may not be the most suitable for modern device usage patterns. Instead, incorporating a drag gesture would be more suggested, which would allow users to navigate through the onboarding screens in a more familiar and intuitive manner, reflecting their typical interactions with mobile devices.
To further streamline the user experience, the "skip" and "next" buttons were removing altogether and replacing them with a single "next" text button. This simplification reduces visual clutter and provides a cleaner interface, while still allowing users to progress through the onboarding process at their own pace.
Fig 2.3 Updated Onboarding Screen Animation Pages
Log In / Sign Up
Macro:
- Ease in and out from one page to another
Micro:
- Hovering effect while pressing the button
Fig 2.4 Login/Register Screen Animation Pages
Fig 2.5 Pressing hover effect
Home Page
Macro:
- Elements in white container slides up from the bottom
- Side bar menu slides from the left upon clicking the hamburger icon
Micro:
- Press Hover effect applied on the veterinary clinic button in service section
Fig 2.6 Homepage & Side bar menu Screen Animation Pages
Side Bar Menu
Macro:
- Panel slides from the left
Micro:
- Words fade in
Reference animation: https://pin.it/7kMpNdyrA
I watch some animation from pinterest that really inspired me, but I didn't really achieve it. The animation i get was fade in one by one. Hope that coding could achieve the state of animation in reference.
I watch some animation from pinterest that really inspired me, but I didn't really achieve it. The animation i get was fade in one by one. Hope that coding could achieve the state of animation in reference.
Fig 2.7 Component in Variant
Fig 2.8 Side bar menu Screen Animation Pages
Category Page
Macro:
- The category fades in
Micro:
- Bottom navigation bar ease in from home icon to category
- Press Hovering effect
Fig 2.9 Category Screen Animation Pages
Clinic Nearby Page
Macro:
- The container slides up from the bottom
- The filter panel slides up from the bottom while tap the button
Micro:
- Scrolling vertically
- drag （filter panel）
- Press Hovering effect
Fig 2.10 Clinic Nearby Screen Animation Pages
Clinic Info Page
Macro:
- The information fades in
- The images slides up from the bottom
Micro:
- The services fade in and out
Fig 2.11 Clinic Nearby Screen Animation Pages
Fig 2.12 Bottom Swipe Up Layout
Fig 2.13 Clinic Info Animation Pages
Fig 2.14 Clinic Images Animation Pages
Booking Appointment Page
Macro:
- The container slides up from the bottom
- Drag downward can close the container
Micro:
- The date scrolling horizontally
- While the time election made, scaling and color change used for feedback
Fig 2.15 Booking Appointment Animation Pages
Fig 2.16 Updated Booking Appointment Animation Pages
There’s limitation in booking appointment page if use traditional method (Fig 1.17 & Fig 11.18), it only allow booking appointment on 15 May, Wed, 14:30 - 15:00. So maybe use the same method from loading circular progression which is using variant method would allow to select more option.
Fig 2.17 Appointment Booking Animation Page and variants
The variant option allows create multiple variations of a design element within a single instance. This streamlines the design process without cluttering the project with numerous copies or exceeding the page size. However, the limitation that I haven't find a solution to solve it is there are possibility to have multiple selection in one page, maybe that one need to use some coding to specify the function. In this task, we just need to focus on how the micro and macro animation perform in the app.
Booking Confirmation Page
Macro:
- Circular Progress Bar Animation
Micro:
- Scale for the booked appointment
Tutorial for loading progression circle
Fig 2.18 Clinic Nearby Screen Animation Pages
Fig 3.1 Overview prototype interaction
Fig 3.2 Updated prototype interaction overview
Fig 3.3 Updated Masterplan
Final Submission
Figjam App Flow Mapping & Masterplan
Fig 4.1 Interaction Design App Flow Mapping in Figjam
Figma Animation Prototype
Fig 4.2 Interaction Design Animations Prototype in Figma
Fig 4.3 Final Presentation Video
Reflection
I'm constantly striving to improve the user experience (UX) of this project. I find myself continually brainstorming ways to optimize the user interface (UI) to better match user needs. While this dedication to improvement is positive, it can sometimes lead to delays in completing the work on time.
In this task, I recognize the importance of animation and transition in creating a smooth and engaging UX. Effective app and website design hinges on the harmonious relationship between UI (user interface) and UX (user experience). They should be built around user behaviour. This approach, known as user-centered design, ensures that the final product is intuitive, efficient, and ultimately meets the needs of the people who will be using it. This realization has motivated me to delve deeper into mastering these aspects. To address this, I've been actively learning through tutorials and gaining practical experience within Figma. This will allow me to master the tools and techniques necessary to implement smooth and effective transitions, ultimately elevating the overall user experience.
Comments
Post a Comment