L’expérience utilisateur dans le secteur de l’automobile

La conception
d’interface automotive

Il n’est pas dans son canapé ou dans le métro à utiliser une application, il est dans une voiture. Il conduit.

Voilà ce que je me disais à chaque conception d’interface lorsque je travaillais chez Coyote, une entreprise faisant partie des principaux fournisseurs d’assistants de conduite communautaires.

Nous sommes dans une expérience différente : l’utilisateur est un conducteur. Entre la gestion de la conduite, des passagers ou d’autres commandes internes dans le véhicule (par exemple : la radio, la climatisation, le réglage des sièges, les animaux non attachés…), le conducteur a suffisamment de sources de distraction dans le véhicule, et il peut être amené en plus, à interagir avec un produit comprenant une interface.

Manipuler et regarder un cellulaire ou autres types de technologies comme les appareils GPS au volant augmente jusqu’à 8 fois le risque de collision pour le conducteur (Source : AAA Foundation for Traffic Safety, 2017)

La conception de l’interface ne doit donc pas le distraire mais lui simplifier la vie au maximum afin de rendre l’expérience agréable durant le trajet. Le secteur de l’automobile était mon quotidien et en tant que UX/UI designer, j’ai eu la possibilité de travailler sur des problématiques inhabituelles que peut rencontrer l’utilisateur/le conducteur.

  • Que doit-il voir ?
  • Que peut-il faire tout en conduisant ? À quel moment ?
  • Comment l’informer ou l’alerter ?
  • Qu’en est-il de la sécurité de l’utilisateur ?

J’ai pu constater des points communs mais aussi différenciants entre la conception d’une interface mobile « lambda », et une interface automotive (que cela soit une application mobile ou embarquée). Tout en s’appuyant sur les interfaces et interactions mobiles, voici mon guide adapté pour les conceptions d’interface automotive :

Des informations claires et concises

  • Concevez des tâches embarquées et des messages qui ne détournent pas l’attention des activités critiques pour la conduite en sécurité. Selon le service, il arrivait parfois qu’on sollicite le conducteur, celui-ci doit voir l’information et y répondre si il le veut, sans que cela soit trop intrusif.


Sur le premier écran (a) ci-dessus, le message peut être trop imposant sur l’écran. En pleine navigation, non seulement il ne voit plus sa carte, mais le conducteur est face à une contrainte de devoir viser la croix afin de fermer la pop-in, ce qui lui demande beaucoup trop d’effort et peut le distraire.
C’est pour cela que j’ai donc choisi une composition ½ (second écran) afin de laisser paraître la navigation sur la moitié de l’écran. Le conducteur peut donc voir le message sans pour autant être perturbé dans sa navigation.

  • Le conducteur n’a pas le temps de lire l’écran avec attention. Les signaux visuels et sonores doivent être rapidement reconnaissables et détectables.


Un visuel connu. Par exemple, utilisez les codes de la routes, ne changez pas les pictogrammes habituels qui sont familiers pour les conducteurs sur la route.

  • Réduisez au maximum le texte, et si il est nécessaire d’en mettre, bannissez les fantaisies, la police doit être lisible en un coup d’œil. Évitez les typographies à empattement (plus recommandées pour les impressions) et préconisez surtout les linéales pour une meilleure lecture.

J’utilisais par exemple la Roboto pour le Coyote NAV+. Étant donné que l’écran était positionné à plus de 50cm du conducteur, j’évitais les graisses fines ou trop épaisses (thin, light, black) afin de faciliter la lecture, utilisez deux graisses différentes au maximum. De plus, pensez également à la qualité de l’écran du produit sur lequel vous travaillez l’interface, selon le contraste et la luminosité, la visibilité des textes peut être troublée.

Simplifier la vie de l’utilisateur lors de la conduite

  • Les mains du conducteur doivent être plus sur le volant que sur l’écran.

Minimisez les demandes d’actions au volant sur vos interfaces au maximum afin d’éviter le plus possible les interactions au produit. Présent sur Rlink (Renault), Coyote bloque par exemple l’accès aux Paramètres lorsque le véhicule roule pour la sécurité (le cas (a) ci-dessous). Nous avions estimé que le conducteur ne devrait pas aller dans les Paramètres, cela pourrait l’inciter à quitter la route du regard…

  • Une charge de travail minimale : préconisez l’auto-complétion lors d’une demande d’action afin de simplifier le geste de l’utilisateur. Par exemple, lorsque vous êtes amenés à poser une question au conducteur, vous pouvez inclure un timer de 5 secondes qui affirme une réponse automatique si le conducteur n’intervient pas.

La barre bleue que vous pouvez voir sur les écrans ci-dessus illustre le timer afin d’illustrer et prévoir une réponse automatique si le conducteur n’intervient pas sur l’écran.

  • Pensez à donner la possibilité aux utilisateurs de programmer leurs notifications et leurs affichages selon leurs besoins (visuel et sonore).

« Plus gros »

  • Nous rejoignons ici les critères de lisibilité.

