Week 08 - Week 11
Wong Khye Qing / 0361000
Application Design 2/ Bachelor of Design (Hons) in Creative Media
Task 3: Interactive Component Design & Development
Application Design 2/ Bachelor of Design (Hons) in Creative Media
Task 3: Interactive Component Design & Development
Instructions
Let's look back on Task 2...
In the previous Task 2, I have accomplished a few things which have set the foundation for me to start the workflow of my mobile application coding. These are the following details that I have went through and covered:
- Completion of Interface design with the set interface design theme
- Separated pages into few section for easy flow
- Amendments towards the User flow with concise flow
- Detailed App flow to highlight out the micro and macro animation by the interaction with the interface elements
- Established an overview of the the App Plan with detailed onload, in app and offload elements
I have picked up the interface design of my event app that I have yet to complete in Task 1 and completed it into a total of 12 pages included 4 overlays and 8 interface pages which were done in Figma.
The Pages are separated out into 3 sections such as Launch, Ticketing and Miscellaneous pages, which just act as an easier way to digest the pages in my app as well as made my compilation and presentation easier to be conveyed. I have also made sure to amend on my User flow map in order to sort out the features that are available and also remove the features as to not overpromised features that I can't deliver in my final deliverables.
Needless to say, an App flow map was made to have an overview of the macro and micro animation in the app with its interactions to trigger those animations. It was featured with screenshots of the page to also aid in understand how the page looks like. Finally, the App Plan overview was made in order to highlight the onload, in app and offload elements of the app, on how functions when we are looking and in the background.
Task 3: Interactive Component Design & Development
My progress record will be arranged in a manner of explaining different interface pages from 3 sections which are:
- Launch Pages (Launch Page, Login Page, Login Overlay, Sign Up Page, Sign Up Overlay)
- Ticketing Pages (Home Page, Event Details Page, Ticket Details Page, Payment Page, Payment Overlay)
- Miscellaneous Pages (Side Panel, My Tickets Page)
The contents of the blog is the some of the interesting issues and problem that I have found and the ways that I have used to solve those issues, the arrangement are down as below:
- Pre-planning Coding
- My Plans on Task 3
- Launch Pages
- Ticketing Pages
- Problem faced (Sign Up Page)
- The Swiper.js (Home Page)
- "Read More" JavaScript (Event Details Page)
- The Ticket Counter (Ticket Details Page)
- Ticketing Pages 2.0
- Radio Button for Payment (Payment Page)
- Payment Overlay (Payment Overlay)
- Miscellaneous Pages
- The Tickets Preview (My Ticket Page)
- The Side Bar (Side Panel Overlay)
Pre-planning Coding
Fig 1.0 Overview of Interface Design, Event App
There are a total of 12 pages that I would need to convert to prototypes that could be run with codes such as HTML, CSS and JavaScript. By doing so, I would be required to plan strategically on how I should code my interfaces, I was left with two choices which are to:
- Have different HTML files to connect each pages, different CSS file
- Have one HTML file, with different CSS file
There are both trade-offs and incentives that I could get from choice either one of it. By having a different HTML files, means that everything is organized and sorted out just like the CSS files, it would be easier to track on where the files. Flip side is that there will be too many files to handle especially when there are another total of 12 CSS files with it.
In the contrary, by having one HTML file I would be required to compile all the HTML codes into a single file. This would meant to scroll through many lines of codes to reach a specific code. In terms of the gains I got, I would have lesser HTML files to handle and animations could be overlay on top of each other easier by using the JavaScript to deploy the next page.
Conclusion, I have chosen to code with the second option, by having one HTML file, with different CSS file to create my app interface. I would also be taking precautions in order to not confuse myself whilst compiling the codes and scripts.
Fig 1.1 Comments for Self Reference, Coding Workflow
In order to not confuse myself as mentioned, I have made sure to leave comments before opening a new DIV for a new page. I would label the comment with the page name so that I can easily find it by just using the Ctrl+F command to key in the keyword and pin point in the sea of codes.
I was also planning to leave some comments on some JavaScripts that is new to me in order for me to understand the functions and the structure of the code when I refer bacimk and understand it.
Fig 1.2 Keep Track of CSS Class Names, Coding Workflow
I also need to bear in mind to use the class names that I am familiar and remember such as using "text-container" for the wrapper for most of the texts. The names must not be duplicated and there should only be one in the HTML file or else everything will go haywire or no changes made when I updated the CSS.
Fig 1.3 Comments Left for Record and Referencing, Coding Workflow
I have also reminded myself to leave some comments with my own writings between the lines of codes for me to remember the function of specific lines of codes. This is so that I won't be just pasting any codes blindly without understanding them. For example some lines of JavaScript was a little complex for me so I noted down its function so that I can keep track of its functions.
My Plans on Task 3
To lighten up the workload of completing everything for my event app, I have came out a list that I would like to accomplish for this task. The list will be used for reference in order for my easier workflow on the final task.
- Compile all the HTML codes in a file
- Make sure that all the designs from Figma are able to be transferred to scripts
- Addition of micro animation on buttons for more responsiveness
- Import most of the app assets: logo and vectors into the script
While setting this list, I have also make sure that I was not too ambitious by setting unrealistic goals, these are the listed plans are the ones that I think I am able to accomplish and deliver. I will be leaving the most of the macro animation from page to page for the Final Task, as the closing chapter.
Code Creation and Compilation
Launch Pages
.png)
.png)
.png)
.png)
.png)
Fig 2.1 Launch Pages Codes, HTML
As for the Launch Page, <buttons> were added to the page for verification to the Sign Up or Log In Page. ".button-wrap1:active, .button-wrap2:active" were also added into the CSS codes in order to change the properties of the "pressed" button state to a different position once clicked. This is to make the buttons more responsive. The button animations were also added throughout the app interface in order to make it more responsive and show feedback that the buttons were pressed.
The pages are also featured with Sign Up and Log In Overlays which are pages that will be overlaying on the Sign Up and Log In once attempts are successful respectively. The overlays were projected to be delayed for a few seconds before going to the next page, hence there will be no buttons on the overlays as they are automated.
Problem faced (Sign Up Page)
Fig 2.2 Calendar Input Icon, Problem Faced
One of the problems that I have faced for the Sign Up page was the Birthday input section, which there was a a calendar icon that was hard to tackle. As shown in the left picture, it remains black, which was its initial color that can't be altered. Mr Razif have suggested me to hide it with the "input[type="date"]::-webkit-calendar-picker-indicator" code (as shown in the right picture). which I can use another icon to replace it but might sacrifice on showing a calendar panel out.
Fig 2.3 Background Icon & YouTube Tutorial, Resolved
Fig 2.4 Resolved Codes, CSS
Fortunately I was able to solve the problem with the help of the video above. I was able to add in a new icon and allow the current calendar icon to overlay on the new icon. By lowering the opacity of the old icon (icon with red border), it creates and illusion that I was pressing on the new icon (pink icon), but I am actually still pressing on the old icon.
It was solved by importing a new icon using "background: url(vectors/calender.svg);" and adjusting it using the background codes in CSS. Then, just lowering the opacity of the "-webkit-calendar-picker-indicator". The codes are as shown above.
Summary of Launch Pages
Below are the gist of what was mentioned above for Launch Pages:
- Buttons were animated to make it responsive and immersive to act as feedback when pressed
- Modifications made by using background: url(vectors/calender.svg); to make sure add a new icon in the date input bar
- -webkit-calendar-picker-indicator opacity was lowered to 0 in order to still act as a button but still functional.
.png)
.png)
.png)
Fig 3.0 Ticketing Pages with Web Inspector, Screenshot
Fig 3.1 Ticketing Pages Codes 1, HTML
There were 5 pages for the Ticketing Pages, with 4 pages and 1 overlay page. Let's start with the Home Page, which is the first page after the Sign Up and Log In procedures. The design for this page might be a little different from what I have proposed as I have found out an interesting JavaScript for the swiping elements of the first page. Besides that, buttons were also more responsive when pressed as mentioned and has also been integrated throughout the Ticketing Pages.
Elements such as the Menu icon, Location Icon, Tabs Panel, Back Navigation button and the Booking buttons beneath the screens were all fixed in position in order for easier access for the users. Then, for the Event Details Page, I have also added the "Read More" element for the descriptions. This is so that users can choose to read more from the paragraphs or move on. On Top of that, I have also added Ticket counter for the Ticket Details page in order to update the price and ticket amount, attempts have been made into to realize it.
The Swiper.js (Home Page)
.png)
.png)
Fig 3.2 Swiping Cards from Right, Swiper.js
The Swiper.js is one of a site with JavaScript templates select customized swiping action templates. I was able to come across one that was the Effect Cards. It was a much simple swiping element in my opinion, as they consist of stacks of cards, that the user will recognize and try to swipe to the left or right. By swiping the card will slowly transition to the back of the stacks of cards, making way to show the next card on top.
Fig 3.3 Read the Instructions, Attempts in trying Swiper.js
I have came across this Swiper.js when I was researching for more horizontal scrolling options, this is the Effects Card animation. In the image above, I saw the Js code was quite short, so I was a bit hesitant about it, but I tried the code anyways to see if it works.
I have also seen the instructions stating that it will be best to add the Swiper HTML layout to have a clearer image for the structure of the swiper codes as well as allowing for customization.
Fig 3.4 Trying to customize the HTML and CSS, Attempts in trying Swiper.js
After that, I have started to try on the codes in another coding app first to not mess with my original source code file. I have moved some lines from my original code to here in order to test if I can import the cards HTML into the Swiper codes and also alter the CSS. Turns out the Swiper HTML layout from above did help me in recognizing the structure of the Swiper codes.
Fig 3.5 Swiper JavaScript, HTML
Then, I have tried modifying and transferring the codes to my main source codes, I have also changed the "class" names into swiper terms such as the "<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">" were added in for the Js to run normally. The Js code was also pasted below the HTML codes of the Home Page.
"Read More" JavaScript (Event Details Page)
Fig 4.0 Read More of Description, Screenshot
Attempts were also made to make sure that the description is able to be expand and retract to a certain length. I was required to make sure that only 3 lines are shown in the state of retract and allow the "Read Less" word show when the description is expanded.
Fig 4.1 Description Code, HTML & JavaScript
With some research and prompting, I was able to found out about in-lining text by using these in the css section "text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical", they were able to clamp the paragraphs into 3 lines when retracted.
Then, the addition of the JavaScript for the description was able to allow the text to expand to full paragraph when toggling the "Read More" button and returning it back to in-line paragraphs when toggled again. There was a function in the CSS that made this happen by allowing the overflow to happen which allow it to be expanded, with the help of the JavaScript to enable it. The CSS goes as this "overflow: visible; text-overflow: clip; -webkit-line-clamp: unset; ".
The Ticket Counter (Ticket Details Page)
Fig 4.2 Ticket Price with Total Amount, Ticket Counter
The Way that this counter work is users will just need to key in on how many tickets they like to purchase and the total price will be multiplied with the amount they have chosen. The right image shows a button that displayed the total sum of the ticket price from the counter on the left image.
This did required me a few trial and errors and trying on some prompts to make this a reality. As I have contemplated on whether I should be just saying it is a prototype to skip pass through it or try to use scripts to solve the problem that I was facing. I was lucky that I have chosen the latter and tried my best in scripting it and making my interface more immersive and responsive.
Fig 4.3 Ticket Counter Tutorial, Self Research
In this blog posted about the Increment and Decrement functions was able to allow me to understand more about the script. The script displayed the fundamentals of updating just the counter by pressing the + - icon, by addition or subtraction. Unfortunately, I would also like the price of specific ticket to be updated with the ticket amount selected.
Fig 4.4 Ticket Counter Research, Gemini
Due to not settling with the previous code that I have, I would like a more responsive and realistic approach to ticketing purchase. With that, I have started delving into Gemini to modify codes given and shape according to my specification. Few attempts were made in order for the codes to be modified and suit my codes.
Fig 4.5 Ticket Counter Code, JavaScript
The scripts were a combination of a few functions that enables a few things to be shown:
- Ticket Amount (function increase and decrease)
- Ticket Price (updateTotalPrice)
- Total Price (calculateTotalSum)
Fig 4.6 Functions and Scripts used for specific parts of the interface
The Ticket Amount ensures that the counter will decrease the amount below 0 or increase above 9 tickets. Besides the Ticket Price multiplying the input ticket amount and its individual set ticket price, this will be useful to update the total ticket price for specific ticket. Then, the total price for the tickets is the sum of the 3 multiplication from 3 different ticket prices and its ticket amount, which then will be shown at the Call to Action button below the page.
Summary of Ticketing Pages
Below are the gist of what was mentioned above for Ticketing Pages:
- Swiper.Js was added as a modification of the proposed horizontal scrolling.
- Note to self to read the instructions of the JavaScript documentation provided
- text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; were added to make sure that the paragraphs are inline with 2 paragraphs
- Ticket counter was a combination of JavaScript that able to measure the ticket amount, calculate the ticket price and sum of ticket fees required
Ticketing Pages 2.0
.png)
.png)
Fig 5.0 Ticketing Pages with Web Inspector, Screenshot
Radio Button for Payment (Payment Page)
Fig 5.1 Radio Button Codes, HTML
By referring to the tutorial above, I made my attempts in creating the radio button of my own for the payment methods. Which would required me to create the radio button line, "<input type="radio" name="box" id="choice1">". Then, I would need to make a label for the payment methods by using the "<label for="choice1" class="payment-detail1">", in order to allow the input to recognize its label.
Fig 5.2 Different Icon States and SVG Tutorial
One of the challenges I will face in the midst of the radio buttons was that, I would need to change the icon form a hollow circle to a tick icon (as shown in left imgae). That's when I found a video on how do import my <svg> icons into my HTML lines. This was able to make changing color of SVG much easier and effortless with just a few adjustments.
Fig 5.3 The Key Radio Button Lines, CSS
With all the HTML for the radio buttons being set up and ready, it's time to move to the key part for the micro animations for the button. The CSS lines above have shown how the animations were able to be pulled.
For the CSS to work, I would be required to key in codes that are able to act as a directory for it. Starting by keying in "#choice1:checked ~ label.payment-detail1", which interpreted as if I pressed on the label 1 that is #choicel, go to the label that has the class name "payment-detail1", in order for me to change the properties of the mentioned Class.
If would like to change the properties of the a div in inside of the label, I would need to be more specific with my lines by inputting, "#choice1:checked ~ label.payment-detail1 > .image-container7", which interpreted as when the label 1 that is #choice1 is selected, go to the label that has the class name "payment-detail1", which contained the "image-container7" Div, in order to change the properties of the div.
Fig 5.4 Opacity for The Radio Buttons
By using the Radio button as the base of the selection of payment methods, the original Radio buttons will still be remained on top of the buttons. It will also act as a prove that the buttons are able to work. If the new 1st button "credit card" is pressed, then then old radio button will also be selected, thus proving that this selection is done and working.
.container-wrap5 input[type="radio"] {
display: none;
}
By inputting the lines above in the CSS, the old radio buttons will not be shown in the interface just like the right image in Fig 5.4.
Payment Overlay (Payment Overlay)
Fig 6.0 Payment Overlay Lines, HTML
This pages features a similar interface as the Login Overlay as well as the Sign Up Overlay. It allows users to go to the My Tickets Page to check on their tickets or they can choose to go Home Page.
Summary of Ticketing Pages 2.0
Below are the gist of what was mentioned above for Ticketing Pages 2.0:
- Radio button was used for selection of Payment Methods
- Import SVG for better customization of color
- CSS was used instead of JavaScript in order to modify the Radio Buttons selection
- Clear directory for the codes in order to find the Div and modify the properties in CSS
- 0 Opacity to the radio input in order to not be visible
Miscellaneous Pages
.png)
.png)
Fig 7.0 Miscellaneous Pages with Web Inspector, Screenshot
The Tickets Preview (My Ticket Page)
Fig 8.0 The Tickets Preview UI
This page is challenging for me which I thought I was not able to make it due to complicated JavaScript or coding. Alternatively, I have also wanted to just make this as a static page and make it as an idea just because it is not the MVP of the app. Fortunately, with some persistent, I was able to complete this page and make it into something that works and what I am proud of.
Solving the Tickets (My Ticket Page)
Fig 8.1 The Ticket Preview Lines, HTML
I was cracking my head into thinking of ways to create the ticket preview like what I have proposed, I have even considered using JavaScript, but I was afraid that it might be too complicated for me. Then, I tried to think in a simple way, which I have an idea of just using the Radio Button that I have used in my Payment Page as it I will only be selecting one ticket at a time.
Fig 8.2 The Ticket Preview Lines, CSS
With similar codes like the Payment Method Radio Buttons, I was able to use lines in the CSS in order to alter the properties elements in the page.
- #ticketing1:checked ~ .wrap-container7 {
- top: 10em;
- }
The lines included above is to allow the ticket to lift when being pressed.
- #ticketing1:checked ~ .wrap-container7 > .text-container20,
- #ticketing1:checked ~ .wrap-container7 > .close-button1,
Then the lines above would to allow the text and the close button to appear once the ticket is being pressed.
Fig 8.3 The Radio Button and the Close button
After completing all the ticket animation, I wasn't able to close the ticket panels, which was why I have thought of using the fifth button in order to return other tickets back to their original position. I have added the fifth button tag to the "Close button" in order to return every ticket back to their original positions. It's a simple solution but a practical one that does not overcomplicate the overall.
The Side Bar (Side Panel Overlay)
Fig 8.3 The Radio Button and the Close button
The Side Panel is and overlay that will only be summoned by pressing on the Menu Icon on the top left. From the list of the side panel, the Home Page and My Ticket Page can only be accessed from the panel, other selection pages are just for display purposes.
Summary of Miscellaneous Pages
Below are the gist of what was mentioned above for Miscellaneous Pages:
- Radio button from Payment Page was used to show the tickets.
- The tickets will act as the Radio Buttons
- An extra radio button was added as Close button to return all tickets to original positions
- CSS was used instead of JavaScript in order to modify the Radio Buttons selection as well
- 0 Opacity to the radio input in order to not be visible
- Only buttons of Home Page and My Ticket Page are usable for Side Panel
Final Submission
Fig 9.0 Search Page Name in the Coding Program, HTML
style="display: none;"
Due to pages are not interlinked, it would be more convenient to search through the line of code for some specific page using its own name, as I have also comment the Page names in between the lines. Remember to remove the "display: none;" from the code to reveal the page.
Below are the list of page name that can be used for the search bar:
- Launch Page
- Login Page
- Login Overlay
- Sign Up Page
- Sign Up Overlay)
- Home Page
- Event Details Page
- Ticket Details Page
- Payment Page
- Payment Overlay
- Side Panel
- My Tickets Page
Fig 9.1 Video Presentation, YouTube
The Scoreboard
This is a list that of what I have accomplished and the problems that I have solved along the way of this task:
- Enhanced Horizontal Scrolling with JavaScript (Swiper Js)
- Ticket Counter that calculates the Ticket Amount, Ticket Price and Total Ticket Price
- Improvised on using Radio Buttons for selection of Payment and reviewing the purchased Tickets
- Call to Action buttons that ask users to book or purchase the tickets and many more
- Responsive event description section that able to retract to minimum paragraphs or expand to show entire paragraphs
- Responsive and interactive buttons that will animate when pressed
- Side Panel that is responsive
- Pop up Overlay which will be overlaying on top pages
What's Next?
- Integration of animation for transition of pages
- More Responsive Login input boxes
- Integration of showing and hiding of password
- Working summarization for the total ticket price in Payment Pages (Currently only in Ticket Details Page)
Feedbacks
Week 12
- Try make the background of the overlay less visible so that the overlay will be more obvious
- Good, made a ticket counter that works