Automotive HMI Interaction Design Tutorial

HMI is the abbreviation of "Human-Machine Interface". Human-Machine Interface exists in all fields involved in human-machine information exchange. This article takes the car scene as an example to analyze its HMI interaction design, hoping to help you.

The construction trend of smart city is becoming more and more obvious. The government attaches great importance to the development of automobile intelligence and informatization. The automobile driving experience and personalized design will also become our reference for automobile purchase. Since people attach importance to user experience, the content of human-computer interaction design has also become an important link.

Our interaction scene includes the scene of car driving, so we should first consider safety factors, and beauty is secondary. Interaction with the automotive HMI in a special environment, we cannot use the traditional immersive design thinking of the mobile terminal to design. We need to put down the so-called aesthetics and design closely according to the interaction mode and user needs in the actual scene, because in a very short time, we must reach all possible feature in one step and see the layout of information at a glance.

Especially when UI designers transfer to interaction designers, the first idea is how to make the design look good, and then design the interaction. This is what we do when many projects are urgent (because we have done a lot of projects, we can avoid those mistakes). New designers should never do this, remember!!!

1. Fans' questions

Before, many friends would often ask me how to do HMI design? Where to look for reference? How to do the user experience of HMI? How to do competitive analysis? What a lot of questions!

My method is to attend auto shows, or make an appointment for a test drive experience in the store, and then take photos. You can also find some car reviewers to watch their videos. You can go to the official website of each car to find materials.

2. the distribution of the display screen in the car

Next, let's briefly introduce the types of screens in the car, including the dashboard, HUD and center console screens in front of the driver, and the entertainment screens in front of the co-driver and the rear row.

1. Dashboard

Today, the instrument panel with pure LCD screen occupies a dominant position in the market, and pure machinery, light display and segment display will withdraw from the historical stage. I won't introduce the history of dashboard.

2. HUD

Head Up Display was first used as a flight assistance instrument on aircraft. It was used on fighter jets. Because a lot of information on fighter jets needs to be checked by aircraft pilots at any time, to avoid the distraction of pilots looking down at instruments, it was later popularized in civil aviation. Due to the convenience of HUD and the ability to improve flight safety, this technology was later developed into the automotive industry. The HUD head-up digital display on the car uses the principle of optical reflection to convert important driving information tire pressure, speed and rotation speed. When the information is projected onto the front glass of the cockpit, there is no need to distract from the dashboard during driving, which reduces eye fatigue and brings convenience and safety to driving.

3. Entertainment screen

The rear entertainment screen is more like a tablet. The main features are video, music, games and so on to help the rear passengers pass the time. Therefore, the rear entertainment system is born for entertainment. The rear passengers watch their favorite videos without interference, and the experience is very good.

3. Basic content of interaction

The interaction between the driver and the screen must be simple, non distracting and easy to interrupt, so the driver's attention can quickly return to the road.

There are many factors that lead to different interaction methods between HMI and other mobile terminals, such as the area of the action area, the angle, position and application scenario between the main driver and the screen, as well as common characteristics: availability, ease of use, user experience process, etc.

1. Interaction scenario

In different application scenarios, the interaction methods will be different, such as static state, driving (this is the scenario about driving position), and some states about the environment and driving should be taken into account (sunny day, rainy day, snow, fog, speeding, fatigue, etc.), which need to be carefully defined. The first consideration is safe driving, and the interaction design that does not pay attention to safety is unqualified.

4. "3 second design" principle of vehicle interaction

First Second - Vision

The user scans the center console within 0-1s. During this process, the important information and feature entrances of the center console screen must be discovered by the user within this time. In the later stage, the usability test can be carried out through the eye tracker, and finally it can be adjusted appropriately to meet the safe driving standard.

Notes:

1. Users cannot move the sight center to the center console screen for many times to view the content.
2. Users should not spend too much time searching for information on the screen.

Second Second - Behavior

During the interaction process, from starts to end, the interaction time cannot exceed 2 seconds. 2 seconds is already dangerous. The best interaction time is within 1 second. This content will be explained in detail below.

Note:

1. Avoid allowing users to click twice to complete the feature. The feature should be achieved in one step.
2. Don’t let users swipe or long-press.

Third second - Feedback

After the interaction, there must be feedback content in the third second, such as clear click effect feedback, which can be through sound or interface motion. Once the motion exceeds 3 seconds, the feedback will be exceed the user's effective perception time.

Note:

1. Changes in screen content require obvious motion support.
2. Remove too many decorative animations and don't use those fancy motion effects to make the feedback effect more focused. The animation effect of vehicle is different from that of mobile terminal.

Designed according to the 3-second principle, the HMI system can meet the usability needs. Let’s popularize this content first. This time, I introduce the interactive content first, and then follow up with the articles of the vehicle-mounted visual and dynamic content.

5. Detailed Interaction Definition

1. Single action time

Why is it so defined? Suppose that a vehicle traveling at a speed of 60km / h will drive 35-50m in 2-3s. Once it needs to brake sharply, the braking distance shall be at least 15-20m.

