Interaction

New technologies are being added to the browser faster than we can blog about them.

July 12, 2011 •

We now have CSS3 transforms, transitions, animations, media queries, HTML5 audio & video, Canvas, inline SVG, and even WebGL for full 3D rendering. Infinite possibilities and combinations that keep me up at night.

Better Browsers, Better Devices, New Interactions

Browser improvements aren’t just limited to graphics and animations. We can now tap into the hardware capabilities of various devices: geolocation, orientation1, notifications, multitouch, etc. These capabilities create brand new avenues of physical interaction we’ve never had access to before.

How can we use these new features for more meaningful interactions? How can we use them responsibly? Here are a few rules I live by:

  • Don't repeat the sins of Flash.
  • Don't make users wait.
  • Make it non-essential.
  • Make it delightful.

Stick to these rules and you’ll be able to surprise users with simple, joyful interactions (and should keep the luddites at bay).

The tools for the job.

Interaction Design is still tough. Aside from sliding around paper cutouts on a flat surface, I haven’t come across a tool greater than HTML for mocking up interaction2.

I’m not naive enough to say, “Thou Shalt Only Design in Browser.” Though, in the near future I’m sure we’ll all spend more and more time mocking up working interaction prototypes in browser. We’ll all need HTML/CSS labs to test clicks, fonts, swipes, flips, orientations, squeeziness™, and more on multiple devices.

We’re in hyper-futuristic times if you consider the browsers and devices we use each day. It’s a new frontier and there’s never been a bigger space for exploration. Go forth and make awesome.


  1. If you have gyroscope - load this page up and give the header a twist. 
  2. Friends on Twitter have suggested the following for IxD mockups: Keynote, Balsalmiq, InVision, Fireworks, and Omnigraffle. 
comments powered by Disqus