Les utilisateurs ne sont pas aussi précis dans leurs actions lorsqu’ils conduisent.
N’oubliez pas que l’écran n’est pas dans les mains de l’utilisateur et qu’il est positionné à une certaine distance dans la voiture.
coyote-navplus-5

Coyote Nav+ positionné dans le véhicule.

Les visuels d’information et les boutons doivent être placés de manière à ce que l’utilisateur puisse avoir accès facilement au regard et au toucher. De plus, les zones tactiles doivent être plus grosses que le bouton ou le texte, de même que pour le texte de l’interface. Bien sûr, tout ne doit pas être grossier, à vous de trouver un équilibre parfait.

La taille de police varie selon la résolution de l’écran et la distance de lecture. Pour ma part, j’ai suivi la norme AFNOR 9241-300, j’étais donc sur un texte minimum à 16px pour une distance environ de 70cm pour l’application mobile mais sur l’interface embarquée dédiée à Rlink, ma taille de police minimal était à 26px.

Maîtriser le contraste

  • Travailler le contraste des interfaces fait partie des recommandations et des règles pour l’accessibilité des contenus Web (WCAG) 2.0, et il est d’autant plus important de les respecter pour les applications automotives.
  • Les couleurs sont très souvent utilisées comme facteur d’information lorsque l’on veut éviter l’emploi du texte en automotive. Cependant la luminosité en voiture est différente. Des couleurs trop claires peuvent illuminer le conducteur en conduite de nuit ou bien les rayons du soleil peuvent brouiller la visibilité de l’écran, par exemple.

Je faisais mes propres tests en jour, en plein soleil, comme en nuit, dans un placard à balais, afin de vérifier le choix des couleurs pour la lisibilité de l’écran. Vous devez vous adapter aux conditions et contraintes (lumière naturelle, qualité de l’écran, etc.).

Nous avons opté pour l’utilisation de deux teintes de bleu différentes (représentation la navigation) afin de répondre au mieux aux normes des contrastes selon le thème choisi.

  • Fini les tons sur tons : choisissez vos couleurs avec précaution afin de respecter les règles du contraste automobile.

Vous pouvez utiliser des outils qui calculent les contrastes ratio tels que :
Colour Contrast Check : https://snook.ca/technical/colour_contrast/colour.html
Ou le plugin Sketch Stark http://www.getstark.co/

L’animation d’interface

  • Les animations et micro-interactions peuvent être un moyen rapide et efficace pour faire passer un message complexe.

Onboarding de l’application COYOTE.

  • Les micro-interactions sont souvent utilisées pour un feedback afin d’éviter une incompréhension d’attente. Le conducteur peut prédire le comportement du système, par exemple, à la vue d’un spinner animé, il comprend de suite que c’est en cours de chargement.

Chargement de l’application COYOTE.

TAKE AWAY

Chaque secteur a ses problématiques distinctes. En tant que designer, nous devons nous adapter à toutes situations afin de répondre aux besoins des utilisateurs convenablement. Ici, dans le cas du secteur d’automobile, nous relevons des détails de conception d’interface qui se diffèrent parfois aux autres, et qui ne sont pas à négliger.

Minimizing eyes-off-road glances” (Les yeux sur la route, les mains sur le volant.)

L’importance de la sécurité du conducteur sur la route est mise en avant, et les expériences que nous créons doivent accompagner l’utilisateur tout au long de sa route, en lui facilitant la vie sans le distraire ou le stresser.

Pour aller plus loin…

Inspiré par le “head up display” (HUD), l’affichage tête haute dans le domaine de l’aviation militaire, consistant à superposer les informations nécessaire au pilotage, à la navigation etc., le secteur de l’automobile a su développer ce principe en projetant les informations de la route et/ou la navigation sur une lame semi-transparente ou sur la pare-brise du véhicule. Dans le champ de vision du conducteur, ce principe souligne une conduite tête haute en sécurité. Les constructeurs automobiles limitent cependant l’affichage simultané de plusieurs informations pour ne pas distraire ou gêner la vision du conducteur.

Range Rover Evoque HUD (2015)

En poursuivant cette voie de sécurité, toujours pour une expérience utilisateur plus simple, le secteur de l’automobile développe également aujourd’hui des idées autour de l’interface invisible (ou No-UI). L’idée est de faire disparaître les éléments Homme-Machine afin de permettre une expérience utilisateur moins contrainte par l’interface écran. Les interactions corporels (ex : Kinect) ou les interactions vocales (ex : assistant vocal Alexa, Siri, Google etc.) sont les principales interactions à travers les interfaces invisibles. L’utilisation du vocal à travers CarPlay, Android auto ou autres systèmes vocaux est de plus en plus présente auprès des utilisateurs en situation de conduite, et certaines grandes entreprises comme BMW par exemple se mettent même à développer leur propre assistant personnel. https://www.usine-digitale.fr/article/bmw-va-proposer-son-propre-assistant-personnel-des-2019.N738489 )
Un sujet à suivre de très près… n’hésitez pas à nous partager votre opinion sur nos réseaux sociaux.
Sylvie (@ssilbing), UI/UX-Designer