I was inspired to produce this responsive poster when I was studying at my school's library and a group of students emitted a disturbing level of volume as they were chattering loudly about star signs. Feeling frustrated by their lack of respect, I wanted to waltz over and suggest them to lower their volume, but I was afraid that it would be out of line for me to subject my values towards others.
So I reached out to my school's student body page asking for advice:
Although I consider myself to be relatively proficient at Java (Processing), HTML, and CSS, I've never really delved into the world of Javascript. Since I was familiar with Processing Java library, I thought it would be an easier transition if I learned a javascript library called P5 since the semantics are relatively similar.
Since It was my first time using a specific library of P5 (AudioIn), I wanted to create mini-goals to make sure that my pseudo-code was working with the DOM elements. I made a simple visualization that reacted with the inputted volume:
✌ INTERACT WITH PROTOTYPE →With this prototype, I wanted to find out how change in color, size, design made people feel. I asked a group of 20 people these specific questions:
• How did the color change make you feel?
• Do you associate the change positively or negatively?
• If you were to see the color change in a quiet place, how would you respond?
My peers suggested that I should attempt to construct a product that does not rely on the user's ability to understand a specific language; instead, articulate the idea of "good" and "bad" strictly with only design elements.
The product becomes more universal when it is not exclusive to the language it is written in. This also forced me to think critically about what I am putting on the illustration because the each element in the illustration had a purpose of adding a layer of narrative to the overall product.
My peers suggested that I should attempt to construct a product that does not rely on the user's ability to understand a specific language; instead, articulate the idea of "good" and "bad" strictly with only design elements.
The product becomes more universal when it is not exclusive to the language it is written in. This also forced me to think critically about what I am putting on the illustration because the each element in the illustration had a purpose of adding a layer of narrative to the overall product.
I played with different levels of saturation and added different illustration elements (fire, smoke, etc.) to convey the connotation of "good" and "bad". The illustration by default is a peaceful cabin that catches on fire when the mic picks up volume for a certain amount of time. It goes back to its default state once the mic no longer picks up volume. Based on my user testing, I added a color transition in the illustration and increased the animation duration to make it feel less abrupt.
✌ INTERACT WITH THE POSTER →I asked the same questions I asked from the prototype to 25 different people who have never seen this project before:
• How did the color change make you feel?
• Do you associate the change positively or negatively?
• If you were to see the color change in a quiet place, how would you respond?
I am incredibly happy with the change in response from my final user testing! I showed the final poster to the original group from (user testing #1) and majority of them said that they feel like this was a huge progression from the prototype! I've learned a lot from this project including creative code using javascript, DOM elements, and how to work with SVG better in code!
In this instance, I criminalized noise and volume – but I realized that there may be certain instances where you would want the user to speak loudly. For example, if someone is giving a presentation, you would want the presenter to speak loud enough so that the people in the back can hear. In these situations, you would want to associate volume positively and encourage the user to speak loud and clear.
Therefore, I am currently working on a similar intractable illustration where the visuals change positively when it reaches a certain level of volume! Check back soon or contact me!
