Class Notes: 8 Sep, 10 Sep

 Start Visual


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:

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:


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:
  • Rez:

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


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.