How To Design Interaction Models In An Application?

In this article, we’ve compiled everything you need to know to prepare the right interaction model that will contribute to an exceptional UX design that users will appreciate. Read on if you want to maximize the usability of your UX projects.

Let’s begin with the basics.

What is an interaction model?

An interactive system responds to every user input with an action or feedback. An interaction model describes how users interact with individual components of an application to trigger this action or feedback. The model binds the entire application together to support users in achieving their real-life goals.

Interaction models entail the following:

• The communication between the user and the different application components
• How all the different elements of an application interrelate in ways that mirror real-life user interactions
• How different application components interact with each other and the user

A good interaction model is based on conceptual human models that can be found in the user group. The goal of an interaction model is to create a system to communicate with humans in a way that is fluent and natural to create a system that is as interactive and usable as possible.

A good interaction model will support how a user understands the tool and uses it to achieve their objectives. As such, an interaction model is more than just a navigation model (although it does take navigation into account) – it’s a usage pattern built in recognition and reflection of people’s approach to real-life activities. If a user makes a mistake when using the app, it's usually because the interaction model and the user's interpretation of how it should work do not match.

Here’s what an interaction model may describe:

• How users navigate a page or application
• How to launch or close a piece of functionality
• How to navigate between components of a functionality
• How to transition between functionalities
• How to select an object
• How to act on that object
• And more

How to define an interaction model?

Defining an interaction model must begin with understanding the product’s UX goals. This will help you in measuring the success of the interaction model design (i.e., finding out to what extent the design supports achieving those goals).

There are five metrics you can look at with regard to the goals and questions to ask to properly assess your proposed interaction model:

Discoverability

How much time do users need to discover the primary objective of a specific user flow and perform actions they care about? Can they use the tool successfully on their first try? The less time they need to perform tasks, the better the interaction design.

Learnability

How quickly can the users gain confidence with the tool and use it competently? Every consumer product has a slight learning curve – so do digital tools. As with the discoverability principle, the less time users need to become well versed with the tool, the better the interaction model.

User efficiency and productivity

When a user becomes familiar with the software and starts using it, how easily can they perform repetitive tasks? Can they perform bulk actions in one go, or do they have to complete dozens of separate steps or actions? An efficient and productive interaction design will allow users to achieve a particular task with minimal effort.

System response time

When a user interacts with the digital product, how quickly does the system respond? Interaction designers must be aware of the requirements with regard to this timing and design in a way that meets or exceeds these requirements. It’s crucial that they collaborate with the developers on this point, as in this particular case, the designs will have to be supported with relevant tech choices.

Market fit

Is the product appealing to users? Do they find it cool and like to use it (especially in comparison to competitor’s products)? It’s good to gather user feedback on a regular basis so that you can constantly work on improving the tool, adjusting it to the needs of your niche, and simply making it more pleasant to use.

Interaction model design tactics

A good interaction design supports users in fulfilling their desired actions and boosts user satisfaction, but it must also be comprehensible for the developers so that they can implement the flow as it’s intended. Interaction flows can be helpful in this handoff.

To create an interaction flow, designers must first understand these five types of what we’ll call microinteractions.

• Triggers: a component that starts the interaction (can be system-generated or user-generated), e.g., a “download’ button.”
• Rules: capabilities and constraints that are applicable to a microinteraction, e.g., a date picker in a train line booking system allows you to only buy tickets for future dates.
• Feedback: cues that inform the user what is happening, e.g., a character count that changes its value while the user types.
• Loops: actions that happen repeatedly or in a lifecycle, e.g., a notification you get when a new system update is available,
• Modes: the different versions or states of a component, e.g., edit mode vs. read-only mode.

To make sure developers can easily implement an interaction flow in the intended way, designers should include the above microinteractions in wireframes, using lines, arrows, and containers to create meaningful relationships and sequences. Here is what an interaction flow could look like:

Source: https://www.dropbox.com/s/upyv5lyp78eaeni/IXFlow-Example.ai?dl=0

