Designing Interactions with jQuery


These are my notes from a talk given by Steve Smith at the 2010 jQuery conference in Mountain View, California. You can find Steve on Twitter @orderedlist.

To design is to communicate clearly by whatever means you can control or master.

-Milton Glaser

Why You Care

You're not just an implementer or a "code monkey." You care about the project and doing things well. You care about the user experience and whether it's easy for the user or not. Designing interactions is a huge part of this.

Design is not just what it looks like and feels like. Design is how it works.

-Steve Jobs

Why We Interact

We interact to engage. One could argue that this form of interaction is not for a purpose; it's the subtle stuff. The fade-ins and subtle changing of positions on hover. It's for a particular emotive response.

[Steve shows Coda slider, which doesn't necessarily serve a particular purpose, but it's very engaging.]

We interact to explain. We design interfaces to explain what is happening behind the scenes, for example a dialog that shows that something is being saved, or that something is loading.

Too Much Interaction

A designer knows he has achieved perfection not when there is nothing left ot add, but when there is nothing left to take away.

-Antoine de Saint-Exupery

Too much interaction is more harm than good. For example, stay clear of slow animations. Slow animations are the things that annoy me. They're just awful. The 400ms animation that comes along with jQuery is way too slow. If you want to change that, you can set the number of milliseconds throughout your app with:

jQuery.fx.speeds._default = 200;

You want it to be enough that they can feel it, but not enough that they can see it. If you're worried about IE 6 and IE 7, do this:

jQuery.fx.speeds._default = ( && jQuery.browser.version

This disables the animations for IE 6 and 7. I guarantee you, people on IE will be delighted to have something happen instantaneously.

Stay clear of useless animations. jQuery UI provides all this stuff that can be extremely beneficial for explaining specific circumstances; for the rest of the time, they suck. Lots of effects are interesting and thought provoking, but they're not really practical from a user perspective. In general, it's best to just do what you want to do.

Stay clear of heavy interactions. There are times when jQuery or jQuery UI will let you do cool things, like drag-and-drop. You could say oooh, I could make a shopping cart system where instead of clicking a button to put something in your cart, I'll make people drag stuff to the shopping cart. Conceptually, it's a nifty interaction, but in the real world it's completely pointless. You could have solved this with a simple click. Heavy interactions like that are not good. Think about how people are going to use this stuff, and then design it to fit that use case.

Not Enough Interaction

The challenge is about taking things that are infinitely complex and making them simpler and more understandable.

-Robert Greenberg

Nothing starts off simple. To get a nice, neat stack of paper, you have to cut down trees. The world is a complicated place. To boil something down to the point that it's simple is really complicated. Making it simple and communicating effectively is more work, but it needs to be done.

When there's no indication of what's going to happen, that's a bad thing. Have you been in a situation where you know you have to hit a button, but you don't know what's going too happen when you hit this button? People should know what's going to happen when they initiate an interaction.

When there's no indication of what's happening now. Modern webapps are starting to do this a little bit better, but you usually have to remember to do it every time. When people don't know what's happening, their confidence in your application starts to drop. Your users will get unhappy and unsettled; for people who are nervous or unsettled, time moves by very slowly. But if you're confident, time seems to move along very quickly.

In Conclusion

  • Design the user experience first.
  • Interaction is meant to engage and enhance the user experience.
  • Speed is important, distractions are bad.
  • Our job is to build user confidence.
  • Don't solve problems with code. Solve the problem, then write the code.

Questions about whether design is necessary or affordable is quite beside the point: design is inevitable. The alternative to good design is bad design, not no design at all.

-Douglas Martin

Thanks to Steve for the great talk

Did you enjoy this post? Please spread the word.