Category: Spring 2024 – Aaron (Section 001)

In this weeks reading I really had fun exploring the composition of designing and the elements, complexity and usefulness of design with an example of a door. Yes, a single door was used to explain the whole theory of the design of everyday things.

A door is a perfect example of confusion in design. Even though simple, we always find a way to confuse ourselves and pull a door if we should push it, push a door if we should pull it, or neither of those, maybe we just needed to slide the door open.

A good way to fix that is to look at the hinge (or if you are a designer: don’t hide the hinge please) or give the “user” proper information on how they should handle the door. That leads to us talking about the two big aspects of good design:

• • • Discoverability
    • Understanding

A story that the author mentions is a story of a friend that got trapped in a doorway of a Post Office in  an European system. The door system, which was made out of six doors, is a perfect example of failed discoverability since it did not provide enough information for the “user” and it just led to confusion.

Another topic that comes into conversation is the complexity of modern devices. The theory is that modern devices and machines are made by humans so they are quite limited in what they can do. At the same time, proper guidance (aid, manuals) must be provided in these complex devices since they are created by engineers who have deeper understanding of the device, unlike the people that operate it.

 

 

In the first chapter of “The Design of Everyday Things,” Don Norman talks about the concept of affordances and their importance in shaping how users interact with products and environments, overall leading to the product’s success or doom. He emphasizes the importance of intuitive design, where the objects function should be to the point. Norman uses the example of a well-designed door handle to illustrate. A good handle should make it obvious whether to push or pull through its shape and positioning. Norman summarizes it pretty well here, “The design of the door should indicate how to work it without any need for signs, certainly without any need for trial and error.”(2) On the other hand, poorly designed handles without clear affordances often frustrate users and lead to confusion. He argues that intuitive design creates a seamless relationship between users and products, reducing cognitive load. Overall, Norman’s approach enhances the experience while minimizing mistakes and accidents.
Furthermore, a well-designed smartphone interface intuitively guides users to access different functions and features. For instance, users understand that tapping an icon opens an app, swiping left or right navigates between screens, and pinching or spreading fingers zooms in or out. These intuitive interactions reduce the learning curve for users and enhance their overall experience with the device, to the point where even toddlers use tablets nowadays without any trouble. Yet interfaces with unclear design can confuse users and lead to frustration. Therefore, prioritizing intuitive design in smartphone interfaces is crucial for ensuring seamless interaction and user satisfaction.
Intuitive design should be the key priority to every product development process. By understanding users’ needs, we can create products that enchance not cause trouble in our daily lives. In today’s world of complex technology, prioritizing intuitive design isn’t just a design approach but a necessity for creating products that are truely successful.

I felt that this week’s reading effectively conveyed a holistic view of what “good design” is from a human-centred perspective. I felt that a lot of the concepts presented are relevant to our daily experiences with our personal devices (smartphones, tablets, laptops, PCs, smartwatches etc.).

In response to the author’s view that modern devices/machines are too complicated and present too many functions, these devices (for the most part) have incorporated more minimal designs both in their GUIs and their external appearance. Moreover, they have managed to present their complex affordances through simple and accessible conceptual models which can be understood easily by new users. However, I have found that the discoverability and comprehension of these devices’ conceptual models is dependent on how conditioned the user is to the universal modern language of conceptual modelling used across different technologies. As a basic example, someone who has been conditioned to understand these conceptual models would easily comprehend that a button with an arrow would indicate the ability to progress or move something (e.g scroll down a page, move a cursor, change a selection). Regardless of the use case, this affordance is understood through these commonly used signifiers. However, to someone from my parents’ generation, these connections are not made immediately (even if there is prior familiarity with similar interactions) and would take more time to understand.

Given this example, I would like to present interactive design as a language within itself – one that changes depending on time and place. An interesting component of this design is that there is an exponential increase in new “sounds” and “words” in the form of the constant development of technologies. A decade ago, the use of facial recognition and finger print identification technology in personal devices was a completely foreign “word”. Now, it is used dozens of times daily and is seen as an expectation in new devices. I feel that this view accommodates for the author’s informative identification of the different aspects of interactive design while highlighting the importance contextual information within the design process.

 

