Jeremy Keith, expert on JavaScript and HTML5, spoke to An Event Apart Minneapolis about “Paranormal Interactivity.” The session description describes this as:
Interaction is the secret sauce of the web. Understanding interaction is key to understanding the web as its own medium—it’s not print, it’s not television, and it’s certainly not the desktop. Find out how to wield HTML, CSS, and JavaScript to craft experiences that are native to the web.
This delightful talk charmed me with its unique take on interactivity lightly sprinkled with geeky references that tickled my sci-fi heart.
As an example of Jeremy’s interesting perspective, he began by talking about how our particular species of ape came to dominate the Earth. The key innovation, Jeremy explained, was that “I get an idea from my head into your head by vibrating the air through flapping the meat in my lips. Very clever hack.” An important development was the Lascaux cave paintings, as this was one of the first instances of transferring ideas between brains without vibrating air at a particular place and time.
The trouble is that transferring ideas through iconography can be problematic. For example, he showed an odd sign that he could only interpret as meaning that if you pressed a button, it would exhale RSS. Another button icon seemed to imply that pressing it resulted in free bacon. How would you create an icon, he wondered, to demonstrate that if you press a button, you will get free cheese? (cssquirrel.com came up with one potential visual solution.) Another icon that refuses to die: using a 3.5″ disc to indicate saving a file. Who uses these discs anymore? Do children have any idea what a disc represents?
Another interesting quirk of communication is how we give personalities to objects. Examples included moo.com, Marvin the Robot and a particularly unruly chalkboard in Brighton. A new message appeared on the chalkboard each day, so Jeremy started taking pictures of these scrawlings, which seemed to have a snarky personality, and posted them on Flickr. One day, the chalkboard asked Jeremy to stop taking pictures of him! Fascinating interactivity between the real world and the web.
Jeremy then spoke about a delightful example of interactivity from my childhood, Choose Your Own Adventure books. Essentially, these books were hypertext. Each choice was a link to a new section of the story.
The building blocks of interactivity on the web are links and forms.
The <a> link is the foundation of the web. Do we use it enough? Wikipedia uses hypertext very well, so well that it is absolutely addicting to follow all the links from a single entry. An interesting exercise is to look at a page and remove all the text but the hyperlinks from the content. What is left are the links. What do they say? I found this an interesting way to think of a web document.
An important component of link interactivity is :hover effects. These are tricky, however. For example, dropdown menus can be useful, but taken to their extreme with level upon level upon level, they can swiftly become unusable. Giant mega-menus that appear on :hover can be annoying. :hover in general can be greatly abused. What’s more, you can’t rely on :hover effects with touch devices. It may be better to make :hover effects presentational, but incidental.
One interesting note is that mouseover interactivity initially was done primarily with Javascript, but has moved primarily to :hover with CSS. This is a prime example of interactivity moving from a procedural language like Javascript to a declarative language like CSS. Other CSS3 effects have followed similar paths from procedural to declarative langauages.
Jeremy went on to talk about forms, which in his opinion, are typically “$hit.” He recommended reading Luke Wroblewski’ book, Web Form Design, to make forms suck less.
On a site Jeremy has developed, huffduffer.com, he restyled the sign-up form to be more conversational. People started calling this a “Mad Libs” form style. Being from the British Isles, Jeremy had not heard of these Mad Libs and thought it was street speak. Hearing Jeremy say, “What up, yo?” was priceless. Anyhow, these “Mad Libs” style forms can sometimes more effective. Your mileage may vary, based on the situation.
Form validation and UI elements have once again moved from a procedural language, Javascript, to a declarative language, HTML5. There are cool new input types available in HTML5, including:
- number
- search
- range
- date
- url
Common tasks related to how to present such input types and how to validate them will be completed by the browser rather than you. This a pefect example of things often being easier in more declarative languages. Often times this is good, sometimes it is not: for example, Jeremy isn’t sure that animations belong in CSS yet.
One interaction design pattern Jeremy has noticed, which he likes: progressive disclosure. For example, with an FAQ, just show a list of questions. Click on a question to see the answer. Another example is having a link to log at the very top of a page, but when you click it, instead of going to another page, you get a popover form that allows you to login.
For example, near the top of the page, you could have: <a href="#login" class="toggler">log in</a>
Farther down the page: <div id="login"> ... login form ... </div>
jQuery can check if Javascript is available, and add a body class of hasJS if it is available.
Then, in the CSS, you have a line that says: .hasJS #login { display: none;}
With jQuery, you toggle the class of the login div, and set rules for absolute positioning if hasJS is present. Thus, you click on the link, the popover appears. If Javascript is not available, then clicking on the link just allows you to jump to, say, the bottom of the page, where the login form still exists and is functional. Thus, it still works. It is important to have safe defaults such as these.
If you are going to build an Ajax site, begin with non-Ajax interactions: links and forms. Jeremy calls this “Hijax” You create a basic interaction, and if the proper Ajax functionality is available, you can “hijack” the link or form to update the page from the server.
You also need to provide feedback for Ajax interactions. The browser doesn’t provide these by default as they do with built-in interactions. To demonstrate what good interaction feedback looks like, Jeremy showed us a clip from Super Mario Brothers. Ah, it warms my heart. The geeky, nerdy humor of his presentation, with a British Isles flavor, was truly delightful.
One thing Jeremy really hates is emulating desktop applications in rich internet applications, which completely misses the point: he hates the word RIA.
As another example of interaction, Jeremy pointed out how XBox and PlayStation were at war with each other, and then the Wii came along, which had “crap” graphics, but a great experience. Ads for the Wii don’t even typically show the screen: they show people enjoying using the Wii.
Similarly, Jeremy couldn’t see the experience of Casablanca being enhanced with 3D. With all the graphics of Second Life, nothing has made Jeremy feel quite like he is jacking into the Matrix as Twitter, which is just text.
He then shared a nice quote from Douglas Adams pointing out that the only reason we cherish interactivity is because recent media, such as television, are not interactive.
The point is that it’s not about the CSS or the whizbang that makes for great interactivity. Sometimes the richest experiences on the web can be plain text.
“Rich experiences are built from real people interacting with each other, not better graphics or 3d movies.”
Start with the building blocks of links and forms and build from there, always remembering that essential human component that began with humans discovering they could transfer ideas between brains, just by vibrating the air.