A complete tutorial on interaction design for the beginner

Interaction design has its roots in web and graphic design, but over time it has branched off and become its own entity. It's more than just working with text and photos, interaction designers are responsible for creating every element on the screen that the user can click, type, or move. In short, it mediates interaction as an experience.

A complete tutorial on interaction design for the beginner

Interaction design has its roots in web and graphic design, but over time it has separated and become its own entity. It's more than just working with text and photos, interaction designers are responsible for creating every element on the screen that a user can click, type, or move. In short, it mediates interaction as an experience.

The article was revised and updated in May 2026. Check with specific service providers for technical information.

Source: pexels.com

What is interaction design

Interaction design is defined as the structure and behavior of interaction systems. Interaction designers try to create meaningful relationships between people, products and services they use - from computers and mobile devices to use in other areas (fit bracelets).

Interaction design is the process of connecting the digital world with the real one. It's about creating a web design that looks as real in the digital world as it would in the real world.

This connectivity helps people use and interact with digital products and services, from desktop computers, mobile devices and smartwatches to websites, apps and games. Interaction design is a concept that combines all the design and functions we know into one whole.

Interaction design began the day the first screen was created with a greater purpose than being static copy. Everything from the button to the link to the form that needs to be filled out is interaction design. Over the past few decades, several books have been published that describe interaction design and explain how it extends into experience design.

This design was developed to facilitate the interaction between people and their environment. Unlike experience design, which includes all aspects that the user faces, interaction designers are only interested in specific interactions between users and the system.

It's more than just a collection of the most interesting features. Research at the university Penn State proved that users are more easily convinced to convert with messages on websites that have interactive features.

Known methodologies

Although interaction design is within the scope of countless websites and mobile applications, there are certain methodologies that underpin it.

Goal-Driven Design

Goal-driven design was popularized by Alan Cooper in his book "The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity", published in 1999. Cooper defined it as design that has the function of solving problems as the highest priority. In other words, this design focuses primarily on meeting the specific needs and wants of the end user, as opposed to traditional design methods that focused on what could be done on the web with the technology of the time.

At this point, some of what Alan described seems clear, as designers rarely choose interactions purely based on programming constraints. The main point of this methodology is that everything revolves around satisfying the needs of the end user and needs that are unavoidable today as in the past.

This process needs to meet 5 points:

First design, then programming – in other words, goal-driven design starts with considering how users think (and how things look).

Separate responsibility for design from responsibility for programming – this point takes into account the need to have an interaction designer who facilitates the user's process on the web, without the designer arguing with the programmer about technical limitations. The designer should also have full confidence in the programmer in the correct execution of all technical aspects.

Assign the designer responsibility for product quality and user satisfaction – although clients have their own goals, the interaction designer should be responsible for the person sitting behind the screen on the other side.

Define one specific user for the product – this idea has now evolved into something we know as personas. Cooper reminds us to connect the persona to the product and constantly ask questions like: Where will the user use this? Who is that? What does he want to achieve?

Work in a team of two – interaction designers should never work in large groups. Cooperation with other members should be ensured by a "design communicator". In Cooper's vision in 1999, he was a copywriter who provided marketing copy for products, but in that time this role has fragmented into project manager, content strategist, information architect and other positions.

Source: pexels.com

Usability

Usability may sound like a vague label. But designers usually just ask themselves simply "can someone just use this?". Usability has been explained in books and online in countless ways, but we will focus only on familiar topics.

In the book Human Computer Interaction by Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale, usability is divided into 3 principles:

  • learnability: how easily can a new user learn to navigate the interface?
  • flexibility: how many ways can a user use the system?
  • robustness: how well do we support users when they face problems?

Other authors, Nielsen and Schneiderman explained usability in 5 principles:

  • learnability: how easily can a new user learn to navigate the interface?
  • efficiency: how fast can the user perform tasks?
  • memorable: if the user has not used the system for a long time, how well will they remember the interface?
  • errors: how many mistakes will users make and how quickly can they learn?
  • satisfaction: do users feel comfortable using the interface and are they satisfied with the result?

The ISO international standards (ISO 9241) have also broken this word down into 5 principles:

  • learnability: how easily can a new user learn to navigate the interface?
  • comprehensibility: how well can the user understand what they see?
  • operability: how much control does the user have when using the interface?
  • attractiveness: how well does the visual interface work?
  • compliance with usability: Does the interface adhere to standards?

Another site that deals with usability is Usability.gov. The guide provides a series of questions and sub-questions, the answers of which form the basis for creating a project and digital interaction. The basic concepts are:

  1. Define how the user can interact with the interface.
  2. Tell users what will happen if they take a specific action.
  3. Anticipate and mitigate errors.
  4. Consider system feedback and response time.
  5. Think strategically about every design element.
  6. Simplify the system for learnability.

Mobile devices have also changed the way we browse websites.

It is clear to see that these topics primarily explain what makes an interface "usable". Regardless of the principles, an important component of usability is always the designer.

5 dimensions

In Bill Moggridge's interview book, Designing Interactions, Gillian Crampton Smith, an academic focused on interaction design, introduced the concept of four dimensions, the so-called "interaction design language". In other words, these dimensions create interactions with each other and the result is communication between the user and what he sees on the screen.

