A Practical Guide to Interaction Model Design

Interaction design has its origins in web and graphic design but has grown into a realm of its own. Far from merely working with text and pictures, interaction designers are now responsible for creating every element on the screen that a user might swipe, click, tap, or type—in short, the interactions of an experience.

This article serves as a good jumping-off point for people interested in learning more about interaction design. To that end, we’ll briefly cover the history, guiding principles, noteworthy contributors, and tools related to this fascinating discipline.

1. What exactly is an interaction model?

Interaction design (IxD) defines the structure and behavior of interactive systems. Interaction designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond. Our practices are evolving in tandem with the rest of the world.

Interaction design began the day the first screen was designed to hold more than static copy. Everything from a button to a link to a form field is part of interaction design. Over the past several decades, a number of books have been released that explain facets of interaction design and explore the myriad ways it intersects and overlaps with experience design.

Interaction design has evolved to facilitate interactions between people and their environment. Unlike user experience design, which accounts for all user-facing aspects of a system, interaction designers are only concerned with the specific interactions between users and a screen. Of course, in practice, things are never so clearly delineated.

2. Why Are Interaction Models Important?

Today’s customers are exposed to more and more digital interactions in their day-to-day lives. This has brought the tolerance level for poorly designed products to almost zero. To survive in this experience economy, products have to be on par with the experiences and expectations of the users. With user-centered design, businesses can now focus on users, their context, channels, and landscapes to deliver the best possible experience. An interaction model is the starting point for laying the foundation for a great user experience.

Interaction models try to inform the way the product behaves with users. It’s a conceptual model that visualizes the interactions based on the mental models of the users.

3. Establishing Interaction Models

Building interaction models requires comprehensive insights into users and their contexts, channels, and landscapes. These will serve as the guiding stars to help you define an interaction model. It is a collaborative process that starts with whiteboard sessions and workshops before progressing toward more concrete models.

Let’s take a closer look.

3.1. Scenario ideations

Key scenarios and context can be captured and prioritized using personas. They can be based on usage ratio, significance, or user context. These scenarios can be further visualized through rough sketches with users in their context.

3.2. Conceptual models

From scenarios, you can easily figure out the connections, hierarchies, and interactions to visualize a low-fidelity model. They are abstract, diagrammatic representations of entities, structures, and relationships that enable us to digest the big picture.

3.3. Information architecture

By giving structure to the elements in conceptual models, information architecture organizes, labels, and gives hierarchy to the data. The information is a bit more concrete and provides more details like site maps, hierarchies, categorizations, navigation and metadata.

3.4. Screen layouts

From the information architecture, you get to know the key primary functions, verbs, and nouns of your product. Based on this, the foundational structure can be visualized as a starting point. Form factors like mobile, tablet, and desktop must also be considered at this stage.

3.5. Components

This provides hierarchy and structure to the layouts by organizing contents into meaningful blocks. Components are based on functionality and can have multiple patterns to represent them. For example, headers, footers, headings, content modules, data tables and more

3.6. Patterns

These are the building blocks of the interface. They bring harmony and consistency to the user interface (UI). A typical pattern will have multiple elements that display how data or information is organized. They can be reused across different components to achieve a function.

4. Benefits of an Interaction Model

The most exciting part of any design is the implementation phase. For a practitioner, the joy of seeing the insights transform into concepts is satisfying. It’s nice to see your hard work finally pay off with the evolution of these frameworks. Interaction models serve as a foray into this process, giving us the foundational structure from which we can start building. Being invisible doesn’t make them inferior, and their immortality is evident across design systems, style guides, and interaction libraries.

5. Principles of interaction design and best practices

These principles serve as the foundation for all interaction and UX design. They are classical because they relate to how humans act and understand digital products, be they web products, mobile apps, or the dishwasher. This is about man vs. machine—or rather, how humans can cooperate and work with machines to our benefit.

5.1. Discoverability

Discoverability refers to how easily someone who has never used your product can find the different features it offers. This is a major aspect of good usability and interaction design in general, because the first impression your user has will be the most important one.