Based on this calculation, when the speed on the highway is 100-120km/h, it is conceivable that it is extremely dangerous and may cause vehicle damage and death. Therefore, we call for safe driving, careful lane change and protecting ourselves and others.

After actual research, users move their eyes from the road to the in-vehicle screen. This process usually takes 0.5-1.5 seconds to focus, so the interactive content needs to be clearly marked to maintain sufficient contrast with the non-interactive content.

According to statistics, the average time for each action cannot exceed three seconds. In fact, when entering the third second, user had to use peripheral vision to start paying attention to the road ahead.

Therefore, within three seconds, whether the user fails the first action, repeats the action after paying attention to the road again, or the user continues to act until the task is completed, it is a very dangerous behavior. Here, because the cost of user trial and error is very huge, the design of interaction and information layout need to be the best.

Episode:

Someone here will say that now there is an emergency braking (AEB) system. Let's briefly introduce that AEB (autonomous emergency braking) identifies the obstacles in front of the vehicle through sensors (camera, radar, laser, etc.). When the distance between the vehicle and the obstacles is less than the preset safety value, the braking system will intervene to avoid collision. AEB is a system used to help the driver avoid or reduce collision accidents.

The AEB system mainly does two things:

Identify emergencies early and warn drivers
If the driver does not respond, the system will avoid the collision by reducing the collision speed, or reduce the severity of the unavoidable collision.

In the follow-up, I will also publish a separate article on ADAS assisted driving for everyone to understand.

Real vehicle availability test and evaluation:

Now let's take a look at how real cars experience in each interaction and whether there are dangers. This is an usability evaluation score made by ThoughtWorks for Tesla:

2. Action hotspot and Interaction hotspot

Action hotspot

Due to the particularity of the driving scene, the driver can only operate with the hand closest to the center console screen (why don't I say to operate with the right hand, because when I am doing overseas projects, the main driver's side is on the right, so I can only operate the screen with the left hand)

This is a map of different driver's side around the world:

Take the arm closest to the screen and the left driver's side as an example: draw a circle with the elbow as the center point, which is divided into three levels: the best touch area, the easy touch area and the difficult touch area.

Let's take the actual vehicle case to illustrate:

For the touch interaction method, the convenience of touch action in the screen area gradually decays to the right with the driver as the center, and important feature action should be placed in the optimal touch interaction area.

Interaction hotspot:

Before talking about the interaction hot spots, let's learn about the finger touch area. The finger touch area is 12mm x 12mm, and the screen pixel density is calculated according to 160dpi, which can be converted into the screen element size of 76 x 76px. If you don't understand the calculation, you can check my last article. There are both ways to calculate the screen PPI and the minimum icon size.

The purpose of adding interactive hotspots is to reduce the difficulty of action. Users have limited attention and range of action in driving scenarios. Precise clicks and small-area touchpoint actions require more action costs and distract driving attention. A larger area of hotspots is used to carry the touch behavior to ensure the ease of use of core actions in different scenarios. Here are some cases to explain to you (the previous article only briefly mentioned the size of the click area of the icon)

Case 1: action hotspots of music control

How to enter the music details page from the music widget?

Click on the album cover
Click on information content
Album cover + information content combination

According to the above conclusions. Combination to increase the action area is the best choice.

To sum up: in order to bring a good driving experience to users, we should consider increasing the touch area, reducing precise actions in some content as much as possible, and doing more fuzzy actions. Generally, all in this area can be operated.

There is also a small note to keep in mind:

When communicate with coder, you must explain this content to him clearly, otherwise he will not write the hotspot in combination.

6. Efficient interaction

Before talking about the efficient interaction of HMI, we also need to understand multimodal interaction.

1. Multimodal interaction

"Multimodal interaction" includes the sensory interaction of vision, hearing, smell, touch and taste, which is realized through the eyes, ears, nose, mouth and touch of finger. Its technology application in real life is also designed around these senses, integrating the interaction technology of multiple senses to form a multimodal interaction form.

The interaction used in the car, through voice, touch, touch, smell, vision, gesture, body feeling and other interactions, in a way closer to the interaction between people, makes the interaction between people and cars more natural and relaxed.

2. Throw a question ️️️

What kind of interaction is considered an efficient interaction? What kind of interaction is best? Everyone has their own definition method. I have talked about this topic with many designers. I will give you a conclusion at the end of this topic.

3. Common interaction methods

Let’s first introduce the interaction methods in the current HMI on the market, hard buttons / touch / voice / gestures.

(1) Hard button interaction
The original original HMI was basically done by hard buttons, and it was thousands of times of muscle memory that had to be done so smoothly. This also has its advantages, the following shows the interior of the car with hard buttons.

(2) Touch interaction method
When the large LCD screen appears, its interaction mode also changes. The following shows the large screen in the car

When we are driving a car, clicking is the most effective way to interact. Interaction methods such as long-press, slide, double-click, and single/two-finger drag will exceed the safe time range of 2 seconds, which greatly increases the difficulty of operation and the risk in driving. The rest of the operation methods can be used in the non-driving state. . If some features cannot be realized by touch, then voice interaction will be mentioned below.

