“Interaction cost” is the amount of mental, physical and time effort a user must invest to interact with a user interface (UI) in order to achieve their intended goal.

This “cost” can be categorized into three components:

1. Cognitive effort: This pertains to the mental processing power required to navigate a UI. A complex or unintuitive UI leads to a high cognitive load and, consequently, a high interaction cost. Conversely, a simple and intuitive UI reduces cognitive load and interaction cost.
2. Physical effort: This involves the physical exertion a user must undertake to interact with the UI, such as the number of clicks or keystrokes required to complete a task, the amount of scrolling involved, and so on.
3. Time effort: This refers to the duration it takes for a user to achieve their goal while interacting with a UI. Slow loading times, complex navigation, task complexity, lack of instructions or other factors can increase the interaction cost.

In an ideal world, users would find what they’re looking for immediately upon visiting a site or app, implying zero interaction cost. This is considered the ultimate goal in usability. However, due to the range of functionalities most sites and apps offer, achieving zero interaction cost is often unfeasible.

The goal of a well-designed site or app is to reduce the interaction cost for users to achieve their goals.

This could involve minimizing the amount of:reading, scrolling, searching for useful information, understanding the presented information, clicking or touching (without errors), typing, waiting for pages to load, switching attention between tasks, and remembering information to complete a task.

‍

So, how can we minimize interaction cost in designs? Here are some effective strategies:

1. Keep related actions close:

According to Fitts’s Law, targets that are closer and larger are faster to click. Therefore, actions should be positioned near the elements they relate to and have a sufficient clickable area.

Real-life example: In a music streaming app like Spotify, the playback controls (play, pause, skip) are typically positioned at the bottom of the screen or in a fixed position, allowing users to easily control their music playback without having to navigate to a separate screen or menu.

2. Minimize choice:

Hick’s Law states that the time it takes to make a decision increases with the number and complexity of choices. By reducing choices, decision-making can be sped up. Highlighting a smaller set of recommended or popular items can also aid in quicker decision-making.

Real-life example: When ordering food through a food delivery app such as Uber Eats or Grubhub, instead of presenting an overwhelming list of hundreds of restaurants and menu items, the app may offer a curated selection of “popular” or “recommended” restaurants based on the user’s location and preferences.

3. Make better use of working memory:

Cognitive psychologist George Miller theorized that a person can hold approximately seven items (give or take a couple) in their working memory. Organizing information into meaningful, manageable chunks can make memory usage more efficient.

Real-life example: Airbnb effectively applies this principle on their property listing pages. Instead of overwhelming users with a wall of text about the rental, they break the information into manageable chunks, with clear headings such as “About this space,” “Amenities,” and “Availability.” This not only eases the cognitive load but also allows users to quickly scan and locate the information they need, thereby enhancing the user experience.

4. Reduce distractions:

Attention-diverting elements like animated banners, pop-ups, and unnecessary visuals can distract users from completing their tasks.

Real-life example: The Medium platform is a great example of minimizing distractions to improve user focus. When reading an article on Medium, users are presented with a clean, minimalistic interface that primarily contains only the text and essential navigational elements. Extraneous features, such as pop-ups and ads, are avoided to maintain the reader’s concentration on the content, thus effectively reducing the interaction cost.

5. Promote Recognition:

Field labels or menu items should be readily visible or easily retrievable when needed. Users should be provided with in-context, step-by-step tutorials instead of being asked to read through long tutorial documents. Additionally, lengthy forms should be compacted to fit within a single display.

Real-life example: For instance, Google’s search engine interface, with its large, clearly labeled search bar in the center of the page and auto-complete suggestions, provides a step-by-step guide to help users formulate their queries.

6. Streamline Tasks:

Visualizing the total number of tasks involved in a process can identify opportunities to simplify and streamline operations. Steps that can be removed or combined without affecting the outcome should be considered. This reduction can lower the physical interaction cost and make the product more efficient.

Real-life example: many online forms now auto-fill address or credit card details if they’ve been entered before, thereby reducing the number of steps involved in the process, enhancing efficiency, and lowering the physical interaction cost.

