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.
Funny timing on this – I have just been going through this on my team. Even using something like InVision (which I completely love), nothing quite makes it all come together like HTML.
It not only makes it easier to communicate interactions to others and on other devices, it also lets you see how things will really look (not just look in a mockup or prototype using images).
InVision always comes with the highest praise, so I think they’re on to something.
HTML has the advantage of being part of the actual final product. No assumptions or graphical abstractions. Just code being code.
Thanks for commenting!
Looks great on the iPhone but doesn’t work on the Air. I never thought about it but I guess since it has an SSD it has no need for the motion sensor?