In his Paranormal Interactivity presentation at An Event Apart in Seattle WA, 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. 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.
- Ehen 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.
- 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.
- 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. Declarative is easier to code.
- IDs are for making things addressable. Classes are for styling elements on a page.
- Progressive disclosure: 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 not about the number of pixels, it is the interactivity. 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 connect is the important part. Not the technology.