Category: Spring 2024 – Aya (Section 002)

After reading chapter one of the book entitled “The Design of Everyday Things”, I found myself agreeing with the main argument that the author makes in his book. In this book, the author talks about what makes a good design. I think the most important argument he makes is that the two of the most important characteristics of good design are discoverability and understanding. Discoverability indicates that the user should be able to figure out what actions are possible and how to perform them and understanding indicates what all functions mean and how the product is supposed to be used. I agree with him that discoverability and understanding are the key features of what makes a good design. I also believe that a design is called “good” when it is intuitive whereas we could figure out how to use the object and all the purpose of it at first glance. 

I agree with the author in his argument about how we are so “machine-centered” instead of being “human-centered”.When the user is not able to use a machine properly, we often tend to blame the user for not being able to figure out how to use the machine instead of thinking about the machine as “poorly designed.”  This machine-centered mindset is something that I also noticed in my surroundings. I also believe that this is the mindset of the engineers who build and design the machines. I find some machines very complicated to use even with the user’s guide. Sometimes, I think the machines are too focused on the “technical requirements” that they forget to consider human behavior. I find it quite ironic that machines that are built for people fail to consider the “people”. 

Then, I came to think that this might be the paradox of technology- as it is more developed to offer more technological benefits to the users, the more it becomes difficult to use. Technology can simplify yet complicate our lives. This idea made me think that one of the most concerning challenges to the designers would be how they should balance the desire for more developed technologies and functions with the need for simple and human-centered design. As the author argues, the more the technology develops and the machines become multifunctional, the more the machine is prone to make the users become overwhelmed and frustrated. In a way, I think that it is the job of the designers to make complicated things look “simple and easy” to use.

Also, I thought that a “good design” that satisfies everyone  becomes harder to achieve as the machines add more functions. And I thought that a good design might be something “subjective”  instead of  “objective”. As the author says, what a person finds intuitive is based on that person’s experience. To someone who is used to technology and machines, a newly-built machine might seem to be very intuitive and user-friendly even without reading the user’s guide, but the machine might seem to be “poorly designed” for someone who is not familiar with the machines. Perhaps, to the engineers who are so used to all that logic and orders of machines, the machines that the public perceived to be “poorly designed” might have been intuitive. Likewise, when the machines get more complicated, while there might be a design that the “majority” can satisfy, I think there might not be a design that “everyone” can satisfy. 

Overall, I truly found the reading very interesting and engaging. Also, the reading made me reconsider what a good design is. After all, this reading made me think that a good design is a design that is intuitive and that a good design is subjective based on the experience of the users as what a person thinks of as intuitive differs from the person’s prior knowledge and experience. 

 

From this assignment, I took direct inspiration from the Matrix franchise to recreate their famous wall of green symbols.

At its core, the project consists of two main classes: MatrixSymbol and Stream.

1. 1. MatrixSymbol Class:
      • Each character falling down the screen is represented by an instance of the MatrixSymbol class.
      • The MatrixSymbol class is responsible for storing properties such as position (x, y), character value (value), speed (speed), and brightness (brightness).
      • Characters are randomly selected from a wide range of Unicode characters, including hiragana and kanji, providing diversity to the falling text effect.
      • The rain() method handles the downward movement of the symbol, ensuring it wraps back to the top of the screen when reaching the bottom.
   2. Stream Class:
      • • A stream consists of multiple MatrixSymbol instances, forming a vertical column of falling text.
        • Each stream is generated with a random number of symbols (totalSymbols) and a random speed (speed).
        • The generateSymbols() method populates the stream with symbols, positioning them at random vertical offsets to create a staggered appearance.
        • The render() method displays and animates the symbols within the stream, applying color variation to enhance visual appeal.

      The brightness of each symbol is randomly adjusted, creating subtle variations in color and brightness, adding depth to the visual effect.
      Unicode Character Range: By utilizing a wide range of Unicode characters, including hiragana and kanji, I achieve a diverse selection of symbols.

Challenges:

