When I started designing for the Web years ago, before the dot-com bubble burst, the term interaction design quite often referred to the use of Flash when it came to the Web. If you wanted to make your web site interactive in any way, that’s what you used.
While we’ve mostly done away with Flash, the trade-off is that static web sites are still the majority. Pages on the Web are full of text, images, and links. Sometimes a video, too, although it’s almost always stuck in a rectangular box, slapped in the middle of a page, waiting for a click of the play button to come alive.
Shake the humbugs
Things don’t have to be this way. The Web is naturally interactive, with users clicking around from page to page and site to site, discovering all sorts of things along the way. The Web is flexible; it flows from one device to another, regardless of screen sizes or browser functionality. Pages and elements have states, positions, and layout that can be manipulated through code and through input from users.
With all of its potential, why does the Web feel so stiff? We should be taking advantage of its interactive nature and flexibility. Design details shouldn’t end in a Photoshop mockup; they should continue on to the code. Interaction design for the Web extends beyond hover states and animated GIFs.
CSS is more powerful than ever. Designers and developers alike should take advantage of these advancements in code and browser support. Good design and good code only take the Web so far. It’s the layer between, the one that makes your design come alive, that can take the us to the next level.
Add some tinsel to the (DOM) tree
One of the least attractive things you can offer on your web site is a form. If I can paraphrase Luke Wroblewski for a moment, “No one wants to use your form; they just want what’s on the other side of it.” That said, forms are a necessary evil in some cases, so why not make them more interactive and less painful?
Have a look at 45royale’s project planner. Not only does it clearly communicate the number of steps involved and provide helpful tooltips for each input, but those same tooltips are highlighted along with the text input as you move through the form. Placeholder text appears in each field to improve the quality of the input, and each step appears without a new page load, thanks to JavaScript.
Not all enhancements need to be so functional, though. Canvas’s client list, for example, features your typical grid of company logos that the agency has worked with. But, move the slider from “Day” to “Night”, and watch as the heading, icons, and logos themselves light up in a bright neon as the background fades to black.
And, it’s not just about buttons, inputs, and links. Other elements of the page can be given just a little touch of interactivity. Scroll down Mosaic’s single-page site and watch as the calendar rocks into place. Transparent clouds move past the blimp on Helium’s site. A looping video element fills the background of Sevenly’s team page.
Keep Delivering Gifts
Remember, the Web isn’t static; your design shouldn’t be, either. And, as browser support for CSS improves, so too does your ability to enhance the user experience of the Web. Use design and markup to deliver your best content to users, then delight them with the joy of interaction.