After talking about the above interaction methods, we should discuss some substantive matters. What modules and scenarios should these interaction methods be used in?

Click interaction method: button, check box, tab, icon, search bar, etc.

Sliding interaction method: negative screen, home page feature card, all progress bars (music, video, online radio, volume, brightness, air conditioning volume, temperature, etc.), list type, air conditioning wind direction, car model rotation, etc.

Long press interaction method: select to edit , some keys in the virtual keyboard

Double-click interaction method: navigation map, image zooming

Single / double finger dragging: single finger dragging changes the position of the object, double finger dragging zooms the image and navigation map.

(3) Voice interaction method
One of my favorite interactions is voice interaction, which minimizes user distraction and allows for safe driving.

Navigation is the most commonly used in vehicle voice interaction. Take navigation as an example.

Step 1: Input the desired destination information by voice. If you don't know the specific address information, you can navigate vaguely.

User: "Navigate to the nearest parking lot."

Step 2: According to the voice input navigation requirements given by the user, the system matches the navigation destination and allows the user to select the desired destination.

Voice assistant: "Which one do you choose?"

Other scenes: music, phone, air conditioning module

Music: "I want to listen to XXXXX", "Previous", "Next", "Volume up", "Volume down"

Phone: "Call XXX", "Open Contacts", "Find XXX"

Air conditioning: "turn off and turn on air conditioning", "higher temperature", "lower temperature", "turn on internal / external circulation", "higher air volume", "lower air volume", etc

After the above voice content is finished, someone will say that if you want to accurately adjust to a certain temperature, do you have to say "lower temperature" many times. What I want to say is that now there are R & D technologies that can directly write code, so that voice can control the air conditioner in the car to achieve accurate temperature. That's the charm of programmers. Anyway, I'm attracted.

(4) Gesture interaction method

Gesture interaction, currently used in the car, the biggest advantage is that the action is relative and does not require precise action (accurate action requires not only the hands, but also the eyes to search, which is very dangerous), but the biggest disadvantage of gestures is that the action will be less. (too many actions may require recalling the action method, and it is also very dangerous for the brain to wander) So as mentioned above, I prefer the choice of voice interaction method, and I am more optimistic about this.

Using the HMI gesture control system, through different gesture combinations, car owners can realize various actions more quickly, such as switching songs, answering and hanging up calls, adjusting the volume, flipping the list page, zooming the map, etc. Some of these gestures are extracted from touch gestures, and some are combined with life habits. For example, the closed mouth can be used to hang up the phone, and the gesture can be used to make a fist.

4. Final conclusion

Tasks in the vehicle other than driving will distract the driver's attention to varying degrees. In order to ensure driving safety, the action design of the feature needs to consider the combination of touch, voice, image and other multi-type interaction, flexibly combine the input forms according to different use scenarios, and appropriately retain some physical buttons (hard buttons) to provide the most natural use experience for users.

Another point I want to say is that if we designers can participate in the definition of the interaction design of the whole vehicle, we will have more right to speak, and we can define this car from the prototype to the landing. Otherwise, when the car has been finalized, there will be many restrictions on the content of the interaction definition.

7. Content layout and information presentation in interaction

1. Content layout in interaction

In the process of driving, most of the energy of users is focused on driving behavior, and users can only extract about 5% of the energy and time to operate the vehicle. Therefore, the information layout of the HMI system must be presented in the best way in a very short time.

If the user does not complete the action task within the time, either the user chooses to give up and start again, or the user spends more time and energy, but the risk factor of driving will increase exponentially.

2. Improve operation efficiency

The information layout design of the feature should fully consider the characteristics of the driving environment, and combine the specific scenes to make a reasonable layout of the interface information. The relative position of the driver in the driving position and the screen, buttons, etc. is relatively fixed, so the most important information should be placed in this area taking into account the area that is easy for the driver to see and touch.

According to the hot spots of vehicle action, the layout of features and entrances shall be designed according to the distribution of hot spots as far as possible. The feature layout shall be designed as close as possible to the hand, shorten the action distance, and place the information display area on the right.

3. General information layout

Under different driving scenarios, the information layout of the same feature should always be consistent to avoid disturbing drivers due to layout changes. Between the same or similar features, the page layout should be universal to help the driver reduce the memory cost through location Association.

According to the visual scanning in the above three second principle, the information in the page should be gathered and viewed centrally to ensure that the page content can accurately convey the relevant content information of the current task in progress, so that the user can master the information in 1-2 seconds and quickly return to the normal driving state.

Interactive copywriting

The definition of interactive copywriting must be short, concise and easy to understand, and keep the information up-to-date and browsable.

(1) Convey the information clearly

Don't be vague and ambiguous about interaction copywriting.

For example: scan the code in the HMI to log in to apple music. If the login fails:

Scheme 1: the pop-up message content is "login failed".

Scheme 2: the pop-up message content is "login failed", and what is the reason for the failure.

(2) The copy is concise and clear