The 4 original dimensions are words, visual representation, physical objects, or space and time. Kevin Silver, Senior Interaction Designer at IDEXX Laboratories added a 5th dimension, behavior. So what do the individual dimensions describe?

Source: pexels.com

  1. words - they should be easy to understand and written in such a way that they easily communicate information to the user.
  2. visual representation – graphics, photos and basically everything that is not text. They should be used in moderation and not too much.
  3. physical objects or space – all physical hardware, whether mouse or keyboard and mobile device used by the user.
  4. time – which the user spends using the first three dimensions. It includes ways for the user to measure progress, as well as sounds or animations.
  5. behavior – these are the emotions and reactions that the user experiences when using the system.

Using these five dimensions, the interaction designer can pay attention to what the user experiences when interacting with the system.

Cognitive psychology

Cognitive psychology is a study dealing with the way our mind works and what mental processes take place in it. According to the American Psychological Association, these processes include attention, language use, memory, perception, problem solving, creativity and thinking.

Although psychology is a relatively broad field, there are several key elements of cognitive psychology that are particularly useful and can be used in interaction design. Don Norman wrote about them in his book The Design of Everyday Things, and here are a few:

  • Mental models – images in the user's head that inform about his expectations for certain interactions or the system. By learning the mental model, interaction designers can create systems that feel intuitive.
  • Metaphors for interface – use of familiar elements to guide users to new activities. A good example is the recycle bin on the desktop, which gives the user an idea of ​​what it's for.
  • Availability – things that not only look like they are made for a certain activity, but are also made in such a way that it looks like something should be done with them. For example such a call to action (hereinafter CTA) button looks like a physical object that can be pressed.

Human Interface Guidelines

This title is a bit of a misnomer because there aren't really any clues for humans. The idea is in the methodology itself. The guidelines were created by most tech businesses, such as Apple and Android, or Java and Windows. The goal is the same everywhere - to draw the attention of prospective designers and developers to advice and recommendations that will help them create truly universal intuitive interfaces and programs.

Guiding principles

Interaction is a combination of design principles with principles of human emotions and interactions. When deciding how a digital project should work, think about how you use and interact with your favorite tools. Think about each of these concepts.

  • Impulse (motion) – when you think about impulse and interaction design, the first thing that comes to mind is clicking or swiping, because these are the actions of the user that activate the design elements.
  • Space – what type of environment does the user interact with? Is the design created in 1, 2, or 3-dimensional space? Is the gap just part of the screen, or does it play a role?
  • Time – the amount of time a user spends during an interaction will influence whether he continues with it.
    There is a delicate balance between the fun of the interaction and the time required to complete it. Think about the goal and how long the interaction should last.
  • The sound – one of the most debated parts of interaction design. While some people like it, others are immediately annoyed. When considering sound, always think of users who want to turn off the feature immediately. The design must work just as effectively without sound.
  • Aesthetics – every design element plays a role here. How does it all look? Does it convey the desired message? Spacing, color, typography, contrast and readability play significant roles in the visual aspect of interaction design.

Modern techniques of interaction design

New functionalities bring new methods of interaction that can engage users. Today, users have become accustomed to beautiful designs made possible by responsive and adaptive systems. These are used by more and more designers.

The following techniques are not isolated trends—each is part of a much larger movement pushing for the use of interactivity:

  • parallax scrolling and effects
  • card layout (card-style layout)
  • design elements that require physical actions such as dragging and clicking
  • microinteractions, which are moments displayed when using a website or application
  • push notifications and reminders from websites and applications
  • personalization and localization tools , which create the feeling that the application and website is created specifically for the user
  • quickly show or hide content with a click or drag
  • hover effects and actions for secondary content
  • transitions and changes between elements.

Let's take a look at the MixPlus demo created by Net+. The website is a series of mixtapes created for users. Click to choose a style and scroll through the playlist to play the recordings. The animation is fun and looks lively, helping the user navigate through the website. At the bottom, users can continue for an even longer playlist or return to the Net+ page. And with several cartridges to choose from, users are encouraged to interact and return to start a new option. The interaction on the site is basically limited, but the execution is great.

The future of interaction design

Advances in technology are expanding the possibilities of interaction design. After all, all technology is created to make an unfamiliar device familiar.

An example can be wearable devices. Whether it's a fit bracelet, smartwatch or necklace, interacting with a device placed on the skin must be simple, useful and pleasant.

Personalization will be another goal for interaction design. Geolocation tools already help this by enabling the input of personal data, on the basis of which the function is adapted to individual users.

Conclusion

Interaction design is something you should think about. Users coming to the web expect interaction in almost every aspect of design. Most users access the web through a mobile device and expect more than just reading text. Interaction design changes almost every day with the advancement of technology and user access to new technologies.

Planning and designing these meaningful interactions can be difficult at first, but it is no more difficult from a concept perspective than creating a concept for any other type of design.

News and advice

More articles to read

B2B e-shop migration: a nightmare or the best investment?

In a new interview for Ecommerce Bridge, our CEO reveals why e-shop migration can be just the breakthrough change your business needs. In the article you will learn: 👉 If you are thinking about changing the technology, redesigning or comprehensive renewal of the e-shop — this interview will offer y…

Read the article

All articles