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

on

23/10/2024 - 10/11/2024 / Week 5 - Week 7
Joey Lok Wai San / 0350857
Application Design II / Bachelor of Design (Hons) in Creative Media 
Task 2: Interaction Design Proposal and Planning


TABLE OF CONTENTS


LECTURES
All lectures and exercises completed in Application Design II - Lectures & Exercises


INSTRUCTIONS

https://drive.google.com/file/d/159_U4ajXP-Km8y8h6Gh64JjTjVKQ6xEX/preview


TASK 2: Interaction Design Proposal and Planning

We are required to develop a comprehensive interaction design plan for our 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.

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 app's navigation structure.

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.

These are some examples of micro-interactions for web and web-app design:
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 Micro & Macro Animations
1. Micro Animations
Micro animations are small, subtle animations that provide immediate feedback, confirm actions (e.g. checkmarks after filling fields correctly) or help guide the users (e.g. highlight a clickable element). They usually appear during actions like button taps, hover effects, or form validations.

Examples:
  • Button hover effects (changing colour, glowing, getting larger)
  • Loading spinners or progress indicators
  • Error feedback (a shake effect when entering a wrong password)
  • Icon animations (a heart icon bouncing when liked)
Fig. 1.1 Micro Animation Examples, Week 5 (23/10/2024)

2. Macro Animations
Macro animations are larger animations that provide smooth transitions between pages and create a more cohesive and engaging experience. They usually appear when navigating between screens.

Examples:
  • Page transitions (e.g. slide-left to go next, slide-right to go back)
  • Screen loading animations 
  • Menu expansions or collapses (e.g. a sidebar sliding out)
Fig. 1.2 Macro Animation Examples, Week 5 (23/10/2024)


Animation References  
To start this project, we were tasked with finding micro and macro animation references to incorporate into our application prototype. These animations should be related to our app, and they should be simple so users are able to understand (and so we don't die coding them later on). 

Pinterest Board Link: https://pin.it/3tNM66CES 

Micro Animations
I found quite a lot of micro animation references on Pinterest and Dribble, however, most of them were quite complicated. I could not find animations that were related to reservations, so I ended up using generic ones as inspiration so that they would keep a neutral tone in my app design.


Fig. 1.3 Micro Animation Reference - Confirmation, Week 5 (23/10/2024)

Fig. 1.4 Micro Animation Reference - Scroll and Selection, Week 5 (23/10/2024)


Fig. 1.5 Micro Animation Reference - Search Bar and Cursor, Week 5 (23/10/2024)

Macro Animations
As for the macro animations, I landed on simple animations as encouraged by our lecturer. Having multiple complicated animations could confuse the users and make the experience overwhelming for them. Thus, the inspiration references I found on Pinterest and Dribble reflected the simple animation style. There are also not that many simple macro animations, so I just included what I could. 

 
Fig. 1.6 Macro Animation Reference - Loading, Week 5 (23/10/2024)


Fig. 1.7 Macro Animation Reference - Page Transition, Week 5 (23/10/2024)


Fig. 1.8 Macro Animation Reference - Page Transition, Week 5 (23/10/2024)


App Flow Mapping
After getting some inspiration from the references I found, I began creating the app flow using FigJam. This helps me to focus on the macro animations and transitions between pages. Organizing the screen flow of the app helps to visualize the transitions between each screen and provides a smoother experience for the users.

For the macro interactions, I mainly implemented simple transitions such as fade and slide transitions between screens - using fade for subtle transitions and slide for navigation between pages ensures the app feels intuitive. 

App Flow Mapping FigJam Link: 
https://www.figma.com/board/Tc5n8ajXJQksQhFtTA9hVo/Eatigo-App-Flow-Mapping?node-id=72-258&t=bDavWof2F47WzlaH-1


Fig. 2.1 App Flow Mapping, Week 6 (30/10/2024)

Storyboard
The masterplan consists of the micro and macro animations for each screen to make the experience more engaging. Each page consists of three stages: 1) On Load, 2) In-App, 3) Off Load. 

