Author: Ghadir Madani

A Brief Rant on the Future of Interaction Design

Concept
For this assignment, Fatima and I created a mini piano keyboard using Arduino with 7 notes (C, D, E, F, G, A, B). Each note is played using a button, and the pitch can be changed using the potentiometer. The switch allows the sound to shift higher or stay at the original pitch depending on its position.

Each button corresponds to a specific frequency for one note. When you press a button, the Arduino sends a signal to the buzzer to play that frequency. The blue switch works as a pitch modifier. This combination creates a mini keyboard where you can experiment with simple melodies and play around with tone changes.

Schematic

Digital Arduino

Demo Video

Reflection
To improve the project, we could’ve add more interactivity by including volume control, perhaps using a potentiometer. Another idea is to incorporate visual feedback, like an LED or an LCD display, to indicate which note or pitch is being played. These improvements would make the keyboard more versatile and closer to a real musical instrument.

Git hub

Physical Computing’s Greatest hits and misses

“Physical Computing’s Greatest Hits and Misses” dives into the ups and downs of integrating digital technology into physical spaces, and I found myself agreeing with the need to balance innovation with usability. One example that came to mind as a “hit” is the interactive installations in museums, like touch-sensitive displays or motion sensors that respond to visitors. These installations really enhance the experience, letting people interact with exhibits in ways that feel natural and fun. They show how physical computing can deepen engagement and create memorable experiences.

On the other hand, a “miss” for me is voice-activated assistants in public spaces, like Alexa in hotel rooms. While it’s a cool idea, it doesn’t always feel necessary, and privacy concerns can make people uncomfortable. Sometimes, it feels like technology is added just for the sake of being trendy, without actually improving the experience for the user.

Overall, I appreciated how the article doesn’t just celebrate successes but also reflects on what didn’t work, and why. It’s a good reminder for anyone working in this space (including me!) to think carefully about the purpose and impact of our designs. It’s not just about “what’s possible” but about making something genuinely useful or meaningful.

Making Interactive Art: Set the Stage, Then Shut Up and Listen

Concept

For this assignment I used two different LED lights one is switched on my a push button, and the other changes it’s brightness based on the lighting detected by the light sensor.

Code

int led = 11;

void setup(){
  Serial.begin(9600);
  pinMode(led,OUTPUT);
}

void loop(){
  int sensorValue = analogRead(A2);
  Serial.println(sensorValue);
  analogWrite(led,sensorValue/4);
  delay(50);
}

Github

Setup

The setup was drawn using Tinkercad

Schematic

The schematic was drawn using Tinkercad

Demonstration

Video

 

Concept

For my project I decided to use toy cars to light up a traffic light. My idea is that when the red car is on the piece of aluminum foil the red light lights up, when the grey light is on the aluminum the yellow light lights up, and when the black car is on the aluminum foil the green light lights up. This is a way to use code to control a traffic light using an unusual switch.

I used the idea that we did in the class for the digital input but instead of the light turning off the light is turning on, and instead of one switch I have three different switches connected to three different lights.

Code I am Proud of

// Control the red LED based on red button state
    if (redButtonState == HIGH) {
        digitalWrite(5, HIGH);   // Turn on red LED
    } else {
        digitalWrite(5, LOW);    // Turn off red LED
    }

    // Control the blue LED based on blue button state
    if (blueButtonState == HIGH) {
        digitalWrite(3, HIGH);   // Turn on blue LED
    } else {
        digitalWrite(3, LOW);    // Turn off blue LED
    }

    // Control the yellow LED based on yellow button state
    if (yellowButtonState == HIGH) {
        digitalWrite(4, HIGH);   // Turn on yellow LED
    } else {
        digitalWrite(4, LOW);    // Turn off yellow LED
    }
}

This code is used for turning on the light when the two pieces of aluminum foil are touching each other.

Setup

I used TinkerCad to develop my Arduino and the placement of the wires and code it to make sure everything is correct.

Code

GitHub

Demonstration

Emotion & Design: Attractive things work better