From the perspective of users, you will find that many users do not look at the contents of the pop-up window. When they see a button on the pop-up window, they immediately click the button. Therefore, the more concise the text in the pop-up window, the more OK it is.

For example: the two pop-up windows express the same meaning. One is short and directly says the current situation and action points, and the user can grasp the key points. The other is too long. The user doesn't like to see it and can't grasp the key points.

(3) Consistency

To ensure the consistency of products, similar copywriting and expression should be consistent.

For example, the buttons "start navigation" and "modify default" verbs + nouns in navigation cannot become nouns + verbs

(4) Distinction between primary and secondary

Each paragraph of text must be clearly defined. If a distinction can be made, it will better help users understand the content of the text.

In the call record of the phone module, we generally need to call someone. We must find "XXX" at the first time, and then check the mobile phone number. Therefore, we should distinguish the primary and secondary information.

(5) Form a closed loop

If the copy will inevitably be long, is there a way for users to operate quickly?

Implementation scheme: the definition of our interaction scheme is "I see".

What I look forward to: if I define the button feature, the button will become "Settings" (I will propose my scheme when the next version is updated)

8. Multitasking

Efficient task process feature design should aim to improve the success rate of task completion, reduce the cost of cognition and action, avoid designing too complex information architecture and feature process path, and all features need to have fixed and complete entry and exit paths.

In what scenario will multitasking occur, let's imagine that the music and radio in the car application are playing in the navigation, and there are calls in the navigation, which must be answered. Later, we also added the group travel feature in the navigation; Music, radio, phone calls, and group travel can be switched after the split screen is unfolded. We can't make random drag and drop for the time being (the project time is tight), so the experience is not perfect.

Why should I talk about the "drag and drop at will" feature?

According to the features of the current version, multitasking can only appear in the navigation module. The switching of several features has been mentioned above, but our split screen scheme was still 2 years ago and has never been modified. Let's show the previous interactive content.

Because of this content, the space occupied by the right reduces the content of navigation on the left. Once there are road signs, road conditions, navigation route map, zooming map button and so on, the navigation page needs to carry more content.

This scheme may interfere with the driving task. Later, our designer came up with a scheme called widget, which can be dragged at will, and the temporary control is much smaller than the previous scheme. Now I'll show you the prototype of this scheme.

Finally, the scheme was approved by the leaders, but due to the high development cost, the new scheme needs to be incorporated into the next IOT upgrade package.

Conclusion: no matter what scenario, the highest priority is driving task, and the impact on driving should be considered in any multi task processing.

9. the HMI interaction level

Avoid hiding the features often used during driving. There must be no more than three levels, otherwise there will be a great threat to driving safety.

1. Frequency of using features of HMI

Let's take a look at the features that are frequently used and of high importance during driving.

Low use frequency: system settings, third-party apps

High use frequency: music, radio, air conditioner, telephone, back camera, navigation

Here's an example of phone:

2. Phone module

The traditional HMI has no voice interaction. So if you want to call Tom

Step 1: Turn on the telephone feature.

Step 2: Click Contact List.

Step 3: slide the list to find the beginning of "T" and dial.

It seems that the traditional HMI is only 2 layers, you can reach the contact and dial.

In case of contact with voice search:

The first step is to say directly: "Call Tom".

Step 2: select the search result} and then make a call.

10. Number of options

Reduce the number of options as much as possible. It is very dangerous to turn pages during driving.

Take a navigation example:

When navigating, the destination to be reached is input by voice, and how much information should be displayed at the end?

Another practical example:

When doing the project, because Apple music obtains a lot of resources, it is inevitable to slide the page and there will be many restrictions on the horizontal screen design. Due to the limited height, only two rows of music can be displayed when sliding.

But when making the vertical screen scheme, the situation will be much better. Let's show you the interaction draft in the vertical screen.

11. Definition of Feedback

From the perspective of feedback output, it is mainly visual, voice and touch. For the sake of safety, the feedback of HMI must be enough to make the user clearly understand the important level of the task, and tell the user what to do next.

1. Visual feedback

For example, when the car is backing and is about to hit the wall, it will sound a warning sound, and there will also be a red warning mark on the screen, which tells the driver that he needs to respond immediately.

2. Touch feedback

The tactile feedback mechanism of vehicle control interface is essentially the exchange of information between people and control interface.

The user inputs through the finger touch screen, and the HMI processes and stores the input information, and presents it to the user by the screen. The transmission of information is based on the medium of graphic information, through the human visual perception system to complete the recognition and reprocessing of visual information, and classify the information, such as space, time, color, shape, etc.

The visual cortex processes the matched visual information, which will form short-term and long-term memory in people's mind, and finally form a tactile feedback mechanism for people's operation. The whole information processing process mentioned above is the process of human-computer interaction, which is the feedback process of human behavior to the visual and tactile information in the brain.

3. Voice feedback

Voice interaction is a relatively important interaction method. In addition to allowing users to experience the voice control, it also allows users to easily and naturally accept the feedback information of the vehicle. The following types of feedback and application scenarios are divided according to different confidence levels .

