This article shares some of the design thinking behind our operating system. A small peak behind the curtain.
In the past few years, the NIO digital cockpit system has accompanied car owners through two major updates. During this period, every optimization and the launch of every new function is anticipated with higher expectations. Therefore, the NIO digital cockpit design team has constantly summarized feedback and made great efforts to explore the cockpit experience that is most suitable and closest to users’ habits.
We are also very willing to share our thoughts with you in combination with the summary of previous experience.
Let’s share Aspen 3.0.0’s new interface and interaction design video:
“Driven by design”
The cockpit driving experience has changed a lot in past years. The design style of earlier versions shifted away from the trend. Also the layout can not meet the needs of internationalization; And with the update of the technology, some interaction modes also need to be upgraded.
We collected the user’s pain points in the driving experience and tried to figure out their real needs through user salons, one-on-one interviews, and online research. We verified our assumptions by creating user portraits, journey maps, and prototypes. We discussed these assumptions with critical thinking methods, and gradually polished the valuable concepts into specific landing schemes.
“The goal of Design”
In the past versions, we started by establishing the basic interaction architecture to meet the basic functional requirements, gradually covering the main use scenarios and function definitions, and optimizing the user experience structure. In 3.0, we hope to show more natural interaction in combination with technological innovation and meet the needs of diversity in different scenarios. While improving ease of use, it also improves the sense of quality. In short, it is “easier to use, premium to look”.
Experience principle
Different from mobile devices, the biggest challenge of cockpit experience is from user limited time and visual attention. Under the guidance of safety first, we want to increase the efficiency of the user. We need to ensure that the interactive architecture is more flat, more shallow.
We need to provide the necessary information to ensure sufficient understanding and help the user make decisions quickly. Eventually, we put forward several experience principles:
- Minimal / Clarity
Human perception of vision is uneven. Our eyes get a lot of information in a short time, and the brain can’t give feedback quickly and immediately. Therefore, the presentation of information and its timing is particularly important.
In the new version of the cluster, we have sorted out the information hierarchy, so that important information can be displayed “appropriately” in time. Users can grasp as many effective contents as possible and understand the changes of status through “glancing”.
According to NHTSA guidelines, the driver should complete a task in 1.5-seconds of glazing, and the accumulation time of the shifting away from the line of sight can not be more than 12 seconds. We minimize the vertical distance and the time the user looks away from the road.
We often say “if there is no need, do not disturb users”. The new version of the instrument cluster removes the redundant icons making the interface as simple as possible. It also weakens the distractions around the virtual car, because we think that the visual point should be “The dynamic information of road”.
Secondly, according to the test results, we moved the important information into the P1 “visual advantageous area”, avoiding the steering wheel covering them by the angles. After we raised the skyline, the assisted driving display area is larger, improving the depth of view, and the user can see more surrounding traffic.
The viewing angle is according to the speed of the vehicles. The change of viewing angle is close to the user’s actual driving experience. When the speed increases, the driver will see more information.
The previous layout of the HUD was relatively scattered, the road instructions and NIO Pilot information was not obvious, also the vertical timeline is was difficult to understand. So, we adjusted the layout, the font-weight, made bolder icons, and updated the progress bar.
2. Natural / intuitive
Natural interaction is the extension of people’s perceptions. It is closer to the user’s mental model and behavioral cognition, the lower the cognitive load during actual use, the simpler and convenient the user feels.
We want to use a more naturally interactive way, evoke the user’s instinct awareness, and spend the smallest effort to get the most efficient results.
We found that users after clicking on the applist, more than 75% of people open “settings”. In the new version, we merged “My Car” and “Settings” to display the entrance to the Dock, so that “vehicle settings” can be opened more quickly.
Air conditioning is a high-frequency operation, it should be more obvious and natural, for this, we put it directly on the Dock, and the user can tap on the ‘arrows’ next to the temperature, or slide directly on the numbers and adjust the air conditioner.
In 3.0, users can pull the card to the MINI status, which fulfilled the needs of users in some scenes to see a larger map.
3. Hierarchy / flexible
The main point in UI design is to coordinate and manage the relationship between the elements, not just the design “element” itself. The change in layout can guide people’s visual focus to help users understand the relationship between appearance and functionality.
The new version of the layout is more stretched, and the elements are more “breathable”, which makes the interface have a visual pause, which is implied when the user focuses and relaxes.
We narrowed the margins of the 2.0 layout, reduced unnecessary hierarchy, re-examined the grid system, increased the adjustment bar, making it all more smooth.
The visual hierarchy is the core element in the UI design. The font-weight can help users identify the primary, balanced content, and reduce information density.
The optimization of contrast in the new version has enhanced readability. According to WCAG standards, the lowest contrast of routine reading text should be above 4.5: 1, while the ideal contrast in the driving scene is higher, at least 7: 1.
The highly clear text helps the driver shorten the browsing and decision-making time and reduce distractions.
4. Premium / Precision
We are always pursuing advanced UI effects so that internal and external decorations have a very delicate quality. In the previous version, the control style is relatively thick, and the transition is a bit blurry. Although the blue-black was taken from the brand color system, the background was not clear in the digital interface, the overall page atmosphere could be described as “bored”, not “slick” enough.
In 3.0, we use black as the main tone, the accent color is purer, clearer, the saturation is higher, and the color of the blue-oriented highlight is made to ensure sufficient vividness.
We also rebuilt the ADAS visual identification model, adding details, more distinguishable models; and the user’s car model was also adjusted. On the instrument panel, we optimized the dynamic display of the car model, realized in the functions such as opening, charging.
3D UI can better represent car scenes making it easier to form the desired effect. We avoid abstract graphics. Such processing is also used in other important scenes.
Design for Everyone
The purpose of the digital cockpit team is to care about our users’ experiences. By using their feedback, scenario thinking, and our design principles we came up with the next iteration.
Aspen 3.0 is a new beginning, we will continue to collect user requirements and feedback, and strive to exceed the user's expectations!
