This chapter was really straightforward, and I liked how Norman explains that technology and psychology should act in interplay. I totally agree with the author, as he points out ‘big’ problems that are common for everybody. After reading this chapter, I came to the conclusion that many designers, engineers, and other people who create objects for our everyday use, sometimes forget about the importance of people. Specifically, they do not care that people are the key actors in the process of interaction with technology/objects. There are numerous examples of how I could not understand how something works, where to find information, etc. This proves a point that understanding human psychology is therefore essential to be able to produce the best products that are suitable for people.

Even though every example used in this chapter was clear, I feel that Norman looks at products that do not cause harm: a freezer, a sink, a door, etc. Only once, in the example of a wall that prevents people from falling down the stair shaft, he suggests something that is an example of a design used for humans’ well-being. I believe that HCD is a great way to ensure people’s safety. For instance, the instructions for emergency situations in case of a fire or in the cabin of the airplane. The instructions must be extremely understandable for people in general, and especially for those who cannot see well or are colorblind. But I have never seen those instructions made appropriate for this kind of audience.

Creative Reading Reflection – The Design of Everyday Things, The Psychopathology of Everyday Things:

Imagine trying to open a door, use a smartphone or operate a microwave and it’s just frustratingly confusing. That’s what the text talks about when it mentions “poor design.” Poorly designed everyday objects can lead to inconvenience, annoyance, and even accidents.

The reason behind this frustration is that many designers, whether they are industrial designers or interaction designers, often overlook a critical aspect of their work: understanding the people who will use their products. They might focus too much on making things look sleek or fancy without considering how users will interact with them.

The text also mentions that even simple things like stoves or washing machines can be overly complex, with too many buttons and settings. It’s like trying to pilot a spaceship when you just want to make some toast. These are instances where designers should prioritize simplicity and make sure that their products don’t overwhelm users with unnecessary features.

  let lyric_lines = []; 

  
  // loading the CSV file that has the coldplay lyrics
  function preload() {
  lines = loadStrings("coldplay_lyrics.csv");
  photo = loadImage("coldplaymeme.jpeg");
  
}
  // set up function to set up the canvas 
  // text size and position, and if it loops or not
  function setup() {
  createCanvas(300, 300);
  textSize(14);
  textAlign(LEFT, TOP);
  noLoop();
}

  // function to generate the lyrics
  function generateLyricPoem() { 
  let lyricPoem = " ";

  // randomly select lines from the CSV
  // file that has coldplay lyrics
  let coldplay_line1 = random(lines);
  let coldplay_line2 = random(lines);
  let coldplay_line3 = random(lines);

  // construct the poem with randomly
  // selected lines 
  lyricPoem = lyricPoem + coldplay_line1 + "\n";
  lyricPoem = lyricPoem + coldplay_line2 + "\n";
  lyricPoem = lyricPoem + coldplay_line3;

  // return statement to return the lyrics
  return lyricPoem; 
}

  // draw function to draw the lyrics + star background
  function draw() {
    
  background(0); // background color to black
  
  drawStars(100); // the number of stars
    
  // new variable of generateLyricPoem
  let drawlyric = generateLyricPoem(); 
  
  // filling, displaying and positioning + (x,y,h,w)
  // the text contain in drawlyric 
  fill(255);
  text(drawlyric, 20, 20, 360, 100);  
    
  // checks if the image has been loaded
  if (photo) { 
  image(photo, 85, 120,150,150);
  }
  
}

  function drawStars(howManyStars) {
  noStroke(); // no outline for stars
  fill(255); // sets color to white

  for (let i = 0; i < howManyStars; i++) {
    let x = random(width); // random x-coordinate
    let y = random(height); // random y-coordinate
    let size = random(1, 5); // random star size
    ellipse(x, y, size, size); // draw a star
  }
}


  // drawing a new canvas to generate 
  // a new poem on mouse click
  function mouseClicked() {
  draw(); 
}

Concept: Converting Names into Visual Forms

The main idea behind this project was to create imagery by using the names of objects to represent their form.  I wanted to implement water as I felt that I could create a cool wave pattern by moving the letters. The final result was this sketch:

Process

I began by sketching out different ideas on combining text and imagery:

In the end, I ended up liking this idea the most:

