APP DESIGN II - TASK 2 Interaction Design Proposal and Planning

 21/10/2024-10/11/2024(week5-week7)

Tang Yu Ying - 0370676

App Design II | Bachelor of Interactive special design

Task 1 |  Interaction Design Proposal and Planning

---

Introduce

   In Task 2, we will further refine the initial app model created in Task 1. This optimization will focus on aspects such as animation prototyping, flowchart design, user journey mapping, and test flow development. Through these improvements, we aim to enhance the interactivity and aesthetics of the app.

Feedback Given

Suggestions from Mr. Rahman:

• Plan all the pages into different sections, making it easier to view and create the test flow while also maintaining a logical structure.
• Add feedback animation.
• On the message page, add an animation for "The other person is writing."
• The "➕" icon can be redesigned from the previous design.

 Suggestions from AI:

• Micro-Animations for Feedback: Implement small animations for actions like button presses, transitions between screens, and notifications. For example, add subtle feedback when users follow, like, or navigate to a different section.
• Macro Animations for Screen Transitions: Use animations like sliding, fading, or scaling to create a smoother flow between main sections (e.g., between the Home and Profile pages). Ensure these animations are quick and non-distracting to maintain a fluid experience.
• Loading and Progress Animations: Add animations during data loading to enhance user engagement and reduce perceived wait times.

Based on the above advice, I have adopted:

• Add feedback animation.
• Add the typing animation.
• "➕" change to pop-up window.
• Create navigation bar.
• buttons animation

Improvement

Flow chart

 

Flow chart(without watermark)

Animation

 1、Make buttons animation （Micro animations）

           I chose two theme colors to design the buttons. Alternate colors appear when you click.

• Click or Press Effects: When clicked, the button might briefly shrink, change color, giving feedback that the action has been registered.

(The button in the orange box in the picture is the button animation)

（Button animation demo video）

2、Add feedback page （Macro animations.）

  I added a "feedback" page so that users can get timely feedback when they fill in or change some information.

（Registration success feedback）

（Information change success feedback）

（Delete success feedback）

                                          

（Registration success feedback video）

3、Added "Like, Favorite" button animation （Micro animations）

    

    By adding "like, Favorite" button to increase the interaction with the user, enhance the fun of the app.

• Heart or Tag Filling Animation: When a user taps the "Like" or "Favorite" button, it may fill with color or transform, such as a heart “popping” to show it’s been liked.

(This image contains the "like" and "favorite" ICONS, both of which can be clicked to change color)

（"Like, Favorite" button animation display）

4、The other person writing – HubSpot Chatbot （Micro animations）

    Three bounce points have been added, which indicates that the person on the other side of the chat is typing. User engagement was maintained and feedback was provided to users.

• Typing indicators: When the bot is “typing,” a subtle animation (such as bouncing dots) appears, giving users immediate feedback that a response is coming.

（Added "➕ "popup to show hidden features）

（Show other person was typing...）

( This video shows "typing" and" popup "animation)

5、Add “➕” pop-up windows （Macro animations）

    Added the "➕" popup to make the overall page look cleaner.

     However, in the process of making this pop-up window, I still feel that this pop-up window is not very natural, it looks very blunt, or I need to improve.

• Dimmed background transition:  When a pop-up appears, the background gradually dim to help the user focus on the pop-up content.

（“➕”Pop up the video）

6、Checkbox（Micro animations）

    Added multiple checkboxes to make it easy for users to select multiple videos or articles at once for deletion or other actions.

• Checkmark animation: When a checkbox is selected, a checkmark might appear with a quick stroke, giving the user clear visual feedback.
• Color transition: The checkbox background may change color when checked (e.g., from transparent to green), enhancing the visual cue of the selected state.

（This video shows how users can select multiple videos to delete at once）

7、Switch Button （Micro Animations）

    
    Added the "switch button" to let users know whether to turn some features on or off.

• Sliding transition: When the user toggles the switch, the button slider smoothly moves from one end to the other, helping users perceive the change in state.

（This video shows the "switch button"）

8、Create navigation bar（Micro Animations）

    I added a navigation bar animation to enhance user interaction and fun.

•     Icon change: The navigation bar icon can be slightly scaled and changed color when clicked or selected to increase the feedback of the click.

Figma: "Soulmate" social app

the video of my presentation

my current prototype