Interaction design (IxD) has five basic principles or what developers and designers often call dimensions. These are:

  • 1D: Words
  • 2D: Visual Representations
  • 3D: Physical Objects or Space
  • 4D: Time
  • 5D: Behavior

 

You can google explanation of each dimension and you’ll find millions of courses, articles and blog posts. And we all know things are pretty in theory. But when it comes to practice, designers tend to forget about these dimensions. And when you try to google a specific examples of how to apply these principles in practice, there are very few sources that actually offer valuable info.

In this blog post, I will explain the concept of 5 Dimensions of IxD using a very simple example of CTA, a call-to-action button.

A CTA button is an interactive element both on web and mobile. It’s main purpose is to engage users to take a certain action that presents a conversion for a particular page or screen, for example, to download an ebook, fill out an application, submit an order, make a purchase, etc.

1D – Words.


Let’s say we want to build an Education page on our website based on gamification principles and aim to engage users in learning activities. While the majority of users want to experience a constant sense of self-improvement that increases their social confidence, short educational pieces, such as an article to read or an activity to complete, uncovers other important human behaviors dynamics (one-up, status, progression, smart, and hitchcock). After all, education doesn’t have to be boring!

In this particular example, our words are the context and the language we’re choosing for our CTA button. Instead of boring “Click Here” the wording can express an action that would want to engage user in a fun world of learning. Compare with “Learn More”, “Become an Expert”, “Join the Fun”. To make an effective CTA, please keep in mind “less is better” principle. You don’t want to put too many words and make your button too large. Keep the number of words at minimum. It will capture users’ attention quicker. And the rest of the text can be written outside the button.

 

2D – Visual Representation.

You don’t have to make the button look clickable by applying 3D effects to it or adding unnecessary drop-shadows. It all depends on the style/brand/context you’re working on. But most of the time, a simple contrast and proper size do the job. Your CTA should be easy enough to recognize from the rest of the content. Make sure the background and button colors have enough contrast, as well the contract in between the background color and the text in the button itself.

 

3D – Physical objects that users interact with while using your product. This can be a computer keyboard, mouse, joystick, touchscreen or keypad.

If you’re designing for mobile, make sure your button is big enough (but not too big) so users can hit it with their fingertips. Justinmind claims that “you don’t want a button to be any smaller than 10mm – unless you’re willing to risk the usability of your design on the chance that your users have very tiny fingers”. If your target audience uses the desktop you need to make sure your CTA has a proper hover-over state. If you’re designing with ADA compliance in mind, keep in mind having a screen reader on a computer.

 

 

4D – Time in which users interact with the first three dimensions. It can also refer to media that changes over time, such as animation, video, and sound. Subtle animations and motion, cool hover effects, such as glow on hover, or a magnetic effect would absolutely attract immediate attention and make your users want to click on them for sure. I love the examples provided by Webflow community.

 

5D – Behavior is how users perform a task and the response to the user’s actions. Designers should consider designing a button for all possible states. In web terms, there are 4 states that are labeled “active” (cursor is not over the button), “hover” or “on focus” state (cursor is over the button), “pressed” (mouse is pressed), and “disabled” (mouse is released).

button states

Rewarding users with feedback is also very important. Reward them with a nice graphic or simple confirmation message or even send them to a thank you page after, for example, submitting a contact form. This would create some kind of a human conversation and thus definitely make a user journey more intuitive and pleasant.

 

Helpful articles to keep close: