Application Design II / Interactive Component Design & Development

23.10.24 - 12.11.24 / Week 5 - Week 8
Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017)
Bachelor of Design (Hons) in Creative Media
Advanced Interactive Design (DST61004) 

---

INSTRUCTIONS

---

TASK 3

Interaction Design Planning and Prototype

For task 3 of Application Design II, we are to build upon the knowledge gained in Task 2 to create micro-interactions and animated micro-interactions for our app to greatly elevate the user experience of the app. The aim of the task is to faciliate exploration and making creative decisions on the type of interactions we would want to integrate into our app.

The output of this task are working animation elements that are ready to be integrated in our final app that will be created using HTML/CSS and JavaScript with the use of animation framework if necessary.

Interactive Components/Elements can be:

• Navigation Menu with interactive icons
• Side Menu interaction
• Pop Up boxes
• Call to action buttons.
• Page/Screen transitions
• Etc. (discuss with the module coordinator for further clarification)

The minimum output of the task is 6 components.

Process

The list of components I chose to create:

• Common Words Category Deck Dropdown
• Menu Bottom Navigation
• Add a New Word
• Search
• Abeyance Word Flashcard
• 1st Practice Question in Quiz

1. Common Words Category Deck Dropdown

Fig 1.0 Common Words Category Deck Dropdown

This was the first component I chose to create since this dropdown will be utilised a lot throughout the app, so getting the functionality for it prepared was crucial since half of the app interactivity is contingent on this component. Firstly, throughout all my htmls, i grabbed the preconnect link for the font that I wanted to utilise for my app and inserted it into all my html files which was Fredoka, i got a variety of weights since my project utilised the different font weights too. Then I created the container the dropdown is held in, the boxes, along with assigning classes to my content and writing out my content. The tricky part was the spacing for each common word list and the roman numeral- for some reason, html doesn't allow multiple spaces and you need to input ";&nbsp" as spacing instead, so I had to play around with the number of this repeating until I got the spacing just right. 

Fig 1.1 Common Words Category Deck Dropdown html

I also added an arrow that will rotate when toggling the dropdown. 

Fig 1.2 CSS Arrow Interactivity

When clicking on the dropdown and toggling it, the animation has a sliding effect and the arrow states are handled through the script using an event listener.

Fig 1.3 Dropdown Functionality Script

2. Menu Bottom Navigation

Fig 1.4 Menu Bottom Navigation

Next is the menu. The layout was fairly straightforward and simple, and for the menu I just wanted a simple animation when clicking on each item in the navigation bar: to change colour and slightly expand. For the html, i simply linked all the pictures I had, and set two states for each of them, their default state (not clicked), and their active state (clicked). I also linked each menu item to their relevant html pages using an href for navigation later on.

Fig 1.5 Menu Bottom Navigation

I specified the transformation in the css so that each item in the menu slightly grows when you click on them but used ease so that the transition is not abrupt. Other than the each menu item icon growing, the text also changes colour, and i have marked it as "!important" as I learnt that the addition of that overrides all previous styling rules for that specific property on an element which is integral to the functionality of the menu later on when resetting itself especially in page navigation.

Fig 1.6 Menu css Styling 1

Fig 1.7 Menu css Styling 2

For the script of the menu, other than highlighting each item when clicked and handling the active and default states, I have made it so that it remembers the last clicked menu item by storing it in the localstorage. I've also added comments throughout the code which specify the functions more clearly- also to remind myself of the functionality for each section since when I started coding, the lines started to become very complex and long. I found that labelling my sections, especially important ones is good practice for coding.

Fig 1.8 Menu Script

3. Add a New Word

Fig 1.9 Add a New Word

For the add a new word component, i could reuse the code of the dropdown trigger from my first component so the html for that portion and the script is the same, I also added word categories the user can select from, 3 text fields (word/definition/example) with the display text that's lighter, but when you type the text is darker and you are able to type anything you'd like.