Ensuring a balanced distribution of hiragana and kanji characters while maintaining randomness posed a challenge. Fine-tuning the character ranges was necessary to achieve a visually appealing mix.
As well, as the number of symbols and streams increases, performance may degrade. Thus it was important for me to write efficient code which would not suffer from performance degradation.

 

 

Don Norman, author of “Design of Everyday Things” brings various examples and concepts when it comes to technology and challenges that arise with designing devices we use in our everyday lives. The thing that stood out to me the most was his example of a watch with four buttons. The whole paragraph talks about how it makes the user experience less enjoyable since now the watch is not merely about checking time but also providing users with additional functions. While the premise of a more feature-packed piece of technology is quite optimistic, the reality of it only confuses the vast majority of users as it takes away from its main function. Expanded this to today, this remains true. I personally own a smartwatch. Initially, I thought it would be very useful and offer numerous features. While it does all that, after the initial novelty wore off, I saw why so many people dislike them. There is no disagreement that some of these features are quite useful: instant notifications from your phone, the ability to call, reply to messages, check different apps, and so on. However, we already have peace of technology that provides all that and the purpose of the watch is redirected to a compromised clone of such device. Small screen, limited performance, difficulty interacting with UI and small buttons, and abundance of features I will probably never use, are the same sort of challenges Norman talked about. The fact that I have to charge it every day to keep it going puts a huge barrier to usability.
At the end of the day, a watch should serve one function, to display time at a quick glance. How many of us, have used our smartphones to do that even though we ourselves have digital watches on our wrists? We are sacrificing user-friendly design for the sake of complexity. It is a product that tries to be sophisticated – a jack of all trades but never excelling at anything in particular. Even when it comes to displaying time, the options and different layouts get overwhelming. This design ignores fundamental elements of good design which are simplicity, clarity, and ease of use. And what if something goes wrong? It is not a simple repair. It is attractive but not that affordable. Do I regret my purchase? Not really. At least I used it for my homework reflection.

One of the aspects that piqued my interest in the reading was the paradox of technology. It is without a doubt that things tend to get replaced as newer and better technology emerges. As the complexity increases alongside it, I believe there is certain fragility that comes with as well. In the case of watches, as it evolves to maximize efficiency there could be certain capabilities that are sacrificed in order to achieve that. These sacrifices are what causes these fragilities. This leads to the question of whether there should be balance between them, as this could lead to lower efficiency. I think that there are many examples of products that is made with this in mind, but they are not particularly regarded as better in this society’s standards.

In regards to design, I often noticed that when something has a good design, it is rarely notices, but if it has a bad design, the annoyances are highlighted much easily. When the design is good, there seems to be a certain smoothness within the system, but if the design is bad, certain redundancy or annoyances are to be found. With a good conceptual model, the communication between the design and the user becomes less confusing. With complex operating systems like Microsoft, it contains numerous manuals but when there are certain errors, troubleshooting it becomes more and more vague in some cases therefore requiring additional help, which I believe is large but inevitable design flaw.

The concept for this week’s assignment, I wanted to make a hangman word game. The code consists of helper functions such as keyPressed, startNewGame, checkGuess etc. Firstly, it creates a number of empty dashes  based on the number of letters in the chosen word. As a letter is pressed, dashes are changed to a letter if the letter is in the word, and the body of the hangman is drawn if it is not. At the end of the game, it checks if the user guessed the word correctly, and shows corresponding texts.

Further on, I would like to add randomized word generation or read from csv or text file large pool of words.

code:

let word;
let guessedWord;
let maxAttempts = 6
let attemptsLeft = maxAttempts;
let guessedLetters = [];

function setup() {
  createCanvas(400, 400);
  textAlign(CENTER, CENTER);
  startNewGame();
}

function draw() {
  background(220);

  // Display hangman
  drawHangman();

  // Display guessed word
  textSize(32);
  text(guessedWord.join(' '), width / 2, height / 2 - 20);

  // Display attempts left
  textSize(16);
  text(`Attempts left: ${attemptsLeft}`, width / 2, height - 20);

  // Display guessed letters
  text(`Guessed letters: ${guessedLetters.join(', ')}`, width / 2, height - 40);

  // Check for game over
  if (attemptsLeft === 0 || guessedWord.indexOf('_') === -1) {
    gameOver();
  }
}

