Interactive Design Studies

Analysis Analysis 1 Split Pay App This drag and drop design allows users to drag receipt items to split the order. The design and idea is creative and usable at the same time, especially help to simplify the process of bill splitting in a restaurant. The visual aesthetic is quite simple and clean, just black and white, and the animation is nicely done which also increase the interaction. Meanwhile, user's usability is great as it is pretty simple to understand. Users can drag their receipt items to their profile, and the total price will show below the profile.  Interactivity:       User select the receipt item and start to drag. Drag the item into the chosen profile. The chosen profile enlarge and turns black, there is also drop shadow applied.  The total price is shown below the profile.  Analysis 2 Puzzle Drag and drop is a classic interface feature that can also be used for games. In this interactive, drag and drop is designed for puzzle game. The ...

Analysis Analysis 1 Liquid Slider Purpose: To adjust value by dragging up and down. Function: Value selection (degree / °) Coherent: The slider is designed as a graduated cylinder to let users know it’s a vertical slider. While the marked line on the graduated cylinder represents tick mark. One thing is users may be confused on where to drag (bubble or cylinder). Visual:       1. Graphic Asset: Oval callout       2. Color: More rainbow gradient colors appear as the degree increases.       3. Text/Label: The degree is shown in the oval callout.       4. Animation: Wave effect on the water.       5. Position Interactivity:  Low degree, low water level, showing only the blue part of the rainbow gradient. Water level rises following the degree, showing till middle colors of rainbow. Almost a complete rainbow gradient shown when degree getting higher.  Usability & Engag...

Analysis Analysis 1 Sent Button Function:  This is a simple sent button with input control which allow users to send something like messages to others.  Visual Aesthetic & Communication: The visual design is simple and clean, with strong contrast colors. It has a smooth animation and the overall icon has a minimal and flat aesthetic to it. Interactivity: Mouse hovered: The airplane icon is blue in color, the word 'send' is labeled on the button. Mouse clicked and released: The text becomes smaller, shape of button starts to change, the airplane turns white and flies out of the box. The button labeled with 'sent' instead of 'send' and the airplane becomes a tick to represent users successfully sent. Usability & Engagement: The usability of this design is friendly as it has a strong indication between two different state (before and after sent). The animation really drives up the engagement for the users as well as the interactive experience. Analysis 2 Ai...

Analysis Analysis 1 Beauty Service App Function:  This is a beauty service app in which users can easily find beauty specialists near their location. Users can also quickly calculate the time for procedures and plan their day correctly while booking for appointment.  Visual Aesthetic & Communication: The visual design is simple and clean, with delightful and fresh color palette. The animation is smooth and breathtaking. The overall design is in line with the beauty service. Interactivity: The interaction of this app is well designed. The animations such as 'slightly' bouncing text, popped out pin on the map and the like, can be seen obviously when users click on the buttons. The timing is finely tuned so that users don't have to wait for the animations to pass to continue the next step.  Usability & Engagement: The usability of this interactive design is great as it is easy to navigate and easily understand by the users. The combination of animations and UI elemen...