Yung Siew Weng / 0339847
Application Design II /
Bachelor of Design (Hons) in Creative Media
Final Project / Micro Interactions and Animated Micro Interaction Prototype
Application Design II - Final Project :
Micro Interactions and Animated Micro Interaction Prototype
INSTRUCTION
We're tasked to build upon the knowledge gained in Task 2 to enhance our app's user experience through micro interactions and animations. This task involves exploring and making creative decisions about integrating specific interactions into the app. The goal isn't to create a full app but rather a prototype that showcases these functional micro interactions. Also, the requirement of the prototype should be viewable and functional on smartphones.
EXPLORATION
Following Application Design II / Task 2 : Micro-interactions and Micro interaction Prototype, I had a discussion about the content needs for the final prototype outcome with Mr. Razif and figured that most frames are prominent within the application :
Fig 1.1 Cut Down Part(s)
During the discussion on the remaining the frame were involved in :
- Splash Screen
- Home Page
- Movie Page
- Movie Info Page
- Showtime Page
- Ticket Type Page
- Order Summary
- Payment Page
- Virtual Ticket
- Profile Page
<!-- Exploration Starting Point -->
#Splash Screen
At the very first of prototype development, the process commenced with the creation of the logo animation. This animation included various effects such as slide in/overlay, fade in, zoom in, and more. Instead of having 2 image to tween and animate, I applied the method of overlay border on the image to achieve the ideation of push in with typing effect.
Fig 1.2 Issue 1 #Overlay Black Border
However, the major issue that occurred was : "overlay effect having the black #bg color" that cannot be dissolve or fade out.
Solution :
.to("#Overlay", { backgroundColor: "#356E7C", opacity: 0, ease: "power1.in", duration: 0.5, delay: -1.75})
The #Overlay (the overlay border) should move to {backgroundColor: "#356E7C", opacity: 0}
Fig 1.3 Splash Screen Logo Animation Outcome
The splash screen animation spans a total duration of 2 midnights due to my need to meticulously check through each animation on the X and Y axes to determine the best transition to implement my "this small little ideation. But, overall, I am quite satisfied of the final outcome. :D
Due to time constraints, I halted the animation process on transitioning into the main page and created a new HTML page, home.html. This segregation allowed me to proceed with coding for the main page without risking any disruption to the logo animation. If nope, any glitch in the logo animation could potentially cause a disaster! 😭
#Home Page
Using .container as the foundation, I opted for a responsive approach rather than designing for a fixed size of 393x852px. This decision stems from uncertainty about the final display across various devices, especially considering that my own device doesn't match this specific size. Additionally, Mr. Razif suggested leveraging viewport units or percentages instead of pixels, which aligns with the goal of achieving responsiveness across different screen sizes and devices.
Fig 1.4 Responsive Check-Up
It seems to be very challenging to make the design to keep in fit in the viewport. By this page, the knowledge that I mostly applied is width : calc(100vw - ?px) which mean the calculation of 100 viewport width - the margin px that I applied throughout the screen.
Fig 1.5 Genre Emoji
When I realized I wanted to include an iPhone emoji in the genre filter bar, I figure that I couldn't directly type emojis in the development process. However, thanks to the power of Internet, w3.schools had provided emoji codes that helped me bring my idea to life.
Fig 1.6 Button Align Issue
To be mentioned, despite seeming like a minor issue, aligning the "add button" within the container took me over two hours to figure out. Initially, I tried setting padding-left: ..px; but that approach didn't work consistently as the length of the movie title affected the button's position. As I moved on to developing other parts, I figured that the overlay concept might solve this problem. So, I shifted from using padding to implementing an overlay effect on the add button to ensure it stayed in the desired position despite varying title lengths. And, yeap, it's work!
Solution :
.text img {
position : absolute; [To implement Overlay Effect]
bottom : 8px; [To adjust the bottom position, 8px means 8px above the bottom baseline]
right: 5px; [To adjust the right position]
}
Fig 1.7 Home Page #Development Outcome 1
Finally, I've completed at least a main page! There's a sense of satisfaction seeing the outcome take shape, even though it's just the beginning. As time limitation, I focused on finalising all the static elements of the page before delving into interactions, both minor and major. With that done, I moved on to the next page: the Movie Page.
#Movie Page
The Movie Page seems to be more smooth to develop compared to the Home Page, but just minor interaction that need to figure on especially the toggle page animation, which sticking me long time for that.
Fig 1.8 Movie Page Development, Favourite Icon
For the favourite icon, using GSAP animation, I applied the method of isClicked as well as apply the function of if {..}; else {..} to allow the button having different fill, opacity, stroke colour after the user click it. After the development's outcome (fig 1.7), I figured that the duration of the click animation is too long and should be more instant instead, so I change the duration from 0.3 to 0.1.
Fig 1.9 Movie Page Development, Toggle Page
To create the different hyperlink to a same html seems to be more works to do and explored. In order to create the modify the "coming soon" page, I need to using the GSAP animation to active the "coming soon" page. But, during my development, I figured that the viewport was "inbug", which I spent 2 hours again to figured out what is the issue. After some exploration, in sudden, I figured that is that my viewport issue. And, ya...... the viewport was set in 100% so the viewport of the scrollable frame, so the viewport will just assume on the length of the text on the particular page.
Solution :
.viewport {
width: calc(100vw - 70px);
}
Fig 1.10 Movie Page #Development Outcome 1
#Movie Info Page
Fig 1.11 Movie Info Development
Throughout the development journey of the movie info page, the most challenging aspect was creating the pop-up panel. Specifically, ensuring that the panel's lines couldn't be swiped together posed a difficulty. To address this, I envisioned having another scrollable frame above the popup panel. However, integrating this concept without expand and minimize features proved complex. Consequently, I pivoted towards making swipe up and down animations more prominent and engaging. After three hours of exploration, I abandoned the idea of a scrollable frame within a frame.
#Ticket Type Page
The ticket type page appears deceptively simple but is unexpectedly complicated. The additional bug in the Dreamweaver tool provided has caused significant issues in both page creation and development :D
Fig 1.12 see the BUG :') No matter how I type,
it will go on the top even not having any ccs
Fig 1.13 Ticket Type
Initially, at first glance, this page seemed the simplest. I had hoped ChatGPT could assist in resolving the quantity toggle matter, but despite spending 1.5 hours discussing it with AI, I wasn't able to create it. But, after some logic thinking, I had somewhat completed to make my ideation came throughout in which in the 0 the minus button and the value will be disappear; when the user start clicking the button then it will able to be add or minus, till the limit value 9, the colour bg will became grey shades to indicate the limit. However, to be mention, there are still having imperfections for the pages, as the button spacing of the both adult and children are not the same; and yet I had no idea on why :] )) when I develop is ogeh, but after some exploration on other pages, it become like tat
#Order Summary, Payment, Virtual Ticket
Fig 1.13 Development
In the order summary, payment, and virtual ticket sections, normalizing the process has thankfully avoided major development challenges. In my Figma prototype, I included a screen to guide users about being redirected to the merchant site for payment. After much consideration and exploration, I opted to shorten the popcorn animation to signify payment completion. It seemed redundant for the "payment completed" animation to display upon return from the merchant, as users should already be aware of the completed transaction. Hence, I decided to removed the text and retained the popping animation for the popcorn instead, but yeap, also due to the time limitation and multiple error of trying ;'{
#Profile Page
Fig 1.14 Frame Adjustment (25x25)
A notable point that developing in the profile page was that the designed icons in the prototype varied in frame size. To streamline the development process, I chose to standardize the icon frames, ensuring uniform width and height before exporting them as PNG files for coding purposes. I believed that this method would greatly benefit the development process.
Fig 1.15 Profile Page Development
The profile page, I discovered, was notably straightforward, primarily revolving around copying and pasting codes for logo and category name adjustments. To introduce interactivity, the QR code button for users to access their membership QR code, perhaps for redeeming rewards is necessary and cannot be avoid, as this would be the only interaction under the profile main page.
#Showtime Page
Fig 1.16 Showtime Page Development
Continuing to the final page I aimed to develop—the "showtime page"—it seemed more complex initially, but in fact, the base design was relatively easy to implement. The challenge lay in activating specific buttons to initiate the ticketing process. While my interaction with ChatGPT didn’t provide direct solutions, revisiting the logic and utilizing previous class tutorials eventually led to a solution. However, a persisting bug remains: users can only click D5 > D6 > D7 in sequence, rather than randomly, due to the limitations of using only the GSAP concept.
Solution :
const seatD = document.querySelector('.seat_item1.seat_D'); [Seat]
const panelContent1 = document.querySelector('.ticket-content1'); [Ticket]
const downBorderD = document.querySelector('.seat_item1.seat_D .down_borderD'); [Border under the ticket, part of the ticket]
const seatDText = document.querySelector('.seat_item1.seat_D h10'); [Number in the Seat]
seatD.addEventListener('click', function () {
const tl = gsap.timeline();
tl.to('.seat_item1.seat_D', {duration: 0.5, backgroundColor: '#21CB32', scale: 1.1, ease: 'power2.out' })
.to(downBorderD, {duration: 0.5, backgroundColor: '#21CB32', scale: 1.1, ease: 'power2.out' }, '-=0.5')
.to(panelContent1, {duration: 0.5, opacity: 1, display: 'block', ease: 'power2.out' }, '-=0.5')
.to(seatDText, {duration: 0.5, color: 'white', ease: 'power2.out' }, '-=0.5');
});
<!-- end of the solution code -->
Fig 1.16 The smaller alphabet
However, even though it's a small element in the development process, I decided to display the text in a smaller size and positioned at the top in order to fulfil my designed prototype direction. I did some research and figured that the function is known as <sup> in code development.
Solution :
<sup>..text..</sup>
#Navigation Bar
Fig 1.17 Navigation Bar Development
It was very clear that conceptualising the navigation button was far more complex than I initially assumed, which I was believed that I was working on the prototype without considering the subsequent effects and the added complexity. :') I encountered difficulties because I wasn't implementing all pages within HTML, and I felt it was nearly impossible to find a suitable method.) )just I dk where got method to implement? However, I decided to shift from the original smart animate concept and opted for transitions between pages rather than directly animating the navigation bar itself.
<!-- Base Design / Minor interaction Completed -->
Continuing, I proceeded to establish minor interactions both within and between pages to ensure a seamless connection and reach the module requirement of having interaction design in our designed mobile application. While I could have documented each interaction and its purpose in the final prototype, I realized that showcasing these interactions in action within the application holds more significance than just explaining them. Hence, I summarised all the animations, transitions, and interactions in a video walkthrough for clarity under Final Compilation.
#PWA Setting
Fig 1.18 Insert the Code based on tutorial / Final
In order to make our application to be accessible to mobile, we are required to do the Progressive Web App (PWA) setting that can check through in chrome, inspect screen. To be mentioned, the biggest challenge is this! The process was quite frustrating, especially when considering the potential implication: without PWA functionality, would all my efforts amount to zero? It was a moment of considerable concern and stress.
Fig 1.19 Netlify Deploy :")),
one page even kennot handle
Fig 1.20 PWA Error
Throughout the process, I had check thru every stuff that I had followed based on the tutorial given, but it still having the issue, which I did not even get info )maybe I missed about the <meta name ="theme-colour" tag as well as the manifest. Based on the tutorial, we are required to insert the code under index.html and I had double check with my peers regard to this issue, and received the answer of only index.html which made me having no idea on how to go through this challenges.
Fig 1.21 WHY HE GOT PWA ICON SUDDEN
AND MISSING AFTER 1 MINUTE :(
I sought help from a friend with a computing background since I was struggling to grasp the error and determine the necessary corrections. Fortunately, they identified a potential solution: it seemed that all the codes needed to be implemented across all HTML pages. When we inspected the application, it became evident that the manifest was only detected for the index.html page. The absence of the manifest from the homepage onwards was causing the detection issue.
So, after the amendment, yeap, CONGRATS! I AM DONE :DD
Fig 1.22 PWA Result 🎉
Fig 1.24 PWA Result, PDF
Fig 1.25 MBO's Favicon in Mobile
)) Seems to BE SOOOOO BIG THO
#FINAL OUTPUT COMPILATION
Netlify Link : mbocinemasjq.netlify.app [852 x 393 : Iphone 14 Pro Frame View]
Project Compilation Drive : Link
Fig 1.26 Redesigned MBO Cinemas : Figma Prototype
Fig 1.27 Redesigned MBO Cinemas : Video Walkthrough
YouTube Link : https://youtu.be/QOCnHf9niuo
REFLECTION
Embarking on web development without relying on Bootstrap initially felt daunting, pushing me into unfamiliar territory. I grappled with the realization that my HTML and CSS skills were less proficient than I'd assumed. Yet, through experimentation and persistent error-correction, I uncovered a transformative realization – I had imprisoned myself in the notion that Bootstrap was indispensable for web design. As I began, it struck me that the process mirrored my past interactive design work: crafting the static and layering in animations later. Initially challenged by the module's emphasis on interactions, I soon recognized that my perceived obstacles were largely self-imposed. Once I found my footing, the development process flowed more effortlessly.
However, while conceptualizing my final project, time limitations constrained my ability to materialize every envisioned detail from App Design I. Conversations with Mr. Razif proved invaluable; his advice on strategically omitting certain elements to avoid feeling overwhelmed was indispensable. It allowed me to navigate the project more efficiently, especially considering the overwhelming workload that encompassed six applications and a website within a semester. As my friend astutely observed, it was akin to running a marathon at maximum speed, unable to accelerate further.
Critically assessing my time management, it's not a lack of management that stands out but rather the scarcity of time. Despite dedicating long hours – laptop-bound from 10 am to 3 am daily for two months – time still felt insufficient. While daily tasks were accomplished, the relentless march of time often left me grappling for more.
In refining this reflection, it becomes evident that adapting from Bootstrap dependency, managing time constraints, and making judicious project decisions were crucial growth points. These experiences widened my perspective, unveiling parallels between Ui/Ux design. They also underscored the importance of mentorship and the need for more effective coping mechanisms in high-pressure situations. Moving forward, as usual, I deserved a sleep, for 48 hours. :)
Comments
Post a Comment