For this assignment I tried my best to wrap my head around arrays and classes and how to go about them. I wanted to also add an interactive element where the circles respond to disturbance of the mouse – proud of that 🙂

There wasn’t really a specific idea, It was trial and error until I found what works for this assignment which is that. However, I wasn’t successful with randomizing the floating orange colors.

let oranges = [];

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

  for (let i = 0; i < 10; i++) {
    let x = random(width);
    let y = random(height);
    let diameter = random(30, 50);
    let velocity = random(1, 5);
    let orangeColor = color(random(255), random(255), 0);
    let orange = new Orange(x, y, diameter, orangeColor, velocity);
    oranges.push(orange);
  }
}

function draw() {
  background(174, 198, 207);

  for (let orange of oranges) {
    orange.update();
    orange.display();
    if (orange.isMouseOver()) {
      orange.disturb();
    }
  }
}

class Orange {
  constructor(x, y, diameter, color, velocity) {
    this.x = x;
    this.y = y;
    this.diameter = diameter;
    this.color = color;
    this.velocity = velocity;
    this.originalX = x;
    this.originalY = y;
  }

  update() {
    this.x += this.velocity;

    if (this.x > width + this.diameter / 2) {
      this.x = -this.diameter / 2;
      this.y = random(height);
    }
  }

  display() {
    fill(this.color);
    ellipse(this.x, this.y, this.diameter);
  }

  isMouseOver() {
    let d = dist(this.x, this.y, mouseX, mouseY);
    return d < this.diameter / 2;
  }

  disturb() {
    this.x += random(-5, 5);
    this.y += random(-5, 5);
  }
}

 

For this project I had two goals, adding interactivity, even if simple because it adds to the UI in addition to keeping it simple. So I decided to use was I learnt from the previous assignment about loops and incorprate class and arrays this time. I didn’t have much inspiration from outside sources, I chose cats because the shape is very interesting to make and the meowing sound is annoying yet cute. Here is my sketch:

This is my favourite part of the code:

function mouseClicked() {
if (cats.length < 5) {
cats.push(new Cat(colors[catIndex]));
catIndex++;
meowSound.play();
} else {
window.location.reload();
}
}

because I got to use sound for the first time in my sketch and incorprate it with the mouse clicked function. However I did want to include a different sound of “meow” for every colored cat do add variety but it was getting a bit tricky and overwhelming so I kept it as is.

 

First and foremost, I completely agree with Crawford when he said that “the term interactivity is overused and under understood.” I believe it becomes under-understood because it has been made a universal term when in reality it can be interpreted in many ways, thus becoming subjective, as discussed on page 6. That’s something I don’t necessarily like, especially considering the word “Interactive” in our university’s “Interactive Media” program. In this sense, it has been underestimated and has affected many opportunities for students, including myself. To be more specific, the term has been underestimated in many ways. When people hear “Interactive Media,” they often disregard “interactive” because it’s an adjective and then proceed with “oh, so like media, like social media” or “oh yeah, like TV hosts and stuff.” I find that very frustrating because what we do is much more. With that, I have a love-hate relationship with the term “Interactive Media.”

Furthermore, on page 11, the author states, “Interactivity designers do not deny the hard-won lessons of the past; they seek to incorporate them in a wider perspective, which, in turn, requires some rearrangement.” He follows by saying that incorporating the wisdom of older fields plays an important role in this so-called “rearrangement.” I wonder what exactly he means by rearrangement, and to what extent should we apply it. In addition, on page 12, the author says, “Once interactivity becomes established in our culture, the academic will get a hold of it, and then you’ll have more ‘high-quality’ definitions than you ever thought you needed.” But what about the non-experts in the field who tend to have authority in recruiting? Will they ever understand what “interactivity” is, or more specifically, what “interactive media” is? Overall, I’d say it was an interesting read, but I had a lot of contrary ideas, part of the reason being that I will be carrying that name with me throughout my academic career.

