Don Norman’s first chapter, “The Design of Everyday Things,” sheds light on the complicated world of design and its tremendous impact on our daily lives. As I reflect on the reading, several key points and questions come to mind.

The importance of user-centered design is emphasized by Norman. He contends that excellent design should prioritize the wants and expectations of users, which makes perfect sense. However, this raises a question: How often do designers genuinely consider the end users when creating products? This might be a huge difficulty in a world where firms may prioritize money or aesthetics over usability.

The example of the refrigerator’s temperature controls struck a chord with me. It made me think about how frequently I’ve faced similar problems with common things, leaving me upset due to a lack of clear design. This experience has made me more appreciative of well-designed products and less forgiving of those who prioritize aesthetics over usability.

Norman’s idea of conceptual models and their misalignment with the system image is compelling. Users clearly form mental models of how things work based on their interactions and experiences. However, usability challenges arise when these models clash with the actual workings of a product. This approach has made me realize how important it is for designers and users to communicate clearly and consistently.

In terms of bias, while Norman appears to advocate for user-centered design, it does not appear to be inherently biased. Instead, it appears as a call for a more balanced and thoughtful approach to design.

676 Wonder Hues

For this project, I needed to use data visualization, but instead of portraying it in a graph or a static image, I was striving to make it look dynamic while also giving agency to people to have a personalized experience. To start with, I began looking for different sets of data, but none of them were as customizable to each person as much as their names. However, there are millions of names, and it would not be possible to link all those names in a CSV file. Hence, there was an alternative way, getting a smaller sample of names and counting the number of names associated with each alphabet. To begin, I was able to get 7000 different male and female names, then using Excel I counted the number of names that starts with each alphabet. Next, I imported the Excel to my project in p5. After hours of brainstorming , I was able to modify a previous code of mine to give different visual illusions. By using only the initial of each name, I am only limited to 26 different combinations. However, by using the person’s first and last name initials, I am able to bump it to 676 different visual illustrations and hence the project name “676 wonder hues”.

Below are a few patterns to different initials.

Initials: “PM”

Initials: “DS”

Part of the code

function setup() {
  createCanvas(600, 600);

  let alphabet = names.getColumn("alphabet");
  let frequency = names.getColumn("freq");

  sampleName = "P,M";

  let splitString = split(sampleName, ",");

  alpha1 = splitString[0];
  alpha2 = splitString[1];

}

function getValue(targetAlphabet) {
  let alphabet = names.getColumn("alphabet");
  let frequency = names.getColumn("freq");
  let rowNum = names.getRowCount();

  for (let i = 0; i < rowNum; i++) {
    if (alphabet[i] === targetAlphabet) {
      return frequency[i];
    }
  }
}

Reflections and improvement

In the future I want to add a section on the screen for the user to input their initials.I also look forward to add more color combinations to increase the customizability of the visual illustration.

 

 

 

In my opinion, Donald A. Norman’s insights in the first chapter of “The Design of Everyday Things” are incredibly relevant and thought-provoking. He raises a crucial point about the role of design in our daily lives and the impact it has on our experiences.

Norman’s concept of “the psychopathology of everyday things” is something we can all relate to. How often have we struggled with a poorly designed door handle or a confusing remote control? It can be incredibly frustrating, and Norman rightly shifts the blame from the users to the design itself. The idea that design should prioritize the needs and convenience of regular people, rather than serving as a showcase for designers’ creativity, resonates with me. Good design, in my view, should indeed be about simplifying and enhancing our lives, not adding unnecessary complexity. I appreciate Norman’s emphasis on Human-Centered Design, which underscores the importance of considering how people actually use things in their daily lives. It’s a reminder that designers should be creating products and interfaces that make our lives easier, not more complicated.

Moreover, I also agree with the author about how design should be approached as a deliberate subject rather than relying solely on intuition. It’s not a straightforward task, especially when considering the diverse ways people across the globe understand things based on their cultural and environmental contexts. What may seem logical in one culture or region may not be the same in another. For instance, a common design for doors in America might not apply universally in a place like Egypt. This highlights the need for a universal design approach that transcends individual logic and cultural differences. Designers must strive to create solutions that can be understood and used effectively by a broad spectrum of users, acknowledging that their own logic may not align with the users’ perspectives and expectations.

