Category: S2025 – Mang

While reading Don Norman’s “The Design of Everyday Things”, I was heavily agreeing with his notes on poor design making everyday tasks unnecessarily difficult. An example I found myself thinking of was of the commonplace microwave. Every student lounge in the NYUAD dorms has been provided with one, but each has a slightly different usability, making it an irritating chore to relearn where all the controls are. Many have excessive buttons with controls such as “Auto-Defrost”, “Popcorn”, or have random food symbols with no clear indication of what that setting does. The button layout is unintuitive, and can make tasks like setting a power level or temperature more tedious than it needs to be. This design could very easily be improved, by removing unnecessary additions, and making more-utilized features like the power-level or the timer more prominent. The arrangement of buttons should logically reflect their use. If there’s a sequence required (such as first setting a temperature, then a timer), the layout should guide users intuitively from left to right or top to bottom.

Terrible design aside, I found many of Norman’s points relevant in terms of interactive media. A key aspect of IM is the user interaction, and a user will not fully appreciate the functionality of a design if it is very unintuitive to use or tedious to learn. Websites, apps, video games, and even art pieces, should have visual cues that are easy to understand and distinguishable. Design shouldn’t suffer due to functionality, but that doesn’t mean that it shouldn’t be functional at all. Users should be able to recieve immediate, meaningful responses to their actions, not a frustrating mess.

One thing that drives me crazy is the automatic doors at the D2 Dining Hall. These doors tend to close too quickly, often shutting in people’s faces and making them difficult to reopen. This creates frustration, especially during busy meal times when students are entering and exiting frequently. The problem seems to stem from poor sensor placement or improper programming of the doors’ timing mechanisms.

This is us:

To improve this, the sensors should be recalibrated to ensure they detect approaching individuals from a greater distance and remain open long enough for safe passage. A more intuitive design could also incorporate clear signifiers—such as visible sensors or a light indicator—to communicate to users when the doors are about to close. These adjustments would align with Don Norman’s design principles, particularly the importance of discoverability, ensuring that users can easily and safely navigate the entryway.

How it feels to enter just before the door closes:

In Interactive Media, clear conceptual models help users predict how a system functions. For example, a digital audio workstation (DAW) for music production should visually resemble a real mixing console, helping users transfer their real-world knowledge to the digital interface. If a system’s structure contradicts user expectations, such as a website with illogical navigation, it creates confusion. So, a well-designed user interface (UI) ensures that users do not have to guess where to tap or click. This aligns with Norman’s principles of design, particularly discoverability, feedback, and conceptual models, which are highly relevant to interactive media

What’s something (not mentioned in the reading) that drives you crazy and how could it be improved?

What drive me crazy is the back of a normal wooden HB pencil once the eraser is finished. It is understandable that the metal band was designed to secure the eraser, but what if I excessively used it throughout handwriting and hear a screeching sound, similar to nails on a chalkboard? Nowadays with new materials used to secure erasers on pencils, I believe they should get rid of the metal band on the pencil end.

1. The metal band itself can feel uncomfortable when touched or pressed against the skin. It’s often slightly sharp and can feel like it’s tugging at your fingers or the paper.
2. When I have to erase something on a page unintentionally, it would be sharp enough to tear the paper apart.

I wish that these wooden pencils at least replace the metal bands with materials like rubber, silicon since to me, rubber and silicon would give the pencil a soft, smooth feel, and they’d be less likely to scratch or irritate your fingers.

How can you apply some of the author’s principles of design to interactive media?

To apply these principles, it ensures that technology aligns with human needs, making systems more intuitive, efficient, and enjoyable to use. With the use of his principle of affordances, it can help users understand what actions are possible, while signifiers provide clear cues to guide them, like buttons, links, and things the mouse can hover over, so that it can be accessible to the users. To me, a well-designed model for websites and apps helps users predict how a system works. While technology can make tasks easier, it can also add complexity, so designers must carefully balance functionality, usability, and aesthetics to create a smooth and engaging experience.

