Emotion & Design: Attractive things work better

I quite agree with this first reading, as I am a person who is greatly affected by the aesthetics of my surroundings. Norman wrote that there doesn’t have to be a scientific, cognitive explanation in place for us to like something better (as with the example of the color computer displays — there is no information advantage, yet we cannot go back to black & white displays). This brought two pieces of supporting evidence to mind. The first is YouTuber Molly Burke, who is blind and also very into fashion and makeup. I have watched her videos for a long time, and something that she often says is that, just because she can’t see the makeup or the colors of her cute outfit doesn’t mean she can’t enjoy it. This is a twist on what Norman wrote about the teapots: just because he can’t use them every day for brewing tea efficiently, doesn’t mean that they don’t give “satisfaction in their appearance”. While I agree with most of this text, I do think the author is biased, as a designer, when he says that “to be truly beautiful, wondrous, and pleasurable, the product has to fulfill a useful function, work well, and be usable and understandable”. I think true beauty can exist without usability, and might sometimes even exist because of the lack of usability.

Her Code Got Humans on the Moon—And Invented Software Itself

This reading was a fascinating glance into the beginnings of software, and I was both surprised and not surprised at how the tech industry hasn’t changed in terms of gender inequality. In fact, it may have even been less discriminatory back then, because it was the “Wild West” and nobody knew what they were doing. It is notable how Hamilton’s role as a mother and Lauren’s playing with the keyboard led to saving the Apollo 11 mission, because it shows how diverse life experiences in the workplace enhance overall outcomes.

Additionally, I think the inherently exclusionary “inside club” feel of programming persists to this day, because of the learning curve needed to understand and participate in discussions in the community. It’s comparable to jazz music, in the sense that there is a certain level of “work” you need to do to be a part of the culture.

I think this article shows that everything that we take for granted today was conceived and invented by people for the first time, some time ago. For example, I, with no previous knowledge about physical computing, am now able to use breadboards to create circuits that take digital input, but back in Hamilton’s time, a whole team of expert seamstresses was required to wire the 0s and 1s. This raises the question of how current technologies that are inaccessible to laypeople may, in the very near future, be simplified and commercialized enough for anyone to manipulate.

I found the article “Her Code Got Humans on the Moon—And Invented Software Itself” to be very inspiring and thought-provoking. I am always amazed whenever I read about people who defy the norms of their times to do something extraordinary. Margaret Hamilton’s story is a shining example of resilience, determination, and innovation in the face of societal expectations.

In an era when women were not commonly encouraged to pursue careers in high-powered technical fields, Hamilton not only ventured into the world of software engineering but also became a trailblazer in the field. What struck me most is how Hamilton balanced her roles as a working mother and a programmer. The fact that she brought her daughter to the lab speaks to her unwavering commitment to her work.

In a world where gender inequality within the tech field still remains a challenge, I think Hamilton’s story provides a very promising avenue for doing the extraordinary.

The second reading “Emotion and Attractive” offers intriguing insights into the interplay of aesthetics, usability, and emotional response in design. I liked how the author used his teapot collection to illustrate the idea that design isn’t a one-size-fits-all concept; it depends a lot on the context, mood, and personal preference. The analogy of transitioning from black and white to color screens in the early days of personal computing is particularly fascinating. The author’s initial skepticism about the value of color screens, despite their popularity, speaks to the subjective nature of design preferences. While the cognitive perspective may suggest that color doesn’t add significant value to productivity, the emotional response to color cannot be discounted.

The concept of “affect” and its role in design has left me with some intriguing food for thought. It’s fascinating to consider how our emotional responses to design can have such a profound impact on our decision-making and behavior. Affect, in this context, acts as a sort of silent influencer, guiding our judgments, shaping our perceptions, and even affecting our reactions.

What’s particularly striking is how affect doesn’t just serve as an emotional compass but also as a practical tool. It can alert us to potential dangers, which is incredibly valuable, but it can also steer our creative problem-solving processes. This dual role of affect makes me ponder the delicate balance between emotional response and practicality in design.