Ultimately, Norman’s message serves as a valuable reminder that when things are hard to use, it’s not our fault. It’s a call to action for designers to prioritize usability and user experience in their creations, and I wholeheartedly agree with that sentiment.

In Chapter 1, I was interested in how the author discusses the dual nature of technology, highlighting how it can simultaneously make life easier and more enjoyable while also introducing added complexities and frustrations. They use the example of the wristwatch to illustrate how technological advances have led to more functions and features in devices, which can pose design challenges. The author envisions a future where various devices, such as phones and watches, might merge into one unit with flexible displays and advanced capabilities.

The central argument of the text revolves around the paradox of technology: it offers increased benefits but also increases the difficulty of use. This paradox presents a significant challenge for designers who must balance the desire for more functionality with the need for user-friendliness and simplicity.

In my opinion, the author raises valid points about the challenges posed by technology’s ever-increasing complexity. It’s true that as devices become more advanced and multifunctional, there is a risk of overwhelming users with features and controls. This can lead to frustration and, in some cases, users opting not to use certain devices altogether, as the text suggests with the example of people replacing watches with cell phones. Moreover, the author’s mention of the potential merger of devices like phones and watches into one unit with flexible displays and advanced capabilities is already becoming a reality with the development of wearable technology. For instance, smartwatches now integrate features like messaging, fitness tracking, and even contactless payments. While this convergence provides convenience, it also requires designers to carefully consider how to present these functions in an accessible and user-friendly manner, avoiding overwhelming users with too much information or complexity.

The author’s suggestion of agreed-upon standards for controls and interfaces is a practical approach to mitigating the complexity issue. Standardization can indeed simplify the user experience by ensuring consistency across devices and reducing the learning curve for users. However, as the author acknowledges, reaching such agreements in a rapidly evolving technological landscape can be challenging.

In conclusion, I agree with the text’s assertion that technology presents a paradox: it can both simplify and complicate our lives. Designers face the ongoing challenge of striking the right balance between functionality and usability to ensure that technological advances genuinely enhance our lives without causing unnecessary frustration.

I wanted to make artwork using a Spanish poem I liked. It is called “La Mariposa”.

La Mariposa
“Si yo fuera otra cosa, sería mariposa” (If I were something else, I would be a butterfly”)
Sin dirección salvo la brisa (With no direction but the breeze)
Flotaría entre belleza y belleza (I would float among beauty after beauty)
Tocando el cielo y la fresa (Touching the sky and the strawberry)
Una vida que sale como risa (A life that emerges like laughter)
“Si yo fuera otra cosa, sería mariposa” (“If I were something else, I would be a butterfly”)
Doradas del sol mis alas (Golden are my wings in the sun)

This poem evokes a sense of freedom, beauty, and simplicity. The speaker imagines the carefree life of a butterfly, fluttering from one beautiful thing to another, symbolizing a desire for a life unburdened by worries and constraints. I also wanted to highlight the fleeting, delicate, and ephemeral nature of life, much like a butterfly’s existence in this project.

function mousePressed() {
  // Display the next poem line when the mouse is pressed
  currentLineIndex = (currentLineIndex + 1) % poemLines.length;
   clear();
  // Display the current poem line
  text(poemLines[currentLineIndex], width / 2, height / 2);
}

The biggest challenge was that I could not clear the remaining lines of the poem after I clicked the mouse. So, the lines did not renew, it kept writing new lines above the remaining line. After I learned the “Clear” function, I could clear the canvas and display the next line of the poem each time I clicked the mouse, renewing the poem text.