When first going through the article I enjoyed the authors’ style of writing. Even though his style may not have to do with interactivity I found it interesting how he it seemed he was at times angry or fed-up with the current state of things surrounding the word interactivity. This may show that he is biased in that he starts off by feeling annoyed rather than objectively considering how the word interactivity is being used already as he only starts by mentioning advertisements, then throughout the text mentions more real-world scenarios (like reading, or dancing) but I wish I could have seen more mention of how interactivity is used in academia as words are often loosely used/defined in normal conversation.

In any case he makes a compelling alternative to how the word interactivity should be used. For example interactivity should be more than just being true or false but should consider how interactive something is. Then also mentioning what qualities are needed for something to be highly interactive. Listening, thinking, and speaking. The only problem I see is that I believe how interactive something is, is subjective, but whether or not something is interactive is objective. The author believes that if one of the qualities are missing then it cannot be considered highly interactive but people can play games against someone else who is reacting to their moves (which makes it interactive) but not speak at all for example and still find it highly interactive since it is based on emotions rather than logic alone. One of the interesting things I found towards the end is that a good interactive designer should have a good understanding of both the backend and the frontend of a product. Backend in this case meaning the algorithms, and frontend the general appearance.

Reading “The Art of Interactive Design” by Chris Crawford has got me thinking about the many aspects of digital interaction, from the narrow scope of game design and conventional software development to the larger social and technical context. Among the many interesting, thought-provoking points brought up by Crawford, the essence of interaction was something I never really got to think about in the way Crawford brought it up. Crawford’s exploration of interaction as a conversation between the user and the system prompts a reconsideration of what effective communication means in a digital context. It makes me think about how devices, apps, and platforms are not just tools but participants in a dialogue with users. This perspective challenges designers to create more empathetic and responsive systems that genuinely understand and adapt to user needs, or else it becomes useless as if a person is speaking to you in a different language than the one you know.

 

Reflecting on “The Art of Interactive Design” inspires a personal commitment to lifelong learning in the field of technology. The pace of change is rapid, and staying informed about new theories, tools, and methodologies is essential for anyone interested in creating meaningful interactive experiences. It reinforces the importance of curiosity, creativity, and critical thinking in navigating the complexities of interactive design.

When starting this assignment I set the goal of creating classes which behaved differently to each other. In my previous assignment I had a similar goal but wasn’t able to achieve it so I thought I would try again. When it came to the code I took inspiration from the car sketch, where the location of each car was stored as posX and posY. I also wanted to make something similar to what some of my other classmates were making without looking at their code and spending as much time figuring it out myself. I tried to replicate Snehil’s design with the use of what looked like snakes but I wanted a different color scheme. I found Darko’s color scheme more appealing. Then lastly, I wanted to make a class which I could easily repurpose or re-use if I wanted to make shapes which could move around almost randomly.

class snake {
  
  constructor(posX, posY, radius, magnitude, coefficient) {
    
    this.posX = posX;               // x-position of the shape
    this.posY = posY;               // y-position of the shape
    this.radius = radius;           // radius of the circle, could be changed if the shape is different
    this.magnitude = magnitude;     // magnitude refers to the amount the shape moves every frame
    this.coefficient = coefficient; // coefficient is the number that multiplies the frameCount in the noise function, I prefer it when it is the same for all snakes but it is a variable that can be changed regardless
    
  }
  