Creative Reading Reflection – Her Code Got Humans on the Moon -And Invented Software Itself:

The article talks about how back in the 1960s, when most tech jobs were filled by men, a woman named Margaret Hamilton made history. She was only 24 and worked at MIT as a programmer. Even though people didn’t expect much from women in tech back then, Margaret proved them wrong in a big way.  As a young programmer at MIT, she embarked on a journey that would mark her as one of the important figures behind the successful Apollo space missions.

She became a key person in the Apollo space program because she wrote a lot of the software that made the Apollo missions successful. There was a tense moment during the famous Apollo 11 mission when the computer started showing some unexpected errors. But, thanks to her hard work and her team, the mission was a success, and the astronauts landed safely. She thought ahead during the Apollo program, identifying issues and pushing for software changes that later became vital for the success and safety of future missions.

Margaret Hamilton made significant contributions to both software engineering and space exploration. Her dedication and leadership are remarkable. When we think about major space achievements, it’s essential to see Hamilton as an influential figure who greatly impacted technology and space missions. Her work shows how one person can change history.

Norman “Emotion & Design: Attractive things work better”

Don Norman’s essay, “Emotion and Attractive,” highlights a fundamental aspect of design that often goes unnoticed. He emphasizes that the aesthetics of a product go beyond its outer appearance. It includes usability, understandability, and ease of use, in addition to beauty. He explains that sometimes, in stressful situations, like emergencies, things should focus more on usability. They need to be easy to use so people can stay safe. But in everyday life, when things are less stressful, it’s nice to have things that look beautiful and make us happy.

Don Norman also introduces the idea of “affect,” which is how we feel when we use something. Affect can change the way we think and solve problems. When something looks nice and makes us feel good (positive affect), it can even help us be more creative and patient. When something is visually appealing, we tend to invest more mental effort in understanding its use. However, this preference for aesthetics can be influenced by our mood and circumstances.

Norman provides a concrete example with teapots. If you have the time and inclination, you might choose the most aesthetically pleasing teapot, even if it’s not the most user-friendly. But when you’re in a hurry, practicality takes precedence over aesthetics.

So, the key is to find a balance between usability and beauty in design. It’s not about choosing one over the other but making things that work well and make us happy. That way, our everyday things can be both useful and beautiful.

Concept

Instead of developing a game for my midterm project I decided to create a space for an emotional experience. I believe that midterms often bring about stress, and it’s essential for individuals to be able to relax and prioritize their overall well-being. Consequently, I designed a meditation program that would help unwind people’s minds and partake in self-care activities.

Approach and Code highlight

For the development of this project, I planned to have three different exercises breathing, mantras, and journaling. I have shown the code for the breathing exercises in my midterm progress blog post, where I designed a program of a bouncing ball that would be helpful for people to find a certain rhythm in their breathing. For the mantras, I was planning to show participants different affirmative quotes that would allow participants of the meditation program to focus on their selves. I planned to use the method of a .substring(). I found a sketch that would help to display a portion of the string, based on the mouse position, here. For the journaling exercise, I decided to give some space for the participant where they can think about some questions and have a space to write down their responses. I used a csv. file to store all of the prompts for the journaling exercises. I created an array of strings to hold the entire file and preloaded the text from the file into an array. because I only had one row for all of the prompts, I did not need to loop through each row in the file. I created an index of the random prompt in the prompt array, a variable for a random prompt, and the code that would choose 1 of the prompts from an array. I created an input window and a button that when pressed would erase the input and leave a thankful note to the participant. As the basis for building this little program, I found a code for creating an input on the reference page, here.

Here is the code and sketch for this program, which I am very proud of.

let input, submitButton, prompt;
let strings = [];

function preload() {
  strings = loadStrings("quotes.csv");
}

