App Design2 // Task 2
08.10.2023 - 09.11.2023// Week 6 - week 10
Lim Yi Xvan 0354552
Bachelor of Design in Creative Media
Instructions
Tasks 2: App Animations Prototype
For Task 2, we had to design animated micro-interactions and micro-interactions for the application. This will significantly improve the app's user experience. The purpose of this assignment is to encourage us to think creatively and investigate the kinds of interactions we might like to include in the app. The task's output is a prototype, which may or may not be a finished app but highlights the useful micro-interactions. The output, though, needs to make it clear what kind of motion, animation, and interaction we have in mind for the application.
#1 Refining Interfaces Design
I started off by refining the app's interfaces which I had to do after I
got my feedback from Mr. Razif. So the pages I originally had in the Period
Tracker App were 31 pages and after the consultation with our lecturer, it
was reduced to 18 pages🙈 YAY it was 13 pages being lessened!!
|
| fig 1.1 - comparison before and after page deduction |
By then, I was also advised to change the "Add Diary" page layouts since the "Home Page" and "Calendar Page" will be directed to the same diary entry page. Hence, I've made some changes to the interface design in terms of its design and layouts.
|
|
fig 1.2 - comparison before and after diary entry redesigned |
Instead of using the header tag as "Add Note", I changed it to the
calendar date as the header and the "Write Diary" in a border along with
the space for users to enter their diary.
Besides, I also made changes to the "Calendar" page on the monthly calendar
page. I felt that the design is a bit Meh and Mr. Razif mentioned it was not
that consistent either compared to the "HomePage". Hence, the layout and its
interface design were being "upgraded".
|
|
fig 1.3 - comparison before and after the monthly calendar
redesigned |
The new design obviously looks cleaner and clearer compared to the previous
one. Also, the design was aligned with the "HomePage" design with the
features presented in widget form. I've taken away the "Add Note" option
below as the diary entry can be clicked in the widget so it doesn't have to
have it there.
#2 App Flow Mapping
I organized the app flow by beginning with the onboarding screen and
down to the "Period Tracker App" features. Large screen movements and
the macro animations on each page were the primary focus of this
section.
I created a clear app flow at the start of the interaction design
process that described the user's journey from the onboarding page to
the login page, the home page, and all of the app's features. The main
focus of this first stage was organizing the macro animations and
specifying the important movements and transitions that occurred
throughout the application.
My goal in concentrating on the macro animations was to produce visually
striking experiences that would lead users to pages with ease. This
required figuring out when various screens would enter and exit the
page, as well as pinpointing crucial times when the application's UI
would significantly change.
At this phase, I paid close attention to the entire user flow and made
an effort to make sure that the macro animations on each page
complemented the function and goal of the app. My ultimate design choice
was to maintain a clear and basic transition style while adding enough
movement to prevent the page from becoming overly motionless. As our
lecturer mentioned earlier the key to this assignment is wanting us to
create animations we have learned in classes. I created a
consistent and easy-to-use user experience by outlining the key moves
across the screen.
|
|
fig 2.1 - app flow from onboarding page to login page to start
page |
|
|
fig 2.2 - app flow from home page to related features and linking
with the calendar |
|
|
fig 2.3 - app flow from "self-care" page to profile |
The animations in the app were planned to have a clean, easy-to-understand
transitional style that leads users smoothly between sections and creates
an organized flow. Animations that are minor yet functional, including
fading and sliding, were included to give the screen movement and keep it
from appearing motionless. An elegant yet useful app experience is
produced by striking a balance between movement and simplicity.
#3 Micro Animations Masterplan
Following the mapping of the app flow, a master plan was made for each
page that included detailed micro animations and interactions. For
each page, there were three steps in the plan: On Load, In App, and
Off Load.
"On Load" stage:
- Introduced during the initial page load or entry.
- Featured ease-out style animations, sliding in from the left or
top.
- Included icons and page titles for a smooth introduction.
- Aimed to provide basic motions when a page loads.
"In App" stage:
- Focused on creating visually consistent, responsive, and
intuitive animations.
- Designed to enhance usability and user enjoyment within the app.
- Included animations for interacting with features such as
sliding sections, button taps, hovering effects, and scrolling.
- Concentrated on micro-interactions and user engagement.
"Off Load" stage:
- Contained animations and transitions for navigating away from a
page or completing specific actions.
- Ensured a smooth and seamless exit experience.
- Maintained a consistent and fluid user experience.
- Aimed to provide continuity and user satisfaction during exits.
|
fig 3.1 - logo loading page micro animations
 |
