An Event Apart: Paranormal Interactivity

by November 3, 2010

In his Paranormal Interactivity presentation at An Event Apart in San Diego CA, Jeremy Keith talked about the importance of interaction on the Web and provided a few techniques for building interaction into your Web applications effectively. Here's my notes from his presentation:

  • The biggest leap in our ability to interact with people was the advent of speech. We vibrate the air to transmit ideas between brains. But in order to communicate with speech you had to be in the same space and time as someone else, representational art allowed us to cross that barrier. Iconography (as representational art) has a wider reach than language (because of different languages) but it is more prone to misinterpretation.
  • Once you use language, you can inject personality and more precise information. As human beings we anthropomorphize many things including objects. You can add personality to objects which changes how people interact with them.
  • Software programs can appear sentient through their use of conversational tone. On the Web, however, we tend to use the same personality over and over again (your best friend!) instead of genuine people personality. Like paranoid or concerned, etc.
  • On the Web, hypertext is not limited by scale like it is in choose your own adventure books.
  • When we talk about interactivity on the Web -we are talking about links and forms. We often forget how powerful the link is. The main interaction you get from a link is clicking on it to go to some other resource. But you also have the ability to add interactivity through hover/mouseover actions. But mouseovers that hide important functionality should be avoided. Where you use hover, make sure you use focus as well. This is important for people that navigate with a keyboard.
  • We used to use Javascript for mouseovers but now we use CSS. This is a pattern that has happened a lot. We’ve moved from things that were procedural (Javascript) to declarative (CSS). This has also happened with media queries. Procedural is harder to implement than declarative. If a pattern is popular enough, it needs to move to declarative.
  • In the real world, forms are rarely used for pleasure. So why do we adopt the same interface on the Web? People loved the “mad libs” style form on Huffduffer. It added some personality and removed the feeling of doing your taxes. Think about making your forms different –how can you give them some personality?
  • Form validation and UI elements: we are moving from procedural to declarative languages. Moving from Javascript to HTML5. Have a whole bunch of new input types to validate inputs and display UI widgets. This moves these behavioral interactions to the browser.
  • Progressive disclosure: something is hidden by default and on click something is revealed. This is a common procedural pattern that is likely going to become declarative at some point.
  • Javascript is like electricity for the Web but you need safe defaults for when the power goes out. People still need to get things done.
  • As soon as Ajax gets thrown in Javascript safe defaults are usually missing. It’s on or off. If you want to build an Ajax website, build a non-Ajax Website first. Go back to links and forms. Then use Javascript to hijack the links and forms. Then Ajax can be used to communicate with the server without refreshing the whole page.
  • The hard part about Ajax is not communicating with the server it is the design decisions. Up until now the browser has given people feedback that something is happening. With Ajax, the browser doesn’t do this. Now you need to provide the user with instant feedback.
  • We can learn and be inspired by other mediums but we should not copy from other mediums. It’s about inspiration not emulation.
  • The web is not bringing us to something new, but bringing us back to the beginning. We can now interact at a distance and over time. That’s the difference. Just like representational art did for language.
  • Allowing people to interact is the important part. Not the technology.