Category: F2026 – Mang

Concept

The idea for this project came from a hilarious clip I watched of The Tonight Show Starring Jimmy Fallon, where Jimmy played a word-association game with Benedict Cumberbatch (who plays Doctor Strange). In the game, Jimmy would ask random, nonsensical questions, and Benedict had to shout out random words—verbs, nouns, adjectives—without thinking. In the end, all those completely unrelated words were stuffed into a pre-written script, creating a surprisingly funny and absurd little story.

I loved how something as simple as pulling random words out of context could instantly create unexpected comedy. That made me wonder: Can I recreate that same feeling of hilarious randomness using code?

By setting up three separate word banks—subjects, verbs, and objects—and picking one from each using p5.js’s random()function, this project acts as a mini story generator. Every time you click, it stitches together a completely unpredictable sentence, turning basic code into a fun, surreal storytelling game.

How this was made?

The overall logic of this program is very clean and straightforward, without any unnecessary complexity. First, I stored 20 words into three separate arrays for subjects, verbs, and objects. Next, I set up mousePressed() so that every time you click, the code uses random() to pull one random item from each of those three arrays.

To make it look more polished, I played around with typography, positioning, and color. I arranged the three parts vertically using specific Y-coordinates, picked a nice clean font, and made the middle verb bright red so it stands out as the action of the sentence.

Reflection

To be honest, this project was relatively simple, and I intentionally kept my approach straightforward without overcomplicating things. I focused on building a clean, functional logic that works reliably rather than wrestling with complex algorithms.

However, looking at the finished piece, I definitely see room to make the user experience much richer in the future:Adding subtle, soft typing sound effects whenever a new sentence is generated to give the clicks better tactile feedback.Or experimenting with fade-in effects or gentle motion trails so the words slide in smoothly instead of just abruptly popping onto the screen.

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

A great example of bad design in daily life is the automatic faucet in public restrooms. Designers like to hide the sensor inside the shiny metal tap to make it look clean and nice. However, this removes all visual signifiers. Users cannot see where the sensor is. They have to wave their hands around blindly to guess the right spot. This causes a lot of frustration.

To make things worse, the water often comes out with a short delay. In good design, feedback must be fast. Because of the delay, users think the faucet did not see them. They pull their hands away. At that exact moment, the water shoots out. This breaks the user’s simple conceptual model. They expect water to flow as soon as their hands are under the tap.

We can fix this problem very easily. First, designers can print a simple dot or hand icon on the tap. This gives a clear signifier for the sensor area. Second, a small light can turn on the instant the sensor detects a hand. This gives immediate feedback. Users will know the water is coming, so they will not pull their hands away.

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

To apply Norman’s principles to interactive media, we must change how we design user actions, system feedback, and layouts.

First, we apply signifiers by making active elements stand out from background elements. Since digital surfaces are flat, we must use visual contrast, lighting, or motion to guide the user’s eyes. This clearly shows users what can be changed and where to click.

Second, we apply natural mapping by matching system movements with real-world physics. For example, dragging an object up should increase power, and moving it right should move to the next step. When controls follow natural space, users do not need to memorize rules.

Third, we apply feedback by designing immediate visual or audio responses for every action. The system should never leave the user waiting in silence. Even a tiny color change or a brief sound confirms that the system received the input.

Finally, we build a clear system image by keeping the rules and layout consistent across the entire platform. When the design logic stays the same, users can quickly form a correct conceptual model and master the system without training.

The Concept

For this piece, I wanted to build something that felt more moving, with text that reacts to the viewer instead of just sitting there. One Arabic word appears in the center of the canvas, and when you click it, it “explodes” into two dozen flying copies of itself. Each copy moves in a random direction, shrinks, and fades out until the last one disappears. Then, a new word and background color appear, waiting for the next click. The words I used were سلام (peace), حب (love), أمل (hope), نور (light), فرح (joy), and حلم (dream). I chose these words because they are short, meaningful, and visually strong in Arabic script, which made them a good fit for a generative piece based on repetition and motion. For the font, I copied the P5 GS that we discussed in class, which showed an example of Arabic text. The Arabic font was already included in the file, so I used that part and added my own code to create the interaction and animation.

