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 interactive websites with hover effects on Wix Studio.
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:
1. 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.
2. 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.
3. 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.
4. 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.
5. 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?
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?
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?
Mappings
This has to do with an interaction’s response and how logical or natural it feels in terms of the resulting time or space.
For instance, the most common example of space is a toggle switch. When it’s moved to the right, the user expects the value to increase and so it should be designed with that expectation in mind.
When it comes to mapping out time, it should also align with users’ expectations. For example, after submitting a contact form, it shouldn’t take more than a second for the “Thank you” message or page to appear.
Questions to ask yourself:
Do time or space play a role in your interactive element’s response?
Will the interaction’s response or effect seem logical to the user, or will they feel confusion or frustration as a result?
Consistency and familiarity
Writer Jay Conrad Levinson said in Guerilla Marketing: “Consistency breeds familiarity, familiarity breeds confidence, and confidence breeds sales.”
When it comes to interaction design, this is an incredibly important thing to remember. Essentially what it means is that similar elements on your website need to be designed the same way and react identically, too.
In addition, it also encourages designers to utilize well-known web conventions so as not to deviate from the established—and expected—norm.
Questions to ask yourself:
Do you have a system for consistently designing each type of interaction, from the initial UI to how it reacts?
Do your interactions differ from how other websites handle similar ones? If so, do you have a valid reason for it?
Mental models
While similar to the principle of consistency and familiarity, this isn’t just about recognizability. It’s about how users’ brains process and anticipate interactions.
A good example of this is an image slider with arrows that users can click to move right or left. In their minds, they see this as being a simple engagement. When they click the right arrow, a new image will scroll into view.
However, if your design deviates from this expectation — say if a lightbox opens or they’re taken to a different page — it could create a temporary shock or frustration.
So, you need to design interactions to be carried out exactly as your users expect them to be.
Questions to ask yourself:
Do you know with certainty how users expect each of your interactions to perform?
Do any of your interactions deviate from how other websites handle them?
Do your signifiers provide enough information to help adjust your users’ expectations or is more needed?
Constraints
We have to use constraints in interaction design in order to limit the possibilities. This, in turn, reduces user frustration as well as the incidence of interaction errors.
Constraints simplify the UI and make it easy for the user to find the next action that will take them closer to the desired outcome.
Questions to ask yourself:
Are there too many interactive elements in one area?
If you’re offering multiple interactive options, have you used factors like color, size, state, proportion, or emphasis to establish hierarchy?
If an element like a search or contact form only accepts certain responses, have you provided premade answers or properly configured fields to ensure the user enters an acceptable value the first time around?
The benefits of good interaction design
Now that we’ve discussed the framework and guiding principles for interaction design, let’s briefly talk about why this matters in the grand scheme of things.
Greater usability
Interaction design is a way of communicating with users through your digital interface. “If you click on or interact with this, then this specific action will occur as a result.”
This kind of clarity and intuitiveness in design makes your website or app something they can trust. And with that trust comes greater confidence when engaging further.
Let’s use a real estate listing site as an example.
You have a visitor who’s excited to look up currently available properties. They see that there are 10 options that fit their search parameters.
As they begin exploring the options, they encounter little to no friction when it comes to interacting with the listings.
Each property name is bolder, larger, and in a different, brighter color than the surrounding text, which clearly indicates this is where they need to click to learn more.
In case that isn’t clear enough, the property image also takes them to the subsequent page.
The design is familiar and intuitive as is the resulting reaction. This enhanced usability makes for a better overall experience with the site and encourages further exploration.
Error reduction
Interactive elements aren’t just helpful in easing navigation and usability of a website or app. You can use interactions to cut down on errors that occur along the user journey as well.
Take the example of a contact form. Every website has one, but that doesn’t mean that users can get through them without making errors.
If the form asks for a phone number, for instance, there are a number of ways in which they might type in this data if you present it as an open field:
5555555555
555-555-5555
1-555-555-5555
(555) 555-5555
By providing constraints for the interaction, however, you can cut down on any confusion about what goes in the field.
One way to do this is to add a label or hint that shows them the proper format. Another option is to display a red warning immediately after they fill in the field with the wrong data.
Thanks to interaction design, we can account for these different types of approaches to a phone number field and contact form and design them to be error-free.
Positive emotional responses
People visit websites in order to accomplish very specific goals. When those goals are reached, they feel positively about the experience.
But it’s not just the user experience as a whole that can satisfy a visitor. Single interactions have the power to do the same thing if they’re designed to surprise and delight.
Consider something as simple as your navigation. What is it that users expect to happen?
They hover over one of the pages and the label either turns colors or a line appears beneath it to indicate this is the page they’ve selected. That’s all well and good, but there’s nothing particularly exciting or engaging about that.
Instead, what you could do is transform the navigation label with a change in font as well as size.
It wouldn’t do any harm to the experience since you’re not changing how the site itself works. In fact, the slight alteration to the expected interaction will make them feel more engaged.
How to create hover interactions on Wix Studio
If you’re building your website on Wix Studio, you can design dynamic web experiences by adding a variety of hover interactions to any element. Enjoy complete control over your interactions with advanced design capabilities, timing control, and customization for every breakpoint.
You can choose from a wide selection of preset transitions, or create your own custom interactions.
To add interactions, apply them to the element’s parent container. Select the container, and from the Inspector panel, select the interactions tab, then click Add Hover Interaction.
Open the dropdown menu to choose from a wide selection of preset Transitions or select Custom Interactions to create your own.
From the floating action bar, use the dropdown to select the interaction state you want to edit. Define what your element will look like in its Initial and Hover state. The Initial state is what you see immediately after the site loads. The Hover state is what you see when the mouse hovers over the element’s parent container.
From the interaction tab, under Adjust, you can edit the element’s appearance and transform properties. Change the element’s Opacity, Rotate it, and set the Scale, Skew, and Translate values in the relevant units of measure.
Once you set up an interaction, use the timing panel to control its duration and easing. From the floating action bar, select Timing. To control the Duration, set a start and end time. Next, choose an Easing type to define how the interaction will flow in its current state.
Select Play from the floating action bar to preview your interaction.
Select Done from the floating action bar to save your changes.
We build interactions into websites in order to take visitors out of passive mode and to enable them to actively choose their journey through your site. By creating predictable, intuitive and friction-free interactions, you’ll provide the positive experience needed to take them closer and closer to conversion.
By keeping the five interaction design dimensions as well as their guiding principles in mind, you’ll allow your users to focus on the website’s messaging and offer while enjoying a bespoke, engaging experience.
.png)
.jpg)
