This reading had one quote that extremely stood out to me and it was as follows “It is the duty of machines and those who design them to understand people. It is not our duty to understand the arbitrary, meaningless dictates of machines”, I have to admit I used to be one of those people the author describes in the reading that think that design is pretty straightforward and is pretty much based on logical decisions. I didn’t think that there is a human behavioral aspect to it. But it makes sense that designers should be able to understand human behaviors to tailor their products to be most comfortable for users, and not the other way around.

I must say, I had my fair share of frustration using laundry machines here on campus, each machine has a different set of features and It’s really hard for me to memorize every single functionality so I tend to choose a random setting each time. The amount of times I’ve thought to myself if only I was smarter to interpret what the signs mean without having to google the manual every time I’m doing laundry are countless. Therefore, Laundry days are almost always so emotionally overwhelming for me and so dreadful. The laundry machines are only one example of complex machines that tend to make me blame myself for being stupid and not competent enough, that’s why I resonate so much with what the author is saying that designers must understand that design is not just about delivering a working product but also about understanding how easy/hard this product will be for the general public and not to fellow engineers/specialized personnel.

However I cannot deny that multiple questions pop up in my mind about the feasibility of intertwining technology and psychology together for enhanced design. I wonder how combining both fields would affect each other. What sorts of compromises have to be made for Human Centered Design to take place? I know that it’s not about choosing one or the other but rather about integrating behavioral sciences within design, but without doubt there will be consequences. How can designers work on simplifying individual complex functionalities without affecting their overall product functionality, because I believe that having to come up with something logical is easier and more straightforward than having to think about all aspects of the human brain and decision making while designing a product that meets certain criteria. I often think that designers are bound by the rules and criteria set to them to make their product as efficient as possible on a budget, so it makes me wonder how taking human centered design into consideration affects all that.

The concept:

For this project I decided early on that I wanted to do something related to Formula 1 racing, because I have been so interested in racing and race cars since I was very young. I went on Kaggle.com and found so many F1 datasets. I couldn’t decide what to do with them though. I initially wanted to do a visualization of the lap times over time (1950-2023), but the trends weren’t very interesting so I decided to focus on where the drivers are from instead. The whole concept of my project is to show you a visual representation of the countries F1 drivers are from. When you first run my program, you get a screen of two F1 cars racing towards the finish line, each round they have varying speeds though. When you click on the screen, you see the main screen where a map is displayed with red pins on the countries where F1 drivers are from. When you hover over a pin, it displays the country name and the total number of drivers who have raced in F1 from this country over the years. 

A highlight I’m proud of:

One thing I am really proud of is how I got the pins to work in a way so that when they are hovered, the stats are shown above. I used OOP to define the stats class which displays both the pin on the country (I had to create a csv file with the exact locations manually though) and the text displayed when the pin is hovered over. 

class stats { //pins placed on the countries' location and stats displayed
  constructor(countryCode, x, y, countryCount) {
    this.countryCode = countryCode;
    this.x = x;
    this.y = y;
    this.diameter = 3; // Initial circle diameter
    this.isHovered = false; //boolean variable to know whether the pin is hovered or not
    this.hoveredDiameter = 20;//diameter of the circle when hovered on
    this.countryCount = countryCount;
  }

  display() {
    noStroke();
    fill(255, 0, 0);
    ellipse(this.x, this.y, this.isHovered ? this.hoveredDiameter : this.diameter); // Adjust size when hovered accordingly
    
    if (this.isHovered) {//display the stats above when pin is hovered
      fill(220);
      textSize(22);
      textAlign(CENTER, CENTER);
      text(str(this.countryCount), width - 70 , 15);
      text(str(this.countryCode),width/2 - 50 , 15)

    }
    
  } 
  
  checkMouseHover() {
    // Calculate the distance between mouse and pin center
    let distance = dist(mouseX, mouseY, this.x, this.y);

    // Check if the mouse is within 2 pts of the pin 
    this.isHovered = distance < (this.diameter / 2) + 2;
  }
   
}

 

Reflection and ideas for future work or improvements:

I really enjoyed working on this project because it allowed me to explore new concepts and challenge myself to make it as close to what I had in mind as possible. One thing I really wanted to do though, but I couldn’t get the hang of was to create a smooth transition between the opening screen and the main screen. What I had in mind was to code it so that it would show the opening screen first and when the cars cross the finish line, there would be confetti all over the screen and transition into the main screen, where users can hover over the pins and display the country stats. This is the one extra thing I would’ve loved to include in my code. 

References:

Car and Map clipart: https://www.clipartmax.com/ 

It is sometimes unfair to expect a user to read a manual before using our application. I agree with the author that not everything has to be completely intuitive, such as an airplane cockpit does not have to be designed to be easily usable by an untrained passenger. However, complexity should not be added to objects that simply do not require it. A door should be easy to figure out, and it should be designed from an average layperson’s POV. What would an average person do? Would they pull/push the door? If so, then the door should be designed with that in mind, unless there is an actual need for using a non-conventional approach to design like having to tap the door three times for it to open. Or if you’re designing an escape room, where the intention is inverted on it’s head — you try to design something that is difficult to use.