Highlight: The Code I’m Proud Of

The part of this sketch I’m happiest with is the Word class. Early drafts of this project tracked every flying copy using a pile of separate arrays, one for x position, one for y position, one for speed, one for size, one for transparency and so on and keeping all of them in sync by index got messy fast. Rewriting it as a class cleaned everything up so now each flying copy is a single self-contained object that knows its own position, speed, size and fade level and knows how to move and draw itself.

class Word {
  constructor(x, y, speedX, speedY, size, word) {
    this.x = x;
    this.y = y;
    this.speedX = speedX;
    this.speedY = speedY;
    this.size = size;
    this.alpha = 255;
    this.word = word;
  }

  move() {
    this.x = this.x + this.speedX;
    this.y = this.y + this.speedY;
    this.alpha = this.alpha - 2;
  }

  show() {
    textSize(this.size);
    fill(255, 255, 255, this.alpha);
    text(this.word, this.x, this.y);
  }

  isFinished() {
    return this.alpha <= 0;
  }
}

Embedded Sketch

How Was This Made

This sketch combines several things I learned in the first few weeks of class. I used arrays and objects to keep track of the words as they explode, similar to the Ball Class examples we worked on in class. I also made a Word class, using the same object-oriented programming idea from the Ball and Car class examples. I used random() to choose the word, background color, and different speeds and sizes for the copies. The mouseClicked() function makes the explosion happen when the canvas is clicked, and draw() continuously updates the position and fading of each word to create the animation. For the Arabic text, I used the Noto Kufi Arabic font from Google Fonts because Arabic needs to be displayed correctly with its connected letters. I followed the font method we discussed in class which uses HTML and CSS instead of loadFont().

Reflection and Future Ideas

I like how simple the idea is, but I think I could make it more interesting. I would like to add trails behind the words, allow multiple explosions at the same time, and make each word look different based on its meaning. I could also add a sound when the words explode if that works.

Reading Don Norman made me think more critically about the projects we have done in class. In previous projects, we focused a lot on making something work, but Norman made me realize that something working does not always mean it is well designed. A user should not have to stop and think about what to click, press or do next. This connects to our own projects because even a simple interactive project can become confusing if the design does not clearly communicate how it works. I think this is something I sometimes overlook because I focus more on the code and the final result than on how another person experiences it.

Something everyday that annoys me a lot is my car doors. I have a Tesla, and the car doors are designed to be one with the door, which annoys me, especially as a commuter. I usually have a lot of things in my hands during long days, so opening the door requires a completely empty hand. One time, I had a bottle of water in my hand and wanted to open the door but I had just gotten a fresh manicure. My fresh manicure was ruined, and I had to go inside the salon to fix it. I ended up having to put the bottle on top of the car just so I could open the door.

What I found most interesting was Norman’s idea that designers should not blame users when something is confusing. It made me question how much responsibility we have as creators to make our projects understandable. For our previous class projects, we usually know how our own work functions because we made it, but a new user does not have that same knowledge. This makes me think that testing our projects with other people is just as important as creating them. Going forward I want to pay more attention to whether my projects are actually intuitive to someone who has never seen them before, instead of assuming that if I understand it, everyone else will too.

Response

Something that drives me crazy is the newer car door handles, like the ones on a Tesla. Most of us grew up with the same idea of how a car door works. You grab the handle and pull. The newer handles break that idea completely. There’s nothing sticking out to grab and no clear sign of where to press, so people end up standing at the door confused about how to get in. I think part of the problem is the design, because it chooses a sleek look over being easy to figure out. But part of it is also just habit. People have used the old handle for decades and it works for them, so any change takes time to get used to. Maybe one day people will find the new handles normal and the old ones will feel strange. Still, I don’t think we should just wait for everyone to adjust. A small cue like a subtle dent or a light showing where to press would help a lot, and the design could still move forward while respecting what people already know.

