Without the ability to engage with a website — to click, swipe, tap, or hover — visitors become passive observers that wait to have information fed to them and decisions made on their behalf.

So, it’s no surprise then that interactivity is one of the most important elements in web design.

That said, interaction design is an art. In order to get the desired results from it, you need to understand its driving principles and framework.

Let’s explore everything you need to know to get it right — from what interaction design is to what it's made of. We'll cover the principles of interaction design and its benefits, as well as how to create hover interactions on Editor X.

What is interaction design?

Interaction design is a field of UX design that focuses on creating digital elements that visitors can engage with. For example:

• Buttons

• Links

• Toggle controls

• Form fields

• Slider controls

• Accordions

• Hover-triggered animations

But interaction design is about more than just turning a static element into one that transforms when a user engages with it.

Interaction designers must understand how their users think and behave. It’s the only way to design elements that are actually recognizable as interactive and that boost the confidence and trust of users wanting to engage with a brand and its app or website design.

By designing interactive interfaces that users inherently know how to engage with, you’ll improve their experience on the site, help them reach their goals more effectively and foster a more meaningful relationship between user and product.

The 5 dimensions of interaction design

The concept of creating interaction design languages, or dimensions, was first introduced by Gillian Crampton Smith in Designing Interactions. These dimensions define the different ways in which an interactive UI communicates with people. At the time, there were four dimensions.

Today, we recognize five dimensions as the framework of interaction design:

1D. Words

These are the words built into interactive elements, so things like field labels, button CTAs, hyperlink anchor text, etc.

When using words in interactions, they must be, first and foremost, easy to understand. They also need to clearly communicate what the interactive element is, what it will do, or where it will take the visitor.

2D. Visual representations

These are graphical elements like images and icons that may be included in interactive elements. For instance, an arrow icon placed on a button in lieu of text.

Usually, you want to keep visual representations to a minimum. Their use should be limited only to enhancing the understanding of the interaction.

3D. Physical objects or space

Physical objects are the actual hardware a visitor uses when interacting with a website. For instance:

• Desktop visitors use their mouses to click on or hover over interactive elements.

• Laptop visitors use their fingers to tap on their touchpad and scroll over hoverable elements.

• Tablet and smartphone users will use their fingers to tap, swipe, and click on interactions.

Space refers to where they are when these interactions take place. Whether at home, at work or in a coffee shop, the physical location can affect the way in which a user interacts with a website, too.

4D. Time

There are two ways in which time factors into interactions.

The first is the time a user spends on 1D, 2D, and 3D (the words, the visual representations, and the physical objects and space). The second refers to the amount of time it takes for the interacted-with element to provide audio or visual feedback.

This dimension also suggests that users be able to quantify that time. This is most relevant when it comes to an interaction that takes a while to process or load and that can actually be perceived by the user in the form of a loading screen or spinning wheel.

5D. Behavior

This last dimension was later added by Kevin Silver in What Puts the Design in Interaction Design. Behavior encompasses a couple of things.

First, it refers to how the interaction works:

• What type of interaction does it require? e.g. Click, tap, swipe, hover

• What happens after the interaction takes place? e.g. A pop-up window opens, a loading screen appears, a text overlay shows up on top of the image

• Does anything happen after that? e.g. The user has to dismiss the pop-up, the new page appears, the element returns to its original state

Second, it refers to the emotional reaction of the user. This one isn’t always relevant — it depends on what the interaction and intended outcome are.

Interaction design principles

Just as you have design principles to guide your way from project to project, there are about a dozen or so interaction design principles.

Below, we’re going to look at the most important ones as well as some questions you need to ask yourself to ensure you’ve got them covered:

Discoverability

It should be perfectly clear which elements on your website are interactive. They should also be placed in areas where they’re most likely to be found.

Take something like a CTA button, for instance. It’s essentially a shortcut to a relevant page and will take visitors one step closer to conversion.

If they don’t easily recognize key interaction points as such this, though, it’s going to take much longer for them to reach their destination. Plus, the longer it takes for that to happen, the greater the chance that more people will drop off along the way.

Questions to ask yourself:

• Does the element look interactive?

• If so, is it clear what the interaction is going to be or is a label or instruction required?

• Will a user spot the interaction with just a quick glance at the page?

• Is it located in a high-traffic area or is it too far down a page or in an overcrowded spot?

The interactive elements on a web page need to stand out as easily discoverable.

Signifiers

This expands on the question about whether the interactive element actually looks interactive.

A signifier is something that clearly calls attention to the interaction as such, like a bright-green button with a shadow that makes it stand out from the surrounding flat design.

Questions to ask yourself:

• Does the design of the element call attention to it as an interaction?

• Is it obvious what sort of interaction is required or is it a hidden one that will surprise visitors?

• Is more context required to explain a novel interaction?

Signifiers help call attention to the interaction and invite users to engage with it.

Feedback

Depending on how quickly your website responds to the interaction, you may need to provide visual or auditory feedback while the action completes.

This is relevant for things like internal website searches, lengthy page loads, document uploading, payment processing, filling out forms, and so on.

Questions to ask yourself:

• Is the wait time between interaction and response perceptible by your users? If so, is the feedback you provide sufficient enough to keep them engaged?

• Is there too long of a delay in providing feedback when an error occurs?

• Would it be valuable to add brief feedback after someone completes a smaller interaction, like a chime or glowing green checkmark after completing a task?

The Editor X loader animation provides visual feedback while the platform loads in the background.