Ultimate Guide To Interaction Design For Websites

Modern designers hear a lot of titles thrown around, most of which are moving away from the general “web designer” into specialists like UX designers and interaction designers.

Job requirements vary between companies but an interaction designer generally falls into the category of a UI designer with some UX knowledge as it relates to interaction. This can relate to user flows, animations, and interface features that improve the interaction design process.

tubik studio interaction design photo

Interaction designers even have an organization and the term has grown rapidly in the past few years. I’d like to examine the underlying facets of an interaction designer. What does interaction design mean? How does it work and how can it be applied to web design projects? I’ll answer these questions and set you on the right track to further understand interaction design methodologies.

Difference Between UX & IxD

This is a very common question and it’s worth clearing up the specifics of an interaction designer.

User experience design typically covers the full scope of a UI/UX project. This is the broadest term which considers the entire process: layout, interactive elements, readability, responsive content, mood, tone, progressive enhancement, user flows, everything.

Interface design and interaction design are similar, and many feel that the terms are basically synonymous. But others feel there is a distinction. Interface design is more about presentation, it’s the style or theme that lays on top of the functionality.

Interaction design is about presentation and functional behaviors. This is where the interface designer merges with aspects of experience design to become an interaction designer.

There’s also a great answer to this question on Quora:

“I always think of interaction design as a subset of user experience design. Interaction design involves the actual interface and user flows within an app. User experience can also include larger and broader issues such as system response time or customer support.”

Although there are many resources online, these links are great for getting started with interaction design fundamentals:

The Roles Of An Interaction Designer

Anyone who works as an interaction designer most likely has aesthetic design skills. The best interaction designers know how to use Photoshop/Sketch and fully understand design principles.

But someone with a focus on interaction goes deeper than the pretty interface features, digging down to the interactivity of a website and how that plays a role in actually using the site.

wireframes sketching drawing book

This is covered in a Designmodo post which explains that an interaction designer is someone who works to create engaging interfaces that make sense and follow a natural flow.

Logic and reasoning skills are a necessity since they play a big part of the interaction design process.

Anyone working in IxD needs to think critically and place themselves in the user’s frame of reference to make assumptions regarding how they might view a particular button, form, or menu.

But interaction designers must also consider the minutiae of aesthetic effects like white space, typography, and custom animations. Interaction designers basically span the gamut of everything related to the interface, both visual and functional.

Some interaction designers also do frontend development to bring their ideas to life in the browser. Others prefer to use programs like After Effects to create visual animations that can be passed onto developers who recreate those animations in code.

shopping list animated ux design

Interaction designers like to think of interfaces as mediums for humans and machines to converse. The designer creates an interface and the user interacts with it based on visceral behaviors and past experiences. This is why the old adage don’t reinvent the wheel applies well to interaction design.

The goal is to create interfaces that are easy to learn and pickup from scratch. You shouldn’t have to explain much to the user; it should be rather obvious what can be done and how to do it, and the user’s discovery process should be very natural with minimal frustrations.

Let’s look into some tips and see how this can be accomplished.

Orient User Action Flows

Every interface is built to be interacted with. Interfaces can be pretty, but they’re not paintings.

This means an interaction designer should consider the movement of users and which actions they take to move through a website. Those actions define their goals, and if they can’t accomplish a particular goal then it could very well be an interface issue.

user flow charts screenshot ux

Whenever working on a new project write down a list of user goals. What would the user do once landing on the page? What do you(as the designer) hope to achieve by guiding users? Think about the flow from different scenarios.

  • Where the user enters a page, blog post, or clicks back to the homepage
  • What are their potential actions? What would they interact with?
  • Where can they go and why would they do that?

You need to first consider the options given to a user on a website. What can they actually do?

Then you need to consider what you want them to do and theorize the quickest way to help them achieve that interaction.

The user flow is how they get from one place to the other. It describes how the user moves from a landing page to the predetermined conversion goal. Everything along the way is the job of an interaction designer which can include improved typography, button placement, experience mapping, improved copy or many other factors.

Every interface should be created with a goal in mind. Thus every interaction designer is creating a goal-driven design which is the foundation of every digital interface.

Utilize Microinteractions