Norman’s ideas fit right into interactive media, because making an interactive piece is really just another kind of design. When I make an interactive artwork, the way I picture people using it is often very different from how they actually see it. That’s the same gap Norman talks about between what the designer has in mind and what the user understands. I can’t stand next to every person and explain my work, so the piece has to explain itself. That can mean the cursor changing or something reacting when you hover over it. It can also mean giving feedback so people know their click did something, or making movements feel natural, like moving the mouse up to make something rise. After this reading I always ask myself two questions when I make something. What are its signifiers, and what idea of how it works does it give the person using it?

 

While reading The Design of Everyday Things, I found the author’s principles of good design agreeable, but I felt that he was a bit biased. He mainly put the blame on the machine and the design, including the engineers and designers, but said little about the user. I think everyone contributes to a product’s efficiency because there are many people who can be oblivious to simple instructions and fail to utilize the product properly. However, some of his examples were exaggerated. For instance, he made the door example seem like a bigger problem than it actually is. On top of that, he kept repeating many of the same points, which felt distracting to me.

One of the design failures that drives me crazy is oversimplification. The author touched on it, but I want to dive deeper into it. I think minimalism is one of the reasons for this. It has become a new aesthetic to avoid having many labels and other visual elements, which can lead to little to no signifiers. You can barely find symbols on some devices, let alone clear instructions. Because of this, I think simple designs do not necessarily equal effective designs. We need to move away from prioritizing the minimalist aesthetic and instead include understandable signifiers. It may not result in the simplest-looking design, but it would make the design more understandable.

I think the principles mentioned in the reading are incorporated directly into interactive media because having good design means creating a better interactive experience, as long as those principles are applied correctly. Feedback, for example, directly relates to interactivity because it makes the system seem like it is responding to the user’s input. It can be applied through audio, or through a visual change, which enhances the overall experience and satisfaction. But to me, discoverability is the most important one because if this principle is not applied correctly, then everything that comes after loses importance. If you never understand how the device is supposed to work, then why would you give attention to the other principles? This is especially important in interactive design, where mutual understanding is an important factor to consider.

 

Overview

Honestly I have no idea where this idea came from. I’ve been scrolling a lot on Pinterest, and I saw a lot of these kinds of images, and also my mom just found recently our old Magic 8 Ball, so I thought why not combine the two?

I just wanted to create something fun as well. I have been having some pretty bad days, and making this not super serious helped a lot with my mood, and I really enjoyed coming up with all the responses for the Magic Ball. I also made some of my friends try it out once it was ready and they also really enjoyed it.

Process

Originally, I really wanted to make it look very cool, and make it 3D, but I saw that I can only draw a sphere in a WebGL mode, so I just stayed with circles and a triangle. I had to resize them a lot so that the text won’t be tiny, it is not that big like this either, but much better than originally.

I ALSO wanted it to have some magical background, BUT the preload function was not working here either. I have no idea what I did wrong, but it just wouldn’t work at all, so in the end I just stayed with this background.

The Code + a LOT of problems

Now, even though the code is short, I had the most amount of problems with it so far. The first thing I did, even before writing a CSV file was to draw the main object, so the Magic ball. This was really easy and I had some fun even by adding some shade to it:

function draw() {
  background(220);

  //the structure of the ball, drawing a bunch of circles, a triangle and the shadow to make it look fancier 
  fill('grey')
  noStroke();
  ellipse(300, 530, 500, 120);
  fill('black');
  circle(width / 2, height / 2, 500)
  fill('white');
  circle(width / 2, height /2, 400)
  fill('black');
  circle(width/2, height/2, 300);
  fill('white');
  triangle(300, 420, 200, 220, 400, 220);

After creating this, I strated on the actually challenging part of the code. This is how the start of the code looks like now:

let question; //inputfield
let submitQuestion; //button
let responses = []; //csv of possible responses
let currentResponse = ""; //store current response on the screen

//async_await, the code waits until the full CSV file is fully loaded, and only then continues and creates the canvas and everything below
async function setup() {

//try and catch, because I had SO many errors with loading the CSV, and could not figure out where it went wrong
  try {
    responses = await loadStrings('responses.csv');
  console.log('Loaded responses:', responses);
  } catch (error) {
    console.error('could not load', error);
  }
  
  createCanvas(600, 600);

Well it didn’t look like this always. After the drawings, I created a CSV file in p5.js for all the responses, and when I was done I made a preload function before setup, so I could preload that CSV. BUT. For some reason, I have no idea why, the text just wouldn’t appear. I tried to figure it out with a console.log, and it turns out that it was for some reason returning an empty array. I tried everything to make it work, I quadruple checked the came of the file, that my browser was allowing it to read it, I changed the loadStrings function to loadTable, but it just didn’t work. So, after some meditation to calm myself down, I asked ChatGPT, what I should do. It suggested to try the things I already tried, but it also mentioned the try and catch as well. I did learn some C# back in high school, and I remembered it slightly, but I decided to search it up just in case and try it out after. Previously, when I was searching for answers among the p5.js references, I also found the async_await function, so I combined the two together, AND IT WORKED. I was so happy, I didn’t dare touch it anymore.

The reason why I know it worked after, and only after that is because while I was waiting for the Javascript fairy to solve my problem, I made a little question field and a button for submission. Since the Magic Ball needs a question for it to answer, and for the user to be able to actually interact with it, I made this, directly below the previous code:

 //Create an input field to ask a question
  question = createInput('');
  question.attribute('placeholder', 'Ask a question from the Magic Ball!');
  question.position(170, 5);
  question.size(150, 30);

  submitQuestion = createButton('GOO!');
  submitQuestion.position(330, 5);
  submitQuestion.size(50, 36);
  
  //when the button is pressed it calls the giveAnswer function
  submitQuestion.mousePressed(giveResponse);
}

// if checks if there is any user input, and if there is it goes through the CSV file and choses a random response
function giveResponse(){
  let userQuestion = question.value().trim();

  if (userQuestion.length > 0) {
  currentResponse = random(responses);
  } 
}

The giveResponse function works with a simple if. I am not exactly sure of this is the most elegant way to do this, but it worked so I accepted it. As the last step to give my text a few attributes I added this in the draw function:

  //the reponses in the triangle
  fill('black');
  textStyle(BOLDITALIC);
  textAlign(CENTER, CENTER);
  textSize(12);
  text(currentResponse, 220, 230, 160, 120);
}

The piece if code I am the most proud of, however remains that little try and catch part, just because of the absolute misery it gave me.

And finally, here is the full code:

let question; //inputfield
let submitQuestion; //button
let responses = []; //csv of possible responses
let currentResponse = ""; //store current response on the screen

//async_await, the code waits until the full CSV file is fully loaded, and only then continues and creates the canvas and everything below
async function setup() {

//try and catch, because I had SO many errors with loading the CSV, and could not figure out where it went wrong
  try {
    responses = await loadStrings('responses.csv');
  console.log('Loaded responses:', responses);
  } catch (error) {
    console.error('could not load', error);
  }
  
  createCanvas(600, 600);
 
  //Create an input field to ask a question
  question = createInput('');
  question.attribute('placeholder', 'Ask a question from the Magic Ball!');
  question.position(170, 5);
  question.size(150, 30);

  submitQuestion = createButton('GOO!');
  submitQuestion.position(330, 5);
  submitQuestion.size(50, 36);
  
  //when the button is pressed it calls the giveAnswer function
  submitQuestion.mousePressed(giveResponse);
}

// if checks if there is any user input, and if there is it goes through the CSV file and choses a random response
function giveResponse(){
  let userQuestion = question.value().trim();

  if (userQuestion.length > 0) {
  currentResponse = random(responses);
  } 
}