  // This class sets a new posX and posY based on a randomly generated heading
  update() {
    // update random heading
    
    let noiseRandom = noise(this.coefficient * frameCount);
    
    angleMode(RADIANS);
    
    let randomHeading = map(noiseRandom, 0, 1, -2*PI, 2*PI); //random heading
    
    // setting new posX, and posY based on the magnitude
    
    this.posX = this.posX + cos(randomHeading) * this.magnitude;
    this.posY = this.posY + sin(randomHeading) * this.magnitude;
    
    // The reason I used sin and cos is because setting the new values is similar to a right angle triangle: The magnitude can be represented as the hypotenuse, and the random heading an angle, then the adjacent value is the change in x, the opposite value is the change in y, then add said changes to the posX and posY respectively. Of course to calculate the new aformentioned values the formula sin(randomHeading) = x / magnitude has to be rearranged, and the same for cosine. 

  }
  
  // this class just draws the shape, it could really be anything, it could even be modified to be a rectangle or an ellipse or anything else you can think of.
  drawShape() {
    
    circle(this.posX,this.posY,this.radius);
    
  }
  
}

Above is the entire class which I named snake. I only used 2 functions not including the constructor which was update and drawShape. the update function’s purpose was to create a new heading, and update the posX and posY variables based on the heading and the magnitude inputed when creating the class. I tried to explain how it’s done but I feel the long comment does not do it justice. Before I explain, originally I tried to use vectors and the translate method. What I realized was that the translate function could also move other shapes on the screen, and instead of trial and error-ing my way around, I decided to use posX and posY like what I remembered from the car-sketch.

To do this I thought of a right angled triangle and using the trigonometric equations to find what the new coordinates for the shape would be.

While the math isn’t very complicated I felt it was worth explaining and documenting regardless. The hypotenuse is in this case the magnitude, the adjacent side (see left triangle) is the change in x, and the opposite side (left triangle) is the change in y, and theta is the randomHeading variable I generated in the update function. I knew the equations sin and cosine could be used as they had all the variables I needed and so by rearranging for x and y respectively, then adding the new values I got to the pre-existing posX and posY variables I could get the new posX and posY variables. This was the main problem I had, and it was what took me the most time to figure out since at the beginning I chose not to look directly into the code of others and to use what I knew already or what I remembered from class.

Below is the finished product:

Click to reset the circles.

My third assignment started with experimentation rather than ideation. As I initially struggled to grasp the concept of OOP and how to implement it into my own work, I went through the examples provided and began to change different variables just to see how they affected the output.

After some time, I decided that I wanted to continue my theme of recreating natural experiences. I initially wanted to pursue this by expanding on the concept of my last assignment (sitting under trees) to “sitting under clouds”. The idea for this was to have clouds move smoothly with a Sine function and incorporate some interactivity using “if (mouseIsPressed == true)” such as lighting or rainfall. However, after implementing Sine movement to my object, I noticed that it felt more “alive” than something as passive as clouds. As I had already conceptually situated my idea in the sky, I decided to branch off from my original concept and create a scene which depicts the body of a dragon.

While I decided to only create the body as a result of my inexperience, I personally like the unique perspective of only viewing a small part of something that is intended to be big. I believe that films often use this technique of showing a small part of a large creature in order to produce a sense of scale without having to animate its whole body.

In terms of interactivity, I still incorporated “if (mouseIsPressed == true)” in order to simulate the (off-screen) effect of the dragon breathing fire. I did this by generating a random color palette within the range of a faded red – a greenish grey on the background when the user clicks on the mouse.

I a simple yet effective piece of code from this assignment which I am proud of would be the “shading” which I managed to produce on the dragon’s body by increasing the number of rectangles in the for loop and selecting two analogous colors for the fill and stroke. I have included the two examples together below.

 // spacing and for loop
 let spacing = width / 163;
  for (let i = 0; i < width; i += spacing) {
    manyRectangles.push( new SineRect(i, 10 + i * 2)  );
  }

/////////////////

// dragon's body color
  fill(140, 70, 70);
  stroke(80, 50, 50);

Some points of improvement going forward (beyond learning how to make a full dragon) could be to create a more realistic sky as the flat/cartoonish style of the clouds contradicts the smooth aesthetic of the dragon. I feel that I could have also made the sketch more interactive by allowing the user to interact with the dragons body in some way (e.g it moves when the mouse is pressed or it follows the mouse).