Concept

For the fourth assignment, I will present a sentence generator that provides new drawing ideas. When you hit the “Enter” key, the sentence displayed will be changed to a new randomly generated idea. The interface has a beige color to resemble a warm, inviting workspace. On the left, the text “Possible Drawing Ideas” is centered, and a small, cute pencil image is positioned just below it. On the right side, a large white rectangle looks like lined composition paper, with blue horizontal lines and a red border to make it look like a notebook page. The sentence generator uses three arrays—subjects, verbs, and objects—to construct new and random sentences whenever the “Enter” key is pressed. This is inspired by word generators online, more specifically the drawing generator below:

https://randomwordgenerator.com/drawing-ideas.php

I always wanted to know what to draw after a while of not doing so, so I hoped this generator could help me generate ideas on what to draw during my freetime.

Code Highlight

A a snippet i am proud of is this one:

function generateNewSentence() {
  let s = random(subjects);
  let v = random(verbs);
  let o = random(objects);
  currentSentence = `${s} ${v} ${o}.`;
}

This is because when I first started creating this, I struggled to get the sentence structured properly. At first, I couldn’t figure out how to manipulate the arrays and get the randomly selected items to fit properly into the structure of the sentence. I kept getting errors like missing spaces or syntax errors because I didn’t understand how important it was to use template literals for dynamically building strings. Upon discovering that, I was still struggling with randomization, e.g., getting an undefined result due to the arrays being accessed improperly. Eventually, after practicing with W3Schools and learning about template literals using this as reference:

https://www.w3schools.com/js/js_string_templates.asp  

I realized I needed to structure the string with it in a more precise way to avoid errors with spacing.

Embedded Sketch

(You can go to p5.js to see it clearly)

Reflection

Overall, this was a really fun project to play with texts and random words to generate one sentence. I really enjoyed testing my project by hitting “Enter” to transform the sentence to another random one. However, what had frustrated me sometimes is finding out the fonts for separate texts. I once tried to add another font but it ended up changing the size of the title “Possible Drawing Ideas” and caused some parts of the sentence to be chopped off (See below).

I can see myself using this feature in p5.js more and I can add extra details to make it seem a bit more realistic (shading, and details on the small pencil).

In this assignment, I created an interactive visualization featuring animated letters that swirl, drift, and change colors as they fall across the screen. The letters are selected randomly from a character set of uppercase English letters and numbers. Each letter moves independently with unique properties such as speed, rotation, color cycling, and sinusoidal horizontal drift. The use of transparency in the background creates a subtle trailing effect, enhancing the sense of motion and fluidity. The goal of this project was to create an aesthetically engaging and dynamic animation with a mix of structured randomness and organic movement.

One part of the code that I am particularly proud of is the display() method inside the SwirlingLetter class. This function not only ensures smooth rendering of each letter but also cycles through colors using sinusoidal variations. This approach creates a mesmerizing shifting color effect without requiring predefined color schemes. Another aspect I appreciate is the reset mechanism in update(), which seamlessly resets letters when they fall below the canvas, ensuring a continuous flow of animation. Looking ahead, possible improvements include adding user interactivity, such as allowing the mouse to influence letter movement or introducing gravity variations for more dynamic behavior. Another potential enhancement could involve applying Perlin noise for smoother, more naturalistic drifting patterns, making the animation feel even more organic.

display() {
  // Calculate color based on colorPhase (sin/cos wave)
  let r = 127 + 127 * sin(this.colorPhase);
  let g = 127 + 127 * sin(this.colorPhase + TWO_PI / 3);
  let b = 127 + 127 * sin(this.colorPhase + (2 * TWO_PI) / 3);
  
  push();
    translate(this.x, this.y);
    rotate(this.angle);
    textSize(this.fontSize);
    fill(r, g, b);
    text(this.char, 0, 0);
  pop();
}

