Category: Spring 2024 – Aya (Section 003)

The psychological principles for design make a lot of sense to me. Of course affordances and mental models would shape how people use stuff – those concepts seem so core. Formalizing them into the design process feels overdue in a way. Still, I wonder – following guidelines can limit you too, can’t it? The times I’ve felt the spark of creativity or problem-solving have actually come a lot from defying conventions or unspoken “rules.” So where’s the line between guidance and overstandardization? Feels like a tension worth watching.

And even with technology’s insane pace of advancement, I think designers still have to be minimalists at heart. What separates a seamless, delightful experience from a bloated, confusing one is restraint and knowing when to stop adding features just because you can. But how designers make those calls is an art, not a science.

One part that really resonated was thinking about mental models across teams. We all carry biases and assumptions and lenses we see the world through. That exists even (maybe especially?) in cross-functional groups. Creating spaces where communication norms themselves feel simplified and clarified could make a world of difference in alignment, collaboration and innovation. There’s surely design opportunities even in how organizations function on a daily basis.

Overall this piece brought up great food for thought, and refreshed my appreciation of design thinking. I like writings that make me feel both grounded conceptually and curious to apply ideas further. This hit that sweet spot through framing the challenges creatively vs. just technically. The blend of examples and analysis kept a nice engaging pace too. Overall, this was a really enjoyable read!

I’ve always loved cracking open fortune cookies to see the surprise message inside. I decided to recreate this idea digitally by building an animated, interactive fortune cookie in p5.js that reveals a new quirky fortune each time it’s clicked.

The core concept here was to display random fortunes generated from a list of silly phrases. I started by coming up (with the help of ChatGPT) with a whole array of potential fortune texts – things like “Run” or “Don’t eat the paper.” I tried to channel the cryptic non-sequiturs you might find in real fortune cookies.I then set up a pickNewFortune() function that can select a random element from this master list of fortunes. This gets called every time the cookie finishes its opening animation.

So on each cookie click, it grabs a new random index from the list and stores this fortune string to display.

The visual animation of the cookie opening was also really fun to build out. I made the separate cookie halves tilt back and apart slowly to reveal the text underneath. I’m really happy and proud with how realistic the motion looks!

The code for the animation looks like this:

function animateCookie() {
  let halfAnimationStep = maxAnimationStep / 2;
  let angleOffset, pullOffset;
  
  if (animationStep <= halfAnimationStep) {
    // Tilt cookie halves apart  
    angleOffset = map(animationStep, 0, halfAnimationStep, 0, -40);
    pullOffset = 0; 
  } else {
    // Finish opening animation
    angleOffset = -40;  
    pullOffset = map(animationStep, halfAnimationStep, maxAnimationStep, 0, 200);
  }

  drawFortuneCookie(angleOffset, pullOffset);

  // Progress animation
  if (animationStep < maxAnimationStep) {
    animationStep++;  
  } else {
    state = 'open'; 
  }
}

In the future I could definitely expand and refine this concept even more – perhaps allowing the fortune text itself to animate in different ways for some visual variety. I would also love to enhance the text generation further – for example, mixing and matching fortune text fragments to assemble new combinations. I could also display the text animating onto the screen for more visual interest when the fortune is revealed.

For this assignment, I wanted to recreate the Matrix movie’s Neo sees the matrix for the first time in the scene, in which we see everything in green from Neo’s perspective.

I wanted to create the scene using the transcript of the movie itself. So, I quickly downloaded the transcript from open source. While looking for any tutorials online, I found Daniel Shiffman’s tutorial on creating images with ASCII text. I followed this tutorial only to complete the assignment. Following the tutorial, I started with creating the still image attached to this post with the movie transcript. I quickly realized that due to the presence of unwanted characters (numbers, :, etc.),  the visualization was not looking great. I decided to clean up the transcript according to my needs. I used p5.js to remove any unwanted characters from the data. However, following the tutorial, I could not replicate the brightness using empty/smaller ASCII text, as I was using sentences to create the visualization. So, I decided to manipulate the brightness of the text itself, and it worked. However, moving into the video loop, the code was not working smoothly. I realized that as I was using a large string (3300 lines), the array became too big to loop and refresh in the draw loop. I had to cut down the data to the first 70 lines of the transcript to accommodate that.

 

