dsautomobiles.Fr

Explorer

Non classifié(e)

UX & UI

  • Vision
  • Savoir-faire
  • Design
  • Technologie

Découvrez les coulisses du design de l’expérience utilisateur à bord des modèles DS Automobiles. Après la présentation des métiers de Designer UX et Designer UI, illustrés par l’évolution des IHM (interfaces Homme-Machine) sur les modèles et concepts DS, plongez dans les secrets du Manifeste intérieur M.i. 19. Pilier de l’IHM étendue, ce manifeste pose les fondations des expériences utilisateurs à bord des futures DS.

Métier : Designer UX (User Expérience)

INTERVIEW DE MARIE JASPART
RESPONSABLE DESIGN UX - DS AUTOMOBILES

Le Design UX, en quelque mots.

« Mon métier est Designer UX, avec un U comme utilisateur et un X, comme expérience. Mon but, c’est de donner du sens avec les sens : donner du sens à l’alchimie que l’on crée entre les utilisateurs et leur voiture, en sollicitant leur vue, avec les écrans et l’éclairage (Lightning), leur ouïe avec les sons et leur toucher avec les matériaux. »

Les domaines d’intervention du designer UX.

« Pour créer des interactions adaptées entre les utilisateurs et leur voiture, j’interagis moi-même avec de nombreux métiers : ergonomes, développeurs, testeurs-utilisateurs, en plus des designers Intérieur, designers CMF (Couleurs, matériaux et finitions) et designers Lighting (éclairages).

Je définis aussi le zoning de chaque fonction pour le conducteur, dans l’axe de sa vision, et pour les passagers. Chez DS, l’accès aux fonctions de confort se situe dans les portières. Je travaille étroitement avec le designer UI (User Interface), spécialisé dans le graphisme et les animations dans les écrans. 

Designer UX est un métier nouveau, avec l’émergence des nouvelles technologies. Chaque marque a son propre typage et DS Automobiles a une vraie ambition sur ce sujet. » 

L’évolution des interactions et des IHM (Interfaces Homme-Machine) sur les modèles DS.

La plupart des sens sont sollicités à bord d’un modèle DS : les visuels avec les graphismes, leurs animations et les éclairages. Ensuite, le son puis le toucher, avec les matériaux et l’espace dégagé autour de soi.

Le designer UX dose l’équilibre des sens -vue, ouïe et toucher- afin que chacun provoque la même émotion à l’utilisateur. Si l’un des sens prend le pas sur l’autre, c’est orchestré dans un but précis. 

Au fil des modèles et concepts, les interactions avec les utilisateurs ont évolué à travers de nouvelles IHM : 

Les nouvelles DS 3 et DS 7 (lancées en 2022) ont intégré la nouvelle interface IRIS System. L’écran HD est secondé par la commande vocale et la fonction mirroring du téléphone, sans fil.

DS 4 dispose du contrôle de l’information à distance, avec le pavé tactile Smart touch. Situé sur la console centrale, il permet de contrôler les fonctions sans recourir à l’écran tactile. Il complète la commande vocale de l’interface IRIS SYSTEM (écran tactile personnalisable).
DS 4 est aussi le 1er modèle à utiliser DS EXTENDED HEAD UP DISPLAY, premier pas vers la réalité augmentée. Les informations de conduite et les alertes apparaissent comme si elles étaient projetées sur la route, par un effet d’optique.


Le Manifeste intérieur M.i. 19, puis le concept Aero Sport Lounge (ASL) ont permis d’explorer la commande haptique (par la gestuelle) des fonctions, qui accentue le côté magique au Cockpit.

Sur le Manifeste intérieur M.i. 21, l’écran s’efface pour laisser apparaître la matière. Les informations sont toujours présentes, mais sans surcharge, l’atmosphère est paisible.

Métier : Designer UI (User Interface)

INTERVIEW DE LOIC BETHEGNIES
RESPONSABLE UI - DS AUTOMOBILES

Le Design UI, en quelque mots

« Mon rôle est de rendre les informations élégantes sur les écrans digitaux, comme le combiné d’instrumentation et les écrans tactiles. Mes créations graphiques doivent faire oublier le cadre strict de l’écran, très carré, dont la taille est limitée. Ce qui s’affiche doit créer un univers propre à DS Automobiles, comme les références aux motifs Clous de Paris, qui signent l’identité DS et les animations comme le Digital Art, qui contribue à l’Art du voyage ».

Les domaines d’intervention du designer UI

« Le métier de Designer UI est très riche. J’interagis avec les designers UX (user Expérience), les designers CMF (couleurs, Matières et Finition), les designers Intérieur et les équipes produit. 