function draw() {
  background(220);

  //the structure of the ball, drawing a bunch of circles, a triangle and the shadow to make it look fancier 
  fill('grey')
  noStroke();
  ellipse(300, 530, 500, 120);
  fill('black');
  circle(width / 2, height / 2, 500)
  fill('white');
  circle(width / 2, height /2, 400)
  fill('black');
  circle(width/2, height/2, 300);
  fill('white');
  triangle(300, 420, 200, 220, 400, 220);

  //the reponses in the triangle
  fill('black');
  textStyle(BOLDITALIC);
  textAlign(CENTER, CENTER);
  textSize(12);
  text(currentResponse, 220, 230, 160, 120);
}

 

For the future

I feel like I learnt a lot from this assignment, for some reason even more than from any previous one. I feel like I know a little more about how I have more ways to start a certain problem, but also that I am able to ask AI for help without asking it to solve it for me. Even though it was hard, I am proud to have finished it. In the future, I would love to make a more refined ball as well, but non of the images were loading in the preload function, so I ended up drawing it myself.

Resources

I took these as base for the responses:
https://magic-8ball.com/magic-8-ball-answers/

Creating the button and the question field:
https://p5js.org/reference/p5/createInput

https://editor.p5js.org/Samizdat/sketches/eUsieMk6j

The async_await function, after the preload() was not working:

https://p5js.org/reference/p5/setup/

https://p5js.org/reference/p5/async_await/

Text style:

https://p5js.org/reference/p5/textStyle/

Some help to debug the problem:

I asked ChatGPT to help me figure out what the problem was, after the preload() function kept returning my array as empty, and it suggested the try and catch solution, so I did some research on that:

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

https://www.geeksforgeeks.org/javascript/javascript-errors-throw-and-try-to-catch/

The final code was written by me, the AI only helped in terms of suggetsing me this solution.

 

 

 

I was surprised at just how many parts of design I was not considering! The reading makes so many things a lot clearer. Logically, I know that machines can be difficult to use, and that there is a learning curve when it comes to them. But for so long, I had just dismissed difficult to work with machines as something humans just had to deal with. Professionals are more likely to understand how to use certain machines, and older people may not understand how to use newer technologies. That’s understandable, and feel like simple facts of life, some people are just not capable of understanding machines. But of course, that shouldn’t be true! Machines should be designed with user experience in mind, engineers should not be dismissing people’s confusion.

I am curious about what the line is though. At what point should humans understand machines and devices. If we follow this logic, should I not know how to fix my devices if they break? Does it not make sense for me to have the tools available in order to not be reliant on anybody else when it comes to my own devices? Should I leave repairs such as this to the professionals? There’s just a ton to consider when it comes to how much we do and should understand about devices.

The reading had me thinking about certain designs I may struggle to use or find myself continuously frustrated with, and something that came to mind was sinks. I always felt that sinks are, for some reason, the one thing hotel bathrooms cannot get right (hotel bathrooms as a whole are designed badly, but I am specifically referring to sinks now). Which is crazy to me, considering there are so many sinks out there that work perfectly fine. What some hotels do however is they decide to make their sink have a fancier design. This usually means changing the sink’s faucet to look more fancy and ‘clean’, or by changing the bowl that collects the water (see the picture below). This ends up creating a few problems, the one I am used to encountering is when a sink’s faucet is too far back for the bowl. So the water is only falling in the very back of the bowl, and you have to stretch your arms over the unreasonably big bowl that serves no purpose other than to block your way. Additionally, some sinks have the bowl be on the table rather than embedded into it. This not only makes the sink uncomfortable to use, but it also puts the soap at an awkward place. Now you can’t place the soap near where the faucet is, it has to be put at the side, which means anytime you need to use it, you will naturally be getting water onto other part of the table.

I don’t think the design for sinks needs to be that crazy. If hotels really did want sinks to look fancy, then they should just change the countertop and maybe the color of the faucet, but leave the actual sink alone. Any designs to improve on the look only harms the design.