The micro animations, such as button hover and click effects, input field interaction, and animated feedback, will make the experience more engaging and responsive without overwhelming the user. The interactions should be similar and consistent to avoid confusing the users. This is a summary of the interactions:

On Enter
  • Slide-in major elements (e.g., fields or confirmation message) or fade-in items like text or additional options
On Page
  • Colour change or border highlights for active fields to show that they’re selected or being edited
  • Hover effects or click animations on buttons to show interactivity
On Exit
  • Slide-left animation when advancing to the next screen 
  • Slide-right animation for moving back
  • Final actions (e.g submitting the reservation) add a fade-out transition to show the completion

Fig. 2.2 Storyboard, Week 6 (30/10/2024)

Animation Prototype
Once the micro and macro animations were planned out, I began creating the animations for the app prototype in Figma. Some of the animations, such as the button hover and button click, were already created before, so I just added more animations to make the application more engaging and interactive.

I watched a few tutorials on YouTube on how to make the content appear from one direction. This can be done simply using components instead of creating multiple frames and animating them. In order to do this I made the content I wanted to animate into a component, duplicate it in the original position, and use the original component to make the interactions I wanted.


Fig. 3.1 Scroll Animation in Figma, Week 7 (04/11/2024)

Components and Animation
After watching the tutorial, I found it quite easy to make components and make the transitions for the pages really simple. This is my workspace for the animation in Figma:


Fig. 3.2 Scroll Animation Components, Week 7 (04/11/2024)


Fig. 3.3 Button and Carousel Components, Week 7 (04/11/2024)


Fig. 3.4 Interactions on Figma, Week 7 (04/11/2024)


1. Onboarding Page


Fig. 4.1 Process of Onboarding Page, Week 7 (05/11/2024)

Micro Animation
  • The background colour changes to white, and the logo changes to red with a splash effect
Macro Animation
  • The splash screen dissolves in the onboarding process
  • Slide to the next onboarding screen when the arrow is clicked
  • Fades to the login page after clicking on the "Get Started button"
Fig. 4.2 Animation of Onboarding Page, Week 7 (05/11/2024)

2. Login & Sign Up Page

Fig. 4.3 Process of Login & Sign Up Page, Week 7 (05/11/2024)

Micro Animation
  • Users interact with the input field and a cursor blinks when clicked on, the border becomes a darker colour
Macro Animation
  • Once information is inserted, fades into the home page 

Fig. 4.4 Animation of Login & Sign Up Page, Week 7 (05/11/2024)

3. Home Page 


Fig. 4.5 Process of Home Page, Week 7 (05/11/2024)

Micro Animation
  • Restaurant cards are able to scroll horizontally and vertically
  • Click on the restaurant card leads to the restaurant page
  • Carousel banner moves from 
Macro Animation
  • Clicking on the search bar transitions to the "Search Page"

Fig. 4.6 Animation of Home Page, Week 7 (05/11/2024)

4. Search Page

Fig. 4.7 Process of Search Page, Week 7 (05/11/2024)


Fig. 4.8 Process of Search Page - Filter & Availability, Week 7 (05/11/2024)

Micro Animation
  • The restaurant list slides in from the bottom
  • Hover over restaurant categories becomes darker
  • Filter and Availability button is filled when conditions are selected
  • Filter and Availability pop-up slides in from the bottom
Macro Animation
  • After clicking on the selected restaurant, fades to the selected restaurant screens

Fig. 4.9 Animation of Search Page - Categories Week 7 (05/11/2024)


Fig. 4.10 Animation of Search Page - Search Bar, Week 7 (05/11/2024)

 
Fig. 4.11 Animation of Search Page - Filter & Availability, Week 7 (05/11/2024)

5. Favorites Page


Fig. 4.12 Process of Favorites Page, Week 7 (05/11/2024)

Micro Animation
  • The favourite restaurant's list slides in from the bottom
Macro Animation
  • Fades into the search page when the button is tapped

Fig. 4.13 Animation of Favorites Page, Week 7 (05/11/2024)

6. Reservation Page