The reading was an insightful exploration of design principles, especially in how seemingly simple objects can cause unnecessary confusion due to poor design. Norman’s discussion of unintuitive doors resonated with me because I often find myself second-guessing whether to push, pull, or slide a door. It reminded me of how many everyday frustrations are not due to user error but rather poor design choices. This reading reinforced the idea that effective design should be invisible—when done well, users don’t notice the effort behind it, but when done poorly, it becomes a major source of frustration. The comparison to unnoticed yet essential elements in other fields, such as sound design in film, really stood out to me. Just like poor audio mixing can pull you out of a film, bad design disrupts an otherwise seamless interaction with a product. The reading also made me appreciate the balance required in good design—ensuring clarity without overwhelming users with excessive instructions, and making products both functional and aesthetically pleasing.

Applying these design principles to interactive media requires a careful balance of affordances, feedback, and signifiers to ensure an intuitive experience. In previous projects, I’ve experimented with interactive elements like hover effects and keyboard controls, but I’ve realized that just because an interaction is possible doesn’t mean users will know it exists. Without clear signifiers, like visual prompts or subtle animations, the interactivity might go unnoticed, reducing engagement. I’ve also seen cases where too much feedback—like unnecessary pop-ups or redundant instructions—ends up being more annoying than helpful. A major takeaway from Norman’s work is that design should guide users naturally rather than force them to read detailed instructions. For interactive media, this could mean designing with affordances that align with user expectations, like making buttons look clickable or using motion cues to hint at interactivity. Balancing clarity with aesthetics is key to making interactive experiences engaging without being intrusive.

For this project, I was inspired by the windows at the Louvre Abu Dhabi that have quotes on them. I’ve always thought that poetry is incredibly beautiful powerful, and something that could have a section in a museum to inspire those that want to read it. Therefore, for my project, I decided to create what I call the “The Museum of Poems”. The concept involves a museum scene with a frame in the very center that displays a random quote about love or life for the person to see. My hope is that whatever they read, although short, inspires them or motivates them in some way. I gathered 2-line poems from various reddit posts, online blogs, quora posts, and even ChatGPT, and put them all into a giant list for the program to pick and display at random. My museum ended up looking like this:

The hardest part of this project was that after I initially finished, I accidentally clicked refresh and lost the entire project. I thought I had saved it, but turns out I hadn’t, and there was no way to recover it. Luckily, there was a point where I asked ChatGPT to help me solve a problem I was running into and gave it all my code, so I could copy that back. However, this was still in the earlier stage of my project, and I had to redo a lot of it from scratch including importing all my fonts and images again, putting in all the poems in the list, the gradient background, the wood flooring, etc. Speaking of the gradient background, that part along with the wood flooring is the part of the code I am most proud of. I had to learn how to use the lerpColor function, mapping properly, as well as using an image in repetition to create a pattern. The result can be seen here:

//Creates the entire background and floor of the museum
function drawMuseum() {

  //Draws the gradient background
  for (let i = 0; i <= height - 100; i++) {
    let inter = map(i, 0, height - 100, 0, 1);
    let wallColor = lerpColor(color('#ECC2EC'), color('#DCB5A5'), inter);
    stroke(wallColor);
    line(0, i, width, i); 
  }
  
 // Creates the wood texture on the floor
  for (let i = 0; i < width + 50; i += 100) {
    // Draw the first set of wood planks
    image(wood, i, height - 100, 100, 50); 
    image(wood, i - 50, height - 50, 100, 50);
    
  // Adds borders around each plank
    stroke('#BC7C64');
    noFill();
    rect(i, height - 100, 100, 50);
    rect(i - 50, height - 50, 100, 50);
  }
}

Overall, I am really proud of how the “The Museum of Poems” turned out. I wish though, that I could make it somehow look more realistic. I feel like the wall and the flooring has a pretty big contrast in terms of aesthetic which is something to consider for the future.

 