(II)How to Build an Automotive HMI: Design Specifications

Introduction

The automotive HMI (Human-machine-interface) industry is still a blue ocean. Many designers dare not enter this new industry. They think it is difficult and the threshold is high. This article will take you into the industry first and explain some basic knowledge of automotive HMI. I will add many actual design cases to the content of design specifications.

Let's give you a preventive shot first: (specifications are used to break, and this article is only for reference)

What does the design specification contain?

The design specification includes: visual (UI) specification and interaction specification. This article talks about the visual specification. The content of vehicle interaction will be arranged in the subsequent articles.

Visual specification: there is still a big difference between the design of vehicle terminal and that of mobile terminal and Web terminal. The main difference lies in the layout. Next, we will explain it from the perspective of text, color, layout, rounded corners, icons and so on. (occasionally, some work experience will be interspersed).

1. Text specification

Text is an important element in UI interface design. The use of text is the time to test the basic skills of designers. Text will directly affect the user's experience in the process of using the product. The use of text starts from these dimensions: font selection, font size, color, font weight and line height.

1. Font selection

I want to be a conscientious blogger, so that you can avoid the infringement problem.

When designing the HMI, you need to choose what font HMI needs to use: English, numbers or multi-national languages.

If you are in a consulting company, the client will assign you a font package and insert a small episode (workplace experience): after the client selects the font, if the font is a paid font, you must first confirm with the client whether they have obtained the use license to avoid subsequent litigation disputes).

The company has defined the font (hired a professional font designer to design a set);
Open source font is recommended (English / Number: Roboto). If there are overseas projects, Noto sans font is recommended for languages not covered by Roboto. Noto sans is derived from metrics similar to Roboto and aims to achieve visually harmonious internationalization.

Some people here will definitely ask why you can't use Apple fonts? Isn't it a free font?

Let's popularize it: first of all, the automotive HMI system belongs to commercial use and is used without permission, which is infringement. The app published on the app store can be used for free, because it is used under the apple ecosystem, so it is not infringement.

2. Font size

2.1 Font size

The font size of automobile HMI should also follow the rules. The font size must be much larger than that of mobile terminal and Web terminal, in order to ensure the scanning of text information. Our project combines: Baidu Apollo central control vision basic research project, setting clear text parameters, and Google Android automotive OS research. The following is the text specification (the red area is the difference between them):

When we do the project, the specified font size is maintained at a multiple of 4PX (refer to Google specification), which helps to maintain consistency and visual hierarchy.

2.2 Notes on using words

The font size should be controlled at 20px, which should be used with caution. It is generally used on the text of small label auxiliary class, and the minimum text font size is 24px.

The minimum font size should be controlled at 20px and should be used with caution. It is usually used for the text of auxiliary text. The minimum body font size is 24px.

2.3 Setting text specifications has two benefits

The reuse of text style is a great thing to improve the work efficiency for both designers and coders;
For interface design, there are rules to follow to avoid reducing the overall sense of harmony.

3. Font color rules

The contrast between the text and the background color should follow the WCAG standard, and accessibility should be taken into account. Therefore, the contrast should be maintained at 4.5:1 – 7:1 to ensure that the text is clear and easy to read;
Focus on the most important areas;
Convey a sense of visual hierarchy between text elements.

4. Font weight

Word weight refers to the thickness style of a text. The font weight are shown below:

Explanation of the actual case:

Be careful to use medium font size and try not to use the bold font, which will make the page feel very different, the transition is unnatural, and there is no sense of delicacy and lightness.

Therefore, when formulating the font specification, try to remove the bold font weight. If you want to distinguish it from the following information by bold font, please select the medium font weight (it is determined according to the actual project requirements, and my specification is only for your reference).

5. Font line height

Why add this paragraph, because this problem has been asked by my friends, and I solved it at one time. The text module needs to increase the safety distance, which is also explained in detail below.

The height of the text of the font has always troubled designers. What way should I use to communicate with the coder? In the design process, can we use the size of the text for alignment, instead of using the line height of the text, NO.

WeChat Moments as a case:

The line height of the text must be larger than the font size. The feeds font size is 16px (in the @1x design draft). If it is multi-line text, WeChat manually adjusts the text line height (normal Line height: 22px, WeChat actual Line height: 20px), when the line height is 20px, the text needs to be moved up by 3px to make the image and text visually on a line.

If the development is carried out according to this, the developer needs to pay attention to the actual difference between the image and the text in the CSS property. This kind of design with inconsistent heights will directly lead to more cumbersome development and layout process.

The final conclusion: communicate with coder according to the line height of the text.

Popularize the small knowledge points: the line height of automotive HMI paragraphs is generally 140% - 180% of the font size, providing a comfortable reading environment for users (round to integer). Here are some professional knowledge: in the process of font design, font designers generally reserve a safe distance for fonts to make the font display more stable.

When designing, we set the font size to 30px, but the space of the actual font needs to include the safe distance between the upper and lower parts. Finally, the actual height becomes 42px (font: San Francisco) .the line heights of different fonts is different, and the line height of Ant Design's font size 30 is 38px (see the calculation method in the figure for details).

