Editor's Introduction: We often talk about user experience, in fact, good user experience and design mapping have a lot to do with it, today's design rules - mapping, I hope to bring a little thinking for you to improve the user experience of the product
The third interaction design concept in design psychology: mapping.
Similarly, this concept should be considered in conjunction with the sign and the sign. Mr. Norman mentioned the concept of mapping in design psychology, but it is more concise and can only be roughly understood for beginners. So today we continue to use more cases to talk about the practical scenarios in which this concept is used in our digital and life.
Although this is a basic concept of interaction, it is also extremely important to us designers, although the concept is very simple, but in fact, it will encounter frequent problems in the design. Let's first describe these "boring" concepts with relatively tight copywriting, mapping is a term borrowed from mathematical theory to represent the relationship between two sets of things. In the previous two articles, we said that the indication and meaning indicate the function and interactivity of the thing itself or convey, while the mapping represents the relationship between the controller and the controlled object.
Good signs and symbol designs can make the mapping natural. The first demonstration we give an example of a switch, the reason why the multi-control switch makes people mad is first of all the lack of expression of the meaning, followed by the unreasonable mapping. Just like the case of a gas stove we have seen in the book, there are 4 control switches under the 4 heads, and the two different arrangements on the left and right show how important a good mapping is.
First, the three levels of mapping
Norman teacher mentioned in how to design the map that the natural map design can be divided into 3 levels:
Optimal mapping: Controls are distributed over the host object of the controlled object
Sub-optimal mapping: The control is relatively closer to the controlled object
Third best mapping: Controls are spatially distributed consistently with the controlled object
The levels of these three mappings diminish in satisfaction and efficiency in the experience, and we are illustrating them in turn
1.1 Controls are distributed over the objects being controlled
For example, the door handle is on the door, we feel that this mapping design is very natural, by turning the handle can open and close the door. For example, my washing machine has a knob for selecting the washing mode, the washing mode is around the knob, there are light spots on the knob, and the light point of the rotary knob will rotate to the washing mode we need, which is also the form of the control and the object, to meet the user's psychological expectations for the controller and the controlled object.
In digital products, we will encounter similar situations, for example, we want to expand the text placed in a card, we usually the best way is to design a prompt to expand the "clickable button" on the side of the text, and then the solution is to put it below the copy, and the most undesirable is to place it in an area other than the card, because the mapping relationship gradually weakens to irrelevant.
For example, if you want to adjust the volume in the iOS system, you can adjust it directly by sliding your finger in the volume module, without adding two buttons to increase or decrease the volume in the module or outside the module. But to be honest, Huawei's curved screen double-click on the side to call out the volume control module, personally feel that the cost is a little higher than the physical body button.
In addition, in the process of the gradual evolution of smart phones, gesture operation is indispensable, and the use of gestures instead of buttons has also saved more costs and improved efficiency. For example, in the application of the video player, there will be corresponding controls to control the playback, pause, sound, progress, brightness, horizontal and vertical of the video, etc., these buttons are actually the best mapping design
1.2. Sub-optimal: The control is closer to the controlled object
This is what we often call the principle of proximity in Gestalt psychology, because the closer it is, the more relevant it is, which is easy to understand. Some objects cannot be designed in combination with the control and the controlled object, so we can only retreat to the second place, so that they can be closer and clearer in the mapping relationship.
Next, I will show you the operation interface of my refrigerator and rice cooker, and everyone will know that the second best mapping will be very bad if it is not well designed. As shown in the figure, in fact, the information design of the interface is nothing more than this, if you can design the information of these interfaces with logic and hierarchy, then it can also be concocted in other user interfaces.
For example, the cooking mode of the rice cooker and its corresponding button are controlled by clicking the button multiple times, rather than having a separate button in a separate mode, and the best way is definitely to choose what mode to choose directly, rather than making a button to switch multiple times.
Here is because the rice cooker itself does not have a smart panel, so it can only be done through physical buttons, otherwise, it is more difficult to operate with more buttons. Then a small friend asked him if he could make a knob like a washing machine? Of course, it can also be, because it is more convenient to spin up than to click the button a few times, but after the knob is done, other buttons may also become knobs, and there are more problems to be discussed in product design.
So we look at its button distribution, and find that in fact, the control button and the controlled parameters are actually missing the distance relationship, when you look at the parameters you want to control but can't find the control button, you will be more mad, because in this layout neither meet the best nor the best, and even in the spatial distribution can not produce a correspondence.
Then we look at this refrigerator, this Siemens refrigerator user panel I really did not understand, but the distance relationship has been better than our rice cooker, at least the left and right buttons should be to control the different temperatures on the left and right sides.
The left and right sides are the settings of freezing and refrigeration, but there are only two temperatures in the middle, a total of 4 buttons and two temperatures, which is obviously incomprehensible under natural understanding, which is as confusing as the relationship between the bosses in the Eldon's legal ring, why do the 4 buttons only have 2 temperatures, because the two buttons on the left are switching different temperature settings, and the button on the right side does not have any blood relationship with the temperature, because it is a lock! If you don't look closely, you think it's used to control the temperature, because it's too similar to the other three buttons! Isn't that just an overstatement?
In the two cases here, we found that in the sub-optimal mapping, the principles in Gestalt psychology are actually applied more, in order to make the relationship between the controller and the controlled object more closely.
1.3 Controls are spatially distributed in accordance with the controlled object
In some scenarios, we can't make the controls and objects meet the requirements of 1 and 2 through design, so there will be a third, consistent in spatial distribution, such as lights and switches in a large space, switches cannot be done on the light body, and there is no way to make them closer, so only in the spatial distribution can be more consistent, in order to make the mapping relationship reasonable.
In fact, the user interface design of digital products, basically we can do 1, 2 points, because the area itself is limited, the controller and the object are almost in the land of bullets, the controls of most applications are very simple to operate, but it is nothing more than some more complex tool products, such as the car machine system, through the central control screen to control a series of functions of the vehicle such as: air conditioning, seats, windows, etc., then we also found that the distribution of its buttons is also to meet such an interactive mapping, The physical button into a virtual button is integrated in the central control screen, in order to allow the user to better map the relationship between them, so we need to use the spatial distribution of the relationship, to let the user understand the button and the control object of the association logic.
For example, in Tesla's UI interface, the whole will be divided into 3 areas, the left is the form of the instrument right is the multi-functional area of the bottom is the vehicle-related control function, you want to control the front and rear lights, then the button will be on the front and rear sides of the vehicle model, if you want to open the air conditioner in the middle of the bottom toolbar can be opened, if you want to heat the seat then you can also interact in the picture of the 4 seats as in the picture can be achieved.
This design allows the control to form a mapping relationship with the controlled object at a distance on the control. There is also in daily life, whether everyone has used a lifting drying rack at home, by rotating the handle to control the lifting, here is actually difficult to apply to the space part, because the two planes are different, it is even more impossible to correspond, is there a better way to solve this problem, I think you can use color or mark to do the mapping of the correspondence. Therefore, in order to map the correlation, homogeneous, homochromatic, proximity, etc., it can be used to improve the correlation of the two.
Second, the application of mapping in digital products
Mapping in digital products is also a story about controllers and controlled objects. There are also many controllers in digital products that we call controls, such as an icon button, a drop-down list or a slider, which all have their own control objects. What we often say about what kind of design satisfies the user's mind refers to making the user feel that the results and feedback brought by his control control are expected by him, which will make him feel reasonable and natural.
Case 1
For example, in this case, the designer actually wants to control the relevant functions in the car through buttons, but can you find the problem? The premise of the mapping is that the control must first satisfy the expression of the energy and the meaning, and then tell the user through the mapping who controls whom. But we found that the buttons in this interface are actually ambiguous in the indication and meaning, such as the icon of the hot car, we usually think that such a palace grid form layout exists in the form of an entrance, and after clicking, it will enter the next interface, but the designer actually confuses some situations here.
So we look carefully, these icons are like buttons on the rice cooker, as long as the click will trigger a change in the state of the vehicle, equivalent to a switch, let's not say whether such a design is convenient for the user, we look at the mapping in fact, we will find that the user is actually difficult to do the spatial layout of the control, so as to control the vehicle more efficiently. And there are also certain logic errors, such as what is the logic of hot car and unlocking, what to do if the window is open to half and want to stop, how to adjust the air conditioner to adjust the heat and cold and temperature, so here is no longer simply a switch set area, will encounter a very complicated situation.
Case 2
Let's look at another case, in fact, many mappings in the digital interface do not have a direct correspondence, but require the user to trigger through interaction. In the interface below, there is a course details page where users can post their own study notes audio, while the toolbar at the bottom has mapping-related issues in the current design.
We're about to release audio then we have these questions that can be preset in advance
Do I need any controls to control? For example, a button
So is this button clicked and released to start recording, or do you need to press and hold to start recording, or click to enter an editing page and edit it by recording or uploading audio?
How the page will appear when you click the microphone to record audio
Can I audition, edit, and the input box on the side is related to the microphone?
Can I just enter the text and click Publish or click Post directly? Etc. Anyway we need to have an entrance from there, so this entrance is more critical. Through this entry (button) to trigger the entire interactive process of uploading audio, it is also a mapping relationship, but it is not fully expanded, because it cannot be expanded here.
Some students want to ask, why can't it be unfolded? In fact, this is very easy to understand, just like when we do login and registration, we will not do the two processes in one interface, resulting in complex and incompatible pages. So if you don't need to publish content other than audio here, then you don't need to tear apart the microphone, input box and release button to do it, resulting in unnecessary waste. A button can act as an entry point to open a separate task process, but if it is disassembled in this way, the task process can no longer be completed efficiently and generates great ambiguity. The mapping of digital products tends to be linear
Case 3
Let's talk about a similar case, this is also an interface made by a small partner. The problem for beginners is more obvious, because they do not have the concept of step-by-step and phased control. I always think that one interface can complete multiple tasks, of course, I have not considered how to map well here.
From this interface, we can clearly see that this is actually a published interface, jumping from an external button.
If you were asked to evaluate what would you say, would you want to say something everywhere, as if the information, buttons, and functions inside should not be on this interface?
You may have these questions: how to make videos, audio, and pictures into tabs, and choose different types to publish? Where will the audio appear after clicking Record? Is the record button still there after recording one? After recording a message, I switch to the picture and upload another picture and then click What will happen next? What interface will you enter by clicking on the draft box? What happens if I click on the next step without doing anything? These questions will all plague us with completing a publishing task.
To make an interaction flow clear, you need to have a clear functional map for the user. Therefore, after clicking Publish, the button should first control the object of the release type, let the user select the release type, and then jump out of the release process of the corresponding type.
3. Summary
Mapping is also one of the most important concepts in the design of interactive experiences, and should be considered in conjunction with indications and signs. At the same time, the remaining concepts we will share with you in the next issue, for beginners, these concepts are very important, we must always think about and combine when we design cases.
#Columnist#
This article was originally published by @Ying Jun on Everyone is a Product Manager. Reproduction without permission is prohibited.
The title image is from Unsplash, based on the CC0 protocol