Furthermore, I tried to make the butterfly move around the canvas more realistically.

  // Calculate the angle for butterfly rotation based on velocity
  butterflyAngle = atan2(butterflyVelocityY, butterflyVelocityX) + PI / 2;

  // Apply the angle and display the butterfly
  push();
  translate(butterflyX, butterflyY);
  rotate(butterflyAngle);
  imageMode(CENTER);
  image(butterflyImage, 0, 0, butterflySize, butterflySize);
  pop();

  // Update butterfly position
  butterflyX += butterflyVelocityX;
  butterflyY += butterflyVelocityY;

  // Wrap the butterfly around the canvas edges
  if (butterflyX > width) {
    butterflyX = 0;
  } else if (butterflyX < 0) {
    butterflyX = width;
  }
  if (butterflyY > height) {
    butterflyY = 0;
  } else if (butterflyY < 0) {
    butterflyY = height;
  }

  // Add a flapping wing animation
  butterflySize = 100 + sin(frameCount * wingFlapSpeed) * 10; // Adjust wing flap speed
}

The butterfly image is rotated based on its velocity direction to make it more realistic. Also, a wing-flapping animation is added by changing the butterfly’s size over time. This gives the appearance of the wings flapping. To make the butterfly rotate slowly, I adjusted the wingFlapSpeed variable to control the speed of wing flapping.

Next time, it would be better to mix data visualization and generative text output together rather than to use images in the background.

In the first chapter of “The Design of Everyday Things” by Donald A. Norman, he talks about how the design of everyday things can sometimes make us feel like we’re going crazy. It’s interesting how he points out that it’s not us who are the problem but the things we use. He calls this “the psychopathology of everyday things,” which is a fancy way of saying that sometimes everyday objects are just designed poorly.

I totally agree with Norman when he says that good design should be all about making things easy for us, regular people. It shouldn’t be about designers showing off how clever they are. Who wants to struggle with a door handle or a confusing remote control? It’s frustrating!

One big takeaway from the chapter is that designers need to think about how people actually use things in their daily lives. They can’t just dream up fancy ideas without considering how those ideas will work in the real world. Design should be all about making our lives easier and more convenient, not more complicated. This is emphasized in this passage where he mentions Human-Centered Design, that essentially takes into consideration the user. This type of design is made for the people by the people, and it enhances the lives of its users and produces positive results.

So, in a nutshell, I think Norman’s point about designing things for the way people are, not the way designers wish they were, is spot on. Good design is all about making our lives simpler, not adding unnecessary complexity. It’s a reminder that when things are hard to use, it’s not our fault – it’s bad design. And that’s something we can all relate to!

Regarding the Bauhaus: “The basic teaching error of the academy was that of directing its attention towards genius rather than the average.” 

I am a naturally thoughtless person in that I lack situational awareness and forget to consider other people. My entire life is a Hanlon’s razor situation. People would call me selfish and I used to brush it off as thoughtlessness. It took my entire life to figure out that thoughtlessness is selfishness. That’s why design occupies a place in my head on par with Bob Dylan, Better Call Saul, and Jane Birkin–my gods, my idols. Design acknowledges that Average is the mother and judge of genius. Designers force thoughtfulness and direct attention towards the Average. Design is total empathy. Design is everything that I’m not. It’s all I want to be.

Your feelings are not arbitrary. There is a reason things are the way they are. I spent my entire teenage life working in restaurants. When I was fourteen, I realized for the first time that I had taken restaurants for granted my whole life. When you serve someone food, they don’t think about who designed the menu, about who picked the chair they’re sitting in, about who drew the art on the walls, about who cooked the food, chopped the spinach, weighed the beef, or wrapped the silverware. In short, they don’t think about anything. They only know what they feel. They don’t ask why. Most people go through all of life like this.

It only takes a little bit of paying attention to realize how malleable life is. To realize it’s really all up to you. Goffredo is the head of our design department. He told us a story related to him from a friend. The friend had workers come over to fix and repaint his living room. But he had a grand piano that was too heavy to move, so he wrapped it in paper. On the first day, the workers arrived and set all their tools on the piano. On the second day, the friend raised the piano lid and re-wrapped it, making it impossible for the workers to set their supplies on it. This was a matter of design: anticipating how people would act in a given setting, and arranging said setting to direct their natural movements. It’s endlessly fascinating.

