Editor's Guide: Do you understand how to solve the interaction problems in special scenarios? In this article, the author introduces the solutions to a variety of interactive problems, solves problems with the special difficult decomposition method, etc., and recommends groups who want to learn the difficult decomposition method to read.
First, the interaction problem of qualitative change caused by quantitative change
As one of the basic laws of materialistic dialectics, "quantitative change causes qualitative change" applies to the development law of many things, and I have recently found many similar problems in interaction design. For example, some common controls or interaction methods, in the special scene of large data volume or too many levels, have become a kind of "ravaging the user" existence.
Therefore, in some B-end products in special business scenarios, when "Corner Case" becomes a norm, common controls will begin to cause "qualitative changes" because of "quantitative changes", and suddenly become a problem for users.
Looking at the above two cases, we will find that the conventional controls and commonly used interaction methods are no longer easy to use in these "difficult" scenarios. So can we find another way to use some other interactive thinking to solve these difficult interactive problems?
Second, the difficult dismantling method
In fact, when it comes to "tricky" and "difficult", everyone may be more or less, and have heard such "chicken soup" on the Internet: "Don't be afraid of difficulties, difficulties can be disassembled, and when a difficulty is dismantled into a small goal to complete, we will be closer and closer to the overall goal." ”
That's what I want to talk about today – the "difficult dismantling method". When it comes to difficult disassembly methods, whether it is the various success studies that are popular on the Internet, or some mature project management theories (such as the classic Work Breakdown Structure), there are detailed and in-depth research and practices on this.
We usually apply this thinking to the management of complex work and projects, but today I want to do a bold experiment to apply the difficult disassembly method to the interaction design, and see if the difficult disassembly method can be used to solve the problem we mentioned above that seriously affect the interaction experience because of special business scenarios.
Since we have to do difficult dismantling, we can not always dismantle at will, there must be some dismantling principles and methodologies to support the correctness of behavior. It's certainly hard to find a detailed methodology in "Success Studies", so consider the disassembly principles in Work Breakdown Structure to see if they can be applied to interaction design scenarios.
Let's take a look at the decomposition principle defined in WBS:
- The main goal is gradually refined and decomposed, and the lowest level of daily activities can be directly assigned to individuals to complete;
- Each task in principle requires decomposition until it can no longer be subdivided;
- Daily activities should correspond to people, time and capital investment;
- The task of dismantling the whole can eventually support the completion of the total task.
If we extract the key meaning from this, it is:
- The big goal is broken down into the small goal;
- Split to minimum particle size;
- Each small goal needs to have a corresponding cost measurement;
- Finally complete the overall goal.
Finally, the key meaning of the principle can be corresponded to interaction design:
- Gradually decompose the large task goals in a scene into small interactive behaviors;
- Each interaction behavior should be as simple and direct as possible, only for the achievement of one interactive purpose;
- Each small target of the disassembly must have a corresponding calculation of the interaction cost;
- The small interaction behavior of the overall disassembly can eventually support the completion of the overall task goal.
At this point, we have probably summarized some of the principles of disassembly, but if you look closely at these four principles, you will find that there is still one conceptual input: that is, the cost of interaction. If there is no measurement of interaction cost, there is no way to really measure whether the plan we finally developed through disassembly really saves the user's interaction cost and improves the efficiency of the task.
Therefore, before starting to disassemble, we also need to understand the cost of interaction together.
Third, the cost of interaction
What is the cost of interaction? Nielsen Norman defines "interaction cost" as the sum of the physical and mental efforts that users must put in to achieve their goals. Most junior designers have the misconception that the cost of interactions equals the number of clicks a user needs to complete a task. However, it is much more than that.
In the article Interaction design is more than just user flows and clicks (author Richard Yang), the cost of interaction can be divided into physical interaction cost (PIC) and psychological interaction cost (MIC).
1. Cost of Psychological Interaction (MIC)
The two most important components of the cost of psychological interaction (MIC) are attention and memory. When a task requires too much attention or memory to complete, it will have a higher cost of psychological interaction (MIC), which reduces usability.
There are broad classifications for different types of memories. The shortest type of memory is called working memory, which usually lasts only a few seconds during a task. In other words, when we are involved in other cognitive processes, our working memory is responsible for the information we can grasp.
Miller's Law states that the average person can only keep 5-11 items in their working memory at a time. The working memory required to complete tasks in the product is directly proportional to the psychological interaction cost (MIC) burden imposed on the user.
Therefore, tasks should not require users to keep more than seven items in their working memory at any time. In rare cases, if users must be asked to keep more than 11 items in their memory, use "blocks" to reduce their mental burden. "Chunk" means grouping information.
Another consideration related to attention and memory is Hick's Law. This law states, "The time it takes to make a decision increases with the number and complexity of choices."
2. Physical Interaction Cost (PIC)
Common physical interaction cost (PIC) factors include the distance to reach and the width of the target, the amount of user input, and the actions required to complete the task.
Fitz's Law states that the time it takes to hit a target (for example, click a button) is a function of the distance from the input device and the width of the hit box of the target. For example, if the mouse cursor is far away and the button is small, it will take longer to click the button on the desktop.
The best way to assess physical interaction cost (PICs) is to "analyze tasks" and check availability metrics such as "task time".
3. Interaction path and motivation
In some cases, users may take multiple paths to achieve their goals. The user decides which path to take based on the concept of "expected utility".
The user weighs the benefits and costs of each operation and chooses the path that best balances the benefits and costs. Users tend to choose the path they expect to be less expensive to interact with.
If the action path is not intuitive or familiar, even if the physical operation cost is low, they will eventually choose the path they are more familiar with due to the higher cost of psychological interaction (MIC).
Users with higher motivation (e.g., due to brand operations) are more likely to incur higher engagement costs to achieve their goals. If the consumer is a fan of a brand, even if the site's interaction costs are high, the user may still have enough motivation to complete their task.
However, if users purchase regular products with high interaction costs in the payment process, they are likely to go to other websites to buy.
From the above specific theory, we can see that when evaluating the cost of interaction, the number of steps, the number of clicks and the length of the operation path, which are the dimensions that we are most concerned about every day, cannot completely judge the quality of interaction behavior.
The cost of attention and memory, as well as the expected utility, often become the key to determining the success or failure of an interactive behavior, and for the "difficult scenarios" mentioned above, it is precisely because the amount of data is too large and the level is too deep, resulting in a stepwise increase in the cost of attention and memory of users, resulting in the collapse of the experience of conventional components.
In the following diagram, I've put together the factors that make up each interaction cost and the resulting results.
4. How to disassemble it? Case 1
After a detailed look at the basic principles of the difficult disassembly method and the main concepts of interaction costs. Next, we get to the main topic, we solve the problems of the two cases mentioned above through the difficult disassembly method and the logic of interactive cost calculation.
First, let's disassemble a simple case.
The core of the dismantling difficulty method is to break down a large and unattainable goal into small goals, so we need to first determine the core difficulties of this case.
The first step is to analyze the problem. The advantage of this scheme is that: in the physical interaction cost, save a step of click, the information directly popo to the positioning around, according to the gestalt approach principle, users can easily find and view the details of the corresponding positioning object. However, these advantages are limited to scenarios where there are few targets and a small amount of detailed information and data displayed.
Once in a scenario with a large amount of data, a large amount of information will be generated. Positioning and details are intertwined, overridden, and very confusing. If the user wants to find information in this interface, it will need to pay a very large attention cost, which greatly increases the user's time to select information.
The increase in psychological costs will also have a negative impact on the user's use mood.
Therefore, the core problem of this case is that the mobile screen is very small, in the limited display range, can not accommodate a large amount of data, so the information is mixed together, causing great interference to the user's use.
So how to solve this core problem?
Let's start with the second step: disassembling the body of the scheme. Through the analysis, it can be seen that the two interaction subjects with the minimum granularity of this case are:
- Find the location marker of the area of interest on the map;
- View the details for the targeting tag.
So now, according to the dismantling principle mentioned above, we have to split the interaction behavior that was originally in place into two interaction behaviors with the smallest granularity, and then divide it into two steps to achieve the same task goal.
The first step is to leave only the display of the location marker on the map, so that the user can focus only on finding the corresponding area of the location marker. After removing a lot of data information, the page will be much cleaner at once.
The second step is to split the view detailed data into an operation, that is, when clicking on a certain positioning marker, the detailed data is displayed in the form of a pop-up card or pop-up window. (If the detail data is small, you can use the form of a card so that the current operation is not interrupted; if the amount of detail data is large and you need enough extensibility to add detail later, you can use the form of a pop-up window.) ）
This is done so that the user can focus more on viewing the details of the information he cares about.
After elaborating on the solution, according to the 3 and 4 principles, let's measure whether the solution has improved the interactive experience and task efficiency. First measure the scenario from a cost perspective:
- Physical interaction cost: One more click step added.
- Psychological interaction cost: removes a large amount of miscellaneous information in the interface, allows users to clearly and quickly view the location of the map, and efficiently finds the location of the area that the user is concerned about;
Allowing the user to focus only on the location information he cares about avoids interference from a large amount of other information. Even with a rough estimate, it can be calculated that the interaction time of one more click is much smaller than the time spent retrieving in a large amount of information.
Second, the solution is measured from the perspective of mission objectives:
- The same purpose was achieved as in the original plan, that is, you can find the targeting marker in a certain area and view the corresponding details.
- Solves the interactive problem of information being mixed together and causing great interference to user use.
Therefore, looking at the results based on the comprehensive cost and target, the cost of this "one more step" actually greatly improves the retrieval efficiency of users.
5. How to disassemble it? Case 2
Of course, the above example is too simple, the first interaction path is short, and the second is also a more conventional interaction solution. So next, let's analyze a slightly more complex case to see if we can solve it in this way when "massive data" is added to "deep level".
First of all, or the old routine, let's first determine the problem we want to solve the core:
First summarize the advantages of this case: you can roll out all the actions in one page, and quickly open the subordinate page by clicking on it, and then view and manipulate the multi-layer data in one page. This interaction is not a problem in scenarios with less data.
However, in mobile scenarios, because of the limited screen size, there has always been a problem that the data display entries are very limited, and when the hierarchy is too deep or even too many data entries, this problem will become more and more intense. Therefore, if the production environment is in a very large state for a long time, it will lead to the following problems:
(1) In a complete drop-down control, only the number of the first layer is constant to 1, and the amount of data in the second, third, and fourth layers may be multiple, especially the details of the fourth layer, and the data entries will be more. So in a drop-down control, assuming there is data at each level, the user will see at least 4 pieces of information.
If the secondary information is greater than two, in the case of full expansion, it has occupied a full screen position (scene three), resulting in the user to see at least 10-12 lines of information under one screen (the number increases or decreases with the change of data entries at level 4).
Suppose we swipe the screen again, and the user needs to read and memorize at least 20-24 lines of information. The previous Miller's Law also mentions that the average person can only keep 5-11 pieces of information in their working memory at a time.
The working memory required to complete tasks in the product is directly proportional to the psychological interaction cost (MIC) burden imposed on the user.
In this process, users face massive data and complex levels, which will pay a lot of attention and memory costs, resulting in a ladder increase in the cost of psychological interaction in the process of using the product.
(2) When the amount of data in the second, third and fourth layers of a drop-down control is too large (illustration scenario two and three), in addition to increasing the user's attention and memory costs, it will also increase the frequency of repeated operations and the user's error cost, once the operation is wrong or read the wrong data, the cost of re-finding this data will become very high.
If the physical interaction cost of sliding is 1, then in the case of multiple slides, the cost of our sliding will become 1*X, and this X variable will increase proportionally with the increase of the amount of data.
According to Hick's Law, the time it takes to make decisions increases with the number and complexity of choices. Therefore, the core point of the improvement plan is to reduce the level and amount of data within the page, and reduce the complexity of user selection.
But from a business point of view, it is certainly not possible to directly reduce the total amount of data, so we must develop a solution that can reduce user choices from the perspective of interaction.
Finding the core problem to solve, we then begin to "disassemble".
So from which angle to start disassembling? The current state is that as each tier continues to roll out, the data viewed by users will continue to increase. Then since we can't move the knife in the total amount of data, then we will start from the level, take each level out separately, and provide users with the least level of options for each screen according to the principle of minimum granularity of the split principle, so that users can focus on the screening of the least data.
How? Let's take a look at the solutions below.
First, let's split the first level. The first level is the premise of expanding the later levels, so I designed the first level as a top switch. When you tap the toggle, a pop-up window will pop up, which will contain all the first-level options.
With the toggle of different options in the pop-up window, we will immediately return to the list page, and the data at the bottom of the page will also refresh all the data under this level of options. Because the amount of data at the first level is the least in normal circumstances than at other levels, users can focus more quickly, and more conveniently target tasks with fewer choices.
Second, we use the second and third layers as expanded cards to form a card list. (Here the two or three layers are placed in one page, and there is no minimum granularity to form two pages, mainly to control the number of jumps.) The data in the list only contains the data in the corresponding first level, so the data displayed on this page has been filtered very obviously compared to the "large and complete" in the previous scene; the drop-down level has also been reduced to two levels, and the level complexity is much simpler than before.
On the other hand, each second-tier piece of data forms an independent card, so that visually, there will be a clear distinction. Whether it is the complexity of the choice of data volume or the visual differentiation of the hierarchy, it greatly reduces the cost of user identification.
Finally, because the fourth layer often contains a lot of data, we propose the fourth layer separately as a standalone page (or pop-up window) to enter by clicking on the entry of the third layer. Independent pages can greatly improve the user's focus on the scene first, and the second is conducive to the expansion of data, even if more information is included, it will not affect the display effect of other levels.
If these details are also divided into different categories, we can even add TAB filtering, so that we can more quickly filter out the information that users want to view through category filtering.
The old rules, after expounding the plan, we still measure the plan from all angles according to the 3 and 4 articles of the principle.
1. Cost perspective
Physical interaction cost: The number of clicks has increased slightly, and because the amount of data on the screen is reduced, the number of underscores has been sharply reduced, and the jump step has increased. The larger the amount of data on a page, the less the physical interaction cost of the increase.
Psychological interaction costs: The information filtering that users need to make on each page has been greatly reduced, and each step is intuitive enough. Because the hierarchical pages are split, the resulting large amount of data filtering can help users make quick decisions.
The time cost saved by information screening is much higher than the time cost increased by clicks. The low psychological cost will also increase the expected utility of the user, so that the user ignores a certain degree of physical interaction cost.
2. Mission objective angle
This solution, the selection and viewing of multi-level data entries, disassembled into a multi-step operation, allowing users to complete the viewing and filtering of all levels step by step in the completion of each level of viewing and filtering.
After disassembly, each level of the page reduces a lot of choices and distractions for users, reduces the complexity of user choices, and helps users save more time on selection tasks. Solves the pain point of users going to the audition in a large amount of information.
Therefore, from the result point of view, through disassembly, it not only completes the task goal under the scene, solves the previous interaction problems, but also saves a lot of psychological interaction costs and improves the expected utility of users.
Difficult dismantling is tantamount to going around in circles
Seeing this, some people may say that it feels like the so-called "dismantling" is "going around in circles". In fact, yes, our above two plans are one step further away. However, there is no perfect solution in the interaction, only the most suitable solution for the scene. If the core scenario problem can be solved, it is acceptable for the increase in low interaction cost.
In addition, we sometimes think too much about the cost of physical interaction when designing interaction schemes, and seal the "step of saving" as the "golden rule" of interaction design, thereby ignoring the impact of psychological interaction costs and expected utility on the user experience, resulting in the user's choice and sense of experience for the product being reduced together.
Therefore, when users face the dilemma of high psychological interaction costs, they may wish to pay some price of "increasing the cost of physical interaction", perhaps this more circle, or one more step, will make users go to "Rome" faster.
Written by An Yong Aiden
This article was originally published by @Anyong Aiden and is not reproduced without permission.
The title image is from Unsplash, based on the CC0 protocol.