2. Color specification

1. Usage scenario

Scenes: Sun exposure during the day (there are many levels of sunlight intensity in the morning, middle and afternoon), rainy season, night, underground tunnels, etc.

There are many uncertain factors when driving a car outdoors. The interference of light intensity is particularly important. The lighting will vary greatly according to the time of the day, the weather, the hue of windows and so on. When used in the real world, the color is not always the same as that seen on the computer at designing time.

Consider how color brightness affects driving conditions and how low contrast colors are washed away in direct sunlight. Always preview your app in multiple lighting conditions to see how colors are displayed. If necessary, make adjustments to provide the best viewing experience in most use cases.

In the beginning, most of the car manufacturers’ systems prefer dark backgrounds. The two representative systems are Google’s Android Auto system and Apple’s Carplay system. I also used dark colors at the beginning of my project.

2. Combination in color

I want to use one of Apple's official words: "Colors can provide interactivity, provide visual coherence, and bring life to the interface." This sentence sums it up really well.

Focus and listen carefully. Here's the point! The use rule of color in UI design needs to pay attention to the rule of 60-30-10 in a page design, and create a sense of balance , so that the perspective can transition comfortably from one focus to the next point, so as to avoid giving us the feeling of large visual gap during driving.

The color specification of an automotive HMI system includes brand color, semantic color and neutral color.

1) Brand color

Also known as "accent color", usually an HMI system has only one brand color, which is also a color with high frequency. The general use scenarios of accent color are: tab switching, ON state of a button, motion of notes in music playing, etc.

2) Semantic color

Semantic color needs to be carried in the UI interface, which has accurate information expression. In complex scenes, the tendency of color should be very obvious, which can reduce the user's understanding cost and understanding time, and bring a good driving experience to the travel experience.

3) Neutral color

It is mainly used not only for text, but also for scenes such as background color, split line, gray filling, border, etc. (Note: according to the change of background color, other colors of the system also change, which is the switching of two sets of color specifications).

3. How to make HMI color specification?

Try to use as few colors as possible, and the color saturation should not be too high to avoid visual disturbance to driving.

Avoid having the same color scheme for interactive and non-interactive elements (if interactive and non-interactive elements have the same color, it can be hard to know where to click).

Maintain color consistency (do not arbitrarily use different colors to distinguish duplicate components in a single screen. When colors cannot add value, please use them with caution).

Establish a visual hierarchy (through opacity values or the same color system, but don't overuse them by applying too many opacity or contrast values to too many elements).

Try to use dark background, which is the choice of many car manufacturers in the market (however ,Carplay have successively launched white versions to adapt to the daytime. We also added the daytime mode in the middle and later stages of the project. After road test, when the sun is very dazzling, the black color will reflect light and driver cannot see the content of the screen). Finally, the application color scheme is tested under various actual lighting conditions.

Sufficient color contrast is used in the HMI UI system, which is mentioned in the use scenario above.

In the follow-up article, I will take out WCAG separately to explain in detail from perception, operability and stability. This time I will focus on the most important.

The full name of WCAG is web content accessibility guidelines. They are a group of suggestions for easier access of web content. They are mainly aimed at the disabled, and are divided into three levels: A (minimum), AA and AAA (maximum).

Let's talk about a concept: the contrast of two white is #1:1, and the contrast of white (#FFFFFF) and black (#000000) is # 21:1.

To meet the AAA standard, the text visual presentation and text image shall have a contrast of at least 7:1, and the contrast for large text and large text image shall be at least 4.5:1.

Summary

The detail in the use of color is a testament to a designer's depth and durability.

All of the above-mentioned rules for color do not apply to all design schemes, but should be analyzed in detail for specific projects. Different user groups have different application scenarios. For example, the screen design content of drivers and people in the back seat will definitely be different.

3. Layout specification

The biggest difference between HMI design and other terminal design lies in layout. Layout is the framework of the whole page design and one of the most important contents. When talking about the content of this module, I will start from the actual project case.

To start making the HMI system, we need to confirm with the automobile manufacturer the size area of the HMI that can be designed in the screen (Note: the "screen" refers to the normal working space of the app rather than the whole space to the edge, and some manufacturers embed the fixed buttons in this area).

1. How many categories of screen sizes are there?

Let's first understand the popular and mainstream vehicle resolution: as we all know, there are many kinds of screen sizes and resolutions on our vehicle. In the design process, designers mainly focus on the resolution of the screen? (the screens we need to design are dashboard, central control, and some vehicles also include front passenger and rear entertainment screens.)

1) Tesla

Model3 1920*1200 15 inches (the size of the bottom control is 120 pixels, which is fixed). Model S / X is designed with a vertical screen, with a resolution of 1200 * 1920.

Next, let's watch Apple's Carplay system resolution and Google's car system.

CarPlay system resolution: 800*480, 1280*720, 960*540, 1920*720.

I believe that everyone has found the rule. When designing the horizontal screen, the height is basically 720px, and the rest of the horizontal screen is reduced in proportion.