To implement this, I looked up functions that would allow me to manipulate texts as objects. I was able to find the textToPoints function, which allows me to convert text to an array of points that make up the shape of the text. With this array of points, I could use the beginShape function to create a closed shape of the text. Then, by altering the position of the points, I could manipulate the shape of the text.

However, I found that converting the shape of the text when converting the entire string at once didn’t give me a clean shape. So, I decided to split the text into individual characters, and converting each of those into a separate shape.

After adding some rippling effect and moving each letter like a wave, I ended up with the following result:

Since I went with an object-oriented approach, I could just replicate the water across a grid to generate a wave of water. I repeated the same steps to create a moon and added points that twinkled to add stars in the background.

Code Highlights

My favorite part of the code was creating the rippling and wave effect. It was so simple, but I believe it added amazing detail to the sketch.

//make the water ripple
let rippleFactor = map(this.textSize, MINFONTSIZE, MAXFONTSIZE, 0, 2);
y += noise(frameCount * 0.02 + j * 0.02) * rippleFactor;

//make the water wave
let waveHeight = map(this.textSize, MINFONTSIZE, MAXFONTSIZE, 1, 2);
y += waveHeight * sin(frameCount * 0.02 * (i + 1) + this.offset);

I added some noise and used the frameCount variable to make the letters move in a wave pattern. The crucial part was to make these changes when drawing, since I did not want to modify the points directly, otherwise I would need to reset their position. If I didn’t do that, the movement would add up and move the letters out of place. So, this was a simple way of getting this effect.

Reflection

For this project, I feel like I really pushed my creativity. Although my previous projects might have been more technical, I really enjoyed the planning and ideation of this project.

Sources

Reference | p5.js

Font used: Super Funky Font | dafont.com

In this reading, the author discusses the psychopathology of everyday objects. Essentially, the author argues that there are several factors determining the user experience about everyday objects, and that the design for everyday objects is hard and complex because it also involves many parties, such as designers, users, and manufacturers. With these factors, the author introduces the concept of Human-Centered Design (HCD).

One prominent feature of HCD is that it focuses on both the human psychology and the functionality of the object. Therefore, the design for everyday objects should also comply with these two principles. However, to add to the HCD, especially in modern times, I think it is also important to point out the constant evolving of our psychopathology of everyday objects. Our perceptions about affordances, signifier, and so on are constantly challenged and changing with the emergence of new designs and new design regimes. For example, the recent transformation to flat design in almost every field of digital design might indicate our less desire or need for digital designs to completely represent the daily objects in their most realistic form. On the contrary, we realized that we were able to understand the minimalistic flat design and found it aesthetically appealing. Maybe, one day, the example of the unworkable pot the author presented at the beginning would become the mainstream of design when people find it interesting, appealing, or even practical.

In a nutshell, in the digital era, everything is evolving at a rapid pace, so is our psychology for design. Except for the challenges the HCD faces as the author presented, designers must also realize or even foresee the future of our psychopathology of everyday objects and make movements towards our needs not only in the moment, but also in the foreseeable future.

Concept: Simulating Brownian Motion

In this project of data visualization, I chose the data set about the wind directions at Hong Kong International Airport (HKIA) from 1997-2023. It is interesting from two aspects. Firstly, the airport and wind directions have a close relationship. The wind directions impact the operation of the airport. Secondly, the wind directions are random to some extent. It is a natural and random phenomenon even though it could be observed or predicted. This leads to another concept called Brownian Motion, describing the random motions of particles in fluids. This makes me think what it looks like if the winds are particles moving in the air. Therefore, I decided to simulate the Brownian Motion with the data.

Highlight of the code

Firstly, I extracted the wind direction data from the CSV file and store them in the array call angles[]

for (let rowNum = 0; rowNum < strings.length; rowNum++) {
    let angle = split(strings[rowNum], ",")[3];
    if (angle != "***") { // This skips the unavailable data in the file
      angles.push(angle);
    }
  }

Then, each point is a vector, and it adds with another vector which has the angle from the angles array. This simulates the movement of particles, which in this case following the wind directions

