The power of interaction design

Profile picture of Suzanne Scacca

{date}

{#hash1}

{#hash2}

Illustrations by {name}

Interactions can breathe life into a website, delighting users and increasing engagement. Here’s how to get interaction design right.

10 min read

An eCommerce website design for headphones with a hover interaction enlarging and adding color to one of the page elements

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

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.