7. Reduce Repetition:

If certain tasks are repetitive, consider automating them or making them easier to perform, thereby decreasing both the physical and cognitive interaction costs.

Real-life example: Spreadsheet software like Excel or Google Sheets, for instance, has features that allow a function or formula to be applied to multiple cells simultaneously, reducing the need to perform repetitive tasks.

‍

Minimise interaction cost example

Think about a user on a product page who wants to add two chairs to his cart, but isn’t sure about the color. He needs to select a color from a dropdown menu, which takes two clicks and a scroll. However, he doesn’t know what color options are available. When choices are hidden in dropdowns or nested menus, users might not know they exist. This can make it hard to find what they want and might lead to missed opportunities or frustration.

To select the quantity, the user has to do two more clicks and a scroll. After that, he needs to move his mouse to the “Add to cart” button and click on it. In this case, adding two red chairs to his cart costs five clicks, one scroll, and a short mouse movement.

‍

In the improved example, we apply the Principle of Visibility to the color options. This gives the user a clear view of his choices right away, reducing the mental effort and the number of clicks needed. To change the color, the user only needs to move his mouse a short distance and click once. By showing all colors upfront, the user can try different colors before making a final choice, which further reduces the interaction cost. We also leverage the principle of visual differentiation and replace text with actual color samples to show the available color options. Using color this way is a powerful visual cue that users can understand quickly.

For the quantity, we use a selector that lets the user easily pick two chairs. He can click on a plus sign or enter the number directly. This tool makes it faster and easier to make small changes. Lastly, we move the “Add to cart” button closer to the quantity selector to further reduce the interaction cost.

By making these simple changes, we create a more user-friendly interface. The total interaction cost is now just three clicks and a very small mouse movement.

Let’s further explore how to minimize the interaction cost using our previous example. We can implement a feature called One-Click Ordering.

‍

Traditionally, online shopping demands several steps: adding items to a cart, checking out, inputting shipping and payment details, and finally confirming the purchase. This process can be time-consuming, requiring numerous interactions, thereby escalating the interaction cost.

One-Click Ordering, however, simplifies the whole process. It allows users to complete a purchase with just one click, bypassing the typical checkout routine. This feature relies on previously stored user data, like shipping and payment information, to expedite the purchase process.

In our design, we introduce a primary ‘Buy Now’ button. The choice between highlighting ‘Buy Now’ or ‘Add to Cart’ as the primary button largely depends on your business model and the particular objectives of your user interface. This addition enables users to place an order in just one click, drastically decreasing the cognitive, physical, and time effort required.

Another way to decrease interaction cost is by better utilizing working memory. Consider a scenario where there’s a large block of text. Reading it can be overwhelming, especially when it’s not a blog but a product description.

‍

In the improved version, we apply simple strategies to make the text more manageable. We break down our text into smaller, digestible segments with ample spacing between paragraphs. We also introduce subheadings for each paragraph. Additionally, we increase the line height from 120% to 160%, making the text easier to read.

‍

So why is it important to do your best to minimise interaction cost?

1. User Satisfaction: Enhanced user experience results from lower interaction costs, leading to greater product satisfaction.
2. User Retention: Lower interaction costs reduce the chances of users abandoning the product.
3. Efficiency: Users can accomplish tasks faster, essential in professional settings.
4. Accessibility: Simplified interfaces can increase product accessibility for users with varied abilities.
5. Conversion Rates: Lower interaction costs can improve conversion rates in sales or sign-up driven websites and apps.
6. Reputation: Products with low interaction costs are often perceived as user-friendly and high-quality, boosting your brand’s reputation.

In summary, minimizing interaction cost isn’t just about crafting a superior product, but also about aligning with user needs and expectations, yielding better business results.

‍

Interested in learning more?

We have a UX/UI Design Mastery Course just for you. Master UX/UI Design with our comprehensive course by learning practical skills, understanding design principles and creating impactful user experiences.

‍

‍