This content is so important that it is related to the layout of the whole system. Apple's Carplay, Google's Android auto and Baidu carlife + all have their own HMI systems. If the screen resolution of some car companies is inconsistent with them, they will not be able to adapt successfully, and there will be stretching and other phenomena, unless they rebuild a HMI according to the size of the manufacturer through customized services.

The screen involved in our project is roughly similar to Carplay in size, but we have our own idea in terms of layout, which will be mentioned later in adaptive layout.

2. Specification of spacing

Specify a set of spacing values for the fixed vertical and horizontal spacing between elements and components in the layout, built on an 8-pixel grid, which means that the UI components and elements in the specification are separated by multiples of 8px .

The Google Android Auto spacing specification has a total of nine commonly used values, P0 – P8:

Note: The 4px and 12px spacing sizes are provided to align the distance between smaller elements. These two values should be used with caution. In the large-screen vehicle system, there are also many spacings that need to be larger than 96px. Therefore, the requirement is that multiples of 8px can be used.

When it comes to this, some people will have questions: can we not set the spacing to a multiple of 8, and whether it is feasible to set the spacing to a multiple of 4, 5, 6... Etc. of course, it is OK, If one multiple is selected, don't use other multiples. If multiple spacing appear on the page, it will make the page have no sense of rhythm and break the principle of intimacy.

3. Layout in the HMI module

For students who want to contact vehicle design, let's talk about the general layout. This time, we will simply talk 1920 × 720 resolution.

4. Adaptive layout

After talking about the general layout of each module, let's discuss the adaptive layout, which is really very, very!!! Super important. This problem is often encountered later in the work. The client want to increase the screen resolution. We spend a lot of time on layout in the early stage, but we can reduce a lot of maintenance workload in the later stage. Therefore, the basic framework needs to be planned in the early stage.

Let's take the actual case to state: throw a question: how do we convert the content of a page with a resolution of 1920 × 720 to 1280 × 720?

(Some product managers may say let coder write adaptive layout directly) Navigation related pages need to call the map interface. Coder can write adaptive layout directly, but other elements still need to be rearranged by designers.

(Some people say that scaling the columns directly and adjusting the page layout) this scheme doesn't work when the proportion is very different, but it's completely OK if it's similar in proportion. It happens that there are 800 in our project × 480 resolution, and 1280 × 720 is very similar.

(others expressed dissatisfaction: fold the content of a certain area, make the content of the area into an icon, and click it to pop it up.) this method can be used in some contents.

If the first two methods do not work, some content requires flexible layout controls. Such as setting pages, the middle space is large, when be putted into small page, the length of the control can be stretched according to the flexible layout, to a size that fits the screen.

Be careful when changing the layout: the first is that it will increase the coding workload, and the second is to increase the learning cost of users. Of course, when the screen is vertical, it needs to be rearranged, because the height width ratio becomes the opposite value.

4. the specification of rounded corners

1. How to make size rules for rounded corners

1) The use of more rounded corners and fully rounded corners

Use more rounded corners (larger corner radius or full rounded corners) for main actions and components, which needs to be highlighted. The rounded shapes have a greater visual impact on most straight shapes. If there is enough space on the page, the full rounded corner form will be more contrasted with other buttons, encouraging users to click.

For example, the global message notification button, the hang up button in the telephone module, the button in the negative screen, etc. (the following is the list of exercise draft):

2) Use of lower rounded corners and right angles

For elements that don't need or low emphasis, use a lower corner radius or 0px rounded corners = right angles.

For example, the toolbar or list can use small rounded corners. The album cover does not need to be emphasized, so it is directly reduced to 0px. The large cover of our project's music album uses a right angle. Specific problems need to be analyzed specifically. For example, the outer contour of the music control is with rounded corners. Therefore, the album cover must have rounded corners in the container, otherwise the design style will not be unified.

Another module is that there will be many album covers in the case of music category. Let's compare two schemes: with rounded corners or without rounded corners. Compared with the two images, the album cover with rounded corners has more obvious edges at the corners, resulting in a sense of visual contrast, while the album with right angles doesn't seem to be prominent, so it's unlikely to attract our attention. Therefore, in the grid layout, the effect of round corner is better.

3) Google's definition of round corners

When setting the rules for rounded corners, there is one thing to pay attention to: there should not be too many types of sizes, otherwise it will be cluttered.

Note: Even though the app layout is built on an 8dp grid, a 4dp radius size is still provided to help shape elements in smaller components. This value should be used with caution as it is not a multiple of 8dp.

Conclusion: there is no right or wrong between rounded corners and right angles. The suitable one is the best.

5. Icon Specifications

1. Types of icons (HMI icons are divided into application icons and system icons)

1) Application icon

At present, the design trend of HMI has removed the application icon and replaced it with the card design scheme. To put it simply, the card design has two advantages: first, to minimize the learning cost; second, the increased contact area minimizes the false action rate during driving, and the most intuitive experience for users is simple and easy to use. However, some auto manufacturers still have a demand for application icon, so let's mention it a little more.