The little microinteractions that you see on websites actually do make a difference. A study done at Penn State concluded that small affirmative animations can persuade users to interact more with an interface.

According to The Next Web’s post there are many benefits to microinteractions. Ultimately they all boil down to communication with the user so that they know something has happened; a switch turned on or off, a button was pushed, a form was submitted(successfully or otherwise).

Microinteractions can also be small notices or tooltips that guide the user further into the interface. They don’t always need animation, but small tidbits of animation will catch the user’s attention and give the interface a more polished & professional look.

Here’s a fun example from Twitter’s anniversary. They updated the like icon(which is now a heart) and the animation was changed to be a little more festive.

twitter gif anniversary icon

Microinteractions break down to the smallest possible units of interactive measurement: clicks, scrolls, swipes and hovers. Provide information to the user before and/or after something happens. They should be able to guess what something will do just by looking at the design.

This is often referred to as a trigger/feedback loop where the user does something, then the website responds in an expected manner. These interactions work because they feel human and give life to the interface.

You can find many other tips and great example in this post by WDD.

Iconography And Semiotics

Icons are a big part of interaction design. These help guide users to interact with elements by providing visual cues. Icons are important for conveying ideas without words, but you need to rely on recognizable shapes to find any value in them.

There’s a great study by the Neilson Group which states that familiarity plays a role in icon recognition. Since many icons don’t have text labels, users need to instinctively understand what icons mean.

Smaller icons help with basic communication because we all recognize the printer icon or new page icon. But very detailed icons provide similar guidance, yet in a very different way.

polo shirt detailed icon design

Consider the reason for using icons and which style of design would work best. Small navbar links operate better with simpler icons. Carbonmade is a good example of this.

carbonmade homepage icons link navigation

But detailed icons can work better for on-page visuals. These convey very specific ideas, usually within context, to paint a picture in the user’s mind about what the product offers or how it works.

The interaction designer needs to learn how to pick the best icon(s) for the job. When done correctly these visuals draw users further into the site offering an aesthetic compliment to the layout.

Open A Dialog With Users

Write content and microcopy with a humane tone. This is the best advice I can give and it’s more important than you think.

Every website uses microcopy, from single landing pages to a conglomerate like Google. Every button label, form placeholder, and feature list is considered microcopy.

These little bits of copy often provide direction or information pertaining to interaction design. They can help guide users and tell them what certain buttons do, where to go next, or even what the entire website is all about.

interaction sketches ui

A good rule of thumb for writing microcopy is to write what the user wants, not what you want.

Context is everything. It’s important to consider how the user might feel when first landing on your page. Will they figure out what the site is all about? If not, how can you make that more obvious? What information is missing to fill in the gap?

Clarity and consistency are both key to a great interface. Just remember that includes both visual clarity and content clarity.

How Can You Get Started?

Interaction design is a great career path to follow, especially if you’re already familiar with interface design for websites or mobile apps.

IxD crosses over UI in many places but it goes further than just aesthetics and typography. You need to consider how the website operates and how the user interacts to make those operations happen.

A great activity is practicing your ability to analyze.

Browse your favorite inspiration galleries and most-visited websites. Study their interaction design techniques.

For example, on the homepage of Facebook or Twitter what would be your first action? Is it instinctive? Is it easy? Do you feel confused or do you know what to click/swipe?

Study existing interfaces, take notes, and learn how they work. Apply these notes to practice projects and just keep going! In time you’ll have a small portfolio and can start shopping around for gigs.

detailed wireframe sketches

The future of interaction design is bright and filled with job opportunities. Whether you’re hoping to become a UI designer, UX designer, or even a graphic designer, these IxD principles will undoubtedly prove useful.

To learn more about what agencies are looking for I recommend this post made by a 20-year UX design veteran. He shares everything you should learn and what the current marketplace expects from a UX designer.

Wrapping Up

Interaction design isn’t going away anytime soon and is ushering greater insights as the design field pushes ahead into the future. Whether you prefer to work on visuals or even as a developer, these tips are important to understand so that you know where interaction design fits into the creative process.

If you’re looking to become an interaction designer the best thing you can do is practice. Study interfaces, build interfaces, and never stop learning.

To read more about IxD principles check out these related posts:

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.