When it comes to interactive media, the main thing to think about is obviously, the interactions with technology, so it makes sense to focus on the connection between humans and how to make technology more accessible to them. If you want to create something that people can interact with, they need to know exactly how to interact with it. First of all, human-centered design (HCD) should be a priority, if the entire point is for people to interact with it, then we need to keep the people in question in mind. Additionally, if people are not able to figure out the design, then that ruins the experience of using the design. No matter how cool it is, if people deems it too annoying to try out, they will be less likely to care for it. A good way to do this is by introducing signifiers to designs, just to make the overall experience of using them much simpler. All other principles he mentions are also important in the general sense, things like affordances, mapping, signifiers, feedback, etc. all should just be a normal part of the design process, especially when it comes to interactive media.

Reading Reflection

This is the first time I have came across literature on design, and it is refreshing to read about design principles which ground artistic choices in a project. I believe technology itself is both a mode and barrier to communication; a barrier because human connection is supposed to be real, felt, and not interrupted, and a mode because of its ability to reach so many across the world just through sophisticated internet systems.  Norman discusses this as well with how machines are rule based and rigid, but humans are flexible and develop relationships over understanding. The principles of discoverability and understanding are great design principles to begin with. Especially with code, I believe a well-commented code can actually get across the developer’s thinking process, and also makes the codebase a place for others to collaborate. I believe a well-commented code adds up to the discoverability of the code, such as what feature attributes to what code line specifically. I think this is a major part where it co-relates to interactive media.

I also find it interesting how Human Centered Design is called a philosophy and not an area of focus. I think this argument isn’t developed enough in the reading, as the reading refers to this as a philosophy but the rest are referred to as areas of focus.

Something that drives me crazy is delivery riders trying to find buildings on campus. Almost every time I order food the rider calls me because they are lost somewhere on the Highline. All the residences look the same from outside and the names are not visible from the road. There are basically no signifiers for them, so they go in circles until someone comes down to get the food. A map at each entrance (a stair leading from the ground floor or every road connection to the high line) that is laid out the same way the buildings actually are so the map and the real space match. It is such a small thing but it wastes time for both the rider and the student, and by Norman’s logic it is not the rider’s fault at all, it is the design.

For interactive media, feedback is the principle I keep coming back to. If a user clicks on something in a sketch and nothing happens right away, they just keep clicking, same as people pressing the elevator button over and over. A color change or a small sound is enough to tell them the program got their input. The user should also know what to click or press without me explaining it; a button has to look like a button. Mapping is the easy one in a sketch since moving the mouse up can move something up on the screen and nobody has to think twice. The system image part stayed with me the most though. The user can never ask me what I meant while they are using my project. Whatever is on the screen is all they get.

Coding Assignment

I decided to make a room simulation by using the data of the CO2 and temperature from an office room. I used the Occupancy Detection dataset from Kaggle, where they taken in different motion readings from the day including the CO2, temperature, and timing of the day. I map a graph directly below the simulated “room” to give us an idea of the CO2 levels of the room as the time of the day changes. I have also made a window which changes color as the time of the day changes, and then the color of the room changes as CO2 levels get higher or lower (Red for high CO2 and blue for lower).

Code I am proud of

The part I’m most proud of is getting the room to change color with the CO2 level. Each frame I take the current minute’s reading and use map() to turn it into a number between 0 and 1, where 400 ppm (roughly outdoor air) is 0 and 1400 ppm is 1. I wrap it in constrain() so a reading above 1400 can’t push the value past 1 and break the color. That number then goes into lerpColor(), which blends between a calm blue and a warm red, so the room slowly shifts from blue to red as the air gets stuffier over the day.

What I like about this is that one line of math carries the whole idea of the project. You don’t need to read the numbers to know the air is getting worse, you can just see the room turning red. It also made the lag really visible. People arrive around 7:36 but the room doesn’t turn noticeably red until after 9, because CO2 takes time to build up.

