Application Design II /Task 2: Interaction Design Proposal and Planning

Start from 23.10.2024

25.09.2024 -16.09.2024 /Week 5- Week 7
Kong Cai Yi / 0363862 
Application Design II   / Bachelor of Design (Hons) in Creative Media 
Task 2: Interaction Design Proposal and Planning

---

LECTURES

Week 5/ CSS Animations and Transitions

14 Micro-Interaction Examples to Enhance the UX and Reduce User Frustration

1. Trigger:  A user-initiated trigger can include clicking, swiping, tapping, or scrolling.
2. Rule: Rules must be logical to the user. When a user clicks on the flashlight app icon, they expect a flashlight to come on.
3. Feedback: When the user does something wrong, for example, by filling in the wrong card number, a red color border appears around the field to flag it. On the other hand, the green color border indicates success.
4. Loops and modes: Loops determine how the micro-interaction behaves over time and how long it continues. For example, when you start tracking your project, the duration keeps updating until you pause.

Tutorial of Figma animation 

• Tigger : After delay
• Animation: Smart Animate
• Curve: Bouncy

Fig 1.1 (23.10.2024 - Week 5)

Preloader:

1. Create two shape
2. Add prototype: After delay, smart animate
3. Create component set
4. Option key: drag to main frame

Fig 1.2 (23.10.2024 - Week 5)

Open overlay:

1. Create another frame
2. Add close when click outside and background
3. Add animation

Fig 1.3 (23.10.2024 - Week 5)

Week 6/ GSAP Tutorial

This week, we learned to use GSAP JavaScript for logo animation. Before class, we were provided with an HTML and CSS zip file. 

Our task included applying the following animations:

1. Rotating the logo on the onboarding page when it opens,

2. Animating the feature list to swipe in from the left side, and

3. Adding play and stop functionality with a button.

Fig 1.4 Gsap zip file (30.10.2024 - Week 6)

Fig 1.5 Gsap jawascripts (30.10.2024 - Week 6)

Final Outcome:

Fig 1.6 Final Outcome (30.10.2024 - Week 6)

Week 7/ Task 3 briefing & consultation

This week, Mr. Shamsul briefed us on Task 3, allowing us to use GSAP to create micro and macro animations for our application design. After the briefing, we presented our Task 2 progress to him and received feedback for improvement.

---

INSTRUCTIONS

Task 2: Interaction Design Proposal and Planning

Instructions:

• 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.

Requirements:

• Interaction Design Documents: Create detailed flowcharts and wireframes that map out the user journey and key interaction points within the application. These documents should clearly illustrate the layout of each screen and the navigation structure of the app.

• 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. Use tools like Figma to create simple animations that demonstrate the intended effects.

• Macro Animations: Develop concepts for larger-scale animations that significantly affect the user interface, such as transitions between different app states or animated introductions. For complex animations, you may use Adobe After Effects or similar tools to create more detailed prototypes. If actual animation creation is not feasible, you may alternatively provide references to existing animations that closely represent your intended design.

• Visual and Written Explanation: Accompany your prototypes with a written explanation or a visual presentation that describes how these animations and interactions contribute to the usability and aesthetic of the application. Discuss the purpose behind each animated element and how it integrates into the overall user experience design.

Research on app animation

Animated Micro-interactions In Mobile Apps: Key to Great UI

1. Button hover effects:

When users hover over or tap on buttons (e.g., "Book Now", "Check-in", "Payment"),   add a color change, shadow, or a subtle size increase to create a sense of interactivity.

Fig 2.1 Hover button example (30.10.2024 - Week 6)

Fig 2.2 Tutorial (30.10.2024 - Week 6)

2. Loading animations:

For any pages where users are waiting (e.g., processing payments, searching for buses), a simple rotating loader or progress bar can indicate that the action is being processed. 

Fig 2.3 Payment Succeed Animation (30.10.2024 - Week 6)

3. Seat selection feedback:

When users select seats, add a bounce or color transition to give immediate visual feedback. 

Fig 2.4 Seat selection feedback (30.10.2024 - Week 6)

4. Navigation Bar

Add animating switches, toggles, or expanding/collapsing settings menus with smooth transitions.

Fig 2.5 Navigation bar animation (30.10.2024 - Week 6)

4. Open overlay filter 

Fig 2.6 Open overlay effect  (30.10.2024 - Week 6)

5. Voucher code reveal:

When a voucher is applied or revealed, add a tick and confetti effect to it.