From the perspective of designing my p5.js sketches, I think this idea of intuitiveness and familiarity comes into play. Would a user know to press specific buttons on their keyboard if there is no instruction to do so, without reading the code ( in this case, why should they read the code before running our sketch? ). Yet we must not treat the users as completely incapable and instruct them every single step of the way. Personally, I think it should be safe to assume that users would move their mouse around a sketch, and maybe press the mouse buttons a few times, thus I personally think that instructions are not needed for mouse interactions , but should be there for keyboard interactions. In an ideal world, instructions should be there for what the user is ignorant of, and instructions should be left out for what users know as it just adds clutter.

I think this reading accentuates how finicky product design can be. There are so many different fields a product must fulfill e.g., ergonomics, optimization of function, aesthetics, interactivity/ user experience, whilst staying in keeping with budget constraints, for it to be considered optimal. It also highlights the difficulty of remaining in balance. It shows that we are always teetering towards one extreme, in this case, it may be logic with user functionality and aesthetics. I think NYUAD serves a primal typification of this struggle with remaining in balance. The long path winding down to D2 faces a “major” yet aesthetic obstruction: an elevated grass platform with chairs and tables and patio umbrellas(?) deliberately placed in the middle of an open path leading straight to the entrance of the dining hall. It’s what I can only describe as a deterrence. This debate has surfaced in NYUAD’s Room of Requirement whereby multiple people have criticised its hostile architecture. I feel as though this may also be applicable to the design of John Sexton’s Square, although this may be more of a subjective, personal critique.

Another thing the reading does profoundly is emphasise the importance of psychology in all aspects of design. Human centered design is centered around and relies largely on our concise understanding of human psychology and behaviour. Furthermore, such a study can be applied to increase commercial sales which also spotlights its importance in commercial businesses. This reminded me of deliberate aesthetic/ functionality designs of architecture as a means to maximise profit, for example: casinos. The windowless walls essentially inhibit one’s perception of time, and maze-like layouts ensure patrons serendipitously discover new games at every intersection. Overall, I think its fascinating how a singular area of design can encompass and call upon diverse disciplines e.g., maths, psychology, engineering, arts. In this sense, I think it perfectly encapsulates the intricacies that are necessary and play a paramount role in this specific field.

In this chapter, Norman emphasizes the importance of clear and effective design in enhancing user understanding and interaction with a wide range of products, systems and environments. He highlights the immense significance of crafting designs that not only look appealing but are also intuitive, user-friendly and aligned with human behavior and capabilities.

In today’s rapidly evolving technological landscape, it becomes essential to prioritize effective design. We seek natural and frustration-free interactions with machines. No matter how technologically advanced a product may be, its true value lies in its user-friendliness.

The reading reminded me of my freshman year when I had to do laundry for the first time. The different settings left me so confused and frustrated that I left the laundry room altogether, and then I had a friend come in who helped me. It is a stark reminder of how we crave simplicity and intuitive design in our daily interactions.

The reading also raised a question for me: How can we ensure that as emerging technologies push the boundaries of advancement, they do not compromise on user-friendliness? Striking a balance between innovation and usability becomes paramount in an era where the rate of technological change is relentless.

For this assignment, I opted to create a rainfall data visualization for my hometown, Islamabad. The motivation behind this choice was because it serves as a nostalgic reminder of the lush, rainy climate in Islamabad, which I truly miss in contrast to the super hot weather here in Abu Dhabi.

Initially, I began with a simple bar chart. However, during my research on data visualization techniques, I stumbled upon Chart.js, which I decided to incorporate into my assignment due to its ability to provide a visually engaging representation of the data. I sourced my dataset from Kaggle, which contained various columns related to weather, including minimum and maximum temperatures. However, I chose to focus solely on the column that documented the maximum monthly rainfall in Islamabad.

Here’s how my barchart looks like:

Working with the dataset was relatively straightforward, as I had prior experience working with CSV files. One aspect of my code that I particularly like is the part dedicated to visualizations.

function createChart() {
  let options = {
    type: 'bar',
    data: {
      labels: months,
      datasets: [
        {
          backgroundColor: originalColor, // Set original color
          borderColor: 'rgb(0, 50, 100)',
          borderWidth: 2,
          barPercentage: 1,
          data: rainfallData,
          label: 'Monthly Heaviest Rainfall (mm)',
        },
      ],
    },
    options: {
      title: {
        display: true,
        text: title,
      },
      legend: {
        display: false,
      },
      scales: {
        xAxes: [
          {
            ticks: {
              autoSkip: false, // Prevent auto-rotation
              maxRotation: 0, // Set rotation angle to 0 degrees (horizontal)
              minRotation: 0, // Set rotation angle to 0 degrees (horizontal)
              fontSize: 8, // Adjust the font size of x-axis labels
            },
            categorySpacing: 40, // Increase the spacing between category (label) items
          },
        ],
        yAxes: [
          {
            scaleLabel: {
              display: true,
              labelString: 'Monthly Heaviest Rainfall (mm)',
            },
          },
        ],
      },
   
        }
      },

I’m pleased with the feature that displays the corresponding rainfall value when hovering over each bar. This functionality simplifies the process of interpreting the chart, eliminating the need to constantly refer to the x and y axes.

Overall, I’m satisfied with how this assignment turned out. However, in future projects, I’d like to incorporate more interactivity to make the visualization more engaging and enjoyable for users.