Assignment 2
Proposal
Instruction
Students are required to develop a comprehensive interaction design plan for their take-out mobile application "ELE MA". The plan should include complete wireframes, user flow diagrams, and prototypes of micro- and macro-animations that represent the dynamic interactions of the interface. The design should cover the complete operation chain from login and registration, homepage browsing, merchant selection, food adding, reviewing comments, to order management and payment process. The focus is to build a clear user navigation and interface feedback mechanism through visual and conceptual unification to enhance the overall user experience. Micro-animation should focus on the details of interaction such as button clicking, loading process, success tips, etc., while macro-animation can be used for page switching, order process advancement and other modules to help users intuitively understand the operation status and system response.
This project aims to improve the user experience and operational efficiency of the application through a clear and intuitive design, ensuring that users can smoothly and efficiently complete the complete process from ordering to receiving food.
Master Plan & Storyboard
After completing the preliminary interface design, I started to work on the master plan of the app, in order to have a clearer understanding of the functional flow and page architecture of the app. Then, I went into the Storyboard phase to plan and illustrate the interactive animations in the app in detail. Each storyboard page is divided into three animation phases: Onload, Onpage and OffLoad.
- On Load Animation: It is triggered when the user enters the page for the first time. For example, the food category icon fades in on the home page and the logo fades out on the welcome page.
- On Page Animation: triggered when the user operates on the current page, such as the bouncing feedback when clicking the “Add Cart” button and the flashing effect of the rating stars.
- Off Load Animation: occurs when the user leaves the current page, for example, the page slides out to the left, the interface fades after successful settlement.
Fig. 1.1 - Overview of Master Plan
Fig. 1.2 - Overview of Story Board
Takeaway app dynamic effect test analysis
The core goal of this animation test is to test whether the switching rhythm between various interfaces in the food delivery software, the element loading method and the visual feedback between user operations have good guidance and restraint. Different from the dynamic effect strategy that focuses on visual stunts, the dynamic effect of this project always serves the two functional goals of "improving interaction fluency" and "reducing cognitive burden", emphasizing rhythm, logic and feedback clarity.
01. Page Transitions
In the switching of various pages of the food delivery application (such as homepage → product details page, shopping cart → order process, order tracking page), I have made precise control of the animation duration and direction:
The average page switching is controlled within the range of 0.3-0.5 seconds to ensure the instant experience of user operation.
All forward operations (such as clicking on the product → entering the details page) adopt the form of sliding in to the left + gradual entry, which metaphorically "enter".
The back operation is sliding out to the right + reducing transparency, which helps users build a path perception of "returning to the previous level".
Especially in the switching between the home page and the product page, the rhythm is emphasized to be "fast but steady", avoiding lag and not being abrupt.
02. Button feedback (Microinteractions)
Core interactive buttons (such as "Add to Cart", "Order Now", "Return", "Confirm Payment") are embedded with slight dynamic feedback to create a sense of real-time response:
Using a zoom range of 0.95x-1.05x, a short elastic (easing) curve is used to simulate "physical feedback" at the moment of clicking.
For example, after clicking the "Add to Cart" button, the icon briefly jumps and the quantity corner animation is used to enhance the user's perception of "successful addition".
All button click feedback is completed within 150ms to ensure that fast feedback does not delay the main operation path.
03. Staggered Load-ins
The product list, store information, user reviews and other content in the application adopt the strategy of gradual entry + group delay loading to adjust the visual information flow:
The delay of staggered loading is between 50–120ms, and the visible information is presented in a "breathing" rhythm, reducing the information impact of users during the sliding process.
The product card adopts a combination of bottom-up with ease-out and fade-in, emphasizing the "light, fast and orderly" browsing experience.
In the product details page, the evaluation block, recommended products and ingredient description area are loaded in sequence, highlighting the hierarchical structure and facilitating focus.
04. Process Guidance
The order creation and payment process are the key paths of this application. In order to enhance the operation guidance, I added a combination of animation design in these links:
After the user submits the order, when loading the "payment confirmation page", a light displacement + gradual entry animation effect is added to guide the attention to the price and payment options area.
When the payment is successfully redirected to the "Order Tracking Page", a zoom transition + icon animation loading is used to provide visual feedback of "state change".
Skeleton Loading was also tested for loading feedback in some network delay scenarios, effectively alleviating user anxiety.
Finally, here my video introduction
Dev mode link
Prototype link
Comments
Post a Comment