function setup() {
  if (strings == null) {
    print("failed to load the file, stopping here");
  }
  print("strings array contains this many lines: " + strings.length);

  // create canvas
  createCanvas(710, 400);

  input = createInput();
  input.position(20, 100);
  input.size(400);

  submitButton = createButton("submit");
  submitButton.position(input.x + input.width, 100);
  submitButton.mousePressed(prompting);

  // all the prompts in an array

  let allThePrompts = split(strings[1], ",");

  print(allThePrompts); //it has 5 prompts and they are all split. nice!!!

  // X is the index of the random prompt in the promt array
  let X = int(random(allThePrompts.length));
  print(X);

  // variable for a random prompt
  let randomPrompt = allThePrompts[int(random(5))];

  print(randomPrompt);
  //choosing 1 of the prompts from an array
  prompt = createElement("h2", foo);

  prompt.position(20, 5);

  textAlign(CENTER);
  textSize(50);
}

function prompting() {
  input.hide();
  // ? not working: how to hide the button: button.hide();
  prompt.html(
    "Thank you for your response ! Hopefully it made your day a little better ^^ "
  );
  input.value("");
}

Another part of the program, which I am very proud of and which ended up working perfectly is the three buttons in the choosing menu. I was able to program buttons myself using an image and not using built-in buttons. For this, I used object-orientated programming. I created a class, where I specified how buttons should be displayed and function when a mouse is over and the mouse is clicked on these buttons. Then, in setup, I created the three similar buttons that are in the array, which would use the commands specified in the class. Here is a code highlight of the class:

class ChoosingButtons {
  constructor(inX, inY, inImg, inScenery) {
    // what does this mean?
    this.x = inX;
    this.y = inY;
    this.img = inImg;
    this.scenery = inScenery; // where to go if this button is clicked
  }

  display() {
    stroke(0);

    print("in button display; scenery = " + this.scenery);

    // tint the image on mouse hover
    if (this.mouseOverImage()) {
      print("mouse over image");
      tint(254, 220, 220, 255);

      // furthermore, if the mouse is clicked,
      // set the scene
      if (this.mouseClickedOnImage()) {
        print("mouse is clicked" + this.scenery);
        scene = this.scenery;
      }
    } else {
      noTint();
    }

    image(this.img, this.x, this.y);

    noTint();

    print(this.img.width, this.img.height);
  }

  // over automatically matches the width & height of the image read from the file
  // see this.img.width and this.img.height below
  mouseOverImage() {
    if (
      mouseX > this.x &&
      mouseX < this.x + this.img.width &&
      mouseY > this.y &&
      mouseY < this.y + this.img.height
    ) {
      return true;
    } else {
      return false;
    }
  }

  // over automatically matches the width & height of the image read from the file
  // see this.img.width and this.img.height below
  mouseClickedOnImage() {
    if (
      mouseIsPressed &&
      mouseX > this.x &&
      mouseX < this.x + this.img.width &&
      mouseY > this.y &&
      mouseY < this.y + this.img.height
    ) {
      return true;
    } else {
      return false;
    }
  }
}

The code for the three buttons:

// make the three choosing buttons
  buttonsChoosing.push(new ChoosingButtons(20, 150, choosingImage, BREATHING));
  buttonsChoosing.push(new ChoosingButtons(235, 150, choosingImage, MANTRAS));
  buttonsChoosing.push(new ChoosingButtons(450, 150, choosingImage, JOURNALING));

Future Thoughts and Reflection

I haven’t finished this project in three parameters: the switching back and forth between the pages, and the implementation of the sound and shape. I would have added the sound and the shape (btw, I know how to do it) if I finished the switch code. However, because I am very new to coding and have never designed such a complex program of switching between multiple cases, I did not fully realize my project. I decided to take the risk of creating multiple cases in the switch statement, however, the back buttons did not work perfectly well and I spent a lot of time trying to debug it and make it work. Even though it works in the sense that it changes cases, it didn’t change the case to the one I intended. Moreover, as I designed the code for journaling exercises in another shorter program, I was having issues implementing it in my main code. I tried multiple ways of breaking it down, however, it still didn’t work.

