ADVANCED INTERACTIVE DESIGN: TASK 1

24/09/2024 - 11/09/2025
Week 01 - Week 3
Adrianna Sofea Mohd Fauzi (0350661)
Bachelor of Design (Hons) in Creative Media 
Interactive Design: Exercises

---

1. Lectures

2. Interactive Design: Exercises

• Exercise 1
• Exercise 2
• Exercise 3

3. Final Outcome 

4. Feedback 

5. Reflection 

---

LECTURES:
Fundamental Usability Principles

• Uniformity
• Simplicity
• Accessibility
• Feedback
• Error Mitigation

Uniformity: Ensuring a consistent appearance and design elements throughout the interface is vital. This consistency reinforces the user's awareness that they are navigating the same website. For instance, if the homepage uses a particular color scheme and typeface, this should remain consistent across the entire site. Uniformity guarantees that the website maintains a cohesive look and functions seamlessly across various components like headers, footers, sidebars, and navigation bars. Uniformity is crucial for users to recognize and become accustomed to specific patterns. If similar elements yield dissimilar results, user frustration is likely to ensue. For instance, if a website's buttons have a distinctive appearance, such as protruding boxes with labels, then all buttons on the site should adhere to this style. Likewise, if a backward arrow signifies the back button, it should not be altered to a different symbol, as this would disrupt the user's learned expectations.

Simplicity: The design interface should prioritize simplicity, avoiding unnecessary complexity. Simplicity encompasses streamlining processes, using intuitive symbols and terminology, and minimizing the potential for user errors.

Incorporating simplicity into designs enhances user interfaces, enabling users to achieve their objectives more quickly and with fewer obstacles, all while enjoying a superior user experience. For instance, in the Maybank app, users receive both an in-app and email invoice immediately after making a payment, providing feedback to ensure users feel confident in their actions.

Accessibility: Accessibility revolves around making interface elements visible and easily discoverable for users. The more prominent an element, the more likely users are to notice and utilize it. Conversely, hidden or obscured elements pose challenges for users. Users should be able to discern their available options and access them effortlessly by merely glancing at the interface.

Feedback: Feedback is the means by which the results of user interactions are communicated, making them visible and comprehensible. It serves to inform users of their success or failure in completing a task.

For example, when hovering over navigation items on desktops or laptops, users expect to see color changes or submenu loading, providing visual feedback. Similarly, audio cues or color changes indicate progress or completion, such as a progress bar during downloads. Effective feedback mechanisms are essential for users to understand the status of actions like payments or downloads.

Error Mitigation: Error mitigation involves preemptively alerting users to potential mistakes and facilitating error-free actions. This principle acknowledges the inherent human tendency to make errors. For instance, highlighting a section of a form in red when a user misses a required field serves as a visual error prevention measure. Similarly, suggesting password options in varying colors helps users create secure passwords, while wiggly lines underline spelling errors in words or other platforms, aiding in error correction.

Design Thinking Process
It is crucial to understand the process of structuring a functional design, therefore it is best to know the design thinking process that goes from empathy to the final product. The flow is shown below:

Figure 1.0 Design Thinking

Week 1:
This week, we were introduced to the module and given a brief overview of what to expect moving forward. Our instructor showed us examples from previous students as well as samples from various websites to illustrate what a thematic website truly is. He emphasized the importance of choosing a familiar topic for our websites, ensuring that we select something we are confident in creating and executing.

Module Information

Week 2:
This week, we began learning how to use Adobe Animate. Mr. Shamsul introduced us to the basic buttons, tools, the timeline, and the meaning and function of symbols, as well as key shortcuts. Our first exercise was to create a beach ball, as shown below. Following that, we were tasked with designing a sailboat to closely resemble the reference image provided by Mr. Shamsul.

Figure 1.1 Beach ball in Adobe Animate

Figure 1.2 Sailboat in Adobe Animate 

Week 4:
We practiced an exercise to learn how to morph alphabets in Adobe Animate. Mr. Shamsul guided us on how to improve the transitions by smoothing them after applying a classic tween. He demonstrated how to adjust the ease-in effects in the properties panel to achieve the desired effect. We then learned how to create an animated spider.

Figure 1.3 Alphabet morph

Figure 1.4 Spider 

Thematic Website Proposal

(Click any link to go to the page)