Task 2: Interaction Design Proposal and Planning

23/10/2024 - 10/11/2024 / Week 5 - Week 7
Reema Arif Hamza / 0362792
Application Design II  / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 2: Interaction Design Proposal and Planning

Content

Week 5: CSS Animations and Transitions
Week 6: Introduction to GSAP
Week 7: Task 3 Briefing 

Instructions

Task 2: Interaction Design Proposal and Planning

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.


Animation References

During Week 5, Mr.Shamsul asked us to look for visual references of micro and macro interactions that we could include in our apps. I saved a few micro interactions like a heart button and a few others. A few are below to see.

Fig. 1.1 Nav Bar, Week 5 (23/10/2024)

Fig. 1.2 Heart Button Week 5 (23/10/2024)



Flowchart

To help structure and organize the macro animations/transitions between screens, I created a flow chart. Starting from the welcome page to the checkout page. By doing this I was able to smoothly animate things on Figma and create a better user experience. 

Fig. 1.3 Flow Chart, Week 6 (30/10/2024)

I implemented simple transitions, mostly slide in and out because I wanted to keep things consistent throughout all pages. If some pages were different I think the user would be confused. 


Master Plan

The master plan included micro and macro interaction divided by on enter, on page, and on exit. This way I can clearly see all the interactions I need to add for each screen. Micro-interactions are tiny and feel very effortless or intuitive. Things like hovering on a button or highlighting which page you're on. It's small details that greatly enhance the user experience. Macro interactions are big animations that usually involve the whole screen. It includes things like a splash screen when you enter the app, loading, and transitions. It can help the app feel more seamless.



Splash Screen

Fig. 2.1 Splash Screen, Week 8 (11/10/2024)

Macro:
  • Rainbow square rotates, expands, shrinks, becomes a dot, and slides after the logo.
  • Login and Register buttons dissolve in.

Login/Signup 

Fig. 2.2 Login/Singup, Week 8 (11/10/2024)

Micro:
  • Hover on buttons
  • Overlay after putting in OTP to show its filled.
Macro:
  • Slide in and Slide out.

Home

Fig. 2.3 Home, Week 8 (11/10/2024)

Micro:
  • Heart button fills on tap.
  • Hover on tab headers.
Macro:
  • Menu slides in and out.
  • Slide in and Slide out.

Colors

Fig. 2.4 Colors, Week 8 (11/10/2024)

Micro:
  • Heart button fills on tap.
  • Hover on tab headers.
Macro:
  • Slide in and Slide out.

Visualizer

Fig. 2.5 Visualizer, Week 8 (11/10/2024)

Micro:
  • Hover on tab headers.
Macro:
  • Slide in and Slide out.

Products

Fig. 2.6 Products, Week 8 (11/10/2024)

Micro:
  • Heart button fills on tap.
  • Hover on tab headers.
Macro:
  • Slide in and Slide out.


Figma File



Video Presentation



    Feedback

    Week 5: Showed examples of animation references. Most are okay to go with, you can try doing them in Figma. 

    Reflection

    Experience
    I think micro-interactions can be overlooked sometimes, they're small details but they really make an app more user-friendly. They can help give feedback, validation, error prevention, and increase engagement. Before adding in all the animations I didn't realize that my app felt somewhat lifeless without them.

    Observation
    There were lots of different tutorials on Figma animations to follow, but it was hard to think of what I could include in my own app. Mr. Shamsul had also mentioned keeping the animations simple because we would later need to code them, so I looked further into what thing GSAP could animate. It could do slide in/out, scroll trigger, hiver, move svgs, text effects, and turn stuff around. Keeping that in mind I tried to include animations I could also take into coding.

    Finding
    Figma's animation feature is quite easy to use, I think the trouble was finding out how to translate the animations in my head to Figma. Because some things I tried didn't work or looked too off. I do feel like I don't have as many animations as I initially thought I would, so I might add to it later before Task 3. 

    Comments

    Post a Comment