Category: Spring 2024 – Aaron (Section 001)

“The problem with the designs of most engineers is that they are too logical.”

😱 Ouch ouch! Don Norman’s quote above from “The Psychopathology of Everyday Things” was harsh enough to get my blood boiling. Despite feeling personally attacked, both the devil and the angel on my shoulders say “Wait, wait, he has got a point”. I fully join Don in standing ovation for his idea of Human-Centered Design. When I wrote in my last post “The good design speaks for itself, the learning curve is so smooth such that the users enlightens themselves without any guidance and hitting F1 for user manuals.” I was saying exactly the same points. Discoverability is a vital concept… the user should be able to discover how the thing works, without it being explicitly stated… and how do you mainly achieve this? Nudges!! Although Don has not mentioned it in Chapter 1, I would like to highlight the Nudge Theory to the rescue… and some examples.

The Nudge Theory

I don’t have a human kid, but I know for a fact that at one point, they have to stop breast milk 🍼 and start to eat actual solid food 🍗. This process is called weaning and back home, they start to train babies to stop feeding on breast milk around 6 months to 1 year of age. Like cocaine addicts with withdrawal symptoms, the babies will cry endlessly and become super desperate whenever they come into close contact with their mother… then these little zombies will reach out for the breast.

[Image Source]

This behavior has to change, of course. Back home, they have a traditional method of weaning… where you literally “spice 🌶️ things up”  by putting turmeric powder on the mother’s nipples so that when the baby gets its breastmilk next time, it goes “What the blistering barnacles?” with eyes popping out 😳. Next time, it learnt its lesson… “Chicken wings are tastier than breastmilk from now on”.

[Turmeric Powder – Source]

Cruel, effective, spicy…🔥

Woah woah Pi, how is this spice powered weaning method related to Human-Centered Design?

Wait wait, I am just explaining the idea of a “nudge theory”.

This is an example of nudge theory in action – a nudge is a gentle push towards a desirable behavior without any force or mandate. Here, the baby discovers on its own that it should switch from breastmilk to chicken by itself.

Don Norman’s discoverability in action!

In similar, but less spicy ways, the nudges can be applied to aid discoverability in a lot of human centered designs, to gaslight the humans into figuring stuff out on their own. In the rest of the post, I would like to share 3 of my favorite examples of this discoverability in action.

Applying Nudge Theory to Everyday Design

Flies 🪰

My personal favorite of all time solves the age-old problem of men’s restrooms: the messy urinal area. The aftermath is a nightmare for anyone tasked with cleanup. But here comes the nudge solution, as simple as it is ingenious.

A tiny sticker of a fly, or sometimes a target, is placed strategically in the urinal. It’s almost laughable how such a small thing can redirect a grown man’s attention. Yet, it works!

Men, either out of amusement or subliminal inclination, aim at the sticker.

The result? A cleaner urinal area, less spillage, and a sigh of relief from janitors everywhere.
It’s fun, it’s effective, and the best part? It doesn’t need a user manual or a ‘how-to’ guide. Men just get it, and they go along with it, often without even realizing they’re being nudged into better behavior.

World’s Deepest Bin 🗑️

Traditional bins are all but invisible to the average person. Enter the world’s deepest bin – not literally the deepest, but it sure sounds like it.

The nudge here is a bin that, when used, emits a humorous, exaggerated deep sound. It’s like dropping a piece of trash into a never-ending well. The sound is so unexpected, so comically over the top, that it draws people in. The result is as effective as it is entertaining: people actually look for things to throw away just to hear that sound again.

It turns an ordinary act of disposing of trash into a mini-adventure. And just like that, littering is reduced.

People are engaged, amused, and more importantly, they are nudging themselves and others to keep the surroundings clean.

Piano Stairs 🎹

The last example is a delightful play on human nature’s love for music: the piano stairs. The problem is clear: given the choice, most people opt for escalators or elevators, shunning the stairs, missing out on an easy opportunity for some physical activity.

The nudge solution? Transform a staircase next to an escalator into a giant working piano. Each step is a piano key that makes a sound when you step on it. The result is magical. People are drawn to the stairs, curious and excited. They hop, skip, and jump on the stairs, creating music as they go. What was once a mundane climb turns into a playful experience.

People actually go out of their way to use the stairs, sometimes repeatedly.

It’s human-centered design at its most whimsical and effective.

Conclusion

In each of these examples, the key factor is the design’s ability to communicate and guide behavior without explicit instructions. The fly in the urinal doesn’t need a sign explaining what to do. The World’s Deepest Bin doesn’t have a manual on how to use it. Piano Stairs don’t come with a user guide. They work because they tap into human instincts and make the desired action the more appealing choice. This is the essence of human-centered design – creating solutions that are so in tune with human behavior and needs that they guide us subtly towards better habits.

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.