Start Visual
Administrivia
Crits/projects due on Tuesdays. Reading/listening/watching assignments due Thursdays.
Arduino / P5.js configuration
Install Arduino, run test hello world sketch
Install p5.js and serial control: https://github.com/p5-serial/p5.serialcontrol/releases
Dan Schiffman has great tutorials.
Discuss visual feedback
The less types and amount of visual feedback you give the better
Ex: a clock needs hours and minutes, but does it need seconds? Microseconds? Centuries?
What do the clocks in my kitchen need to show me? Why do I have so many clocks in appliances that can set an action for a specific time in the future?
Combining the visual and haptic, the Bradley watch.
Did Susan Kare invent emoji? Her work at Apple
led to her work at General Magic, making “stamps” for the cutting-edge Magic Link “PDA”.
Fundamental types of visual state
- color
- motion
- intensity
- type of display: led, a light, a screen, a moving object in 3 dimensions, metronome
Complex types of visual state
- typeface
- language
- icons
- images
Reading assignment
how many lights do you have in your kitchen?
Make It So: Forward, Chapter 1, Chapter 3. (Chapter 2 if you have time.)
Displaying State
But first, story telling
Tell a story, not a novel, not an elevator pitch.
A story has at least one actor, a beginning, a plot, and an end.
In interaction design “plot” is the interaction.
What is the plot of a doorbell? Someone visits, they want to get your attention (as you don’t spend all day staring at the door), they push a button, an action happens, and you know someone is at the door.
How do doorbells work for people without hearing? What did we do before electricity?
A brief aside on visual skeuomorphism
But first, visual skeuomorphism. A skeuomorph is a object derived from past objects and contians past visual cues that have no meaning in current culture. Ex: the “phone” icon on my phone that looks like the physical handsets we stopped using in the 90s.
is a derivative object that retains ornamental design cues (attributes) from structures that were inherent to the original.[3] Examples include pottery embellished with imitation rivets reminiscent of similar pots made of metal[4] and a software calendar that imitates the appearance of binding on a paper desk calendar. Or the “save” icon that looks like a floppy drive, that a Japanese student thought looked like a drink dispenser: https://twitter.com/fea0er/status/1160099135569063936
When you are creating visual representations, are you using your culture’s history of symbolism?
States visualization
Console displays in video games – metadata about your status. health, money, power, speed.
Why do some of the games with great graphics still use bar graphs to display raw data? We could hear our speed. Our character/avatar could change color. Why do we just have bar graphs?
- Wipeout: https://www.youtube.com/watch?v=m43c0OfweM4
- Rez: https://www.youtube.com/watch?v=sMq_XSc3vzA
What do colors mean? What states do they reflect?
- ex: white wedding dress or white funeral dress?
- colors important because they show wealth: purple for royalty, gold, dichromatic glass. Purple as an expensive color to make so only the rich/powerful could afford clothes dyed purple. (“The Secret Lives of Color“, “Why are Jeans Blue?“
- color of money — bills with different colors are easier to sort/find
- color of food, white is good/clean. In the south we have “dirty rice” where we mix leftovers with fresh, “clean” rice.
- the colors of Victorian houses