<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1742770185958071&amp;ev=PageView&amp;noscript=1">

Inbound Marketing Blog

Principles of Interaction Design every Web Designer Should Know

If you're a Web Developer or Designer, you probably hear about Interaction Design all the time these days. I hear it a lot at work. After a bit of reflection, a lot of Web Designers would probably say "I already do that." Others might be intimidated by the term, confused about what Interaction Design actually means as it pertains to their job.

And that's the thing. Interaction Design applies to all sorts of things, not just Web Development. Interaction Design is about understanding the behavior of people and how they use your product.

Although its sort of a buzzword that's popped up in recent years, Interaction Design has always been a component of good Web Design. As our technology becomes more advanced, so do the interfaces and experiences we can dream up and bring to life. Interaction Design is a bigger component of Web Design now because we are viewing our content on laptops, smart phones, tablets, televisions and all kinds of other devices. Those are all unique experiences and we have some great tools at our fingertips to make each of them great.

So as a primer for the Web Designer or Developer who scratches his head when they hear everyone in the office trying to sound cool by throwing the term around, here are the principals of Interaction Design that you should be applying to your work. And honestly, I'm sure most of you have already been following these principals without labeling it "Interaction Design".

Consistency is Key

For Web Designers, consistency in appearance is one of the first things we learn and a fundamental of good Web Design. This includes everything like logo size and placement, font use, color choice, page width, margins and any number of other things.

But this also includes consistency in the behavior of your site. Things should look and function in a similar manner across the board.

Any significant change in the design or experience will attract our attention, drawing us away from what we are really there to do. A lack of consistency is distracting at best, but will break down the entire interaction at it's worst.

Familiarity Does NOT Breed Contempt

When it comes to Interaction Design, familiarity certainly does not breed contempt. It's quite the opposite, in fact.

Your site or app should be intuitive enough that they are both easy to learn and easy to remember.

Your users won't mind spending a little time getting familiar with your site. They just need to be able to quickly learn how to use it. It's our job to make this as simple and painless as possible.

Design Patterns promote consistency and Learnability. Design Patterns are commonly used interaction and layout patterns that people have grown accustomed to using across many different sites. They solve common design problems with what are generally accepted as great solutions.

Think about how similar login forms look across so many sites. That's a Design Pattern. Think about how a gear icon typically represents user settings and a little icon of a house is synonymous with the homepage of a site. Modal Windows and those rotating image carousels you see all over the web are Design Patterns. Users know how they will work even if they've never been on your site before.

Is Your Site too Predictable? Good.

People should be able to predict (to some extent) the outcome of an action before it takes place.

If we set the correct expectation using examples or clear instructions, we're much more likely get the result we're looking for. Feedback could come in the form of previews, demos, tool tips and any number of other things.

Do people understand the purpose of the site? Do they know what it does and how to go about completing the task?

Design Patterns, mentioned earlier, play a big part in predictability, since people are generally most comfortable with that which they are most familiar with.

Give Meaningful Feedback

Feedback is our way of acknowledging a users interaction. This includes things like Highlighted items and active states, dialog boxes, confirmations, error messages, 404 (and other server-side errors).

Strong visual cues such as text size and weight, use of color, whitespace and placement will make your feedback more obvious and meaningful to users.

So, What is the Web Designers Role in Interaction Design?

It really depends on your individual situation. If you're at a company with a dedicated Interaction Designer, your job may to be to simply take their feedback and make it look pretty. If you're a freelance designer or work at a smaller shop, this role is likely to fall on you since you're probably the most qualified person to handle it.

For most designers, myself included, I feel a personal responsibility to address each of these principals in my work.

Topics: Design, Odds and Ends, Development

Mark Swanson

Written by Mark Swanson

Mark is a Senior UI/UX Designer at MINDSCAPE. He makes the websites you use easier to use and has been designing for the screen for over 14 years. Outside of work, he likes watching documentaries, playing music and rolling in the dirt with dogs (both his own and random strays). He also doesn't photograph very well.

Join the conversation

Subscribe to Email Updates

Let's Talk