Fig 2.7 Vouhcer code reveal animation (30.10.2024 - Week 6)

7. Check-in QR code animation:

   - When generating a QR code for the check-in, have it appear with a fading or scaling animation to make it clear that the ticket is ready to be used.

Fig 2.8 Check in QR code animation (30.10.2024 - Week 6)

8. Success/failure feedback:

After completing actions like payments or check-ins, add a micro-animation for success (e.g., green tick checkmark with a bounce or fade-in effect) or failure (e.g., red cross with a slight shake) to give clear feedback.

Fig 2.9 Payment failed animation (30.10.2024 - Week 6)

App Flow Mapping

I started by structuring all the screen designs to emphasize macro animations and large movement transitions between screens. I arranged the app’s screen flow in sequence, beginning with the onboarding page, and then moving through the home page, search bus, seats, payment, and ticket  pages. This macro animation setup helps create a smoother, more visually appealing user experience throughout the app.

Prototype in Figma

Boarding Page:

Micro

• Button hover effects
• When users hover over or tap on buttons (Get Started),   add a color change, and change it back while pressing

Fig 3.1 Button Hover effect (7.11.2024 - Week 7)

Macro

• After delay when finish loading 
• While mouse on tap the screen, it will automatically change to other page.
• Apply smart animate for the dot, change place with the right dot. 

Fig 3.2 Boarding page macro animation (7.11.2024 - Week 7)

Log in Page:

Micro

• Button hover effects
• When users hover over or tap on buttons (Log in),  add a color change, and change it back while pressing

Macro

• Add keyboard open overlay letting the log in page more realistic.
• When user click the keyboard will go to the next page which filled with info (Swap overlay) 

Fig 3.3 Log in page open overlay (7.11.2024 - Week 7)

• If the password doesn't meet the requirement will appear red color wording for reminder.

Fig 3.4 Add keyboard feature  (7.11.2024 - Week 7)

Fig 3.8 Log in page animation (7.11.2024 - Week 7)

Home Page:

Micro

• When user click the navigation bar it will change to primary color - purple and larger.
• Appear text below the icon when clicking

Fig 3.9 Navigation bar (7.11.2024 - Week 7)

Fig 3.10 Navigation bar animation(7.11.2024 - Week 7)

Macro

• Open overlay from bottom push up while user searching for starting point

Fig 3.11 Search Window (7.11.2024 - Week 7)

Fig 3.12 Search window animation (7.11.2024 - Week 7)

Search for bus and seats:

Macro

• When click the filter icon, filter frame move in from bottom center, black transparent background 
• Press close icon to move out

Fig 3.13 Filter window  (7.11.2024 - Week 7)

• Ratings and review page pop up from bottom
• Press outside to close 
• After user click the seat will appear price and confirm button

Fig 3.14 Open overlay  (7.11.2024 - Week 7)

Fig 3.15 Search bus and seats page animation  (7.11.2024 - Week 7)

Payment:

Micro

• Expand credit card info while pressing add card
• Loading for payment

Fig 3.16 Add card  (7.11.2024 - Week 7)

Fig 3.17 Loading animation  (7.11.2024 - Week 7)

Macro

• Key in personal info
• Pop up "proceed to payment " window once finished filling in info

Fig 3.18 Passenger details  (7.11.2024 - Week 7)

• Voucher details page pop up from bottom when use click the voucher icon
• Click "Use now" will automatically close the voucher window and deduct money from payment

Fig 3.19 Voucher pop up window  (7.11.2024 - Week 7)

Fig 3.20 Payment Page animation  (7.11.2024 - Week 7)

Ticket:

Macro

• Open overlay of ticket details element (Mouse enter)
• Click download ticket side in to next page 

Fig 3.21 Ticket page  (7.11.2024 - Week 7)

Fig 3.22 Ticket page animation  (7.11.2024 - Week 7)

View prototype in Figma:

Fig 3.23 Task 2 Prototype  (7.11.2024 - Week 7)

Video Presentation:

Fig 3.24 Video Presentation of Task 2  (9.11.2024 - Week 7)

---

FEEDBACK

Feedback from Mr Shamsul:

Shorten the loading effect on the onboarding page; a brief effect will suffice.

Add access to a profile page. It doesn’t need to be functional yet—just display the page layout.

Include a keyboard feature on all pages.

Create components for seats so that each button click allows access to the next function or page.

Use "Swap Overlay" to ensure that closing the keyboard doesn’t animate other elements or pages unnecessarily.