I have worked on projects that have application icons. On a 1920x720 screen, the 160px resolution is the same as the Apple @3x resolution; on a relatively smaller screen it should be scaled down with the same scale. For example, in a screen resolution of 800×480, the application icon in the home page is 80px. How is this calculated?

There is also a vehicle model in the project with a screen resolution of 1280 × 720. Due to the narrowing of the screen, the application icon needs to be reduced to 120px, and the height of 720 and 480 has a common multiple of 240, so the final small screen application icon is 80px, The round corner size also changes accordingly: R: 24/18/12. The rest of the resolutions are used according to the actual situation.

2) System icon (I will explain it in detail in the subsequent articles on building HMI component library)

The system provides many small icons (representing common tasks and content types) for use in the navigation bar and tab bar. It's best to use these built-in icons as much as possible because they are familiar to people.

2. Icon size

1) How does the big company formulate the icon size

According to Baidu IDX driving experience center, based on the visual distance of 50cm, the minimum icon is 9mm, and 12mm is recommended.

What is the actual pixel of 1cm visually? This is a wrong idea. The above article also mentioned that the screen resolution cannot be converted with the physical length unit (the actual project experience tells me that the results cannot be shared because the same screen size but different resolution).

2) Calculation of PPI

I will briefly talk about the calculation principle. According to the resolution of the screen, I have made a car with the same screen size, all of which are 8-inch screens, a screen resolution is 1280×720 and the other is 800×480. A grid is a pixel.

3) Minimum icon size calculation

Next, find the greatest common divisor of 80 for a screen with a resolution of 1280×720. Finally, it is concluded that the ratio of the screen is 16:9. The sum of the squares on both sides = the square of the screen length. According to the Pythagorean theorem (16X)^2 + (9X )^2=8×8 The final calculated result is 0.4357.

16:9 8-inch screen length (unit: inches) = 0.4357 × 16 = 6.9712 Width = 0.4357 × 9 = 3.9213, international unit of calculation 1 inch = 2.54cm, the resulting screen length (unit: cm) = 6.9712 × 2.54 ≈17.7cm, width=3.9213×2.54≈9.96cm.

Resolution: 1280 × 720 is calculated with a width equal to about 10cm, 720 / 10 = 72px
Resolution: 800 × 480 because they have the same screen size (inches) 480 / 10 = 48px

It is concluded that the actual pixel of 1cm is visually different.

According to the design rules, it is formulated in multiples of 4, so the minimum icon is 40px (this conclusion is only used as a recommendation. When doing a project, there are many variables. )

4) Let's show it

Google Android Auto icon size specification:

Basic icons: primary icons: 44px, secondary icons: 36px, third-party icons: 24px;
Use of Avatar: small Avatar: 56px, medium Avatar: 76px, large Avatar: 96px;
Base icon: 48px # secondary icon 40px (minimum icon size).

Let's also say here that for the size setting of large icons, there will be many size. Later, I will output detailed contents about HMI icons. Please pay attention to it.

3. Click area of Icon

1) The icon touch area is divided into driving use and stationary use.

For example, it is necessary to adjust the internal and external circulation of the air conditioner during driving. The original hard buttons of the old car have been replaced by buttons on the screen. The original hard buttons have been used for a long time and have memory, and they are tactile and the size of the hard buttons is moderate, so the operation time is reduced and the risk coefficient is reduced.

New energy vehicles can be designed to reduce misoperation and inability to click by increasing the touch area, so that the driver's field of vision is not far away from the steering wheel for a long time. Research shows that it is dangerous to stay on the HMI for more than 2 seconds.

Static use, for example: adjust the properties in the vehicle settings, the cruise mode, the music choosing.

2) Google makes rules for touch areas

The minimum touch target size is 76 x 76px. It is necessary to add an additional touch area on the basis of a single icon design, which is easy to operate in driving. If it is used at rest, we can follow the Apple design specification that the minimum finger touch area is 44x44px.

This is my conclusion based on the actual project and the road test (road test: driving test) in the car. There is another special case: text + icon combination click area. When the icon is very small, you can also consider combining text together to increase the click area.

4. Unified rules for icon design

Unified style
Unified light source
Unified line thickness
Unified rounded/right corner
Unified tilt angle
The distance and size of breakpoints are uniform

5. The last episode: naming norms

Before, my friends often asked me how to make the icon images naming norms of the project? Take the home page of the style draft I made before. How to name the icon of "Next song" in the music card on the home page.

First, analyze where the icon is used in that page, then what its attribute is, icon or button, then what the icon represents and the size of the icon. Because there will be duplicate icons in a system, it is necessary to add the size (this content is an optional item). Finally, when adding the state of the icon, the state is divided into: disabled, normal, pressed and selected.

frchalamet

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Automotive HMI Interaction Design Tutorial

根据设计师LambTroy发布的文章整理。添加目录便于检索。一共分为两个部分，前半部分为车载交互体验设计(HMI-UX)，后半部分为界面设计规范(UI)。
复制链接

扫一扫