Guide

UI Design for humans

A step-by-step guide to using Interaction Archetypes
Last edited: May 2023

Now you have everything you need to design user interfaces that place human behaviour at the centre of interaction.

Robert Goesch
Author
Robert Goesch
Lukas Rütten
Author
Lukas Rütten

What's in this guide?

01 Interaction Archetypes at a glance With just three types of content, you can play all the strings of an interaction.
02 This is how user experience comes about Content, user goals, interaction, and business goals are all interrelated. The UI brings these together into one experience.
03 How to use the Archetype Canvas You can use Interaction Archetypes as a design model, a thinking tool, a decision-making tool and a communication framework.
04 The Archetype Canvas — Pinning down the big picture The Canvas helps you structure your thoughts and organise the content of your interaction in relation to each other.
05 Spot — Identify the moment of interaction Always start with the moment of interaction to clarify the purpose of your interaction.
06 Plan – Set up an interaction strategy Define the strategic direction of the interaction. This is the reference for content prioritisation and evaluation.
07 Intention of use — Balancing your content Align Core, Extend, and Jump in accordance with your anticipated intention of use.
08 Play — Derive a content hierarchy Describe the steps you will take to achieve the strategic goals. Decide how you will balance your content in relation to each other.
09 Context of use — Balancing content When designing the information and functions, consider the context of use in which the interaction takes place.
10 Check — Conduct a design review Use the rules of thumb during your design reviews. They will help you to make your product interactions efficient and effective.
11 Interaction Patterns — Supporting user behavior with Interaction Archetypes Users click, users scroll, users scan. With Interaction Archetypes, you'll accommodate these patterns.
12 The basics and benefits of Interaction Archetypes Digital services and products developed with Interaction Archetypes perform better. This is indicated by measurements of various KPIs.
13 Intuitive interfaces, thanks to Interaction Archetypes Moment of interaction, strategic alignment, content measures, intention of use, context of use, and rules of thumb. Done.

This guide explains how to use Interaction Archetypes to design user interfaces, to evaluate and synthesise requirements, and to articulate design proposals with confidence. What information and functions are really important? Where and when do you apply them? How do you give them the design expression they need to be effective? And what objective should they serve? Questions like these are part of the everyday work of everyone who develops digital products — not just designers. They all need decision-making criteria, according to which they evaluate requirements and user interfaces.

Only when users feel that they are making progress with the product will they continue to interact with it. And only then can the product achieve its business goals.

Interaction Archetypes at a glance

You can use the interaction archetypes as the basis for any user interface. They describe how content must be structured, in order to address the intention of use in the best possible way. This equips you with a model to help you develop user interfaces efficiently and effectively.

Distinguish content according to three types

The Interaction Archetype framework distinguishes three types of content that each address a basic interaction pattern for digital products.

Core-Content

Content needed for users to complete a task. This kind of content captures the essence of the interaction, and is simple to understand. In a sense, it is the bare minimum of function and information required to finish a task. Define the Core.

Balance content according to intention of use

The Interaction Archetypes framework covers three fundamental categories for intentions of use. These intention types provide guidance on how to balance and prioritise content for various contexts.

Act

Users pursue a clear goal. They have already decided on a specific solution - now the only thing holding them back are the steps needed to get there. Here, the content needs to be Core-focused.

This is how user experience comes about

When it comes to interface design, two different goals are always inexorably at odds — the company's goals on one hand, and the users' goals on the other. All too rarely do the two coincide. And in the intersection lies the product. In our case, a digital service or digital product. Its interface forms the bridge through which both parties can achieve their goals in an almost magical way. For this purpose, the company provides user-interactive content.

The term »content« refers to all the information or features that a digital good or service makes available to customers so they can carry out a task.

Therefore, interaction means that users interact with this content in a particular way, at a particular time, in a particular setting, and with a particular goal. They finish a task and move forward.

Venn diagram

CUBI User Experience Model according to Corey Stern with Content, User Goals, Interaction and Business Goals.

Content, user goals, interaction, and business goals are all interconnected dimensions. The user interface brings these four dimensions together to create user experiences.