function keyPressed() {
  if (keyCode === ENTER) {
    startNewGame();
  } else if (key >= 'a' && key <= 'z' && !guessedLetters.includes(key)) {
    checkGuess(key);
  }
}

function startNewGame() {
  // List of possible words
  let words = ["apple", "banana", "simulation", "problems", "reaction"];

  // Choose a random word
  word = random(words).split('');

  // Initialize guessedWord with underscores
  guessedWord = Array(word.length).fill('_');

  // Reset attempts
  attemptsLeft = maxAttempts;

  // Reset guessed letters
  guessedLetters = [];
}

function checkGuess(letter) {
  // Add guessed letter to the list
  guessedLetters.push(letter);

  // Check if the letter is in the word
  let correctGuess = false;
  for (let i = 0; i < word.length; i++) {
    if (word[i] === letter) {
      guessedWord[i] = letter;
      correctGuess = true;
    }
  }

  // Decrease attempts if the guess is incorrect
  if (!correctGuess) {
    attemptsLeft--;
  }
}

function drawHangman() {
  stroke(0);
  
  line(width / 2 - 100, height /2 - 80 ,width /2 - 50, height /2 -80)
  line(width / 2 - 75, height / 2 -80, width / 2 -75, height /2 - 180)
  line(width / 2 -75, height / 2 - 180, width / 2, height / 2 - 180)
  line(width / 2, height / 2 - 180, width / 2, height / 2- 160)
  
  // Head
  if (attemptsLeft < maxAttempts) {
    ellipse(width / 2, height / 4 - 50, 20, 20)
  }

  // Body
  if (attemptsLeft < maxAttempts - 1) {
    line(width / 2, height / 4 - 40, width / 2, height / 2 - 80);
  }

  // Left arm
  if (attemptsLeft < maxAttempts - 2) {
    line(width / 2, height / 4 -30, width / 2 - 20, height / 4-10 );
  }

  // Right arm
  if (attemptsLeft < maxAttempts - 3) {
    line(width / 2, height / 4 -30, width / 2 + 20, height / 4 -10);
  }

  // Left leg
  if (attemptsLeft < maxAttempts - 4) {
    line(width / 2, height / 2 - 80, width / 2 - 20, height / 2 -60);
  }

  // Right leg
  if (attemptsLeft < maxAttempts - 5) {
    line(width / 2, height / 2 -80, width / 2 + 20, height / 2 -60);
  }
}

function gameOver() {
  // Display game over message
  textSize(16);
  if (guessedWord.indexOf('_') === -1) {
    text("You guessed the word!", width / 2, height / 2 + 60);
  } else {
    text("Game over! The word was " + word.join(''), width / 2, height / 2 + 60);
  }

  // Display new game prompt
  textSize(16);
  text("Press ENTER for a new game", width / 2, height/ 2 + 100);
}

the game:

Concept:

As soon as the professor introduced us to the “poetry generator” and its code, I wanted to apply this concept and code that we learned in class. Then, I came up with the idea of creating a “random letter generator” by applying the concept and code we learned in class. To make it resemble a real letter, I downloaded some “letter background” templates from Canva and obtained some handwritten-style fonts from https://www.1001fonts.com/handwritten-fonts.html to make the letter appear as if it were genuinely written by someone. Additionally, to make my output more interesting, I allowed the background image and font to be randomly generated.

Highlight of the Code:

There are three functions I intentionally created: generateLetter(), getRandomWord(), and mouseClicked(). generateLetter() is responsible for generating the random content, getRandomWord() retrieves a random word from the string array based on the given index, and mouseClicked() generates “new letters” when the mouse is clicked.

I am proud of all the code I have written for this project. However, I am most proud of the code I created for the generateLetter() function.