fig 3.2 - onboarding page micro animations
|
|
|
|
|
fig 3.4 - add symptoms page micro animations
|
|
|
fig 3.5 - monthly calendar page micro animations
|
|
|
fig 3.6 - profile page micro animations
|
|
|
fig 3.7 - self care page micro animations
|
Micro interactions provide an application its unique identity and give each page a unique movement, including loading indicators, scrolling animations, and other interactive components. To achieve this, designed micro animations and interactions were added into each of the three UI stages to create an application with seamless functionality and an engaging user experience.
#4 Animating App Prototype's Animations
I created a short, detailed list of all the macro and micro
animations I wanted to use on each page to organize my animation
work. I monitored each stage of every animation and ensured they
interacted seamlessly by using this checklist as a visual roadmap
along with the app flow mapping and master plan. It also offered a
chance to assess each animation's usability and aesthetics,
finding any weaknesses or requiring additional improvements.
External tips
Macro Animations: Macro animations are larger-scale
animations that frequently feature screen transitions or
significant UI adjustments. They serve to create a feeling of
continuity, offer feedback on significant interactions, and
direct the user's path through the application.
Screen transitions, page slides, modal pop-ups, the opening and
closing of the navigation drawer, and full-page refreshes are a
few instances of macro animations.
Micro Animations: To improve the user experience,
smaller, subtle animations known as micro animations take place
within the user interface. They can improve the app's
responsiveness and engagement and are usually focused on
feedback for particular engagements. Button clicks, hover
effects, icon movements, loading spinners, and error messages
that slide or fade into view are a few examples of micro
animations.
Logo Loading Screen
Macro Animations:
- Instantly fades in while on loading
- Fades out while offloading
Micro Animations:
- Logo's size and opacity as loading indicator
- Logo fades out while offloading
|
| fig 4.1 - Logo loading screen animations |
Onboarding Screen & Login Screen
Macro Animations:
- Instantly fades in while on loading
- Fades out while offloading
Micro Animations:
- Logo slides in from the top
- Texts and graphics slide in from the left
- Buttons slide in from the bottom
|
|
fig 4.2 - Onboarding screen animations |
|
|
fig 4.3 - Login screen animations |
Welcoming Screen
Macro Animations:
- Slides in from the right while on loading
- Slides out to the left while on loading
Micro Animations:
- "Nice to meet you" text slides in from the top
- Graphics slide in from the bottom
- The user's name "Selina" fades in afterward
|
|
fig 4.4 - Login screen animations |
Answering Questions Page 1 & Birthdate Entry
Macro Animations:
- Slides in from the right while on loading
- Slides out to the left while on loading
Micro Animations:
- Text slides in from the top
- Button slides in from the bottom
|
|
fig 4.5 - Answering questions page and birthdate entry page
animations |
"Let's Start" Page
Macro Animations:
- Slides in from the right while on loading
- Slides out to the left while on loading
Micro Animations:
- Logo slides in from the top
- Texts and graphics slide in from the left
- Buttons slide in from the bottom
|
|
|
Home Page
Macro Animations:
- Instantly fades in while on loading
- Fades out while offloading
Micro Animations:
- Number of days fades in
- Buttons and widgets slide in from the left
|
|
fig 4.7 - Home Page animations |
Diary Entry Page
Macro Animations:
- Instantly fades in while on loading
- Slide out to the right while offloading
Micro Animations:
- Diary input border slides in from the bottom
- Clicking the input border will trigger the keyboard to appear by
sliding in from the bottom
- Dates in the header can be hover
|
|
fig 4.8 - Diary entry Page animations |
Diary Entry Page
Macro Animations:
- Instantly fades in while on loading
- Fades out while offloading
Micro Animations:
- The header remains while switching to "Year" calendar mode
- Dates can be hover
- Widgets and buttons slide in from the bottom
|
|
fig 4.9 - Month Calendar Page animations |
Resources Page: Period Relief
Macro Animations:
- Instantly fades in while on loading
- Slide out to right back to self care page while offloading
Micro Animations:
- The header image slides in from the top
- Borders slide in from the bottom
- Middle texts only fade in afterward
|
|
fig 4.10 - Resources Page animations |
Self Care Page
Macro Animations:
- Instantly fades in while on loading
- Fades out while offloading
Micro Animations:
- Horizontal scrolling behavior available in "soundscapes" and
"menstrual relief cramps" sections
- Each section slides in from the left one by one
- When clicking the soundscapes will trigger the sound player to
appear at the right top of the page and also the icon will be enlarged
|
|
fig 4.11 - Self Care Page animations |
Profile Page
Macro Animations:
- Instantly fades in while on loading
- Fades out while offloading
Micro Animations:
- Section slides in from the left
- The pregnancy button can be turned out and the colour will change
- The colour for the icon in the "my cycles" section is filled up
slowly
|
|
fig 4.12 - Profile Page animations |
|
| fig 4.13 - overview of all page prototype view in Figma |
The interactions that I've mostly used to make the animations within a page is "on hovering", hence the animations will be played automatically while my mouse is on the screen. All I need to do is just create a frame-by-frame animation. The "Smart Animate" function in Figma can be useful here. Add more frames and move the icon around one frame at a time.
Then while clicking on the next features or sections of the page will
be "on tap" and ease in or out. For exiting a certain page, will be the
function of "on tap" slides out.
#5 Video Presentation
Before the video presentation, to make the process of explanation
more convenient, I pre-recorded each screen's animation in Figma and
dragged them into Canva to locate them respectively into the slides
that I'd done earlier for the App's micro animations
description.
|
|
fig 5.1 - Rearranging slides for presentation |
Here's the link to view the App's micro animations along with the
recorded animations done in Figma.
App Design 2 - MICRO ANIMATIONS MASTERPLAN
by Lim Yi Xvan
Final Submission:
App Flow Mapping & Micro Animations Masterplan in Figma
fig 6.1 - App Flow Mapping & Micro Animations Masterplan in
FigJam
Animation Prototype Figma
fig 6.2 - App Prototype Animation Overview in Figma
fig 6.3 - App Prototype view in Iphone 15 Pro Max Figma
Video Presentation
fig 6.4 - Video Presentation in Youtube
Reflection
Animating and redesigning an app was a great learning opportunity that advanced my career as a designer. Through the process, I was able to learn more about UI/UX design and explore the area of animation prototyping.
I became extremely engaged in micro animations during the making of them. The app acquired identity and excitement from these minor but effective animations, such as loading and scrolling indicators. They fulfilled practical needs, but they grew into an essential part of the app's identity, increasing users' engagement and memorability.
I feel like the project enhanced my overall skills in animation prototypes, app design, as well as attention to small things. It offered a chance to consider user experiences carefully and come up with original ideas to improve the usability of the app. I'm pleased with the result and the progress I made during this process. However, I'm so so so so so not prepared yet to face the upcoming task which we are going to code the whole app out🥲 Holy mama god bless me, I am going to bed now bye.
Comments
Post a Comment