J’imagine les graphismes des décors qui apparaissent en fond d’écran. Depuis DS 7, nous faisons évoluer les motifs en triangle, symbolisant la pyramide du Louvre. Cette forme fait écho au guillochage Clous de Paris, issu de univers de l’horlogerie, qui apparaît sur les décors intérieurs. 

L’animation des écrans représente 50% de mon travail. Sur les modèles de la Marque, elles sont douces et fluides, avec une vitesse d’affichage des informations progressive.

Je crée aussi les couleurs numériques, qui s’harmonisent avec les matériaux de l’habitacle. Un nuancier de 8 teintes personnalise l’ambiance. Toutes sont cohérentes avec l’univers DS : champagne ou framboise, teintes Bleues en référence à l’électrification, ou teintes sombres propres à l’univers du Luxe. » 

L’évolution des UI et graphismes sur les modèles DS.


Sur les 1ères générations de DS 7 et DS 3, l’écran d’instrumentation comporte 3 zones d’affichage en forme de pyramides verticales, qui évoquent le cristal noir. C’était une rupture avec les codes traditionnels, rond, des autres marques. La typographie façon « vidéo-Game », futuriste, évoquait la performance, voire la sportivité. Avec l’électrification des DS 3 et DS 7, le graphisme des écrans a évolué vers des teintes bleutées. Les motifs se sont résumés aux contours des 3 pyramides, donnant un effet clair-obscur : les manques créent les formes, plutôt que la forme (pleine) elle-même.

Sur DS 4, l’univers des Clous de Paris est repris, mais sous l’aspect de petites pyramides horizontales, rappelant des plateaux, sur lesquels apparaissent les informations. Ces motifs ciselés et facettés soulignent chaque pictogramme et chaque widget (bouton personnalisable). 

Sur la nouvelle génération (mi-vie) de DS 7, L’écran de meilleure définition a permis de retravailler la mise en scène. Le bas de l’écran reprend les motifs facettés apparus sur DS 4. Les côtés de l’écran, en ailettes, qui rappellent les tranches du logo DS, sont utilisés pour amener de l’information à gauche à droite.

Sur le manifeste M.i. 19, puis le concept DS ASL, les interfaces ont été simplifiées pour les utilisateurs, qui disposent des réglages sur les écrans latéraux haute définition. Le graphisme des informations partagées est minimaliste, comme celui de la cartographie du GPS. Cela facilite sa projection sur la matière de la planche de bord. Sur ASL, la projection enveloppait la colonne de direction, pour une expérience encore plus immersive.

Sur M.i. 21, nous avons travaillé le Digital Art sur l’écran central panoramique transparent. En parallèle, le motif Clou de Paris a évolué pour devenir plus précis et cristallin. Repris sur chaque curseur et bouton de réglage, il signe avec l’identité DS tout ce qui est interactif.

Le Manifeste intérieur M.i. 19 :
1er maillon de l’IHM étendue

Imaginé en 2019, le Manifeste intérieur M.i. 19 a servi de laboratoire à la conception des IHM (interfaces homme-Machine) et de l’architecture intérieure du Concept DS Aero Sport Lounge (ASL). 

“Le design intérieur de M.i. 19 est statutaire. Il revendique un esprit Lounge, en s’inspirant de l’univers de l’ameublement avec une planche de bord revêtue de bois et pourvue de tiroirs pour les rangements.”


Les IHM étendues et priorisées 

« La 1ère intention de M.i. 19 était d’étendre et de prioriser les IHM. Tous les réglages individuels sont accessibles via les écrans tactiles haute définition situés dans les portières, comme le mirroring du téléphone ou la rétro vision. Les informations partagées sont projetées au centre, sur la planche de bord, comme la cartographie du GPS, l’info-divertissement ou des effets visuels liés au Digital Art ». Luc QUIRIN – Designer intérieur M.i. 19


L’affichage des informations sur la matière de la planche de bord

Sur M.i. 19, les informations sont projetées dans l’axe central, sur la planche de bord, comme sur DS ASL. 

« Sur M.i. 19, nous avons adapté la projection des informations à l’architecture de la planche de bord, en faisant correspondre les rainures des tiroirs au découpage exact des différentes zones d’informations normalement délimitées dans les écrans ». Loïc BETHEGNIES, Designer UI M.i. 19 


La commande des fonctions par la gestuelle

Sur M.i. 19, un pavé tactile situé au centre de l’habitacle permet de commander les fonctions. L’utilisateur fait défiler les menus, comme s’il agissait sur un hologramme, à distance des informations projetées. Les designers DS Automobiles ont travaillé avec la société UltraLeap, partenaire exclusif, pour développer cette technologie.