The company addresses users, by displaying communication content through information and functions. If the offering is relevant to them, users respond to it. In this instance, they take action and apply the information to finish a task and advance toward their desired goal. The result of this interaction is a transaction that creates business value and advances the organization's own objectives.

Therefore, the job of a product team is to communicate content in such a way that users can interact with it effectively and efficiently. Effectiveness is when users are supported in achieving their goals. And efficiency is when it goes down like butter.

Our Archetype Canvas helps to bridge the gap between business and user goals, and to model the appropriate interactions in terms of content.

How to use the Archetype Canvas

We have developed the Interaction Archetypes framework; our guide here shows you how to incorporate it into your design workflow using the Archetype Canvas.

As a design method

We make use of the Archetype Canvas as an Interaction Blueprint, to develop the interaction strategy and content hierarchy in tandem. This enables you to structure content effectively and efficiently. The method excels particularly when a process has many specific requirements, and complex user tasks must be dissected into simple and pleasant interactions. It creates strategic clarity about the purpose and goals of an interaction, and gives focus to your design activities. By gaining structure, you can design in a more deliberate manner.

As a thinking tool

The Archetype Canvas allows you to take a problem-solving approach when examining the content structure from various angles. You give yourself room to maneuver and investigate various design options. This makes your product more likely to be successfully differentiated, and reach its full potential.

As a basis for decision-making

The Archetype Canvas serves as a basis for prioritising content and evaluating design ideas. You thereby formulate goals for the content. These provide a shared descision-making criteria, enabling all participants to work constructively on a solution.

As a communication framework

The Archetype Canvas can also be used as a framework for communication within the team, or with stakeholders. One of the biggest advantages is that you can articulate your work clearly — even to non-designers. It uses a vocabulary that allows all parties to arrive at a common understanding, and aids the whole team in discussions and joint decisions.

The Archetype Canvas — Pinning down the big picture

The lynchpin is the Canvas itself, which helps to structure your thoughts and to situate pieces of interaction content in relation to each other. On the Archetype Canvas, you describe the moment of interaction, set up an interaction strategy, and derive a content hierarchy.

1. Moment of interaction

The moment of interaction describes the purpose of the interaction — user's task and the goals behind it. It illustrates how the success of the interaction can be measured, and what purpose your user interface serves.

2. Interaction strategy

The interaction strategy describes how the user is guided through the interaction. It pinpoints the fundamental goal of all your efforts. From this plan, you derive how the interaction must be designed so that users make progress as quickly as possible. The better the plan, the more effective the interaction.

3. Content hierarchy

The content hierarchy describes how you intend to achieve your strategic goals. It is primarily about which information and functions you implement, and how they interact with one another.

The fundamental mechanics of how we approach the interface are critical. First we get an overview and identify the moment of interaction. Then we establish the strategic goals that we hope to achieve through the interaction. Then we derive the corresponding content that will result in an intuitive user experience. This is how we ensure that our design activities have the greatest possible impact.

In a nutshell

  • The purpose of the interaction is defined by the moment of interaction.
  • The interaction strategy describes the strategic goals of the interaction.
  • The content hierarchy describes the structure of your interaction. How do you intend to incorporate this into the interface?

Spot — Identify the moment of interaction

With the moment of interaction, we draw the boundaries of the solution space. An interaction is always related to previous and subsequent interactions. Before we define goals, we must first define the purpose being served. This way, we not only identify individual interactions along the customer journey, but we also establish benchmarks against which success can be measured.

Describe the task

The task explains what the interaction is for. In other words, the function of the user interface. It specifies the setting in which the content is used. Here it is important to note that the task can span multiple aspects of the interface. If the task of the user interface is »authentication for use«, it can be solved in one or more steps, and across more than one interaction. The key is that the interaction is in the context of the same task. This allows you to position different interactions in relation to one another and gain clarity about your users' mental models.

Describe the intention of use

The intention of use describes the driving force from which users solve the task. There can be no action without intention — regardless of whether the acting person is aware of it. Intention arises from the motivation to achieve a goal. We can address different intentions of use with our Interaction Archetypes. Crucially, there are three categories that determine the purpose of the interaction: Act, Understand and Explore. In our authentication example, users follow the Act intention. They are pursuing a clear goal and tackling a concrete task. The intention of use shapes the way your content is used moving forward.

