Month: September 2023

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.

Concept:

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.

https://www.kaggle.com/datasets/mexwell/world-airports

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.

 

Concept

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.