The reading said poor design results in “frustration.” And it’s true. Life is a series of mini-frustrations. There are always too many things to carry. I take solace in the knowledge that even celebrities have too many things to  carry. See below:

Good design is a way to mitigate this. You’ll never be able to stop having big frustrations. But eliminate the small ones as much as you can.

For this week’s assignment, I had to choose between creating data visualizations or generating text output. I decided to work on data visualization because I thought it was interesting to be able to represent data in any way I choose. My first challenge was finding the right dataset to work with. There were so many options, and I needed to make sure the data could be effectively represented. Eventually, I settled on using weather data from the United States, which I found interesting because it included dates spanning over two years, along with average, maximum, and minimum temperatures recorded each day, as well as historical record temperatures.

To visualize this data, I created a simple line graph. The graph had a title, a legend, and labels to represent the average maximum and minimum temperatures recorded over the years. The graph displayed two distinct lines, one in purple for minimum temperatures and one in pink for maximum temperatures. Below, you can see a sketch of my graph:

I faced several challenges while working on this project. First, I had to figure out how to smooth out the curves in the graph to make it look more polished. Without this adjustment, the graph had sharp and jagged edges that didn’t look right.

Another issue I encountered was related to the coloring of the graph lines. I initially set specific colors for the stroke lines but didn’t realize that the beginShape and endShape functions had built-in fill settings, causing the graph to be filled with black, which didn’t go well with the sharp edges.

Additionally, I struggled with setting the margins correctly. Initially, I used regular height and width functions and assumed the graph would fit within those parameters, but it extended beyond the canvas boundaries. By setting a standard margin value and subtracting it from the height and width, I was able to ensure the graph was drawn appropriately and to the scale of the canvas.

The part of my code that I’m most proud of is the function I created to draw the temperature lines. This function allowed me to input values from the CSV file and determine whether it was for maximum or minimum temperatures. Below is an insert of that code.

function drawTemperatureLine(temperatures, tempMin, tempMax, lineColor) {
  noFill();
  stroke(lineColor);
  strokeWeight(2);
  beginShape();
  
  // Loop through each data point (temperature)
  for (let i = 0; i < temperatures.length; i++) {
    // Map the data point's position to the canvas coordinates
    let x = map(i, 0, temperatures.length - 1, margin, width - margin);
    let y = map(temperatures[i], tempMin, tempMax, height - margin, margin);
    
    // Add a curve vertex at the mapped position
    curveVertex(x, y);
  }
  endShape();
}

I separated most of my code into functions. This code is responsible for drawing the temperature lines and looping through each data point in the csv file and mapping this point onto the canvas. This function is then called inside of the drawLineGraph function, that then draws the entire graph that is inclusive of labels, legend, and titles.

Overall, this project was a relatively simple generative art piece in terms of design, but it was also the most challenging one I’ve worked on. I had to apply a lot of theoretical knowledge and do some research to overcome various obstacles. For future improvements, I would like to create separate line graphs for each dataset or column. I also want to represent the highest and lowest record temperatures for each day and add interactivity so that when you hover over the lines, the corresponding date and temperature information appear. This assignment was both exciting and challenging, and it truly tested my Interactive Media skills.

 

The first chapter of “Design of Everyday Things” emphasizes the importance of good design, discoverability, and understanding in creating user-friendly experiences. These key points have significant implications for computer programmers and designers, shaping their approach towards creating technology that aligns with human needs and behaviors.

One of the primary implications is the adoption of a user-centered design approach. This means placing the needs, capabilities, and behaviors of end-users at the forefront of the design process. Understanding user perspectives and involving them in the design feedback loop becomes crucial to ensure that the final product meets their expectations and requirements.

Modern technology often involves complex systems and devices. Computer programmers and designers should strive to simplify this complexity to make products and interfaces more intuitive and user-friendly. By eliminating unnecessary features and controls and focusing on providing clear signifiers (indicators of how to use an object) and instructions, they can create interfaces that match users’ mental models and reduce the learning curve associated with technology.