let r = rows[idx];

  // ROOM: floor color follows CO2 (blue = fresh, red = stuffy)
  let t = constrain(map(r.co2, 400, 1400, 0, 1), 0, 1);
  fill(lerpColor(color(120, 180, 230), color(230, 90, 80), t));
  stroke(60);
  strokeWeight(4);
  rect(100, 40, 600, 260);

How this was made

I started with importing the datatest.txt and cleaning it. There were a few errors with empty lines which I got rid off. To be particular, there was one less column header compared to the number of columns in the file, and when I was parsing each line to get each column value into the array, I ran into an error. There was an empty row, so I had to look for such things in the dataset too. Then I looked at the names of the headers, and assigned variables to each one.

Since the headers were shifted by one, I couldn’t rely on the names, so I read each value by its column number instead. I only kept the rows from February 3 because it’s a full day, midnight to midnight, which gave me 1440 readings, one for every minute. When I printed the first line of data, I noticed the file starts at 14:19 on February 2, so that day was incomplete. The file also stops partway through February 4, which left February 3 as the only full day, so I kept just that one. I saved each minute as an object with its time, temperature, light, CO2 and occupancy so the rest of the code would be easier to read.

After that I built the visual in layers. First the room, with the floor color changing from blue to red as CO2 goes up. Then the window, which gets brighter with the light reading, and two people who show up at the desks when the room is occupied. Under the room I drew a line graph of CO2 for the whole day, with a dashed line at 800 ppm since that’s around where ventilation usually kicks in. Last, I added the timeline so the day plays on its own, and you can hover over the canvas to scrub to any minute.

Embedded Sketch

Reflection and Improvement

I would want to make this simulation for dataset2 too, which was in the kaggle dataset. Those readings were taken with a closed room and therefore CO2 builds faster compared to this where it is slower. I would also love a 3d model of the room with actual sunlight changing as the day changes and the sunlight coming in from the window. I would probably make a comparison between the both.

 

A few lines into this paper and all I could think of were the Campus Center doors. They are my “Norman doors” (1): always knocking me over to the side or even shutting on me when I pull the handle (of these supposedly automatic doors). I am 3 semesters in, and I have seemingly not understood how to use these doors despite their outrageous yellow signs. I used to think this was just me being scatterbrained. However, Norman’s opening chapter somehow redirected my self-blame back onto their design. By claiming, “I push doors that are meant to be pulled, pull doors that should be pushed, and walk into doors that neither pull nor push, but slide” (1), Norman helped me feel a strange kind of relief. What I did not expect was how technical the rest of the chapter would get about why doors fail. I understood his viewpoint that everyday objects are supposed to be simple to understand and mundane to use. For instance, he notes, “With complex devices, discoverability and understanding require the aid of manuals or personal instruction. We accept this if the device is indeed complex, but it should be unnecessary for simple things” (2).

He develops a fuller framework to make his case (affordances, signifiers, mapping, feedback, and conceptual models), all in service of what he calls “human-centered design” (5): the idea that design should accommodate people rather than the reverse. While I can relate affordances and signifiers to where the Campus doors fail, I want to push back on how tidy Norman makes this framework sound. His framework is almost too persuasive. It retroactively explains every ‘badly designed’ object I have ever used. I keep wondering whether this is the sign of a genuinely good theory, or just a very flexible vocabulary that can be draped over any complaint. His refrigerator story, for example, proves my point. While he seems to be right that the two controls suggest a false mental model, he also admits that even knowing the correct model did not let him operate the fridge properly. This is because the design gave him no way to act on that knowledge. This is the part I find more interesting. Correct understanding and actual usability can come apart entirely. I personally do not think Norman fully resolves that gap. He just treats it as another design failure to be fixed with better mapping.

Nonetheless, I believe that what he discusses is important. When it comes to my work (my generated artworks up to week 3), he made me realize that, so far, I have not been using signifiers. As a result, the user might not discover the full function of the interactivity I tried to incorporate. Without my written documentation, a user might not know that, for example, my first p5 sketch allowed for a change in character as the mouse is dragged. From now on, I will keep this in mind and try to put this into practice as I progress in the course.