// draw function
function draw() {
  background(0); // setting background as black

  let charIndex = startIndex;
  // calculating the width and height of the cells
  let w = width / capture.width; 
  let h = height / capture.height;

  // load the pixels of the webcam capture
  capture.loadPixels();
  
  // loops to iterate over each pixel of the webcam capture
  for (let j = 0; j < capture.height; j++) {
    for (let i = 0; i < capture.width; i++) {
      // calculate the pixel index
      const pixelIndex = (i + j * capture.width) * 4;
      // rgb component of the pixel
      const r = capture.pixels[pixelIndex + 0];
      const g = capture.pixels[pixelIndex + 1];
      const b = capture.pixels[pixelIndex + 2];
      
      // calculating brightness 
      const brightness = (r + g + b) / 3;
      
      // Adjust the fill color based on brightness
      // map brightness to green color range
      let fillColor = map(brightness, 225, 0, 225, -150);
      fill(0, fillColor, 0);
      
      textSize(w * 1.3);
      textAlign(CENTER, CENTER);
      
      // retrieve a character from the matrixText string based on charIndex
      let textChar = matrixText.join('').charAt(charIndex % matrixText.join('').length);
      if (random(1) < 0.05) {
        textChar = matrixText.join('').charAt(floor(random(matrixText.join('').length)));
      }
      text(textChar, i * w + w / 2, j * h + h / 2);
      charIndex += rainSpeed;
    }
  }
}

 

I still could not replicate the rain sequence in the visuals as expected. I hope to improve that in the future.

 

I think ‘communication’ is a keyword in interactive media. In real-life communication, for example, if you are a teacher, you should know whom you are talking to and give the information based on their intellectual level. It is important to ensure that the person who is listening to you understands what you are trying to convey. The same mechanism applies to interactive media. Since designers communicate through the results of their designs, the outcome should be very precise, and small details should have the power to deliver certain messages so that the user can feel comfortable. Designs become meaningless if the user does not understand their purpose. They only become useful if there are users that use them properly.

I remember from one of the core classes that I have taken, the professor mentioned the ‘desired path.’ If the walker creates a new path on a road that was not designed that way, it is the designer who miscreated the whole road and did not consider how walkers would prefer to walk. I think sometimes most designers pay too much attention to aesthetics, forgetting the experience part of design, which I understood is very important from the reading text. Designers are responsible for creating things that consider users’ preferences. I think this is the most important thing that I should remember from now on as I go through this course.

I like how the author points out the fact that no matter how much knowledge the machines’ operators accumulate over the years and how well-versed they are in their field, they still have to make the construction and/or programming simple. It’s all about precision and accuracy, or perfection in the process in other words, which humans are not prone to. But it’s fascinating how, given the contradictory nature between machines and humans, humans have managed to churn out some very advanced technology that requires high level of precision and accuracy and to minimize the number of errors as much as possible merely through experimentation and testing! But that said, added complexities equate increased difficulty in use and frustration. High-tech machines/gadgets today require a lot of knowledge from users, and not every form of knowledge is easy to be acquired.

Another point from the author with which I resonate is about the relationship between affordance and signifier. This kind of relationship is not very clear-cut as one would say, as the author points out, “some affordances are perceivable, others are not” and “perceived affordances often act as signifiers, but they can be ambiguous” (19). Despite the fact that signifiers are more important than affordances, I’ve seen some terrible signifiers that do not fulfil their duty at all, which leaves users to figure out affordances all on their own and hence, suffer from frustration. The more high-tech and more complex machines, the more effort operators should put into curating the signifiers for a more effective affordance from the users.

When I read the description for our assignment, I wondered how to use randomness in generating text. The idea came from my everyday experience. I remember always struggling to choose what to order in fast-food restaurants because there were so many variants. So, the concept of my assignment became using generative text to depict myself in a fast-food restaurant ordering some food.

First, I found a picture of a fast-food restaurant on the internet to use as a background. Then, I also found a speech balloon picture on the internet.

function preload() {
  mypicture = loadImage('speechballoon.png')
  backgroundpicture = loadImage('background.png')
  strings = loadStrings("fastfood.csv");
}

The preload function was used to load these pictures. I used the code I generated for the first self-portrait assignment to make an icon of myself. Then, I used scale() and translate() functions to relocate the icon.

hamburgers, fish and chips, pizza, pasta, fried chicken
french fries, onion rings, chicken nuggets, tacos, ice cream
cola, ginger ale, sprite, apple juice, orange juice

I created a .csv file where the first line was the main dishes, the second line was the side dishes, and the last line was drinks.

//text generator
textSize(30)
text('I want', 190, 100)
textSize(20)
for (let i = 0; i < strings.length; i++) {
  // Split the current line into an array of items (.csv file)
  let items = strings[i].split(', ');
  // Select a random item from this array
  let randomItem = random(items);
  // Display the random item
  text(randomItem, 150, i*30+140);
}

I made a code that chooses a random item from each line and generates text located in the speech balloon. 

function mouseClicked() {
    redraw();
  }

I used the redraw() function inside the mouseClicked() function to regenerate the entire code again, ensuring that the outcome of the three menus (main dish, side dish, drink) would change if the mouse was clicked.

