After delving into the first chapter of Don Norman’s “The Design of Everyday Things,” I find myself resonating deeply with his emphasis on the significance of understanding human behavior and psychology in design. Norman’s argument about the importance of putting ourselves in the shoes of users resonates with my own approach to design. I firmly believe that creating anything without considering the end user’s perspective is futile. Design should always prioritize usability and functionality to ensure a seamless interaction between users, systems, and designers.
Norman’s discussion on the paradox of technology also caught my attention, particularly his insight into how experiences shape users’ perceptions of interactions. It serves as a reminder that even the most aesthetically pleasing designs must prioritize functionality and user experience above all else. This resonates with me as I reflect on instances where overly complex features have hindered rather than enhanced my experience with products.
Moreover, Norman’s critique challenges the prevailing notion that more features equate to better functionality. It prompts me to reconsider what truly defines a good design and the balance between form, complexity, simplicity, and functionality. As I continue to contemplate Norman’s insights, I aim to adopt a dual perspective—as both a user and a designer—to ensure that my designs are not only visually appealing but also intuitive and user-friendly. Norman’s work serves as a valuable guide for navigating the complexities of design and human interaction, prompting me to strive for designs that enhance users’ lives without adding unnecessary complexity.
The concept I aimed to replicate the captivating streams of 1s and 0s that are frequently shown in movies or GIFs, which represent the fundamentals of digital computing and communication. I wanted to achieve something similar to seeing a complex dance of binary digits, therefore I represented these streams with random characters.
Inspiration
Sketch
Code
function draw() {
background(0);
// Display and animate characters
for (let x = 0; x < cols; x++) {
for (let y = 0; y < rows; y++) {
let yOffset = (millis() * speed + x * 50 + y * 50) % (height + 200) - 100;
if (grid[x][y].bright) {
// Set bright neon blue color for highlighted characters
fill(0, 255, 255);
} else {
// Set light neon blue color for other characters
fill(0, 150, 255);
}
text(grid[x][y].char, x * charSize, y * charSize + yOffset);
}
}
}
In the draw() method, I have a nested loop that iterates over each cell of the 2D grid array. The location of the characters are calculated and its appearance based on its coordinates and a time-based offset (yOffset). This offset is computed given the cell coordinates, a predetermined speed value, and the current value of millis(), which indicates the milliseconds since the sketch began operating.
if (grid[x][y].bright) {
// Set bright neon blue color for highlighted characters
fill(0, 255, 255);
} else {
// Set light neon blue color for other characters
fill(0, 150, 255);
}
Each character’s color is chosen according to the entry that corresponds to it in the grid array. fill() method applies a bright neon blue color to a cell if its bright attribute is set to true. Otherwise, ordinary characters are shown in a lighter neon blue hue.
Full Code
// 2D array to display the characters
let grid;
// the font size of the characters
let charSize = 20;
// columns and rows for the 2D array (grid)
let cols, rows;
// speed of the characters falling
let speed = 0.2;
function setup() {
print(windowWidth,windowHeight)
createCanvas(windowWidth, windowHeight);
//creating the 2D array
cols = floor(width / charSize);
rows = floor(height / charSize);
grid = create2DArray(cols, rows);
// initializing the characters font size
textSize(charSize);
// Initialize grid with random characters
for (let x = 0; x < cols; x++) {
for (let y = 0; y < rows; y++) {
grid[x][y] = {
// calling the characters randomly
char: randomChar(),
// Randomly determine if the character should be brighter or not
bright: random(1) > 0.8
};
}
}
}
function draw() {
background(0);
// Display and animate characters
for (let x = 0; x < cols; x++) {
for (let y = 0; y < rows; y++) {
let yOffset = (millis() * speed + x * 50 + y * 50) % (height + 200) - 100;
if (grid[x][y].bright) {
// Set bright neon blue color for highlighted characters
fill(0, 255, 255);
} else {
// Set light neon blue color for other characters
fill(0, 150, 255);
}
text(grid[x][y].char, x * charSize, y * charSize + yOffset);
}
}
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
cols = floor(width / charSize);
rows = floor(height / charSize);
grid = create2DArray(cols, rows);
// Reinitialize grid with random characters
for (let x = 0; x < cols; x++) {
for (let y = 0; y < rows; y++) {
grid[x][y] = {
char: randomChar(),
// Randomly determine if the character should be brighter or not
bright: random(1) > 0.8
};
}
}
}
// function to create the 2D array grid
function create2DArray(cols, rows) {
let arr = new Array(cols);
for (let i = 0; i < arr.length; i++) {
arr[i] = new Array(rows);
}
return arr;
}
// function to generate a random character
function randomChar() {
return String.fromCharCode(floor(random(65, 91)));
}
Challenges
The significant challenge was how to keep the characters’ animation in a fluid and synced motion along with the shifting grid placements while maintaining readability and visual consistency.
Another challenge was assigning different brightness levels to different characters. This required careful coordination to make sure the highlighted characters shone out without overshadowing other characters or creating visual clutter.
Improvements
There is one improvement that I would like to implement in the future. I would want to improve the animation algorithm’s efficiency that may result in more fluid and flawless visual transitions, particularly when working with bigger grids or faster animation rates.
Another improvement could be the inclusion of user interactivity. The user could disrupt the falling characters using mouse hover and the characters trying to get back into the original stream.
Pi’s Some sort of data visualization is literally some sort of data visualization and trying to remove things that are not necessary. Inspired by Saturay Morning Breakfast Cereal, this data shows true, but useless facts.
2) ⚙️ Technical Plan of Attack & Implementation
Once we get the data, drawing the bar is just defining some parameters and working with the rectangles accordingly.
// Calculate dynamic dimensions
let padding = 200;
let graphWidth = width - 2 * padding;
let barWidth = graphWidth / data.length;
let colors = []; // Array to hold the bar colors
for (let i = 0; i < data.length; i++) {
colors.push(color(255, 105 + i * 10, 0)); // Gradually changing the color
}
// Draw the bars
for (let i = 0; i < data.length; i++) {
fill(colors[i]);
noStroke();
rect(padding + i * barWidth, height - padding - data[i] * barWidth, barWidth - 1, data[i] * barWidth);
}
// ... and so on
I could have loaded from the csv file, but the data is small enough.
3) 🎨 Artistic Plan of Attack & Implementation
Just to keep things not boring, I played with some automatic orange gradient for the bar colors by using
let colors = []; // Array to hold the bar colors
for (let i = 0; i < data.length; i++) {
colors.push(color(255, 105 + i * 10, 0)); // Gradually changing the color
}
4) 💪 Challenges
No challenge.
5) 💡 Potential Improvements
No further improvements are needed, I need to learn to restrain yourself.
“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.
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”.
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.