Describe success

Every completed task produces a sense of accomplishment. However, partial successes can be achieved even in the process of doing a task. The more milestones you set, the deeper you can zoom in. The fewer milestones, the further you can zoom out. In a way, you control the altitude of the interaction. Authentication can be done in one step, two steps, or even x steps. The appropriate zoom level of an interaction is determined by whether the added value for your users outweighs the friction it creates. The user's next nearest success thus becomes a success indicator for your interaction.

Describe the goal

The goal expresses the user's desire for progress. With each interaction, we aim to bring the user closer to their goal. The goal keeps us on track and prevents us from losing sight of the big picture. When it comes to logging in, we must keep in mind that the login itself is not usually the goal for our users, but just the means to an end: reaching the desired state. Nonetheless, the interaction advances both parties. Check!

Plan – Set up an interaction strategy

The interaction strategy defines the goals you want to achieve with the contents of an interaction. It describes what we want to accomplish with the Core, the Extend and the Jump. The areas are interrelated and complement each other. However, they are not to be interpreted as a layout or sequence. The idea is to define them and link them together.

Define the Core

The core defines the goal of the interaction. You make a promise to the user: »This interaction will enable you to complete your task and make progress towards your goal.« Remember that when users use your product, they have a specific goal in mind — whether they are aware of it or not. And your offering should bring them closer to it. The faster and more clearly the Core communicates what task can be accomplished with the interaction, the more supported the user feels.

Conversely, this means that users who do not feel addressed will not — and should not — interact. It may sound strange, but it's only logical.

The Core adheres to the following principles:

  • Contributes directly to the success factor
  • Easily recognizable
  • Can be tangibly experienced
  • Provides orientation
  • Encourages engagement

Define the Extend

The Extend has a supportive effect. It gives users confidence that they can complete the task. To this end, it is important to impart knowledge and remove hurdles. All information and functions serve the goal defined by the Core. With the Core, an expectation for the user was created, which must be delivered upon to avoid disappointing them. In the Extend, you provide them with additional tools to complete the task beyond the Core, i.e. beyond the bare minimum.

The Extend also takes into account the varying experience and knowledge levels of users. Is the task commonplace, or does it require specialist knowledge? Define how the Extend will enable users to complete their task. The content from the Extend enables active engagement with the task.

The Extend adheres to the following principles:

  • Takes into account various levels of prior knowledge
  • Aims to reduce hurdles
  • Assures users that they can complete the task
  • Assists in the completion of a task

Define the Jump

The Jump offers different solutions than the Core. However, it counts towards the same overarching user goal. You activate users and keep them browsing. You save them from running into dead ends caused by unhelpful interactions being offered. You want them to keep making progress — preferably with your product.

With this component, you deviate from the original aim of the interaction and open up alternative solution spaces to make progress. Users land on your site with a purpose. But your offer is only one of many. They haven't yet decided for or against your offer. The Jump appears to change the direction of the interaction, but in fact continues to address the user's goal.

The Jump adheres to the following principles:

  • Engages users
  • Keeps them browsing
  • Avoids dead ends
  • Makes progress possible

Intention of use — Balancing your content

Behind every action lies an intention, conscious or unconscious. Scientific models of behavioural psychology see intention as the driving force behind people's actions. This also applies to digital interactions.

With the framework, you can actively address the intention of use. It forms the basis for balancing the Core, Extend and Jump. This way, you can significantly optimise the user experience and serve different behavioural intentions.

Getting a sense of alignment is the first step. Only then do you think about the exact content and its design. When people decide on a digital offer, there could be countless intentions behind it. However, various studies conclude that the intentions of use can largely be categorised, and they even come to similar results. Each of these intention types is associated with a specific type of behaviour. From the studies, we derive three major categories for our framework.

Act: Focus on the Core