For further improvements, I think I can use a different font and also maybe add more menus, or add a picture of the menu that was chosen randomly and display it with the text.

I went to the cinema a lot so I was fascinated about the box office of the movies released in 2023 (mainstream movies only as their box offices are always reported with accurate data from cinemas). I wanted to make a data visualization of the top box office of movies released last year. I searched on Kaggle and came across a CSV files compiling the US Domestic box office of top 200 movies in 2023 (https://www.kaggle.com/datasets/mohammadrizwansajjad/top-200-movies-of-2023). I edited the dataset a little bit, removing unnecessary data columns and reducing the dataset down to 20 to reflect the top 20 movies with the highest box office. The chart displays the movies’ box offices as well as the month they were released while also vertically ranking them according the box offices.

Snippets of code:

//Retrieving data from the table
  let Month = movies.getColumn("Release Date");
  let Name = movies.getColumn("Title");
  let Rank = movies.getColumn("Rank");
  let Boxoffice = movies.getColumn("Total Gross");

  for (let i = 0; i < img.length; i++) {
    // split data into string
    let splitString = split(Month[i], "/");

    //     displaying data
    image(
      img[i],
      12.5 + ((int(splitString[0]) - 1) * (width - 20)) / 12,
      map(Rank[i], 1, 22, 50, height - 20),
      53,
      23
    );
  }

Embedded Sketch (hover mouse diagonally to see all box offices):

The chart essentially displays the movies’ logos according to their box offices using the Map function. We can eyeball and compare one movie’s box office with another’s. The hardest part is to figure out the placements of the movies’ logos. But more importantly, it is also about extracting the data from the dataset and come up with a way to graph them.

For future improvement, I want to come up with a way to display the movies’ logos in a more visible manner. As of now, because of the size of the chart, the logos are pretty small and the accompanying hover number for the box offices are also small. I also want to display the box office number separately as well, i.e. it only shows when the mouse hover on the image. The challenge here is to figure out the coordinate of mouseX and mouseY.

For this assignment, I went back to the basics and utilized the main coding concepts we learned in class last week to create a simple and EXTREMELY plain piece that showcased my understanding of generative text using p5js. I used a poem from Mahmoud Darwish, a popular poet from Palestine, as text for my sketch. The main concept of my sketch was to create a simple piece of art that displays his poem using generative text that includes elements of interactivity, while simultaneously prioritizing simplicity and minimalism. This can be seen through the simple text font and color used in the sketch to display the words of the poem. 

The process of creating this sketch involved a lot of trying to understand the coding concepts that come with generative text. This was because I was confused about the concepts we learned that week. Through practicing and studying the material once more I was able to better understand the technicalities behind generative text and how to successfully implement it in my sketch. With that being said, I used this assignment as a way to integrate all the other things we learned in class such as the ‘mousePressed’ command and different ways to position elements within my sketch. Side note, pressing the mouse allows for users to see the whole poem, if they wished to view it in the non-generative text form. Back to my sketch, implementing past material with new material helped me better conceptualize how these different elements within p5js are able to compliment one another, which in a sense enriches the flow and user experience of the sketch. 

Another side note, I used functions but decided to keep them on the main Javascript file instead of a separate file due to the fact that it made it easier for me to organize the code. Anyway, back to the sketch coversation!

As I mentioned, I was struggling initially with understanding and implementing generative text concepts, which is why the parts I am most proud of are ones that relate to it: 

 

function drawWords(x, y) {
  // Splits the poem into words and removes any empty strings from the poem
  let wordGroup = poem.split(' ').filter(word => word.trim() !== "");

  // A random number from the array is selected as a starting word and ending word
  let firstWord = random(int(wordGroup.length));
  let lastWord = firstWord + random(2, 8);

  // Makes gold the color of the text
  fill('gold');
  
  // Displays the selected words from the poem at specified positions
  text(wordGroup.slice(firstWord, lastWord).join(' ').trim(), x, y);
}

 

My Final Sketch: 

In terms of improvements, I think I would have loved it if I was able to have made my art more complex. Although not necessary, I feel like using generative text to create something more complex would have helped add more effects and style to the piece as a whole. By doing so, it would have made my sketch more dynamic and potentially more appealing to users. Overall, this sketch has made me want to practice using generative text in my future projects as I want to develop my skill in it and add more complexity, effect, and different forms of user interface design to my sketch. I really enjoyed learning and experimenting with generative text as I was able to combine a poem from one of my favorite poets to create text that is creative and sometimes even humorous.

The Design of Everyday Things” begins with an introduction to the basic ideas of excellent design and stresses the value of user-centered design. Norman talks on how the way that commonplace things and interfaces are designed can either help or hurt our ability to use them. He highlights how important it is to comprehend user experience and the psychology of how people interact with products in order to produce designs that are understandable and practical. The chapter frequently draws attention to typical design defects in commonplace items to show how bad design can cause user errors and irritation.

 

How does Norman distinguish between well-designed and poorly designed commonplace items?
Norman makes his distinctions based on user experience and usability: while poorly designed designs lead to irritation because of poor function communication, well-designed designs are intuitive and satisfy needs without misunderstanding. A poorly designed chair, on the other hand, could be visually beautiful but unpleasant. A well-designed chair, for instance, is solid and comfy, encouraging use.

What impact do affordances have on a product’s usability?
Affordances improve usability by indicating possible uses for an item. A door handle that allows for pulling instead of a flat plate implies pushing, assisting the user in an instinctive manner.

Examples of designs that are non-intuitive versus intuitive?
Similar to the swipe feature on a smartphone, intuitive design conforms to user expectations. Unintuitive design, such a complicated remote control, can cause confusion among users and have a detrimental impact on engagement.

How may design be improved by an understanding of user psychology?
It foresees user requirements, actions, and mistakes, resulting in more considerate and effective products. Designs that provide a greater variety of interactions are made possible by the knowledge that users do not always follow intended paths.

How should designers address mistakes made by users in their creations?
by foreseeing mistakes and reducing the likelihood and consequences of them. This improves user safety and experience by incorporating fail-safes, unambiguous feedback systems, and simple corrective pathways.

To finish I liked this quote from the reading-  “Experience is critical, for it determines how fondly people remember their interactions.”
Norman, Don. The Design of Everyday Things : Revised and Expanded Edition, Basic Books, 2013. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=1167019.
Created from nyulibrary-ebooks on 2024-02-17 12:55:08.

Idea and Inspiration:

I am really into cryptocurrency, especially Bitcoin. I am doing an internship in a crypto exchange. I always read price tendency graphs and wanted to create one of my own.

Sketch: 

Code that I am proud of: 

//  X axis- dates
let dates = btcTable.getColumn("Date");
let years = {};
for (let date of dates) {   // Iterate over each date
  let year = date.substring(0, 4); //Extract the year from the date
  years[year] = true; //ensures that the years object will only contain unique year values by the end of the loop.
}

let uniqueYears = Object.keys(years); //// Extract the keys (unique years) into an array
for (let i = 0; i < uniqueYears.length; i++) {
  // // Iterate over each unique year
  let x = map(i, 0, uniqueYears.length - 1, 50, width - 50); //// Map the year index to x-coordinate
  text(uniqueYears[i], x - 15, height - 35); //// Display the year as text at the calculated position

The first step in the procedure is to extract every date entry from a database (btcTable) that contains the prices of Bitcoin. Each date is represented by a string to indicate a particular day. Every date string in a loop is handled with the substring(0, 4) function to extract only the year part. Essentially separating the year (assuming a YYYY-MM-DD format) with this method is to take the first four characters from the date string. After that, the values of each of the extracted years are set to true and they are used as keys in an object called years. By ensuring that every year is only recorded once, this technique produces a collection of unique years, independent of the number of entries for that year in the dataset.

 

In the 2 sample code provided, we first utilize the year of each date as a key in an object named years. Next, we use the Object.keys(years) function to obtain an array of those distinct years.

Creating the years Object: We take the year (the first four characters of the date string) and use it as a key in an object called years when we loop over each date in our dataset. We give every key a value of true. As a result of JavaScript’s prohibition on duplicate keys, this step effectively eliminates any duplicate years, guaranteeing that each year appears only once in the years object.

Object.keys(years): Extracting Unique Years: Object.keys() is a JavaScript function that accepts an object as input and returns an array with all of the object’s keys, or property names.
The years object contains an array containing all of the keys, which is returned when we apply Object.keys() to it. The uniqueYears array that is produced now contains every unique year in our dataset, without any duplicates, because the keys are the unique years that we previously extracted.

Why It’s Done This Way: This method makes sure that, no matter how many data points we have for a given year, we only include that year once when we visualize the data (e.g., putting it on a graph). This ensures that every year is represented uniformly and without repetition.

 

Difficulties: 

I encountered so many difficulties…

First of all the data was not uploading correctly into P5. It was complicated to figure out why. Then I realized the thing that was causing the problem was the year formating. Initially was (1.feb 2022) then (1/2/2022) and finally I changed to 2022-02-1.

then I did not know how to portray a graph. I followed these steps from the P5 website — https://editor.p5js.org/pedbad/sketches/sbGhi7GwU

Then I didn’t know how to leave some margin ant the bottom  bottom of the canvas. I used this equation to help me with map(value, start1, stop1, start2, stop2) let y = map(price, 0, 60000, height – 50, 50);

Improvements: 

I would like to have more up-to-date data.