Fig  2.0 Add a New Word html

I also added the save button

Fig 2.1 Save Button

The css for this portion was particularly difficult, since I had to make many seemingly random changes to debug positioning issues and fix the layout. It seems like css involves a lot of trial and error of just trying out different solutions until one works. like the category style for example, i didn't really understand why i had to specify the content being centered 3 times since i thought "align-items" or "justify-content" would center things for me. Sometimes being highly specific like this helps, however, sometimes it doesn't and an easier solution is better for the layout

Fig 2.2 Debugging Category Styling

for the first and last child of the word categories, I couldn't get the hover to work properly normally, so I had to create separate first/last child styling for them to retain the rounded edges by adding onto it. I also found that sometimes its better to use px instead of vh/vw/em for specific design choices since they give a better result.

Fig 2.3 Debugging First/Last Child of Word Category

4. Search

Fig 2.4 Search

The search page was also one of the more simple components to make. It just included a simple sliding box animation, text field, list, and hover

Fig 2.5 Search html

In the css i had the bottom set to -100% so that it starts out hidden and then slides up (which is why I ended up calling it a sliding box in my html)

Fig 2.6 Search css

Then, in the script i set a timer to it sliding up and added an event listener to handle the clicking for the search icon to show the word database list.

Fig 2.7 Search Script

5. Abeyance Word Flashcard

Fig 2.8 Abeyance Word Flashcard

Moving onto the abeyance word flashcard, since it was a flashcard, i thought a card flipping animation would make sense and look nice- this is the animation I will integrate throughout other flashcard-like elements in the app, such as the quiz. In the html I added the content and created two option buttons "I knew this word" and "I didn't know this word" for the user to pick between for the later functionality when the full workflow of the flashcards is implemented. 

Fig 2.9 Abeyance Word Flashcard html

Some of the card flipping is specified in the css, which was interesting to do since I wasn't aware that css could also dynamically handle 3d elements in this way. Setting the perspective very high allows it to be 3D, and by using "preserve-3d" in transform-style, I could enable 3D children. I learned online how to create the animation, then tweaked it according to my project specifications.

Fig 3.0 Card Flipping css

As for the script, it handles the clicking to trigger the flipping animation interactivity with an event listener.

Fig 3.1 Flashcard Script

6. 1st Practice Question in Quiz

Fig 3.2 1st Practice Question in Quiz

Lastly for the 1st practice question in the quiz, I have multiple choices for the question, and I've also implemented the same card flipping animation here when clicking on any one of the answers. There's a correct and wrong answer that I've specified for this question which is Unseemly (Incorrect) and Wanting (Correct). When clicking on the right answer, the card flips to reveal that the user is correct, and information about the answer they clicked on, and vice versa for the wrong answer. In the html, i had to separate the sections similarly to how I created the flashcard for abeyance, which is by the front and back side.

Fig 3.3 1st Practice Question in Quiz html

I could actually recycle a lot of the code I used from the abeyance flashcard css, so I didn't struggle too much with the css, and since I was using the same code for the script to handle the card flipping animation all I had to do was copy the code and ensure it matches the styling/labelling in my current files for the component.

Video Presentation

---

REFLECTION

Task 3 of Application Design II was really interesting but difficult, as I was still learning how to use javascript still. I realised that the creation of micro-interactions and animated components actually takes way more code than I expected, I was always surprised at how much I wrote in comparison to the actual output I got since there wasn't much yet visually, but its such an important part of design as it enhances the user experience significantly through engaging app elements. The process specifically made me even more keen to attention to detail in interaction design, as even small elements like dropdowns or navigation menus required careful planning, debugging, and refinement. I also learned to reuse and adapt code efficiently, such as applying the drop down list or card-flipping animation across multiple components. Furthermore the random and iterative nature of css styling, especially when debugging positioning issues, really tested my patience, but also made me more creative in problem-solving since I was exposed to trying anything and everything when debugging.