Users pursue a clear goal and tackle a concrete task. The solution is already clear to them. Thus they can usually state the expected outcome clearly. Typically, they proceed in a focused and structured manner. They want to reach their goal as quickly and directly as possible, within the scope of their knowledge and skills. Users anticipate a clear outcome. All that stands in their way are the necessary steps.

Focus on the Core: If the majority of users follow the Act intention, emphasise the Core. By placing it at the centre of the design, you create maximum focus on the task that underlies the interaction. The less the user is distracted by informative or inspiring elements, the better they can focus. This characteristic can be seen, for example, in interactions that seek to close a sale.

Understand: Focus on the Extend

Users have an overarching goal, but the solution is not yet decided. They need more information to determine the right solution path. Their behaviour is characterised by a thorough approach that may take some time. They want to gain insights, answer questions, compare information and thus alleviate their uncertainty.

Focus on the Extend: When the intention of use corresponds to the schema Understand, focusing on the Extend helps to support the user. They can acquire relevant information and deepen their understanding. The Extend gradually removes roadblocks, and manifests in interactions that serve to convince and compare. You might use this, for example, to introduce a company or a product.

Explore: Focus on the Jump

Users have no specific task or solution in mind. They are fulfilling a need such as entertainment, discovery or diversion — they crave an experience. A characteristic feature is the consumption of wide-ranging content within a short timespan.

Focus on the Jump: The Jump serves the behavioral intention Explore. You encourage users to browse by providing them with a variety of content. Decisions fade into the background, while inspiration comes to the fore. This emphasis is reflected in experience-oriented interactions such as those found on YouTube or Pinterest.

Play — Derive a content hierarchy

The content hierarchy describes the concrete steps you will take to fulfill your interaction strategy, and places them in relation to one another. Now you can decide which content to deploy, according to the criteria that you already created with the interaction strategy.

Play out the Core

The Core represents the promise of interaction. To play it out, you need to find the function or information that allows users to immediately complete their task. No compromises, no detours. It all comes down to the one move that will deliver on your promise.

The following guiding questions will help you determine the appropriate feature or information:
  • What will enable users to complete their task immediately?
  • What expresses the Core so that the essence of the interaction can be immediately felt?
  • Is it possible to highlight the Core of the interaction with just one call-to-action (CTA)?
  • How do you engage the user's autopilot and enable them to think quickly?
  • How do you reduce complexity and bring focus?

Play out the Extend

Not all users have the same knowledge, experience, or environment. In the Extend, you remove the hurdles. The key here is to consider the context. You design the offering in such a way that users feel a sense of security. All of the content in Extend assists them to complete the task and make progress.

The following guiding questions can help you provide the right support:
  • What additional information and functions will assist users in completing the task?
  • What information might users be missing?
  • How can the most crucial points be communicated?
  • Which patterns do you employ to provide guided orientation?
  • How do you encourage slow thinking in order to gain a deeper understanding?

Play out the Jump

Here, it's about keeping users on track. Take a step back and think: what goal might users be pursuing, if Core and Extend were not able to help them with it? It is important to find other offers that enable progress. And for that, we require suitable alternatives that take into account the context of use.

The following guiding questions assist in the selection of Plan B offerings:
  • What is the purpose of the interaction?
  • Are there alternative options that fit this need?
  • What pain points do users experience?
  • Can other incentives keep users browsing?
  • What are users attempting to accomplish?

Context of use — Balancing content

Interactions with digital products or services do not take place under laboratory conditions. Not every influence can be predicted. However, there are a handful of common factors that can be said to influence every interaction. Following behavioral psychology, we refer to them as the context of use. The context of use influences the way the interaction takes place, with significant potential to impede or enable the interaction. This knowledge informs you how to design the interaction so that it is enjoyable, and leaves little to chance.

The following factors reveal what specific content you need and how it should be created:
  • What knowledge and skills do users bring to the table?
  • How much attention do they devote to the interaction?
  • What habits are associated with the context of use?
  • How does technology shape the way they interact?
  • Which of the organization's offerings are relevant to the interaction's purpose?

Knowledge and skills

People draw on a variety of knowledge and experience. Some are already acquainted with the interaction, while for others it is new. Some are familiar with the topic, others not. As a result, the amount of information and confidence required to complete the task varies.

