How to Build an Automotive HMI: Design Specifications (Part 1)

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).  

  1. The company has defined the font (hired a professional font designer to design a set);
  2. 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.

Recommendation of Related Axure Products 

Introduction

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


Features
· 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.