This week’s prompt made me think of pickup sticks, which are scattered on the ground in a cluster. This made it so that I could be random about how the sticks were distributed. But at the same time, considering the idea of controlled randomness, I realized I wanted it to not just be completely random, but in some ways simulating they were being tossed.

for (let i = 0; i < 40; i++) {
   let x = random(((width)/2)+50);
   let y = random((height/2)+50);

This part of code was very simple, but a highlight to me because I had to acutally think about how if they were tossed out in real life, the sticks would not  be completely random but would sort of cluster in an area. This allowed me to implement a bit of control into the randomness by dividing the width and height by 2.

One way that I see myself impoving upon this design is to have the sticks interact with each other like they do in the game. This would not only make the piece more interactive by also make it feel more real.

One thing that drives me absolutely insane is paper straws. Nothing disappoints me more than getting my coffee or any other drink really and seeing a paper straw. And no, of course I’m not against saving the environment or the turtles, but those flimsy things are horrible for mixing drinks and get all soggy so fast. Any milkshake or even whipped cream and  the straw will give up and disintegrate before my eyes, refusing to let me finish my drink without crumpling up into a useless, unpleasant, undrinkable, thing in my cup. Sometimes I even have to get my hands dirty while trying to get a firmer grip on the straw just to mix it. With sustainability being a key issue for many, there are many other biodegradable alternatives up and coming on the market like wood straws or even sugarcane straws that have much better, 24 hour durability compared to like 30 seconds with a paper straw. While places in the UAE are slowly starting to implement these, it will take time before I never have to see a paper straw again.

This highlights why, as Norman explains, human-centered design is so important. While paper straws match the societal push for sustainability and look great for companies, they don’t account for the humans actually using them that suffer through the sogginess and disintegration of paper straws themselves. One of the other things Norman talks about is signifiers and affordances. Since perceived affordance can take the form of many things, it is important to have signifiers to make clear what the instructions are. I think this is especially important in interactive media because we often assume people will know to click, move their mouse around, press the arrow keys, etc in order to make something happen on the screen. However, as a designer, things that seem self-intuitive to us may not always be self-intuitive to others and can have many affordances. Therefore, having signifiers is important to make sure our projects are understandable and usable to a broader audience.

In “Design of Everyday Things”, Don Norman brings his perspective on the challenges of design of the daily tech. stuff. While I was reading the chapter, the example of a watch with four buttons really resonated with me. 

Don discusses how the excessive design features of the mentioned watch makes the overall user experience less enjoyable as a watch that has 4 different buttons brings extra functionality to something that was supposed to show time and time only. Even though the idea of a device with multiple buttons and functionality is quite progressive and optimistic, such a redundant feature bomb confuses the users of such a watch. It distracts the user from the initial purpose of a watch: time display.

I resonate with Don’s frustration with this product as I have experienced this firsthand when I got my hands on my first Apple watch. At the beginning, it was really fun to use: switching music tracks on the go, replying to messages and even using Siri to essentially Google anything was amazing, as if I had a mini companion on my hand. However, as time went on, I started to realize that I do not really use my Apple watch for checking time. Now it was another distraction that kept my feeble brain from work and kept me from focusing on the task in front of me. The constant notifications, messages and other features became hateful to me. At times, I didn’t even charge my own watch to work in silence.

Ever since I got my Apple Watch, I feel even more attached to my phone. The small screen, limited performance, and awkward interaction with tiny buttons make it frustrating to use. Plus, it’s packed with features I’ll likely never need, echoing the usability challenges Norman described. Having to charge it daily only adds another layer of inconvenience.

So, I believe watches shouldn’t try to be multifunctional gadgets but rather remain focused on a single purpose with a sleek, intuitive design. That’s what truly defines a watch. When overloaded with features, they lose their essence and become just another mini-smartphone—one that’s harder to use and more of a hassle to maintain. A watch should enhance convenience, not add to the digital clutter we already navigate daily.