AUTOMOTIVE HMIs
Building Human Machine Interfaces in Unity3D
ROLE: UX Designer, Technical UI Design
Project Summary
Project Summary
OVERVIEW
MY ROLE
At Volkswagen Group’s Future Center Europe, I had the pleasure of working with VW Group brands to implement future HMI concepts from Figma into Unity3D using UI Toolkit and C#.
CONFIDENTIALITY
The final products are confidential and unreleased, so I won’t share specific processes or images from the project (images for example only).
MY ROLE
At Volkswagen Group’s Future Center Europe, I had the pleasure of working with VW Group brands to implement future HMI concepts from Figma into Unity3D using UI Toolkit and C#.
CONFIDENTIALITY
The final products are confidential and unreleased, so I won’t share specific processes or images from the project (images for example only).
Example Automotive Human Machine Interface
The State of Automotive HMIs
The State of Automotive HMIs
CONTEXT
BACKGROUND
Automotive Human Machine Interfaces (HMIs) are becoming a more fundamental part of operating vehicles. As automakers push forward in this direction, they are also striving to make their HMIs more responsive, satisfying to use, and visually pleasing.
NEW INTERFACE ENGINES
To achieve this, they are moving away from conventional operating systems and implementing systems capable of powerful 3D graphics like Unreal Engine and Unity.
BACKGROUND
Automotive Human Machine Interfaces (HMIs) are becoming a more fundamental part of operating vehicles. As automakers push forward in this direction, they are also striving to make their HMIs more responsive, satisfying to use, and visually pleasing.
NEW INTERFACE ENGINES
To achieve this, they are moving away from conventional operating systems and implementing systems capable of powerful 3D graphics like Unreal Engine and Unity.
Unity Implementation
Unity Implementation
DEFINE + EXECUTE
DISCOVERY + DEFINITION
I worked within an agile software team to implement static Figma mockups of HMI UI designs into Unity. We first had to understand and determine how the static mockups could be made interactive. To accomplish this, we created an Interaction Architecture diagram.
INTERACTION ARCHITECTURE
Interaction Architecture diagrams show the linked screens/elements and necessary navigation interactions. This is more beneficial than an Information Architecture diagram in this case, as users have complex touch interactions, and mapping them prevented overlooked duplicates.
EXAMPLE CAUGHT OVERSIGHT
For example, you cannot map an action to a swipe gesture on a small element with a slider because it would trigger two actions with a single interaction. Mapping out the interactions ahead of time was crucial to avoid such issues.
DISCOVERY + DEFINITION
I worked within an agile software team to implement static Figma mockups of HMI UI designs into Unity. We first had to understand and determine how the static mockups could be made interactive. To accomplish this, we created an Interaction Architecture diagram.
INTERACTION ARCHITECTURE
Interaction Architecture diagrams show the linked screens/elements and necessary navigation interactions. This is more beneficial than an Information Architecture diagram in this case, as users have complex touch interactions, and mapping them prevented overlooked duplicates.
EXAMPLE CAUGHT OVERSIGHT
For example, you cannot map an action to a swipe gesture on a small element with a slider because it would trigger two actions with a single interaction. Mapping out the interactions ahead of time was crucial to avoid such issues.
Unity Editor with HMI Template
UNITY UI TOOLKIT
With the design intent fully realized, we could port it into Unity using UI Toolkit and C#. UI Toolkit is Unity’s latest solution to implementing UI within Unity and is based on a structure similar to the web with UXML, USS, and C# being analogous to HTML, CSS, and JS.
HANDOFF TO CLIENT
Since the final product would be handed off to the client for them to customize their design and make alterations for implementations in other car models, UI Toolkit’s web-like structure would facilitate the handover.
UNITY UI TOOLKIT
With the design intent fully realized, we could port it into Unity using UI Toolkit and C#. UI Toolkit is Unity’s latest solution to implementing UI within Unity and is based on a structure similar to the web with UXML, USS, and C# being analogous to HTML, CSS, and JS.
HANDOFF TO CLIENT
Since the final product would be handed off to the client for them to customize their design and make alterations for implementations in other car models, UI Toolkit’s web-like structure would facilitate the handover.
EXAMPLE CAUGHT OVERSIGHT
For example, you cannot map an action to a swipe gesture on a small element with a slider because it would trigger two actions with a single interaction. Mapping out the interactions ahead of time was crucial to avoid such issues.
CONTACT
© 2024