In Emotion & Design: Attractive Things Work Better, Donald Norman argues that good design goes beyond just function, attractive objects actually work better because they make us feel good, which improves how we interact with them. He explains this through three levels of emotional response: visceral (our immediate reaction to an object’s appearance), behavioral (how enjoyable and smooth it feels to use), and reflective (the personal meaning or identity we attach to it). Norman suggests that when we find something visually appealing, we’re more likely to approach it with a positive attitude, which makes us more flexible, creative, and forgiving of any minor flaws.

I agree with Norman’s argument because I’ve noticed that when something is well-designed, it feels more intuitive and satisfying to use. For example, using a beautifully designed phone or website often makes me feel more engaged, and I’m less likely to get frustrated over small issues. Norman’s insight that aesthetics can improve functionality resonates with me; it emphasizes that our experience with an object is about more than just practicality. When design speaks to us emotionally, it creates a connection that makes the interaction smoother and more enjoyable, showing that beauty and usability truly go hand in hand.

Her Code Got Humans on the Moon

In Her Code Got Humans on the Moon, the story of Margaret Hamilton’s contributions to the Apollo space missions is explored, showcasing her pioneering work in software engineering at NASA. Hamilton led a team that developed the code for the Apollo Guidance Computer, which ultimately helped land humans on the moon in 1969. Her code was not only innovative but also designed to handle potential errors and prioritize critical tasks, a crucial feature during the Apollo 11 mission when the computer was overloaded with data right before landing. Hamilton’s careful programming allowed the computer to focus on essential functions, averting what could have been a mission-ending disaster.

Hamilton’s story highlights the critical role of women in STEM and the power of resilience and ingenuity in high-stakes situations. Her work laid the foundation for modern software engineering practices, particularly in error detection and real-time computing. I find her story inspiring, as it demonstrates that technological achievements often rely on unseen contributions and relentless dedication. Hamilton’s emphasis on building fail-safe systems feels especially relevant today, reminding us of the value of anticipating and addressing challenges in programming. Her contributions underscore that space exploration is not just about astronauts but also the people who build and support the technology that takes us there.

Sketch:
link to fullscreen: https://editor.p5js.org/GhadirMadani/full/e7SLueayo

Concept:

The concept of my project was to make the user interact with more than one game using only one game. So my idea was to make an arcade game with five arcade machines, and when the user clicks on the screen of one of the arcade machines they will be able to play the game linked to that screen, and then they can go back to the arcade room to play the other games. By creating this game, I incorporated a lot of what we have studied in class and I made it more user-friendly and interactive.

How the Project Works:

When you enter the game this is the first screen that is shown, if you follow the instructions correctly it will link you to the arcade room code.

This is the arcade room. You can go back to the instructions page by clicking the “Instructions” button and it will link you back to the instructions code. Or you can play on the screen of one of the arcade machines (as mentioned in the instructions page) to play the game linked to it.

function mousePressed() {
  
    // Check clicks only when in the arcade room
    // First arcade machine (redirects to skeleton.html)
    if (mouseX >= 60 && mouseX <= 160 && mouseY >= 130 && mouseY <= 190) {
      window.location.href = "skeleton.html";
    }

    // Second arcade machine (redirects to squares.html)
    if (mouseX >= 190 && mouseX <= 290 && mouseY >= 130 && mouseY <= 190) {
      window.location.href = "squares.html";
    }

    // Third arcade machine (redirects to error.html)
    if (mouseX >= 320 && mouseX <= 420 && mouseY >= 130 && mouseY <= 190) {
      window.location.href = "error.html";
    }

    // Fourth arcade machine (redirects to jukebox.html)
    if (mouseX >= 450 && mouseX <= 550 && mouseY >= 130 && mouseY <= 190) {
      window.location.href = "jukebox.html";
    }

    // Fifth arcade machine (redirects to jackpot.html)
    if (mouseX >= 580 && mouseX <= 680 && mouseY >= 130 && mouseY <= 190) {
      window.location.href = "jackpot.html";
    }
  
  // Check if the "Instruction" button is clicked
  if (mouseX >= 20 && mouseX <= 120 && mouseY >= height - 60 && mouseY <= height - 10) {
    // Redirect to the arcade home page 
    window.location.href = "index.html"; 
  }
  }

 

The code I am mostly proud of is linking each screen with a different game, for example the first one is linked to the skeleton game, the second to the squares and so on.

