Detailed Explanation of Automotive HMI Interaction Design (Part 1)


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.

This article is one of a series of articles on automotive HMI. Other articles are

Detailed Explanation of Automotive HMI interaction design (Part 1)
How to Build an Automotive HMI: Design Specifications (Part 2)

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.


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.


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.


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

Let's go straight to the theme of this chapter. In this article, I will start from eight points to explain the interaction content of vehicle in detail.

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.


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.

Next article: Detailed Explanation of Automotive HMI interaction design (Part II)



Recommendation of Related Axure Products 


This app template is used for smart driving. Features include vehicle condition monitoring, vehicle control, navigation, driving record, etc.

· Easy to use, strong reusability
· High-fidelity interactive prototype
· Cool
 and tech style
· Extracted from real products, high applicability




Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

This section doesn’t currently include any content. Add content to this section using the sidebar.