The content hierarchy strikes a balance between the Core and the Extend. Users with a knowledge advantage have access to the direct and fast path through the Core. And in the Extend, you provide targeted assistance to everyone else. Check24, for example, supplements every input field with additional information. Users who are unfamiliar with the technical terms of, say, a car insurance policy will still be able to complete the application on their own. This allows them to tackle the task at their own pace.

Attention

Certain actions are more likely to be performed in passing than others. Perhaps due to repetition. Or perhaps distracting surroundings. Attention is a scarce resource. That is why it must be directed in the appropriate places.

Essentially, our framework Interaction Archetypes always generates focus. There is only one task at a time in the center of an interaction. The framework only allows for additional content if it is required to bolster the sense of security. The more difficult and critical the task, the more concentrated attention is required. In that sense, you can do without the Extend and Jump.

As an illustration, consider the process of sending money through PayPal. In order to prevent input errors, any content that is not absolutely necessary is omitted. This way, you avoid erroneous commas, or having one or two zeros too many.

Technology

The range of devices on which we consume content is expanding all the time. Devices are often connected by an ecosystem, and decentralised content is played out on various screen sizes. The form and control of our content must adapt fluidly.

Interaction Archetypes helps you identify the critical key components even before you begin designing the content hierarchy. It champions radical reduction, which not only affords you more creativity in your design, but also allows you to accommodate various screen sizes control mechanisms.

Habits

People's experience grows in proportion to how frequently they use a medium or visit a specific page. They learn patterns that govern how information and functions are communicated. Routines emerge as a result, which can have both positive and negative effects on usage.

Use common patterns to create expectations as you develop your content hierarchy. In the Core and Extend, patterns that are easily recognized provide guidance and orientation. Users go into autopilot mode, and quick thinking is fostered. Two input fields and a button, for example, suggest a log-in mask. It's a mental shortcut, without the need for active examination of information and function. On the other hand, an obvious disruption of learned habits is a wake-up call that stimulates the conscious examination of the content — slow thinking.

Supply and demand

Offers that compete for the attention of users play a unique role. These could be different offerings from the same company. Or even provided by a third party. They all promise your users different ways to progress toward their goal. These compete with one another, shaping the perception of your offer and subsequent interactions with your product or service.

For each interaction, clarify which offers align with the user's goal and which not. Using this criterion, you can identify the optimal points along the customer journey to pursue certain business objectives. You can place them in a different time or context, without jeopardizing the effectiveness and efficiency of the individual interaction.

For example, registering for an airline's frequent flyer program has a high business priority. However, incorporating it into a flight booking is a risky endeavor. There, it gets in the way of completing the flight booking. The goal is to arrive on time for a business meeting in a distant city. At that moment, what's relevant is the completion of the booking. Not the possibility of getting a lower price the next time around. Once the flight has been booked, users are more receptive to new offers that pay off on a different destination.

Check — Conduct a design review

During the design review, the rules of thumb help you optimize the interaction between users and offerings. They correspond to patterns in how people use digital offerings, and help you use the framework in a targeted manner. Our rules are not meant to be taken dogmatically. They're general guidelines that help you create focus.

Only one Core permitted

Each interaction has only one Core. If you have more than one Core, then you need more than one interaction.

Proximity is key

Anything you put near the Core must be closely related to it in terms of content. The further away the content strays from the Core, the more general or inspiring it becomes.

Keep it brief

Reduce the content in the Extend section to the essentials — the less, the better. This is also true for the Jump, which should only cover one topic. Limit the Jump to content that is actually relevant. This creates clarity.

Always keep 'em browsing

Keep users browsing. They should not come to a halt, but rather make steady progress. When you provide users with an alternative way to interact with your product, you help them get closer to their goal.

The Core is all you need

Every interaction must include the Core. Extend and Jump are both optional because they are auxiliary to the purpose of each interaction. Reevaluate whether Extend and Jump add value for users for each interaction.

One topic per line

Do not mix topics. This will help users in navigate and process the content.

Interaction Patterns — Supporting user behavior with Interaction Archetypes

