Category: F2023 – Mang

I appreciated the way the author narrowed down the essential characteristics of good design to discoverability and understanding. While these are undoubtedly crucial, there are many other vital characteristics to consider, such as a clear purpose, simplicity, balance, consistency, clarity, and efficiency, among others.

When the author addressed complex designs and emphasized the quality of interaction, I wholeheartedly agreed. I believe that simplicity and complexity both have their beauty. A device or design that offers complexity can be just as captivating as a simple one because the process of discovering and learning its potential is a unique form of beauty. Each new revelation makes the user perceive the device as outstanding.

Reading about the challenges stemming from the lack of human-machine interaction highlighted the gravity of this problem. It underscored the importance of addressing these issues in design. Yes its a crucial concept in design, but the author made us understand the impacts it could create by giving examples. 

The concept of Human-Centered Design (HCD) fascinated me when the author emphasized the need for designers to focus on potential errors during the design process. I believe this is a critical consideration that every designer should keep in mind because it significantly impacts the end-user experience.

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.

As an NYUAD student, the door problem is real! Not just the door problem, but many other design problems existed until last semester, and thankfully, many have been rectified since then. From confusingly flipped maps to the oddly configured staircase leading from the performance gym to Falcon Field, I explored these design dilemmas around campus in a class called ‘Wayfinding’, and it wasn’t just about designing for spaces; it was about designing for people. This echoes Norman’s advocacy for human-centered design. I like his thoughts on feedback and why it’s necessary. I’ve impatiently pressed the pedestrian crossing button multiple times, assuming it’s not functioning.  I’d definitely have much more patience if someone told me it was working.

I’m passionate about both technology and design, Norman’s discussion of the paradox of technology fascinated me. In a time where the Apple iPhone 15 and the latest iOS updates are hailed for their cool features, people have started to acknowledge their downsides, such as overheating or performance slowdowns, which overshadow their umpteen benefits. Just as Don Norman mentions, Experience is critical, for it determines how fondly people remember their interactions. Despite the cute bubblegum pink phone color, a full-screen display, or the customizable call features, issues like overheating and lag are starting to deter users and will probably determine how people will remember their user experience with Apple products from now on. It’s a reminder that even the most aesthetically pleasing designs must prioritize functionality and the user experience above all else.

All in all, I really enjoyed this reading as his writing style was quite engaging as well as conveyed all the important concepts and distinctions about them. As I start introspecting more on this reading, I want to think as both, a user and a designer. In the shoes of a user, Am I paying enough attention to the signifiers and affordances that designed objects and interfaces provide? As a designer, how do I navigate the balance between the right amounts of feedback to give or how would I make something more Human-centered?

 

After reading the chapter, I feel the author said exactly what I thought. Some designs are inhumane. NYUAD is a great example. I remember the designer of NYUAD was famous and great. However, some aspects of the design really piss me off. For instance, I understand the doors are automatic so that disabled people can enter. However, It also led to many other problems, including maintenance issues, slow reactions (leading to traffic), etc. Many different ways could fix this issue, for example, changing the opening method of the doors from swinging to sliding, adding specific gateways for people with disabilities, and so on. However, it might negatively influence the aesthetics of the design itself. I guess that is why it hasn’t been fixed.

Another thing about the article that interests me is that the author said the engineers are too logical. I immediately thought of a concept in design called “affordance.” This term generally refers to an object’s aspects that define its uses and how it could be used. If this concept can be applied to designing and making it evident how it should be used, it should become a good design. However, I also understand the difficulties in doing this, especially in machines with multiple functions or complicated properties. Still, it should be applied to many daily items since they are not that complex, and usually, people using it are not professionals.

As a Computer Science major, optimization and logic are two things that we are constantly trained to hammer into our brains. We are conditioned to increase efficiency at the cost of understandability (why do something in 4 lines of code when you can do it in one?). Needless to say, Donald Norman’s take on technology and devices felt like a breath of fresh air. I especially liked his criticisms of conventional engineering, wherein the center of all design and development is logic. I agree with his stance that humans do not function inherently with logic and instead are unpredictable and experimental. I especially like this line of thinking because it brings to the forefront the question – is there any way we can even define basic human logic? There are so many factors at play in the way humans function, in this case, some of the most important being neurodivergence and disability. The way neurodivergent or disabled individuals navigate life is so drastically different than the way we do, their fundamental understanding of logic will be very different than ours. So when an engineer is asked about his design and his answer is logic, is he pompous to assume the way he functions is fundamental logic?

I also like his emphasis on being able to explore a device, a concept I feel is much lost in this day and age. With the initial advent of technology, with it being all clunky and whatnot, emphasis was placed to showcase not only how it worked, but the various ways one could interact with it. These days, it is assumed that everyone knows how to use a touchscreen or share via Bluetooth, so more emphasis is placed on how seamless it is. This assumption that everybody knows how to use these devices, and more importantly, how not to break these devices, makes them inaccessible to the general public.