Fig. 4.14 Process of Reservation Page, Week 7 (05/11/2024)

Micro Animation
  • Hover on button becomes darker
  • Switches between Upcoming and Historical reservations
  • Reservations slide in from the bottom
Macro Animation
  • Slide left to the search page when the button is tapped

Fig. 4.15 Animation of Reservation Page, Week 7 (05/11/2024)

7. Reservation Process Page

Fig. 4.16 Process of Reservation Process, Week 7 (05/11/2024)


Fig. 4.17 Process of Reservation Process - Confirmation Pop-Up, Week 7 (05/11/2024)

Micro Animation
  • The calendar and other input fields can fade in gently
  • Tapping clear removes all inserted content
  • A colour change on the field border when clicked
  • Loading icon to confirmation icon
Macro Animation
  • Slide left to the “Confirm Reservation” screen
  • Pop Up confirmation overlay, tap outside to exit
  • Slide left to the “Reservation Details” screen
  • Able to clear reservation details and cancel reservation
Fig. 4.18 Animation of Reservation Process, Week 7 (05/11/2024)

8. Restaurant Page


Fig. 4.19 Process of Restaurant Page, Week 7 (05/11/2024)

Micro Animation
  • The restaurant list slides in from the bottom
  • Able to scroll content vertically and horizontally 
Macro Animation
  • Fades in from the search page, favourites page, etc
  • Slide up to the reservation process

Fig. 4.20 Animation of Restaurant Page, Week 7 (05/11/2024)

9. Loading Page


Fig. 4.21 Process of Loading Page - Initial Attempt, Week 7 (05/11/2024)


Fig. 4.22 Process of Loading Page, Week 7 (05/11/2024)

Micro Animation
  • Chef hat of logo bouncing from bottom to top
Macro Animation
  • Once the logo is completed, the logo changes from white to red and the background changes to red and white, similar to the home screen

  
Fig. 4.23 Animation of Loading Page - Initial Attempt, Week 7 (05/11/2024)


Fig. 4.24 Animation of Loading Page, Week 7 (05/11/2024)


Final Task 2: Interaction Design Proposal and Planning

Click here for the Figma link!

Fig. 5.1 Figma File with Interactions, Week 7 (10/11/2024)


Fig. 5.2 Figma Prototype, Week 7 (10/11/2024)

Presentation Video

*Figma is laggy when recording the video so the interactions may look very slow
Fig. 5.3 Final Interaction Design Proposal and Planning - Presentation Video, Week 7 (10/11/2024)

FEEDBACK
WEEK 5
The transitions and animations don't have to be too complex. It will be difficult to code and will confuse the users as well. Make simple interactions such as the examples shown in the ZUS Coffee app.

WEEK 7
  • Keep the animation simple and not too complicated (e.g. 'Reservation' page - use move-in or smart animation)
  • Keep the speed of the animation consistent between pages - not too slow or not too fast
  • Before the process is confirmed, show a loading icon including a label like "Reservation is being processed". Use the same overlay frame - one for loading, the other for successful
  • The app looks very friendly and warm, the message for loading can be warm as well. Use ChatGPT to think of ideas similar to your brand language (e.g. hat come up, or screen change color for loading between pages)

REFLECTION

Experience
My experience with this assignment was pretty interesting. It was fun to look back on my previous work and add animations to it to make it more interactive. By adding in these interactions, the app feels more complete and makes the experience more lively. I felt that implementing Mr. Shamsul's feedback and taking into consideration what he said in class really helped me keep in mind to make the animation consistent.

Observations
From my observation of looking at different animations for inspiration, both micro and macro really helped to influence my work. I observed that most of the animations I liked looked really fancy and complicated. However, we should keep in mind that we will need to code this later on and should keep it simple so that we would not die coding.

Findings
Based on my findings, I found that animations are usually kept simple to make it less confusing for users but still keep them engaged. For example, in the ZUS coffee app example shown in class, the animations are really simple and minimal. The animation shown is to inform the users that the screen is loading rather than just showing a blank page with no content. 

Comments

Post a Comment