The use of interactive media is evolving. That is why it is critical to constantly compare each method and framework against reality: Are the prerequisites still correct? The same is true for beliefs about behavior patterns that are common in UX design, but turn out to be myths. We'd like to highlight three important interaction patterns, about which many people believe the opposite is true. Interaction Archetypes create a structure to accommodate these behavioral patterns. Conversely, you can also exploit these patterns. They open up possibilities where others see limitations.

Users click

Interaction Archetypes help you break down your users' goal into task packages that they can easily manage. The context of the interaction tells you how many clicks are needed to reach the goal. The less experience users have, the more stressful the solution path will seem. If the situation also involves risks, the stress level increases. Stress in turn leads to defensive reactions. One way to prevent this is by breaking the task down into smaller milestones. This makes them easier to grasp, and creates a feeling of security.


For this, we explore the moment of interaction. By exploring its context, you will find the appropriate number of steps. As many as necessary, as few as possible.

Remember:
  • Reduce the complexity by a reasonable number of clicks to keep the cognitive effort low.
  • Use clicks as a control mechanism to create a sense of security.
  • Clicking can help you optimize usability for particularly limited devices.

Users scroll

Interaction Archetypes help you build a very clear user expectation of your content. When the Core communicates the promise of interaction, users decide whether the task will move them closer to their goal. They determine whether they are confident enough to complete the task. They choose whether or not to participate in the interaction.

Users scroll, that's for sure. The common battle waged for space »above the fold« is misleading.

Remember:
  • Scrolling is triggered by the Core (your promise to the user).
  • Users are not required to interact with all content in order to complete a task.
  • The Extend supports the Core and does not break your promise to the users.

Users scan

Interaction Archetypes helps you structure content. Content is not consumed in a linear fashion. Users scan it. They seek out anchors that promise them progress. Using patterns, keywords, or visual stimuli helps to make anchors easily scannable. In the end, it makes no difference whether or not users actually read all your content. What is important is that they find the information needed to complete their task.

When users can't predict what will happen next, they will leave. And be annoyed. Take this into consideration when designing the Extend.

Remember:
  • Users do not consume content in a linear fashion.
  • Patterns, keywords, and visual anchors can facilitate scanning, especially in the Extend.
  • Users seek clues that correspond to their mental model — something they recognize.

The basics and benefits of Interaction Archetypes

Digital products and services that are developed based on the Interaction Archetypes perform better. We can see this from the measurement of various KPIs. They boast a higher conversion rate, faster interactions, and higher user satisfaction.

Feedback from project teams demonstrates that Interaction Archetypes also have a positive impact on the workflow. It enables conceptual questions to be answered independently of design discussions. And it facilitates the integration of non-specialist stakeholders into the decision-making process, making communication easier.

We have developed the Interaction Archetypes framework based on hands-on experience. It has helped us design a wide range of digital products and services for companies such as Deutsche Telekom, AXA, EnBW and Yello. The outcomes are assessed through qualitative interviews, quantitative surveys, and multivariate tests. New insights are incorporated into the framework on a regular basis.

In 2020, our framework was scientifically examined as part of a master's thesis (available only in German). Lena Pietsch was able to demonstrate that our framework corresponds to findings from human behavioral psychology. The Interaction Archetypes framework is particularly well-suited to handle the needs of people interacting with digital media.

Intuitive interfaces, thanks to Interaction Archetypes

Step by step
1
Always start with the moment of interaction to clarify the purpose of your interaction.
2
Define the strategic direction of the interaction. This is the reference for content prioritisation and evaluation.
3
Describe the steps you will take to achieve the strategic goals. Decide how you will arrange the content in relation to each other.
4
Align Core, Extend, and Jump in accordance with your anticipated intention of use.
5
When defining the information and functions in concrete terms, consider the context of use in which the interaction will take place.
6
Use the rules of thumb during your design reviews. They will help you to make your product interactions efficient and effective.
7
Remember: the Core defines the interaction's goal. The Extend assists users in achieving their goals. The Jump is an alternative offer that takes a different route to the users' goal.
Fancy taking something with you? Then grab our PDF version of the guide.