Having an overly complicated interface or poor information architecture will confuse new users, increasing the risk of them abandoning your product and wasting all the time and effort you put into it.

One of the reasons why improving discoverability in your product is challenging is that, as the designer, you’re closely familiar with the product in all its glory. It can be difficult to imagine meeting that product for the first time and trying to use it while knowing nothing about how it works.

5.2. Consistency

People’s brains are wired to dislike change. Your product needs to deliver a uniform experience to the user, ensuring the interaction design is consistent; this means that all icons should follow the same lines in terms of both design and behavior. Your interface needs to be the same across all features so that the user can get familiar with it as a whole.

5.3. Learnability

This one is closely related to the concept of discoverability. Learnability refers to how easily users can learn to use your product to its full potential. Together, these two will dictate how fast and easily users can get familiar with and use your product.

When it comes to interaction design, your main concern is how to get the user through the initial learning curve that comes with any new product. Making your product easy to learn (and discover) becomes more challenging when designing products for mobile screens—so much to explain, so little real estate!

5.4. Readability

This principle regards how your content is displayed and how easily your users can read it. Having your content properly organized allows your users to scan the screen for the piece of content they want.

That includes considering everything, from how many lines each paragraph ought to have to the use of negative space or proper line spacing. The goal here is to allow every user to run their eyes through your page or screen and understand what the general message is without actually reading the content.

6. In application design, how do you build model interactions?

An interaction designer is a key player throughout the entire development process. They have a set of activities that are key for the project team. These typically include forming a design strategy, wireframing key interactions, and prototyping interactions.

6.1. Design Strategy

Although the boundaries here are fuzzy, one thing is certain: an interaction designer will need to know who they are designing for and what the user’s goals are. Typically, this is provided by a user researcher. In turn, an interaction designer will assess the goals and develop a design strategy, either independently or with help from other designers on the team. A design strategy will help team members have a common understanding of what interactions need to take place to facilitate user goals.

6.2. Wireframes of Key Interactions

After the interaction designer has a good idea of the strategy motivating a design, they can begin to sketch the interfaces that will facilitate the necessary interactions. The devil here lies in the details: some professionals will literally sketch these interactions on a pad or dry-erase board, while others will use web applications to aid them in the process, and some will use a combination thereof. Some professionals will create these interfaces collaboratively, while others will create them alone. It all depends on the interaction designer and their particular workflow.

6.3. Prototypes

Depending on the project, the next logical step for an interaction designer might involve the creation of prototypes. There are a number of different ways in which a team might prototype an interaction, which we won’t be covering in extensive detail here, such as html/css prototypes, or paper prototypes.

6.4. Stay Current

One of the hardest parts of being a practicing interaction designer is the speed of change in the industry. Every day, new designers are taking the medium in a different direction. Consequently, users are expecting these new kinds of interactions to appear on your website. The prudent interaction designer responds to this evolution by constantly exploring the web for new interactions and taking advantage of new technologies, while always keeping in mind that the right interaction or technology is the one that best meets the persona’s needs and not merely the newest or most exciting. Interaction designers also stay current by following thought leaders (like the notable designers below) on Twitter and pushing the medium forward themselves.

6.5. People to Follow

As we noted before, it’s nearly impossible to identify someone as “only” an interaction designer. The field overlaps with UX design, UI design, development, and visual design, and as a result, not all the designers listed here even refer to themselves as interaction designers. We’ve included them because of their impact on the field and because the things they have taught and written about are worth exploring if you yourself work in interaction design.

Conclusion

Ultimately, interaction design is a topic that keeps changing. We listed out some classic and some modern principles to help guide you on your journey in search of the perfect product—now it’s up to you. Remember that the majority of interaction design is simply a means of getting humans to have meaningful relationships with the machine and the product you worked so hard to create.

Just try to make sure your interactions have actual value for the user and help the user understand how to make the most of your product. These are the building blocks that pave the way for great interaction design.