Interaction design principles and best practices

Don Norman, one of the leading thinkers on human-centered design, listed six principles that should be applied to designing good objects of everyday use, such as doors or stoves. He’s written about the principles in his book The Design of Everyday Things. These principles are relevant to designing digital products as well.

Designers should pay attention to the following aspects of their projects:

Visibility

The more visible an element is, the more likely users will notice them and use them – that’s the basic principle. It works in the opposite way as well: when a design element is unnoticeable, it likely won’t be used. This is a very simple principle that isn’t easy to implement at all. Many designers still struggle with adopting it – making everything visible isn’t the answer because you will end up cluttering the screen.

To decide what should be visible, you need to prioritize those interface elements that matter to users the most. These elements should then be made visible and accessible easily, but also in a way that supports cognitive processes and provides the best user experience.

Feedback

The idea of feedback in interaction design is about offering clarity as to what the user has accomplished while using the specific piece of software. If a user clicks on an item, it’s important to offer a clue that they have just done exactly that – the user should never be kept guessing whether they managed or didn’t manage to take a specific action, and what action it was.

The clues can take a variety of forms: visual, audio, tactile, and others. There is a wide variety of design patterns that offer feedback. Ever since motion interfaces emerged, these patterns have been in constant evolution. To understand what’s possible when it comes to offering feedback through design, take a look at this video from Google about material design.

Constraints

Constraining the interaction design focuses on simplifying the interface by limiting the range of possible actions. Think about the opposite scenario: if you give users limitless possibilities, they will likely get confused and won’t know how to behave. A limited number of options will more effectively guide them to the next appropriate step.

Over the past few years, we’ve observed hype for conversational interfaces (Siri, Alexa, and others) that give users the opportunity to interact with technology through natural language. However, these interfaces struggle with the lack of constraints. On the one hand, users have limitless opportunities when it comes to questions they can ask, but with that, it’s hard for them to understand what queries these interfaces support. This may be frustrating when the technology cannot answer a given question.

Mapping

The relationship between specific controls and the effect they have on the tool should be made as clear as possible. With a good mapping of controls, the tool will be intuitive and natural to use. A good example that involves an everyday object is the kitchen stove.

Digitally, sliders can serve as a good example. It’s clear to the user that sliding it to the right will turn the control on, while sliding it to the left will switch it off.

Consistency

By following the principle of consistency, you will create an easy-to-use experience – it’s as simple as that. By introducing similar elements for achieving analogous tasks and similar ways of operating these elements, designers can maximize consistency of design. It’s important to maintain this consistency across every interface users will interact with on different devices.

Luckily, designers have a lot of resources with plenty of tips on how to achieve a consistent interaction design. Take a look at Google’s Material Design Guidelines and the iOS Human Interaction Guidelines when designing mobile apps.

Building design systems will also help to craft a consistent user experience while scaling your app.

Affordance

To afford means to suggest or to give a clue. Strong affordance of an interface element gives clues on how it should be used or how to interact with it. A clearly marked button gives a user a hint that it can (and should!) be clicked.

The strongest affordance that hints something is clickable on a page is the blue underline link, although modern interfaces often resign from incorporating it into their interaction designs. In such cases, it’s crucial to find alternatives (e.g., underline when hovering over the clickable element), as removing them completely will make the interface much harder to use.

How do you model interactions in application design?

Designing interaction models is a process that can be divided into six distinct phases. It follows the same logic as the UX design process. Remember that it should be a collaborative process during which you gather feedback and insights from all stakeholders.

Conduct in-depth research

When designing an interaction model for a digital tool, you have to first understand it inside out. What are its goals? What problems or issues is it supposed to resolve? Has anyone already offered a solution to these problems, and if so, how does it work? What are the current market trends in this specific area? Conduct in-depth online research, but don’t forget to seek insights about the experience from actual users if possible.

If you’re trying to improve the UX of a mobile application, find people who use it frequently and find out what they think could be improved. By having conversations with an actual user group, you will make a lot of surprising discoveries (a.k.a. the “aha” moments), but make sure you ask them open-ended questions.