if (
    // if the point reaches the boundaries, it will start from a random place within 
    // the canavas
    startPoint.x >= width ||
    startPoint.y >= height ||
    startPoint.x < 0 ||
    startPoint.y < 0
  ) {
    startPoint = createVector(random(20, width), random(20, height));
  } else {
    startPoint.add(createVector(sin(angles[i]), cos(angles[i]))); // this makes the 
    // point turn according to the angles in the file
  }

Note that because at one location the overall direction of winds is consistent, the points will move out of the canvas if not constrained. Therefore, I wrote in the code that if the point went beyond the boundaries, it should move to a random place within the canvas and continue drawing.

Reflections and future improvements

For this data visulaztion project, I tried other ideas like particle fields or mapping, but eventually I think that stimulating the Brownian Motion with the wind direction data is much more interesting. It explores the relations between randomness, nature, and art making while visualizing the data. Therefore, I am satisfied with this project. However, some improvements or alternations could be made, such as smoother movements, better color selections, etc.

Concept:
I wanted to use data that I generated myself for this data visualization, as I find it fascinating that, as time progresses, we are tracking more and more aspects of our lives — for example, # of steps walked, places visited, songs listened to, etc. One thing that I track is my reading data, on the app StoryGraph. I wanted to visualize my StoryGraph data on a timeline, where the size of the point corresponded to my rating.

Highlight:
I am proud of the sorting portion of my code, because data visualization has been the hardest unit for me to understand so far, and it required some time and an office hours visit for me to grasp the logic of sorting. In the end, I split the whole array twice, once on “,” to separate each row into its elements, and again on “/” to separate the dates into individual numbers. Then, I sorted according to the month.

