The topic of interaction is a complex beast.

A quick search of the online gospel that is Wikipedia returns a number of definitions spanning several fields, including Biochemistry, Sociology and Genetics, among other subjects I know next to nothing about.

But what does interaction mean to those of us working on the web?
“Interaction – It’s important!™”

Today, there’s simply no escaping interaction on the web. To overlook interaction considerations when designing and developing a website is a sure-fire shortcut to failing your potential users.

Understandably, interaction can seem a little daunting and all encompassing.  After all, it’s probably easier to count the parts of your website that don’t involve some form of interaction than the parts that do.  In the early days of the web, interaction decisions stopped at deciding link colours and whether you should use a marquee element (the answer should always have been no).  Today, we can style almost every aspect of a webpage, and with the evolution of small screen devices, interactions have become more integral to everything that we do on the web.

The pace of this evolution is nothing new; the boundaries of the web are always moving.  Most important is that we continue to question the decisions being held up as best practice, while seeking out new examples of great interactions on the web.

Assume nothing

It is easy to assume that because we see something used often across the web, then it must be a good interaction pattern.  Although often true, this thinking can be a little lazy.

The most obvious, and polarising, example of this is the much–maligned ‘Hamburger’ menu icon, often seen on small screen devices to show and hide an off-screen navigation.  Big voices such as Apple and Booking.com, among others, have all weighed in with thoughts on the subject and they are all worth reading and considering.

For me, the most important takeaway from this debate is that you should choose the interactions on your website with your users and use–case in mind.  Don’t be swayed to use interaction A over interaction B simply because it’s popular.  Choose your interactions because they work for your design and your audience.

Try something new

Don’t be afraid of trying new interaction techniques; all of the most widely recognised interaction patterns once started out as new ideas once–upon–a–time.

There are some great resources on the web that can help inspire your interaction choices. Codrops consistently creates great examples and tutorials to solve common interaction problems, such as dealing with captions, displaying progress buttons, or to give a different take on the humble form.

Codepen can also be a fountain of ideas and inspiration when it comes to interaction techniques.  Ideas can be rough around the edges, but there are some really inspiring pieces of work showcased on the site, such as this pen showing a number of different ways to animate labels on input elements, or another which shows possibilities for animating icons on a button.

Explore for inspiration

When seeking inspiration, simply exploring the web, and bookmarking interesting sites, can be as good a tool as anything else. If a site has used a technique and you feel it works well, there is no crime in imitating it. The best websites don’t just create new techniques, they adapt and repurpose old techniques for their projects.

One of my favourite sites in terms of really pushing the boundaries of simple interactions is the Wacom website.  Exploring the site, there are a whole host of interactions that subtly add to the overall user experience; for example, the natural language form on the  product finder page helps break down some of the technical barriers that could be hit by a user when searching through their products.

Ideas for your future work could come from anywhere – the hardest part is working out how to store and recall them effectively when you need to reference them later.  Using a tool like Delicious or Pinboard can help with this, or perhaps simply using Evernote to group similar useful links together.  Use whatever works for you, but being able to find the good ideas you saw weeks or months ago can be invaluable down the line.

Delightful and Surprising

Interactions can cover many aspects of the sites we create; whether that’s providing visual cues, interacting with data visualisations, or providing more serious engagement with an experience.

I agree with what MapBox wrote in their design principles, when they said:

> “Interactions should be **delightful and surprising**.  Design these interactions so that they’re enjoyable to perform again and again. Minimize the effort required to complete tasks, enable users to recover from mistakes, and ensure that they receive feedback after taking any action.”

This principle I think encompasses all the things that good interaction should try and achieve; whether that is a small subtle interaction, or a richer, immersive interaction experience where interactions form the core of the experience.

Putting interaction at the heart of the design decisions you make will not only enhance the websites you create. Developing interactions in the right way will also help to create a more accessible and enjoyable experience for your users.

—

For more information on how interaction has evolved on the web and the ways in which we use it today, see this related article I wrote on the evolution of interaction, or for a tonne of inspirational interaction related links check out this post.