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.

This week’s assignment tasked us with creating a generative text piece. I decided to take a slightly different, more artwork centered piece. I used one of my favorite books, “Before The Coffee Gets Cold” by Toshikazu Kawaguchi as an inspiration behind my piece. The book details may different relationships, and I used that as an inspiration for my piece. The code will generate a random paragraph from some predetermined sentences, and display it in the background, establishing a situation. The viewer can then click through the possible relationships it applies to, and try to see how the nature of the relationship may alter the meaning of the generated paragraph.

A section I am particularly proud of is the generation of said sentences, as they are constructed using the random() function, and as such provides different situations each time the page is refreshed.

//generating the text
function generateText() {
  let openings = [
    "'Oh gosh, is that the time? Sorry, I have to go,' the man mumbled evasively.",
    "'I didn't expect this conversation to go this way,' she admitted hesitantly.",
    "'Are you really leaving?' he asked, his voice barely above a whisper."
  ];
  
  let middles = [
    "She looked at him with uncertainty. The clocks in the café all showed different times, adding to the confusion.",
    "His fingers absentmindedly traced the rim of his coffee cup, avoiding her stare.",
    "The sepia-toned café seemed frozen in time, yet everything was changing for them."
  ];
  
  let endings = [
    "'Don’t I deserve an explanation?' she finally asked, breaking the silence.",
    "He sighed, glancing at his watch, knowing there was no easy answer.",
    "Without another word, he stood up and walked toward the exit, leaving her behind."
  ];
  
  // Construct generative text
  generatedText = random(openings) + "\n\n" + random(middles) + "\n\n" + random(endings);
}

The most frustrating part of this assignment definitely was creating each silhouette for the relationships. I wanted to make them seem organic and not blocky-looking, so I had to hardcode each shape into position, which was not difficult, but was definitely tedious. I want to research into whether there is a way to directly import unique shapes into p5.js  so that I can save myself any future struggle similar to this. While the end result is good, this part by far took the longest and most concentration to complete.

One thing that drives me crazy is the poor design of public bathroom sinks. Many of them have automatic sensors for water flow, but the sensors are inconsistent. Sometimes, you have to wave your hands around for the water to turn on, or it shuts off too soon, forcing you to repeat the process. It’s frustrating, especially when you’re in a hurry. This could be improved by using better sensors that recognize motion more accurately or by designing a simple manual option as a backup.

Norman’s principles of design, such as discoverability and feedback, can be applied to interactive media in many ways. For example, in app design, buttons and navigation menus should be clearly visible and intuitive. A good interface should guide the user naturally, without confusion. Norman also talks about signifiers, which are essential in digital design. Websites and apps should have clear indicators—like highlighted buttons or hover effects—to show what actions are possible.

Another principle that applies to interactive media is mapping, ensuring that controls relate logically to their effects. For example, when adjusting volume on a screen, a vertical slider is often more intuitive than a horizontal one, because we associate “up” with “increase” and “down” with “decrease.” Norman’s ideas remind me that good design is not just about looks but about usability. A well-designed interface should be easy to understand and not require a user manual to figure out.

Concept

I wanted to experiment with ASCII art in a dynamic way, using Perlin noise and interactive effects to create an evolving text-based visualization (I got inspired by the Coding Train videos on Perlin noise and this image manipulation + ASCII density coding challenge by him).

Each character is selected based on noise values, and their colors shift over time. As the mouse moves, it creates a ripple effect by “pushing” nearby characters away, giving a fluid and organic motion to the grid.

Demo (Click on canvas)

Code Highlight:

This part of the code uses Perlin noise to smoothly select characters from the density string and generate dynamic colors for each character.

// Using Perlin noise for smoother character selection
let noiseVal = noise(i * 0.1, j * 0.1, frameCount * 0.02) * density.length;
let charIndex = floor(noiseVal);
let char = density.charAt(charIndex);

// Generate color based on Perlin noise
let r = noise(i * 0.05, j * 0.05, frameCount * 0.05) * 255;
let g = noise(i * 0.07, j * 0.07, frameCount * 0.05) * 255;
let b = noise(i * 0.09, j * 0.09, frameCount * 0.05) * 255;

fill(r, g, b);
text(char, newX, newY);

How it works:

• noiseVal determines the ASCII character by mapping noise to the density string length.
• r, g, and b are also mapped to Perlin noise, creating a smooth, organic color transition over time.

Reflection & Improvements for Future Work

This experiment opened up some interesting possibilities for ASCII-based generative art. I’d love to refine the animation by adding more layers of motion, perhaps introducing gravity-like effects or different interaction styles. Another idea is to use real-time audio input to influence the movement, making the piece reactive to sound. Definitely a fun one to explore further!

This reading was both very illuminating and validating, especially in regards to the initial discussion of confusing doors. I had always found UI design to be an interesting topic, and this glimpse into the field of design as a whole was a lot more involved than I was prepared for. I was definitely impressed by how much work goes into properly designing a product, only for the bestowed ease-of-use resulting in users remaining completely oblivious to the effort put in. In that sense, it is similar to how good audio mixing in a song or film will go unnoticed, but bad audio will completely pull you out of the experience. There were also some good points made later on about having to carefully balance the different aspects of design, such as signals and feedback being informative yet unobtrusive, or products being feature-rich while remaining affordable.

As for applying these design principles to interactive media, I am at a bit of a loss. In the past few weeks I have experimented with using simple forms of interactivity like clicking or using arrow keys to move an object in the p5.js scene. These ended up being fairly intuitive in the sense that they are reasonable choices that one would expect when using a computer. However, if the user was not aware that these pieces were interactive to begin with, a huge chunk of the experience is lost. I had left comments at the top of the code detailing the viable inputs, but of course this requires navigating from the WordPress site to the p5.js editor. A straightforward way to deal with this would be to include text instructions in the piece itself, or having some sort of help menu, but I still feel like this would negatively impact the more artistic pieces.