function findMinMaxMonth() {
  //go through each row of bookData to sort by month
  let singleRow = [];

  for (let csvRowNumber = 1; csvRowNumber < bookData.length; csvRowNumber++) {
    singleRow = split(bookData[csvRowNumber], ",");

    //split date 2023/03/21 into 2023, 03, 21 on "/"
    let dateSplitted = split(singleRow[5], "/");
    // print(dateSplitted)

    dateReadMonth = int(dateSplitted[1]);
    // print(dateReadMonth)

    if (dateReadMonth < minMonth) {
      minMonth = dateReadMonth;
    }
    if (dateReadMonth > maxMonth) {
      maxMonth = dateReadMonth;
    }
  }

Reflection and ideas for future work or improvements:
I initially had many more data points in my CSV spanning multiple years, but due to time constraints and my skill level, I had to simplify the CSV to include only one book per month, read within one year (2023). If I could, I’d like to include the whole dataset, which would require first sorting by year, then by month, then by day. This would provide a much more interesting visualization. It would also be cool to vary the color of the book depending on the genre or the number of times I read it (darker shades = more times read).

Resources:

https://p5js.org/examples/typography-text-rotation.html

Every designer wants to create the most innovative, intuitively understandable design of their product, but in order to do that, it’s essential to understand what a great design is. During the reading, I was connecting the dots between the previous reading about interactivity and the one assigned for this week. Great design and interactivity go hand in hand because excellent design makes the user experience more interactive while also improving discoverability and understandability.

In the text, the author states that the most important characteristics of good design are discoverability and understanding. I only partially agree with the following statement. Even though I believe that it’s crucial to make a user familiar with the functionality of your product, I also believe that the aesthetics and beauty of the product are no less important than discoverability and understandability. No matter how functional the thing is, if it doesn’t draw attention or if it’s not perceived as an eye-pleasing creation, it will not reach as many users as it could. Therefore, I believe it’s of the utmost importance for a designer to consider the functional side of the product by enhancing its performance,  the logical side by improving discoverability and understandability, and to also focus on producing an aesthetically pleasing creation.

The reading helped me sort out the thinking process behind enhancing the discoverability of the design by providing six fundamental psychological concepts, which are affordances, signifiers, constraints, mappings, feedback, and conceptual models, that I will try to implement in my future works.

This week’s reading continued the trend these readings have had of furthering my ideas, thoughts, and beliefs about facets of art and design. In a lot of ways, the reading takes me back to our previous reading on interactivity, and our class discussions regarding the same. The author quips in an initial section of the reading, about how engineers who believe that being logical is enough may say that it is the fault of a device’s user for not understanding how to use it properly. Having an engineering background, I feel that this statement may as well have been personally directed to a version of me from a few years back. Even if my code (for say an app) was intricate, complex and highly functional – this would never actually end up being used because of bad design choices that made it harder to navigate for a user -leading me to say things the author says an engineer would say.

The following sections of the reading discusses affordances and signifiers amongst other attributes of human-centered design. This made me immediately think of direct relations to technology-based experiences. A simple example of this would be images in a website. Often people wouldn’t click on them, so it wouldn’t make sense to make them hyperlinks. There would be the need for some other signifier if we indeed wanted to do so (and had reason to do so). The author goes on to discuss a similar example of an app later.

Finally, the author’s ending notes on the paradox of technology is one I have actually thought of several times previously. The technology sector seems to have a fascination with smaller and smaller form factors to squeeze better and more complex technology into. The primary reason for this seems obvious: increased portability. But as the author states, the more complex the technology gets (presumably to improve our lives if used adequately), also complicates life. We have even seen technological juggernauts fail to take this into account – and fail hard as a consequence. The ‘Google Glass’ seems like a great example for this, and the Meta’s ‘Metaverse’ may be moving in a similar direction. Nonetheless, as the author claims, if all disciplines work together, and more attention is paid to design in a human-centric sense, it should be possible to have technology which is both better and more functional. Like the author, I too believe that this dream is possible.

The world we live in is designed. We interact with many things in our day-to-day life, from doors to mugs, to the screen you’re reading this off of right now.

Great design is something that often blends in with our lives so well that we don’t realize how well these things are designed. Take an ordinary pair of scissors for example. When you pick one up, you know where your fingers have to go. When you open and close the scissors, you have an intuition about its purpose. How is this information communicated to us? Do we all have an innate understanding of what a scissor is?

The answer lies in great design. In chapter 1 of “The Design of Everyday Things”, Don Norman highlights some concepts that come together to explain what makes a design great. These include affordances, which are the types of relations between two entities that are possible. Paper affords cutting for a pair of scissors, but for the same scissors a chunk of metal does not afford cutting. Another concept that is important is that of signifiers. These are indicators that signify where an action is supposed to take place.

Lastly, feedback is another aspect of design that—if implemented correctly—can help a person understand how to use something. There are two examples of machines with feedback, one good and one bad, that I use in my daily life. One is an electronic toothbrush that beeps violently when I apply too much pressure. I didn’t have to use any manuals to understand what it was telling me. Whenever I brushed too hard, it beeps to let me know that I’m being a bit harsh. On the other hand, I have an espresso machine that has three buttons: two for espresso and one for steaming milk. The milk-steaming button has been blinking orange for a while. I didn’t notice it until a friend who owns the same machine saw it and told me that the machine needs descaling. How would I have known that?  The toothbrush is an example of good design, where the feedback is conveyed without needing a manual. On the other hand, my espresso machine has a poorer feedback design.

After reading this chapter, I instantly thought of the doors that we have installed on campus. The automatic doors that should open when a sensor detects a person, and they usually do. Except when they stop working:

Which happens more often than it should. But that’s fine, machines break. After seeing these signs so often, I’ve made it a habit of using every door manually. You would expect that to work all the time, but something weird happens with the automatic doors that we have on campus. When I push on a “functional” automatic door, it decides to resist. It will not move until I stop pushing, even if it was perfectly keen on doing so before. What does this feedback even mean? Is the door saying that I should let it do its job?

Then why are the handles and push bars there? They handles are affordances—they allow me to pull on the door, and also signifiers as they tell me where to pull on. Yet when I listen to the design, I am misled; I am met with resistance that leaves me confused. Why call to me to be pulled and then push against me as if telling me that I never should have pulled. It is deception. Bad design is deception.

Creative Reading Reflection – The Art of Interactive Design Ch. 1:

Code:

// variables for cloud
let cloudX1, cloudX2, cloudX3, cloudX4;
let cloudY;

// cloud speed
let cloudSpeed1, cloudSpeed2, cloudSpeed3, cloudSpeed4;

// variables for sun
let sunX;
let sunY;

// variable for font
let font1;

// font function / preload the custom font
function preload(){
  font1 = loadFont("GentyDemo-Regular.ttf"); 
}

function setup() {
  createCanvas(400, 400);
  cloudX1 = random(width);
  cloudX2 = random(width);
  cloudX3 = random(width);
  cloudX4 = random(width);
  cloudY = random(50, 150);

  cloudSpeed1 = random(1, 3);
  cloudSpeed2 = random(1, 3);
  cloudSpeed3 = random(1, 3);
  cloudSpeed4 = random(1, 3);
  
  sunX = width / 2;
  sunY = height / 2;

}
 

function draw() {
  background(135, 206, 250);

  // position of clouds
  drawCloud(cloudX1, cloudY);
  drawCloud(cloudX2, cloudY + 60);
  drawCloud(cloudX3, cloudY + 120);
  drawCloud(cloudX4, cloudY + 180);

  // movement of clouds
  cloudX1 = cloudX1 + cloudSpeed1;
  cloudX2 = cloudX2 + cloudSpeed2;
  cloudX3 = cloudX3 + cloudSpeed3;
  cloudX4 = cloudX4 +cloudSpeed4;

  // reset clouds when they go off-screen
  if (cloudX1 > width) {
    cloudX1 = -50;
    cloudY = random(50, 150);
    cloudSpeed1 = random(1, 3);
  }
  if (cloudX2 > width) {
    cloudX2 = -50;
    cloudY = random(50, 150);
    cloudSpeed2 = random(1, 3);
  }
  if (cloudX3 > width) {
    cloudX3 = -50;
    cloudY = random(50, 150);
    cloudSpeed3 = random(1, 3);
  }
  if (cloudX4 > width) {
    cloudX4 = -50;
    cloudY = random(50, 150);
    cloudSpeed4 = random(1, 3);
  }
  
  // sun drawing
  fill('yellow');
  ellipse(200, 400, 200, 199);
  
  
  
  // font color, text and position
  fill(255,255,255,150);
  textSize(77);
  textFont(font1);
  text('Memories',200, 200);
  textAlign(CENTER);
  
}

function drawCloud(x, y) {
  fill(255);
  noStroke();
  ellipse(x, y, 50, 40);
  ellipse(x + 50, y + 10, 50, 40);
  ellipse(x + 30, y, 50, 40);
}

// class for clouds
class Cloud {
  constructor(cloudsx, cloudsy, cloudsspeed) {
    this.cloudsx = cloudsx;
    this.cloudsy = cloudsy;
    this.cloudsspeed = cloudsspeed;
  }

  move() {
    this.cloudsx = this.cloudsx + this.cloudsspeed;
    if (this.cloudsx > width) {
      this.cloudsx = -50;
      cloudY = random(50, 150);
      this.cloudsspeed = random(1, 3);
    }
  }

  display() {
    fill(255);
    noStroke();
    ellipse(this.cloudsx, this.cloudsy, 50, 40);
    ellipse(this.cloudsx + 50, this.cloudsy + 10, 50, 40);
    ellipse(this.cloudsx + 30, this.cloudsy, 50, 40);
  }
}

// variables for clouds
let cloud1, cloud2, cloud3, cloud4;
let cloudY;

// varibales for sun and font
let sunX;
let sunY;
let font1;

// loading the custom font
function preload() {
  font1 = loadFont("GentyDemo-Regular.ttf");
}


function setup() {
  createCanvas(400, 400);
  cloud1 = new Cloud(random(width), random(50, 150), random(1, 3));
  cloud2 = new Cloud(random(width), random(50, 150), random(1, 3));
  cloud3 = new Cloud(random(width), random(50, 150), random(1, 3));
  cloud4 = new Cloud(random(width), random(50, 150), random(1, 3));
  sunX = width / 2;
  sunY = height / 2;
}

function draw() {
  background(135, 206, 250);

  // display and move clouds
  cloud1.display();
  cloud1.move();
  cloud2.display();
  cloud2.move();
  cloud3.display();
  cloud3.move();
  cloud4.display();
  cloud4.move();

  // sun drawing
  fill('yellow');
  ellipse(200, 400, 200, 199);

  // fonts color, text, and position
  fill(255, 255, 255, 150);
  textSize(77);
  textFont(font1);
  text('Memories', 200, 200);
  textAlign(CENTER);
}