« La commande haptique des fonctions (par les gestes) est rendue possible par une caméra dissimulée dans le pad et par des capteurs dans l’accoudoir central. L’une des fonctions du designer UX est de préserver la magie de l’utilisation d’un cockpit, en rendant la technologie intuitive pour l’utilisateur, sans que celui-ci ne devine son procédé. » Marie JASPART - Designer UX DS Automobiles


Un habitacle statutaire, inspiré de l’ameublement

La planche de bord de M.i. 19 a été imaginée comme un meuble en bois précieux. Sa position reculée dans l’habitacle accentue l’impression d’espace.

« Nous avons repris les codes du mobilier dans le véhicule, avec des tiroirs dissimulés dans la planche de bord en bois et un rangement pour livres dans la portière côté passager. Avec M.i. 19, nous avons rendu un objet statique – un meuble – dynamique, en gardant l’objectif d’amener du statut. Le résultat obtenu sur M.i. 19 est un intérieur intemporel. Celui du manifeste suivant, M.i. 21, est plus moderne avec ses matériaux translucides, mais aussi plus éphémère, en adoptant les codes de la haute couture. ». Luc QUIRIN – Designer intérieur M.i. 19.

« Le travail des designers est de donner du sens à chaque objet, en prenant en compte la prestation. Sur M.i. 19, la surface de la planche de bord ne devait pas être seulement décorative, mais servir à la projection des informations et aux rangements. La taille des tiroirs est adaptée à chaque objet : documentation, téléphone… car l’automobile est un prolongement de notre mode de vie ». Thomas BOUVERET – Responsable design intérieur DS Automobiles.

La couleur noire assumée dans l’habitacle de M.i. 19, ses sièges en velours et sa moquette épaisse reprennent les codes du Luxe. L’utilisation cuir, réhaussée de surpiqures Point perle, se limite aux parties hautes de la planche de bord et des portières. 

Les décors fins et dorés guillochés avec des motifs clous de Paris éclairent l’habitacle par petites touches. Ils sont assortis aux grilles des enceintes Devialet. Celles-ci, placées au centre de l’habitacle et intégrées à la base des appui-têtes, distillent un son immersif dans l’habitacle.

L’avenir de l’expérience utilisateur (UX)
et des interfaces (UI) dans les prochains modèles DS

Les futures interfaces Homme-Machine

Dans les modèles DS du futur, d’autres manières d’interagir avec l’utilisateur sont à l’étude, après la généralisation de l’écran tactile, de la commande vocale, ou de la commande gestuelle des fonctions. 

    Les 4 scénarios d’interactions avec les utilisateurs.

    Les interactions avec les utilisateurs des futures DS ont été scénarisées en 4 étapes par les designers UX.


    1.Le Grand opening : l’ouverture des portières s’accompagne d’une animation lumineuse et sonore dans l’ensemble du cockpit. Le logo DS s’affiche au centre de l’écran, puis une animation se déploie vers les portières pour localiser les fonctions qui s’y trouvent. Lors de l’installation des passagers, les réglages personnalisés des occupants -sièges, volant, climatisation – s’effectuent automatiquement.

    2.L’expérience de conduite Sereine : L’ambiance à bord invite à la sérénité. Les lumières et des sonorités sont apaisantes. Les informations, minimalistes mais essentielles, s’effacent au profit des matériaux de l’habitacle, pour réduire la surcharge mentale.

    3.L’accès à l’information à la demande : pendant la conduite, l’accès rapide et intuitif rassure l’utilisateur. Celui-ci trouver le détail des informations d’info-divertissement ou des paramètres du véhicule.

    4.L’expérience Art of Travel : elle permet aux occupants d’interagir avec l’environnement extérieur. Par exemple, un utilisateur qui voyage vers Millau accèdera à des podcasts expliquant le défi technologique du viaduc, l’artisanat de la ganterie, ou bien les événements programmés dans la région.

    La généralisation du Digital Art

    Les designers UI et UX ont imaginé des animations artistiques, qui apparaissent dans les écrans ou sont projetés sur la matière. Abstraites ou inspirées des matières ou de la nature, elles représentent le Digital Art.

    Le Digital Art crée de l’émotion en délivrant une expérience sensorielle et esthétique, qui contribue à la sérénité. Il contribue ainsi à l’Art du Voyage à la française, signature de DS Automobiles.

    Sur M.i. 21, les animations reprennent les couleurs, le rythme et les mouvements correspondant à un moment précis de la journée, comme un coucher de soleil. Ici les sensations, provoquent des émotions. 



    Bienvenue dans notre futur.