//function to generate the letter content using random words
function generateLetter() {
  //constructing the letter content involving template literal and getRandomWord() function
  let letterContent = `Dear ${getRandomWord(RECIPIENT)},

I wanted to take a moment to ${getRandomWord(VERB)} my ${getRandomWord(ADJECTIVE)} ${getRandomWord(NOUN)} for your ${getRandomWord(NOUN)}.Your ${getRandomWord(NOUN)} means a lot to me, and I am truly ${getRandomWord(ADJECTIVE)} to have you in my life. From the ${getRandomWord(ADJECTIVE)} ${getRandomWord(NOUN)} we've shared to the ${getRandomWord(ADJECTIVE)} ${getRandomWord(NOUN)} we've ${getRandomWord(VERB)} together, every ${getRandomWord(NOUN)} with you is a ${getRandomWord(ADJECTIVE)} ${getRandomWord(NOUN)} I hold dear to my heart. As we continue on our journey together, I look forward to creating many more ${getRandomWord(ADJECTIVE)} memories with you.With ${getRandomWord(EMOTION)}, ${getRandomWord(EMOTION)}, and ${getRandomWord(EMOTION)}, I want to express how much you ${getRandomWord(VERB)} and ${getRandomWord(VERB)} to me. Wishing you ${getRandomWord(ADJECTIVE)} days ahead and ${getRandomWord(ADJECTIVE)} adventures.

With ${getRandomWord(EMOTION)},
${getRandomWord(NAME)}`;

  textAlign(LEFT); //aligning text to center
  text(letterContent, 130, 250, width - 250, height); //displaying the letter content on the canvas
}

 

The attached code above is what I created for the generateLetter() function. I am proud of this code primarily because of the utilization of template literals. Initially, I considered adopting the same approach as our professor did when generating poetry. However, I realized that my code would become too lengthy if I followed the exact same method. So, I began contemplating how to make my code more concise. Eventually, I came up with the idea of utilizing template literals in my code. Template literals, a feature in JavaScript, allow you to embed expressions within strings. This feature enabled me to directly integrate the getRandomWord() function into my base letter content, making my code more concise. Although I was aware of the existence of template literals before, I had never used them. Thus, it was initially challenging for me to figure out how to apply them and understand the syntax. I felt a sense of pride in myself for successfully incorporating template literals to make my code more concise.

Final Output:

**Click the mouse t0 randomly generate a new letter! 

Reflection:

Overall, I am very satisfied with my project. Although it was initially challenging for me to grasp the syntax of template literals, I thoroughly enjoyed working on this project. As for areas of improvement for next time, I believe adding animation where the letter’s content is being written or implementing a feature where the viewer can change particular words one by one when clicked would be intriguing.

I thought the author was crazy. The use of informal words and phrases jumped me out of my seat (not literally), but it allowed me to picture Crawford as an author because of how expressive the whole chapter is.

Defining interactivity is hard. There is no absolute correct definition for the word that matches its meaning. Beyond his definition that interactivity is a cyclic process where two actors alternately listen, think, and speak, I believe sense is also an important process to add to the definition.

Most stuff that we call ‘interactive’, even in the lower degrees (based on Crawford’s degrees of interactivity), requires human sensory input. Without haptic feedback, some interactivity is gone. Think about phones, computers, or even toys, they require humans to touch, move, and (sometimes) break them for it to be interactive. Although this sounds very ableist, I believe that our senses count as much as the three actions to experience interactivity that Crawford seeks. That human sensory is important to add to the definition of “What is interactive?“

As I consider the various viewpoints that the text have presented on the topic of interaction, I find myself drawn to the complex dance that takes place between user input and system response. Fundamentally, interaction is a dynamic exchange in which the user and the system participate in an ongoing cycle of input and feedback. This link forces us to reevaluate how we engage with commonplace items and technology, as well as how we understand interactive media.

As the reading demonstrates, the notion of interactivity encompasses more than just user participation; it also refers to a more profound and significant conversation between people and technology. It challenges us to reflect on the nature of our interactions, asking us to take into account not only the mechanics but also the purpose and result of these exchanges. Echoing the observations of my peers, I find the subjective character of interaction and the way it adjusts to the capabilities and requirements of its audience to be quite fascinating. This flexibility emphasizes how important careful design is to making experiences that appeal to a wide range of users and are both accessible and meaningful. Furthermore, the classification of interactive media into low, medium, and high levels of interaction provides a helpful framework for analysis. From the straightforward act of clicking a button at a pedestrian crossing to the intricate conversation with AI chatbots, it enables us to classify and assess interactions based on their depth and complexity. Every degree of interactivity presents different difficulties and chances for participation, highlighting the need for a sophisticated approach to interactivity design.

