INTERACTIVE DESIGN: EXERCISES

 

30/06/2023 - 11/09/2023

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

---

INSTRUCTIONS

---

EXERCISES AND ACTIVITIES
Class Activity Week 2

In a group project, we completed in class, we had been assigned to create a brand-new user interface to address a specific issue or user need. We used paper to make a simple prototype.
Our model was:

Situation 1: A local clothes business has asked your group to create a new e-commerce website.

Users want to be able to browse and buy clothes products online with ease, and they also want there to be an easy checkout procedure, as well as clear product descriptions and photographs.

Consider these usability guidelines: Consistency, clarity, visibility, and error prevention

Figure 1.2 Clothing Website Design

Class Activity Week 3

In this week’s activity, we learnt about website structure and key elements such as:

• Header
• Body
• Footer

These 3 elements help to create a friendly user experience and accessibility of information for the users:

Our assignment required us to put together a group of eight people with the aim of creating a navigation menu design. This task was created to test how well we understood the essential components that ought to be included on the menu. The main focus was on assuring compatibility with our website's overarching concept, which focused on the field of travel, especially air travel. The main objective was to improve user experience by providing a more simplified and understandable navigation system adapted to the particular domain of flight travel.

Figure 1.3 Group 3 Navigation Menu Design

Feedback:

Mr. Shamsul gave his approval to the majority of our elements and menu layout. However, he pointed out that the inclusion of the 'home' component was unnecessary. He argued that, in the context of a travel website, users typically visit with a clear purpose in mind, such as searching for deals, checking prices, or making bookings. Hence, the 'home' link, which is often seen as less relevant, could be relocated to a different location within the website.

---

Interactive Design: Exercise 1
Instructions:
Choose TWO (2) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience. Write a brief report summarizing your findings and recommendations.

I had chosen these two websites to analyse from Awwwards website

• Rejouice
• Vendome Clinique

Website Analysis

 
Figure 2.1 Website Analysis

---

Interactive Design: Exercise 2
Instructions:
Your task is to replicate TWO (2) existing main pages of the websites given in the link below to gain a better understanding of their structure. Choose any two from the link given. Follow the dimensions of the existing website from the width and height. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices.

I had chosen these two websites among the three options:
Bandit
Ocean Health Index

Figure 2.2 Colour Scheme Bandit

Figure 2.3 Colour Scheme Ocean Health Index

Figure 2.4 Website Replication Process

---

Final Outcome Web Replication 

Figure 2.5 Bandit Replication

Figure 2.6 Ocean Health Index Replication

---

Interactive Design: Exercise 3

Recipe Website Development

Requirements:

Create an HTML file named "index.html."

Create a section that displays the following information:

Recipe title

Include necessary images for the page

List of ingredients

Step-by-step cooking instructions

Create an external CSS file named "style.css."

Apply CSS rules to style your recipe card.

Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.

Final Outcome: Link Website - https://strawberrypierecipe.netlify.app/