When you click on the first screen you are directed to the skeleton game. You will have an instruction page before playing the game and if you follow the instructions carefully you will be able to play the game. The way this game works is you have to move the skeleton (spritesheet) to collect the bones, when you reach 10 points you win the game and you can press the “R” key to restart the game. But you can also lose the game if you touch the borders of the screen and you can also restart the game by pressing the “R” key. If you want to go back to the arcade room you have to press the “Home” button.

The second game (the second arcade machine) is a previous assignment that I added to this project. You will have to press on the mouse to let the squares change and press it again to change the speed of the squares. What I added to this project was the instruction page, where if you follow the instructions you will be able to play the game. If you want to restart the game you will have to press the spacebar twice, one to stop the game and one to reset the squares and then you will be able to play the game again. If you want to go back to the arcade room you have to press on the “Home” button.

For my third game I created non functional game, and this is because whenever I go to an arcade room most of the machines are broken. You can go back to the arcade room by pressing the “Home” button.

For my fourth game I created a jukebox, this was to implement music to my game. When you click on one of the “Play” buttons the corresponding music will be played and if you press on the stop button the music will stop playing. You can control the volume levels using the “Volume Control” slider. You can go back to the arcade room by pressing the “Home” button.

For my last game I created a Jackpot where you have to press your mouse so the wheel spins. You can then go back to the arcade room by pressing the “Home” button.

Areas of Improvement and Problems:

Since my project had many javascript codes and the games were dependent on the size of the screen that was chosen (width=800 and height=400), it was really difficult for me to code all the different javascripts to be in full size and responsive to the size of the screen. So as an improvement for my future project I want to implement the full screen option and make my project responsive to the size of the screen being used.

Concept:

For my midterm I got the idea to recreate some of the arcade games, but the only difference would be that in this version we can easily access our favorite games on our devices. For my initial idea I decided to create 6 games and it would look somewhat like the image below.

This would be the starting screen. The way I want this to work is that if you press on one of the screens of the arcade machine, or if you press on the air hockey table the game corresponding with what you pressed would appear.

For the first game I decided to use a spritesheet of a skeleton and create a game from it. For my second game I decided to create a jukebox, where I will add different music and the player could change the song by pressing the arrows. For the third game I decided to make the machine not functional and that is because whenever I go to the arcade most of the machines are not working. For my fourth game I decided to add the moving squares a previous assignment of mine. And for my fifth game I decided to add a Jackpot slot machine. For my air hockey table I was thinking of not creating a two player game, but instead a one player, where the player just places the air hockey puck on the table and the puck moves around.

Code Progress:

The progress I have so far is the layout of my arcade room. I also started working on some of the games.

This is the skeleton game that I started working with. You have to press the spacebar to start the game, use the up, down, right, and left keys to move the skeleton and collect the bones, and when the points reach to 10 you have to press the “R” key to restart the game. What I want to add to this game is when the skeleton touches the sides of the screen you lose the game.

This is the error screen that I created for the broken machine. I used pixels to create this effect. What I want to add to this game is a text.

Challenges:

The challenges that I am facing with this project is how I will add all these games into one code and one game. And how will I create the interactivity if you press the screen of a game the selected game pops up.

 

 

 

 

Something that drives me crazy is the confusion around door handles, especially when it’s unclear whether to push, pull, or if the door is automatic. Many doors have handles that imply pulling, but they actually require pushing, or they’re automatic but give no indication of it. This creates unnecessary frustration. Norman’s principles can easily improve this. First, using appropriate affordances would help—push bars for pushing and handles for pulling. This would visually communicate the correct action, reducing hesitation. Additionally, signifiers like clear signs or arrows could guide users, especially in high-traffic areas like stores or airports.

For automatic doors, better feedback could be useful. Subtle lights or sounds could indicate when a sensor has been triggered, letting users know the door will open. For example, in C2, the doors don’t always respond to you, and sometimes you are required to pull the doors so they open. This unpredictability creates unnecessary confusion and frustration.

In this case, enhancing the visibility of door functions and matching the conceptual model to user expectations (handles for pulling, plates for pushing) would make navigating doors far less frustrating. By aligning with Norman’s principles, door design could become far more intuitive and user-friendly.