Chapter 1 of The Design of Everyday Things by Don Norman poses interesting and crucial observations about the design of our everyday objects, machines, and other utensils. When Norman described the example of bad design with the story about his friend being trapped between doors, I remembered of a similar experience I once faced. After moving to central Europe from Ukraine, I did yet realize that the design of doors in this area of Europe was significantly different than that in Ukraine. Here, doors had handles only on the inside and a dysfunctional knob on the outside. When I an apartment building in Slovakia, I was confused why do all the doors have useless knobs if they don’t even turn. I later learned that this design choice was mainly for ‘safety purposes.’ Still didn’t stop me from accidentally locking myself out of the apartment, even with the door unlocked.
I believe that the points Norman makes in the first chapter are precisely how poor design choice leads to many failures and mistakes. Even recently, I had bought swimming goggles, and accidentally ruined them by rubbing the inside surface. I later read the instructions where it said not to do so. I believe the design of everyday things can be so much better, exactly like Norman proposes, and that it is perhaps our human nature to assume other think like us to design things in a way that we might understand, but others might find challenging. Just like Norman’s example with how engineers think about the things they create, they assume things logically, which is not the case for all people, and thus poor design choices are made. They might not necessarily be poor in functionality, but it is often difficult for people to understand the exact functions if the design is unclear. Overall I believe Norman makes valid arguments as to why the design of everyday things could be so much better.
Initially I intended to choose the generative text project, but due to a lack of ideas/direction I switched over to the data project. I personally have a strong background with data, so it was a surprise to me when I couldn’t come up with a direction with this either. Data visualizations should effectively communicate the data they are trying to visualize, however I couldn’t think of a way to cohesively do this, while applying the lessons I had learned with my projects in the past weeks.
At this point, I first attempted to find a dataset to visualize. I wanted to visualize air-pollution in New Delhi, the capital of India (where I spent a chunk of my childhood), but an appropriately formatted dataset was hard to find. So, I ended up settling on a weather dataset of the city that had hourly weather data for a period of ~50 years from the 1960s to 2010s. This dataset contained several fields, but I narrowed them down to ‘wind speed’, ‘wind direction’, and temperature.
To visualize the wind, I decided to use a simplified version of the particle generators from my previous assignment. My word would be simple enough if I could vary the color based on temperature, and vary the particle’s movements and orientations based on the wind speed and direction. However, this proved to be a bit more challenging. Removing the noise from the simulation, made it look extremely bland.
Following this, I had to strategically add noise to not disturb the visualization but still add interesting movement. But even this didn’t seem enough. Since I was borrowing ideas from my previous assignment, I felt I needed to do more. This led me to add the elements of interactivity to the project. First, clicking on the mouse, lets you move forward a day in the visualization (you only move forward an hour every 2-3 seconds otherwise). Additionally, you can navigate to any date you want using the input menu.
Lastly, I also added a visualization of the important cities in India as the starting screen. A continuation of this project could be finding and adding similar data for the other cities in the visualization.
Highlights:
My highlight for this project was certainly adding the elements of interactivity to the code. Creating the input box, and attempting to match the date by matching the string formatting was a bit challenging, even given my background. Moreover, generating the final effect was also fun it itself!
Additionally, I enjoyed the process of finding relevant data, and actually thinking of ways I could enhance the visualization.
function jumpToDate() {
let inputDate = dateInput.value();
let dateParts = inputDate.split('-');
let formattedInputDate = dateParts[2] + dateParts[1] + dateParts[0];
for (let i = 0; i < table.getRowCount(); i++) {
let rowDate = table.getString(i, 'datetime_utc').split("-")[0]; // Extract just the date part
if (rowDate === formattedInputDate) {
index = i; // Set the index to the found row
break;
}
}
}
Reflections and Future Work:
This project can still have several improvements. First of all, I would love to be able to increase the scale and include other cities/states/countries into the visualization. It would also be really cool if one could toggle between this mode, and a more ‘bird’s eye view’ to see changes both across time and geographies.
Regarding the aesthetics themselves, I believe there are several more optimizations needed especially with some of the direction-based motion. For example, the switches in direction when the next row of the dataset is accessed can be made smoother.
Lastly, as stated earlier, an obvious continuation would be to increase the scope of the visualization by adding data for other cities.
After our lecture, where we learned about how to visualize large amounts of data within p5, I remembered one popular image regarding the subject. This was the visualization of all McDonald’s locations in the USA. The map was nearly full of points representing the large amounts of fast-food chain restaurants, however, I realized that I had never seen a similar map for Europe. This inspired me to search for a file containing the locations of all McDonald’s restaurants in Europe, and consequently, visualize the data to see what the map of Europe will look like through McDonalds locations. I was able to find a .csv file with exactly what I was looking for published by a user on GitHub.
Implementation / Code
Since the project I am working on is very similar to the data visualization example we looked at in class, a lot of my code is very similar, including checking if the file loaded, checking if there are errors within the file, and so on. I also realized that it is unnecessary to run through the file again in order to plot the points onto the canvas. Or perhaps it might be… As I was trying to create the data visualization, I frequently used the example in the lecture notes as a template. However, even though the code seemed good, the mapping of the points did not resemble a map to me. The minimum and maximum Lat and Long coordinates were all correct and accurate after I checked them on Google Maps, however, the visualization itself did not resemble the map of Europe. This set me back, and I took a few hours off to come back later and think what might be causing this issue.
Something that was initially confusing to me, was determining the minmaxLatLong coordinates. The method of adding 10 and subtracting 10 from the variables “latitude” and “longitude” themselves seemed odd to me. I decided to try and instead use an extreme value for the initialization of the variables minLat, maxLat, minLong, and maxLong. To my surprise, this actually produced a visualization that seemed way more accurate, however, it was not scaled properly to the canvas. After playing around with the values, I was able to get a good scale on the canvas. I am yet to figure out why this worked out the way it did.
function getMinMaxLatLong() {
let singleRow = [];
for (let mcdRowNumber = 0; mcdRowNumber < strings.length; mcdRowNumber++) {
singleRow = split(strings[mcdRowNumber], ",");
let latitude = float(singleRow[0]); // first is latitude
let longitude = float(singleRow[1]); // second is longitude
if (isNaN(longitude) || isNaN(latitude)) {
// make sure they are numbers
print("Conversion to float failed; Skipping row " + mcdRowNumber);
} else {
if (mcdRowNumber == 0) {
// very interesting observation, by changing the initial values of min and max of the lat and long, the entire visualization shifts, why?
minLat = -20;
maxLat = 30;
minLong = 20;
maxLong = 70;
}
minLat = min(minLat, latitude);
maxLat = max(maxLat, latitude);
minLong = min(minLong, longitude);
maxLong = max(maxLong, longitude);
}
let xpos = map(longitude, minLong, maxLong, 0, width);
let ypos = map(latitude, minLat, maxLat, height, 0);
stroke(3);
point(xpos, ypos);
} // end of for loop
//inaccurate with the extreme values
//print("Latitude (min, max) = (" + minLat + "," + maxLat + ") ");
//print("Longitude (min, max) = (" + minLong + "," + maxLong + ")");
print("Finished.");
} // end of findMinMaxLatLong
Final Product
Above is the final data visualization. The black points represent the McDonalds fast food restaurants in most of Europe.
Reflection
Even though the coding was mostly understandable, I am still questioning why the initial methods of determining the minimum and maximum Latitude and Longitude did not work out. I will be looking into this more thoroughly in the future, and I enjoyed working on this project.
After reading this text, I started to think and investigate about discoverability. In my opinion, the concept of how easily users can understand, find, identify, and access a design product’s features, functions, or content is a vital pillar in UX design.
I especially agree with the author’s idea of good design. The washer-dryer machine example was a scene that I felt really close to home. I remember multiple designs that even though they provided high levels of personalization to the user, they did not allow an intuitive learning of its use. Discoverability ensures that users can navigate and operate an interface with minimal effort with minimal guidance or instructions, which in my personal experience, is what makes a great design.
The idea the author provides that “machines have no leeway or common sense” is interesting, because it shows one of the fatal flaws of bad design. Failing to follow the exact process of the machine leads to problems, frustration, and misunderstandings. If the machine cannot provide an experience that is forgiving to user mistakes, then it is a bad design. Even if the design itself does not lead to the correct functioning, then it is a bad design. So, what can we do to improve this?
Every design should not be ruthless. The idea of having no mercy in terms of how many errors can the user make goes completely against the whole concept of user experience and interactivity. In special, when designing, it is crucial that we are able to lead the user toward the main user flow. Therefore, we allow the washing/drying machine to have many options and different customizable settings: however, users should be directed with colors, arrows, sizes, and lights to the main features, washing and drying clothes.
For this week, I focused on creating a project on data visualization. The idea here was to provide a map of every single airport in the world, no matter the size or the location. To provide some interactivity in the project, I decided to add the function of moving the mouse and slowly revealing the map.
I was inspired while checking the passport map and ranking available at https://www.passportindex.org/. In here, we can see a map that is divided by countries and shows the ranking of each passport in terms of visa-less travel.
Having obtained the altitude, longitude and latitude of each airport, I presented a map that would plot all three coordinates. Hovering the mouse will show the airports around that area and pressing will reveal the map.
Implementation:
For this project, I browsed different APIs and datasets that I could plot and represent in the sketch. I ended up finding this dataset in Kaggle.
Initially, I implemented different types of datasets for the airports. However, the biggest problem was regarding the size. Due to the fact that removing items from the list would go against the purpose of the project itself, I decided to search for a CSV file that would be within the limits of P5JS.
function draw(){
background(0);
for(let i = 0;i<airportsX.length;i++){
//if it is close to the mouse and we are not pressing the mouse.
if(abs(mouseX-airportsX[i]) < 100&&abs(mouseY-airportsY[i]) < 100 && !mouseIsPressed){
stroke(255);
strokeWeight(airportsAlt[i]/400)
point(airportsX[i],airportsY[i]);
}
//show whole map if we pressing.
else if (mouseIsPressed){
stroke(255);
strokeWeight(airportsAlt[i]/400);
point(airportsX[i],airportsY[i]);
}
}
}
Challenges and Improvements:
I would have liked to improve the interactivity and the amount of data provided. For example, I already have the names of each airport and their altitude. With this, I would have liked to show the name of each airport, but I was not able to solve the problem with the size of the dots. In order to show every dot properly, I could not change the size too much, because it relies on the altitude.
Interestingly, the map ended up showing a very pretty plot, which resembles logically the altitude of different areas around the world. We will see that the north-western side of South America has a lot of big circles, which symbolize the amount of high airports there are around Bolivia and countries around the area.
I used the geolocation data of power plants around the world combined with the data for the production capacity for each plant. I used the geolocation to put them on the canvas, and then at each point a bar extends from the canvas vertically upward to account for the capacity of the plant.
I think something to make this more visually appealing would be to add some interactivity. I think it could be that as the user clicks on a point, they can get more information about that power plant, like the country, capacity, type of plant, etc. A pop-up text box could display such information.
Donald Norman’s exploration of the intersection between technology and psychology in the context of design strikes a chord with anyone who has ever interacted with modern products. In a world where technological advancements abound, Norman’s central argument, that design should encompass more than just functionality, resonates deeply. It’s a view that goes beyond the realm of theory and feels undeniably pertinent to our daily lives.
Engineers often excel at creating products that function flawlessly, yet they may falter when it comes to the user experience. A personal experience that illustrates this disconnect is the time I ordered a make at home clock on amazon that came with a complete user manual. On the surface, assembling the clock seemed like a straightforward process. However, despite the presence of a user manual, I found myself grappling with the intricacies of the clock’s operation.I think this experience underscores Norman’s assertion that effective design should prioritize the user’s experience, making products not only functional but also intuitive and accessible. The clock’s design may have been functionally sound from an engineering perspective, ensuring that it kept accurate time. Still, it failed in terms of user-friendliness.
Morever, Norman’s discussion on “discoverability” also resonates with my own experiences. He emphasizes the importance of understanding the connection between cognition and emotion in design. When interacting with products, users must effortlessly perceive how they work and what operations are possible based on the design cues and characteristics (affordances) of the product.
I think Norman’s insights challenge the conventional engineering-centric approach, advocating for designs that seamlessly cater to the average user’s perspective and understanding. I think Human centered design, as proposed by Norman, has the potential to bridge the gap between technological functionality and intuitive user experiences.
For this assignment, I decided to recreate a popular game called “Cards against humanity.” In this game, each participant is presented with a black card containing a humorous or absurd prompt. The objective is for players to select from a set of white cards, each bearing a comical response, aiming to match the prompt with the funniest, most unexpected, or outrageous answer.
Sketch
Code highlight
function generateCards() {
let randomIndex = floor(random(blackCardTexts.length));
blackCardText = blackCardTexts[randomIndex];
whiteCardOptions = [];
while (whiteCardOptions.length < 3) {
randomIndex = floor(random(whiteCardTexts.length));
let selectedCard = whiteCardTexts[randomIndex];
if (selectedCard.trim() !== "" && !whiteCardOptions.includes(selectedCard)) {
whiteCardOptions.push(selectedCard);
}
}
cardsGenerated = true;
displayInitialText = false; // Update the variable to switch to displaying cards
}
The function generateCards() is responsible for displaying the cards with random prompts from the csv files. First, I generate a random index to pick a prompt at random from the blackCardsTexts array which holds all the possible prompts in my game. Next, I initialize an empty array whiteCardOptions to store the white card responses to display on the 3 white cards. To ensure they are all distinct responses, I use a while loop which continues until whiteCardOptions array has 3 distinct responses. I did this by:
1. generating a another random index (randomIndex) from the whiteCardTexts array.
2. extracting the white card response at this random index and storing it in a variable called selectedCard.
3. checking if selectedCard is not empty (i.e., it contains text) and if it’s not already included in the whiteCardOptions array. This is the step that ensures I only add valid and unique responses to the white cards.
Reflection
I had the most fun working on this assignment so far because I tried to recreate a game that I love playing with my friends. While I’m quite happy with the outcome and how the core mechanics of the game function, I think there is definitely room for improvement, particularly in terms of the aesthetics of the sketch. For this project, my primary focus was recreating the fundamental concept and gameplay of the game rather than emphasizing the visual design.
Nonetheless, I’m still pretty satisfied with what I’ve been able to create. Reading some of these responses made me chuckle as well (even though I wrote them myself), and that’s ultimately what this game is all about—laughter and amusement.
The reading offered a general idea of good design and what components it should have. The author talked about the demands new technology expects from design, why engineers fail to make the design of things more affordable and accessible, the importance of human-centered design, fundamental principles of designs, the image users have from reading and searching about a product versus the designers and the paradox of technology. I honestly could not agree more with the author’s approach to good design. This reading reminded me of some books I read about design like “The Universal Principles of Design”, where the author simply explains different design principles. Attached below is his definition of affordance.
I agree that signifiers are more important than affordance, but I also believe that a well-designed object does not need a lot of signifiers. If its affordance is good enough. I also think that a good understanding of the psychology of humans helps in making good designs. One important concept I believe when understood would affect a design. These are abidance to authority by Milgram, confirmative bias by Asch, and situation of power by Zimbardo. Abidance to authority was briefly based on psychological experiments that discovered that humans would obey instructions even if these instructions harm other people because they ‘had orders to do them’. Asch in the Confirmative bias experiment discovered that humans by their mere nature tend to follow the group even if the group is wrong just to fit in. Finally, Zimbardo, in his Stanford prison experiment, puts forth that if someone is given power, they gradually become bad. He argues that people will conform to their assigned roles and take advantage of stereotypes and power.
From this reading, I found the principles of affordances and signifiers most interesting. Norman writes, “Affordances determine what actions are possible. Signifiers communicate where the action should take place” (14). The authors frustration with doors not having signifiers that appropriately and intuitively demonstrated their affordances reminded me of my frustration with mobile apps, specifically the apps used to order takeout, when I first moved to China to attend NYU Shanghai. The apps are often overcrowded with symbols, words, and pop-ups, akin to the complex instruction manuals for machines that the author mentions. The affordances of these apps were not clear at all if you could not read Chinese fluently. Apps, like doors and refrigerators, could be designed to have simpler, more visible affordances.
However, this made me wonder if all perceptions of affordances are created equal. For example, when I encounter the “Settings” app on any phone (even in Chinese), I can find my way around because the layout is the same (or similar) across all operating systems (usually “General” settings is at the top, then there are some sections for wallpaper, brightness, sounds, notifications, etc). In contrast, my mom or my grandparents have a harder time finding setting controls that are second nature for me to find.
It is also interesting to consider how there exists a need to specify a design field as “human centered design”. Does this suggest that, if we do not consciously remind ourselves to design for the ease of use by humans, that the design of products will inevitably be pushed towards “profit centered design” or “efficiency centered design”? Seems rather depressing, because aren’t humans designing for ourselves?
Another thought the reading brought up for me is our tendency to value logic above emotion. The text stated that engineers are trained to think logically, and I think that we as a society have been trained to think that logical thinking is better, even though emotion colors every decision and experience we have.