To sum up, the contemplations and illustrations presented throughout the class discussion enhance our comprehension of interaction. They force us to think about how our designs and interactions affect society more broadly, highlighting the importance of approaching interactive media with consideration and user-centered design. Our conceptual framework is expanded by this investigation, which also motivates us to innovate and push the limits of interactive design.

Chris Crawford’s analysis of interactivity in his article offers a thought-provoking perspective that challenged my traditional notion of what it means to interact with something or someone. His assertion that true interactivity encompasses listening, thinking, and speaking as key components highlights the depth and complexity of human engagement. The analogy of a conversation between the two people Fredegund and Gomer effectively illustrates the dynamics of these elements, emphasizing the importance of active participation and mutual understanding when we are creating a meaningful interaction.

Before reading Crawford’s insights, my understanding of interactivity was rather simplistic, limited to the idea of reacting or engaging with external stimuli. However, his examination reveals that interactivity is far more intricate, existing along a spectrum with different degrees of engagement. Inspired by this perspective, I can also see a connection between human behavior and design, as he underscores the need for designers and creators to consider the diverse levels of interactivity in their work, recognizing that each level offers unique opportunities for communication.

However, I also find myself wondering the extent to which his framework fully captures the richness of interactive experiences. Are there additional dimensions or elements of interactivity that deserve consideration? Furthermore, while the example of conversation illuminates certain aspects of interactivity, it may overlook other forms of interaction that occur in non-verbal or non-linear contexts.

My inspiration for this assignment was basically the forms and shapes we usually find around us. Whether it be through the whirlwind or even a simple whirlpool we see in the sink when draining the water, I wanted to created something related to spirals. Moreover, spirals are also inspired by one of my favorite astronomical objects: spiral galaxies. The beautiful spiral arms of these galaxies, stretching outward in what it seems to be a delicate movement, caught completely my attention and evoke a sense of wonder. Drawing from these natural phenomena, I aimed to create an interactive artwork that celebrates the harmony of spirals.

Keep clicking on the screen to create your Spiral Galaxy 🙂

In this project, when the mouse button is pressed, a new spiral centered around the cursor position is drawn on the canvas. The spirals consist of a series of connected points, creating a spiral pattern as they move outward. Each spiral has a random color and speed, creating a dynamic and varied composition. The spirals continue to evolve and interact with each other as the user interacts with the canvas. To create this effect, I challenge myself in creating new patterns, supported by tutorial videos on how to create the spiral effect, like this one.

class Spiral {
  // Constructor function to initialize a new spiral object with specified parameters
  constructor(x, y, radius, color, speed) {
    // Initialize object properties based on input parameters
    this.x = x; // X-coordinate of the center of the spiral
    this.y = y; // Y-coordinate of the center of the spiral
    this.radius = radius; // Radius of the spiral
    this.color = color; // Color of the spiral (as an array [R, G, B])
    this.angle = 0; // Initial angle of the spiral
    this.speed = speed; // Speed of rotation for the spiral
  }

  // Display function to draw the spiral on the canvas
  display() {
    noStroke(); // Disable stroke (outline)
    fill(this.color); // Set fill color based on the color property
    let spiralSize = this.radius * this.angle; // Calculate the size of the spiral
    // Draw a small ellipse at a point on the spiral determined by the current angle
    ellipse(this.x + cos(this.angle) * spiralSize, this.y + sin(this.angle) * spiralSize, 5, 5);
  }

  // Move function to update the angle of the spiral, causing it to rotate
  move() {
    this.angle += this.speed; // Increment the angle by the rotation speed
  }
}

For future assignments, I would like to improve my understanding of object-oriented programming concepts and explore more advanced techniques for creating dynamic and interactive visual experiences. Additionally, I aim to delve deeper into the principles of design and incorporate more sophisticated visual elements into my projects, as well as sound and music to enhance the immersive experience of my projects.