Nevertheless, I learned a lot during this project. I now know how to program a switch statement and create my own buttons from images. I learned how to create an input box and display text correctly. I recapped how to use a csv. file to load the information and I learned how to randomly present information from this file. I also learned patience and that it is best to debug a long program by diving it into smaller programs even though it may not work when you are trying to paste it back into the main program. I also was able to practice object-oriented programming on a new level by creating buttons with it. So, even though I didn’t get all of my program to work as was planned, I am nevertheless very happy with the experience and knowledge I gained in the process of creating it.

For the midterm project, I decided to combine the common game flappy bird with my own obsession with Pokemon using one of my favorites as the main character.

Problems:

One of the main problems I ran into was figuring out how to restart the game without actually restarting the sketch. It took a lot of work to finally figure out how to do it because one of the arrays I was using wasn’t being reset with my resetSketch() function. So, after a lot of debugging, I figured out how to reset that array every time I reset the game.

This game is still very wonky and there are a lot of improvements that could be done for it to be an overall better experience. I am quite proud of my use of the flying animation and the continuous scrolling background.

Game:

Concept 

For the Midterm Project, I initially started with a museum-like idea but as I focused more on the aesthetics and the picture I had in mind, it started looking like an old library room. I went with a friendly user interactivity experience, where a person experiences a calm and peaceful experience in a tiny underground library, where they could explore some books and have a few reads. I decided to encompass mostly positive quotes from historical figures from different backgrounds as well as Quranic verses. I also decided to include Greek temples and lanterns that hopefully align with parts of European culture and Arab Muslim culture as well.

Code Highlight 

The most part I struggled with is representing the quotes randomly as the user clicks on the bookshelf. I first placed an array inside the code itself but I kept getting multiple errors and unpleasant results, hence I decided to move the quotes in a CSV file and split the quotes at a semicolon, similar to how data visualization is implemented. I’m still facing one issue, the quote is being displayed twice, for the time being, I just left it there as a reflection but hopefully would figure out the mistake I made.

function room1_quotes() {
  fill(currentColor[0], currentColor[1], currentColor[2]);
  stroke(currentColor[0], currentColor[1], currentColor[2]);
  strokeWeight(10);
  rect(260, 260, 320, 220, 20);

  // Inside the book
  noStroke();
  fill(193, 154, 107);
  rect(270, 270, 300, 210);

  fill(0); // Set text color to black
  textSize(15); // Adjust text size as per your requirement
  textAlign(LEFT); // Change the text alignment to LEFT

  let textX = 270 + 10; // X-coordinate of the text
  let textY = 270 + 10; // Y-coordinate of the text
  let textWidth = 300 - 20; // Adjust the width to leave some margin
  let textHeight = 210 - 20; // Adjust the height to leave some margin

  // Loop through the quotes and display them as paragraphs

  for (let i = 0; i < selectedquotes.length; i++) {
    text(selectedquotes[i], textX, textY, textWidth, textHeight);
    textY += textHeight + 10;
  }
}

Reflection 

This assignment was definitely time consuming in my experience. It took me a while to figure out a lot of things, especially that I’m not very used to working with classes. I looked at random examples online that did not necessarily do anything I implemented but gave the solution to some of the problems I faced like presenting quotes randomly, and having images change but not rapidly. However, I learned a lot from coding this project, it compelled me to spend a good amount of time trying to understand how each code snippet affects the other and what might be causing glitches or any lags. It certainly made me more confident about my ability to implement something I envisioned, even though its not everything I wanted, but I’m pleased with what I have.

References

• The Quran
• https://en.wikipedia.org/wiki/The_Starry_Night
• Coffee shop experience progress
• https://p5js.org/reference/
• https://www.inc.com/sujan-patel/101-inspiring-quotes-from-the-most-successful-people-in-history.html
• https://pixabay.com/sound-effects/search/fireplace/
• https://fonts.google.com/specimen/Dancing+Script
• https://htmlcolorcodes.com/colors/shades-of-orange/