Discoverability, the ability for users to quickly understand what actions are possible and how to perform them, is a key aspect of effective design. Computer programmers and designers should prioritize creating intuitive interfaces with clear feedback mechanisms. Visual cues, affordances (perceived functionalities of an object), and informative feedback can guide users in their interactions and minimize confusion or frustration.

Acknowledging the role of emotions in user experiences is another important implication for computer programmers and designers. Beyond functionality, they should consider the emotional impact of their designs. By focusing on aesthetics, providing meaningful feedback, personalizing interactions, and addressing user desires and aspirations, they can create positive and enjoyable experiences that go beyond basic usability.

The book emphasizes the need to shift the focus from making humans adapt to machines to designing systems where machines serve the needs of humans. Computer programmers and designers should understand how humans naturally interact with technology and create interfaces and interactions that align with their cognitive abilities and behaviors. By considering the human element in human-machine interaction, they can create more intuitive and efficient systems.

Computer programmers and designers should also apply fundamental interaction design principles. Affordances, signifiers, constraints (limitations that guide usage), mappings (relationship between controls and their effects), and conceptual models (users’ understanding of how a system works) provide guidelines for creating effective and usable interfaces. By incorporating these principles, they can design interfaces and interactions that are intuitive, reducing the cognitive load on users and enhancing their overall experience.

Concept

For this assignment, my inspiration came from Khaleeqa Garrett’s captivating work on her third assignment, specifically FlowFields. I invested time in studying her code to comprehend her approach and remix it to create something unique. Upon reviewing the prompt, I was initially uncertain about which data to visualize and how to do it. Eventually, I settled on using statistics from the music industry, focusing on three of my favorite rappers: Kendrick Lamar, J. Cole, and Drake. I gathered data from Google Trends and utilized it as parameters for Khaleeqa Garrett’s code.

During my initial attempt, the output looked nothing like my envisioned result. I only observed small dots clustered in the upper left corner of the canvas. It dawned on me that the range of values for the number of searches was limited, prompting me to employ the map() function to expand the range and cover the entire canvas.

Below, you can see some of the pieces I created by adjusting the colors representing the different artists.

Highlight of Code

The central modification I made to the existing code involved parsing data from the CSV file and linking it to the Point class. I utilized the hour component of the time for the x-coordinate of the particles and the minute component for the y-coordinate. The numerical value at the time was employed to manipulate the noiseScale within the Point class.

// goes over all entries and uses hours as x coordinate, minutes as y coordinate,
  // and the number of searches as an argument for the noiseScale
  for (let i = 0; i < artistes.getRowCount(); i++) {
    
    // time is split into hour (mapped from 0 - 24 to 0 - width) and minute
    // (mapped from 0 - 59 to 0 - height)
    particles[0].push(new Point(map(split(time[i], ':')[0], 0, 24, 0 ,width), 
                      map(split(time[i], ':')[1], 0, 59, 0, height), kendrick_lamar[i]));
    particles[1].push(new Point(map(split(time[i], ':')[0], 0, 24, 0 ,width), 
                      map(split(time[i], ':')[1], 0, 59, 0, height), j_cole[i]));
    particles[2].push(new Point(map(split(time[i], ':')[0], 0, 24, 0 ,width), 
                      map(split(time[i], ':')[1], 0, 59, 0, height), drake[i]));
    
  }

Additionally, I introduced a slider that influences how the particles move by adjusting the noiseScale within the Point class. This adds an extra layer of interactivity beyond mouse clicks.

// updating noiseScale based on value of slider
    this.noiseScale = slider.value()/map(sin(this.noiseScaleArg), -1, 1, 1, 2);

Reflection and Ideas for Future Work

I consider this piece one of my best creations in this course thus far. For future projects, I aim to enhance the interpretability of my work. Despite using data for this piece, I find it challenging to establish a direct relationship between the numbers and the data inputted into the program.