Interactive Design

Gaspar, I. (n.d.). Social Media Button. Available at: https://dribbble.com/shots/3130851-Social-Share-Ui-Design [Accessed 26 Jun. 2022]. FRIBLY EDITORIAL (n.d.). Share Button. Available at: https://fribly.com/2019/10/03/sliding-social-share-button/ [Accessed 28 Jun. 2022]. Shir, G. (n.d.). Room Slider. Available at: https://digitalsynopsis.com/design/slider-animation-ui-inspiration/ [Accessed 2 Jul. 2022]. Khagwal, N. (n.d.). Quantity Slider. Available at: https://dribbble.com/shots/5436968-Slider-UI-micro-Interaction-for-Mobikul [Accessed 3 Jul. 2022].  Gannon, C. (n.d.). Lego Slider. Available at: https://dribbble.com/shots/3804786-Responsive-Lego [Accessed 3 Jul. 2022]. Anon, (n.d.). Sushi Illustration. Available at: https://www.pinterest.com/pin/185210603417573733/ [Accessed 4 Jul. 2022]. macrovector (n.d.). Isometric Sushi Bar. Available at: https://graphicriver.net/item/isometric-sushi-bar-background/20681468?irgwc=1&clickid=WiMVwX0w7xyNUr-wIeURt2waUkD3Ql0qWToOV80&ira...

  Research 1. Milkshake Customization Purpose To customize milkshake and order delivery Function Users can scroll to see the ingredients list and click to choose the ingredients that they want Coherent There is icon and texts for each icons, so it is direct for users to understand Ease of Use Users just need to drag and drop the specific task that they want to move Enjoyable The scrolling for ingredients list is interesting and eye catching for users. The illustration and animation of the milkshake is also nice and smooth Visual aesthetic & communication The design style is illustrative, which can catch people's eye to use the app. The color used is simple and contrast Interactivity When user is scrolling and clicking the ingredients list, it will make people enjoy with how smooth it is. It will enhance their experience when they want to customize and order Usability and engagement This app is user friendly to most of the age groups because it's very easy to understand wi...

  Research 1. Drag & Drop Task Purpose To arrange specific task to a specific position or arrangement Function Allow users to drag and drop task easily and freely Coherent There is no images or text that indicate users can do anything here, unless they try and error by themselves Ease of Use Users just need to drag and drop the specific task that they want to move Enjoyable The drag and drop is normal, it is smooth if users want to move a specific task in hurry Visual aesthetic & communication The design style is minimalistic and simple, all task box has the same color, so it is uniform Interactivity When user is moving the dragged task, the other task will be moved so give space for it Usability and engagement The drag and drop would be confusing at first unless users try & error to move it 2. Drag & Drop Boards Purpose To arrange the boards to a different position or arrangement Function Allow users to drag and drop the boards easily and freely Coherent When a s...

   Research 1. Rooms Slider Purpose A slider for users to choose their desired quantity of rooms Function Allow users to easily choose how many quantity they want Coherent The text constantly shows the changes of quantity when users move the slider Ease of Use The slider is easy to use, users just need to move the slider according to their own choice Enjoyable The animation of house changes depends on the slider. If the number of rooms are higher, the house becomes bigger. If the number of rooms are smaller, the house becomes smaller. Visual aesthetic & communication The design style is illustrative and catches users eyes. The animation makes it even more aesthetic with the style. Interactivity When users move the slider, the text will show the number of rooms based on the placement of the slider. Users are free to move the slider to their liking while enjoying the animation. Usability and engagement The use of illustrations allows users to be more interested on using th...

 Research 1. Social Media Button Purpose Expandable shortcut for social media share button, reduce space usage by using the limited space Function Allow users to easily share in their social media Coherent Icons and text used are easy to be recognize by the users Ease of Use Clicking the share button will directly made them choose which social media they want because of simple but clean animation Enjoyable The share button design is simple but clean. Minimalist is the trend nowadays Visual aesthetic & communication The design style is minimalist, it is very simple and clean. The usage of monochrome color allows clarity for users and does not create any confusion by using different type of colors. Interactivity When user hover the button, the cursor state will be in Link Select. This will let users know that the button is clickable. Once the button has been clicked, it will be animated to different social media icons for users to choose. Once users choose their desired social...