Analyze and organize the findings

Analyze the data you gathered during research by extracting meaningful insights onto sticky notes – the more the better! Look for meaningful relations between them and start grouping them into dedicated sections.

You may find that people enjoy using a particular tool every day because they like the look and feel, it allows them to achieve a specific goal quickly, and more. With your findings, you can create a section related to the solution’s look and feel. For every insight section you find, try to answer the question: how can we improve (solve the problem) so that users will use the tool more often?

Understand your target group

Take a look at your analysis and verify it against your target group and its specific needs. The goal is to ensure that you ask questions oriented at improving the experience with the users in mind. In fact, this is something you should be doing at every step of the process.

When you’re, e.g., interviewing someone, try to empathize with the interviewee as much as you can to ensure that the solution you want to arrive at does respond to their needs as much as possible.

Analyze the big picture

By now, you have likely analyzed a lot of details and made decisions to introduce new components or enhance the user’s path in the existing interaction. Now, it’s time to take a look at how they fit into the overall design and goals of the tool.

If you’ve introduced changes, take a step back and look at the entire structure of the interaction flow to assess if it is a good fit or whether further modifications are necessary to maximize the user experience and make interaction easy. Study how the overall user experience has changed when you introduce a new action.

Prototype

It’s good to start prototyping as early as possible. Why? Because your initial idea will not be an exact match for the users’ needs anyway. That’s why it’s key to start putting together something tangible as early as possible, even if it’s just with pen and paper. There are hundreds of tools available online if you don’t like to get your hands dirty: Sketch, InVision, Figma, Adobe XD, proto.io, and many others.

Prototyping should be an iterative process. Confront your initial idea as early as possible with the target group and use their feedback to improve the prototype. Repeat this process until you arrive at an MVP version of your product.

Test with users

It’s rather obvious you need to test your product with an audience, but designers often move on to testing when it’s already too late. Beginning user testing when your product is already in a clickable prototype may cost you a lot of additional time and money if the feedback shows you need to introduce some modifications.

No matter what you create throughout the design process (initial sketch, flow, wireframe) – show it to potential users (or other designers, engineers, stakeholders) and ask for their feedback. You will learn a lot from them in a way that will allow you to create a truly useful design.

Advantages of an interaction model

Interaction design is at the core of UX design. Well-designed interactions are the foundation of a great user experience. Here are some of the benefits of incorporating an interaction model into the UX design process:

Clear communication

Interaction models help to keep the user oriented as they navigate a tool and understand how to move from one place to another to perform an action or find information. The model also overlays information architecture and allows designers, developers, and stakeholders to design how a user will use the application to reach specific goals.

Better UX design

Interaction designers enhance the user experience by staging the interaction between the product and the user. As a result, the user experience is more intuitive, which increases the user’s satisfaction. An interaction designer should have substantial knowledge of UX design practices to be able to better understand the needs of the audience and build useful designs in respect of those needs.

Interaction design in practice

UX/UI designers must keep the fundamental interaction design principles as they will always play the key role in designing usable interfaces and systems. The rules aren’t set in stone, but contribute to creating useful and engaging products and services. They certainly help increase their adoption.

When creating interactions, designers should keep in mind the six fundamental principles that will help them create appealing and usable tools (Visibility, Feedback, Constraints, Mapping, Consistency, Affordance). By doing so, they can ensure the product will meet users’ expectations. Then (by observing the data and collecting user feedback), they can improve your product by further iterating on interactions you have created.

As new devices, interfaces, and environments continue to advance, they open up new interaction possibilities. Game controllers are in constant evolution, offering an increasingly diverse array of input controls. Gestural interactions are bound to evolve from simple touchscreens to using hand gestures in 3D virtual reality spaces and IoT devices that accompany us in our day-to-day lives. Interaction designers, thus, have to constantly strike the right balance between innovative approaches and in-grained human conceptual models.