SlideShare une entreprise Scribd logo
1  sur  25
Conception d’Interfaces Immersives pour la
VR/AR :
Découverte d’un Cas Pratique
Alexia Buclet
Design Ops Director & UX Designer
Minsar.app
@AlexiaBuclet
21/06/2019
Continuité avec l’année dernière…
➢ “L’UX Design dans les Nouvelles Technologies”
➢ Réalité Virtuelle, Augmentée et “Mixte”
Alexia Buclet
© Magic Leap
➢ Anciennement Minsight, logiciel de création d’expériences en AR/VR : directement dans
l’appareil en WYSIWYG et sans compétence en développement.
Minsar
Alexia Buclet
Bêta :
L’UX Design en VR/AR
Alexia Buclet
UX Design à 360°
➢ Affichage autour de l’utilisateur
➢ Champ de vision = écran en mouvement
➢ Adapter l’interface au contexte
Alexia Buclet
60°
20°
12°
40°
47°47°
77° 77°
102°102°
UX Design en 3D
➢ Une nouvelle dimension : la profondeur
➢ Distance à l’utilisateur : confort et lisibilité
➢ Distance entre les éléments
➢ Différents espaces d’affichage
Alexia Buclet
20m :
limite perception
du relief
0.5m
1.5m : popup 2-3m : menu10m :
limite perception forte
du relief
UX Design immersif
➢ Casques AR/VR : interface affichée dans un monde immersif (virtuel
ou physique)
➢ Respecter les règles de la physique…
➢ … Tout en proposant des interactions magiques
➢ Guider l’utilisateur
Alexia Buclet
UX Design immersif
➢ Casques AR/VR : interface affichée dans un monde immersif (virtuel
ou physique)
➢ Limiter la fatigue physique
➢ Prendre en compte l’infinité de positionnement de l’utilisateur
➢ Respecter l’espace personnel
Alexia Buclet
UX Design dans un monde dynamique
➢ Prendre en compte l’environnement (virtuel ou physique)
➢ Eviter les conflits possibles
➢ Intégrer les éléments
➢ Adapter selon les évolutions
possibles et du contexte
Alexia Buclet
Un cas pratique : l’import
Alexia Buclet
Importer des fichiers
1. Choisir l’élément
2. Le télécharger
3. Placer l’élément dans l’espace de travail
Alexia Buclet
2D : l’exemple de PowerPoint
➢ 2 cas possibles en important une image :
➢ Image plus petite que la diapositive
➢ Image plus grande que la diapositive
➢ Choix des designers :
➢ Utiliser la taille d’origine
➢ Si trop grande : s’adapte à la taille de la diapo
➢ Si la taille de la diapo est modifiée : choix à l’utilisateur
Alexia Buclet
En VR/AR
➢ Importer l’élément devant l’utilisateur à une distance confortable.
Alexia Buclet
Mouvement de l’utilisateur
➢ Mais si l’utilisateur tourne la tête au moment de l’import ?
Alexia Buclet
Taille de l’élément
➢ Mais si l’élément importé est très grand ?
Alexia Buclet
Taille de l’élément
➢ Mais si l’élément importé est très petit ?
Alexia Buclet
Environnement
➢ Mais s’il y a un mur devant l’utilisateur ?
Alexia Buclet
Déplacement de l’utilisateur
➢ Mais si le chargement prend un peu de temps… et l’utilisateur se
déplace ?
Alexia Buclet
Attention de l’utilisateur
➢ Mais si le chargement prend un peu de temps… et qu’il y a une
erreur ?
Alexia Buclet
Exemples de problèmes concrets
Alexia Buclet
Pour vous aider
➢ Utilisez le monde physique pour concevoir le virtuel immersif :
➢ Concevez en immersion
➢ Faites des Proofs of Concept pour itérer facilement.
Alexia Buclet
Objets physiques Un mètre
Les challenges
des interfaces immersives
Alexia Buclet
➢ Avec une dimension en plus et les appareils immersifs actuels arrive
une multitude de nouveaux challenges à relever !
Alexia Buclet
➢ Ces challenges ne doivent pas se reporter sur l’utilisateur, mais sur
l’équipe de conception/développement :
➢ Adaptez votre manière de penser et vos outils.
➢ Soyez attentifs aux choix pris dans les expériences que vous essayez.
➢ Apprenez des autres métiers déjà spécialisés en 3D.
Alexia Buclet
@AlexiaBuclet
Minsar.app

Contenu connexe

Similaire à Conception d'interfaces immersives pour la réalité virtuelle et augmentée - Alexia Buclet

Meetup XVR Aura - Travailler efficacement sur un projet xr
Meetup XVR Aura - Travailler efficacement sur un projet xrMeetup XVR Aura - Travailler efficacement sur un projet xr
Meetup XVR Aura - Travailler efficacement sur un projet xrAlex Frêne
 
Introduction à la Réalité Augmentée
Introduction à la Réalité AugmentéeIntroduction à la Réalité Augmentée
Introduction à la Réalité AugmentéeNiji
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Microsoft Technet France
 
Realite Augmentee by Newcast Vivaki
Realite Augmentee by Newcast VivakiRealite Augmentee by Newcast Vivaki
Realite Augmentee by Newcast VivakiNewcast Vivaki
 
Augmented Reality
Augmented RealityAugmented Reality
Augmented RealityMoxie Paris
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsLa FeWeb
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basicsAlinoa
 
Comment concevoir une experience utilisateur cross canal
Comment concevoir une experience utilisateur cross canalComment concevoir une experience utilisateur cross canal
Comment concevoir une experience utilisateur cross canalAkiani
 
Printemps Réseaux Sociaux Québec 2013
Printemps Réseaux Sociaux Québec 2013Printemps Réseaux Sociaux Québec 2013
Printemps Réseaux Sociaux Québec 2013Sébastien Giroux
 
LE WEBDOC & LE WEB2.0 - C'EST QUOI LE WEB DOCUMENTAIRE ? - FIFO 2014
LE WEBDOC & LE WEB2.0 - C'EST QUOI LE WEB DOCUMENTAIRE ? - FIFO 2014LE WEBDOC & LE WEB2.0 - C'EST QUOI LE WEB DOCUMENTAIRE ? - FIFO 2014
LE WEBDOC & LE WEB2.0 - C'EST QUOI LE WEB DOCUMENTAIRE ? - FIFO 2014Benjamin Vautier
 
Apple Watch par Benoit Capallere et Joeffrey Bocquet
Apple Watch par Benoit Capallere et Joeffrey BocquetApple Watch par Benoit Capallere et Joeffrey Bocquet
Apple Watch par Benoit Capallere et Joeffrey BocquetCocoaHeads France
 
La conception d'interfaces narratives
La conception d'interfaces narrativesLa conception d'interfaces narratives
La conception d'interfaces narrativesBenjamin Hoguet
 
Au coeur d'un projet Kinect innovant
Au coeur d'un projet Kinect innovantAu coeur d'un projet Kinect innovant
Au coeur d'un projet Kinect innovantMicrosoft
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design USERADGENTS
 
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013Julien LE THUAUT
 
OroVibe 2017 - Déployer et gérer les applications Oro dans le Cloud - Aymeric...
OroVibe 2017 - Déployer et gérer les applications Oro dans le Cloud - Aymeric...OroVibe 2017 - Déployer et gérer les applications Oro dans le Cloud - Aymeric...
OroVibe 2017 - Déployer et gérer les applications Oro dans le Cloud - Aymeric...OroVibe
 
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013MBA Multimedia
 

Similaire à Conception d'interfaces immersives pour la réalité virtuelle et augmentée - Alexia Buclet (20)

Meetup XVR Aura - Travailler efficacement sur un projet xr
Meetup XVR Aura - Travailler efficacement sur un projet xrMeetup XVR Aura - Travailler efficacement sur un projet xr
Meetup XVR Aura - Travailler efficacement sur un projet xr
 
Introduction à la Réalité Augmentée
Introduction à la Réalité AugmentéeIntroduction à la Réalité Augmentée
Introduction à la Réalité Augmentée
 
Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...
 
Realite Augmentee by Newcast Vivaki
Realite Augmentee by Newcast VivakiRealite Augmentee by Newcast Vivaki
Realite Augmentee by Newcast Vivaki
 
Augmented Reality
Augmented RealityAugmented Reality
Augmented Reality
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basics
 
Comment concevoir une experience utilisateur cross canal
Comment concevoir une experience utilisateur cross canalComment concevoir une experience utilisateur cross canal
Comment concevoir une experience utilisateur cross canal
 
Printemps Réseaux Sociaux Québec 2013
Printemps Réseaux Sociaux Québec 2013Printemps Réseaux Sociaux Québec 2013
Printemps Réseaux Sociaux Québec 2013
 
LE WEBDOC & LE WEB2.0 - C'EST QUOI LE WEB DOCUMENTAIRE ? - FIFO 2014
LE WEBDOC & LE WEB2.0 - C'EST QUOI LE WEB DOCUMENTAIRE ? - FIFO 2014LE WEBDOC & LE WEB2.0 - C'EST QUOI LE WEB DOCUMENTAIRE ? - FIFO 2014
LE WEBDOC & LE WEB2.0 - C'EST QUOI LE WEB DOCUMENTAIRE ? - FIFO 2014
 
Apple Watch par Benoit Capallere et Joeffrey Bocquet
Apple Watch par Benoit Capallere et Joeffrey BocquetApple Watch par Benoit Capallere et Joeffrey Bocquet
Apple Watch par Benoit Capallere et Joeffrey Bocquet
 
INCUBE Company Profil
INCUBE Company ProfilINCUBE Company Profil
INCUBE Company Profil
 
Article IEEE
Article IEEEArticle IEEE
Article IEEE
 
La conception d'interfaces narratives
La conception d'interfaces narrativesLa conception d'interfaces narratives
La conception d'interfaces narratives
 
Au coeur d'un projet Kinect innovant
Au coeur d'un projet Kinect innovantAu coeur d'un projet Kinect innovant
Au coeur d'un projet Kinect innovant
 
Kinect en entreprise
Kinect en entrepriseKinect en entreprise
Kinect en entreprise
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
 
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
HTML5/CSS3D - Expresso Rennes Atalante - 17 sept. 2013
 
OroVibe 2017 - Déployer et gérer les applications Oro dans le Cloud - Aymeric...
OroVibe 2017 - Déployer et gérer les applications Oro dans le Cloud - Aymeric...OroVibe 2017 - Déployer et gérer les applications Oro dans le Cloud - Aymeric...
OroVibe 2017 - Déployer et gérer les applications Oro dans le Cloud - Aymeric...
 
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
 

Conception d'interfaces immersives pour la réalité virtuelle et augmentée - Alexia Buclet

  • 1. Conception d’Interfaces Immersives pour la VR/AR : Découverte d’un Cas Pratique Alexia Buclet Design Ops Director & UX Designer Minsar.app @AlexiaBuclet 21/06/2019
  • 2. Continuité avec l’année dernière… ➢ “L’UX Design dans les Nouvelles Technologies” ➢ Réalité Virtuelle, Augmentée et “Mixte” Alexia Buclet © Magic Leap
  • 3. ➢ Anciennement Minsight, logiciel de création d’expériences en AR/VR : directement dans l’appareil en WYSIWYG et sans compétence en développement. Minsar Alexia Buclet Bêta :
  • 4. L’UX Design en VR/AR Alexia Buclet
  • 5. UX Design à 360° ➢ Affichage autour de l’utilisateur ➢ Champ de vision = écran en mouvement ➢ Adapter l’interface au contexte Alexia Buclet 60° 20° 12° 40° 47°47° 77° 77° 102°102°
  • 6. UX Design en 3D ➢ Une nouvelle dimension : la profondeur ➢ Distance à l’utilisateur : confort et lisibilité ➢ Distance entre les éléments ➢ Différents espaces d’affichage Alexia Buclet 20m : limite perception du relief 0.5m 1.5m : popup 2-3m : menu10m : limite perception forte du relief
  • 7. UX Design immersif ➢ Casques AR/VR : interface affichée dans un monde immersif (virtuel ou physique) ➢ Respecter les règles de la physique… ➢ … Tout en proposant des interactions magiques ➢ Guider l’utilisateur Alexia Buclet
  • 8. UX Design immersif ➢ Casques AR/VR : interface affichée dans un monde immersif (virtuel ou physique) ➢ Limiter la fatigue physique ➢ Prendre en compte l’infinité de positionnement de l’utilisateur ➢ Respecter l’espace personnel Alexia Buclet
  • 9. UX Design dans un monde dynamique ➢ Prendre en compte l’environnement (virtuel ou physique) ➢ Eviter les conflits possibles ➢ Intégrer les éléments ➢ Adapter selon les évolutions possibles et du contexte Alexia Buclet
  • 10. Un cas pratique : l’import Alexia Buclet
  • 11. Importer des fichiers 1. Choisir l’élément 2. Le télécharger 3. Placer l’élément dans l’espace de travail Alexia Buclet
  • 12. 2D : l’exemple de PowerPoint ➢ 2 cas possibles en important une image : ➢ Image plus petite que la diapositive ➢ Image plus grande que la diapositive ➢ Choix des designers : ➢ Utiliser la taille d’origine ➢ Si trop grande : s’adapte à la taille de la diapo ➢ Si la taille de la diapo est modifiée : choix à l’utilisateur Alexia Buclet
  • 13. En VR/AR ➢ Importer l’élément devant l’utilisateur à une distance confortable. Alexia Buclet
  • 14. Mouvement de l’utilisateur ➢ Mais si l’utilisateur tourne la tête au moment de l’import ? Alexia Buclet
  • 15. Taille de l’élément ➢ Mais si l’élément importé est très grand ? Alexia Buclet
  • 16. Taille de l’élément ➢ Mais si l’élément importé est très petit ? Alexia Buclet
  • 17. Environnement ➢ Mais s’il y a un mur devant l’utilisateur ? Alexia Buclet
  • 18. Déplacement de l’utilisateur ➢ Mais si le chargement prend un peu de temps… et l’utilisateur se déplace ? Alexia Buclet
  • 19. Attention de l’utilisateur ➢ Mais si le chargement prend un peu de temps… et qu’il y a une erreur ? Alexia Buclet
  • 20. Exemples de problèmes concrets Alexia Buclet
  • 21. Pour vous aider ➢ Utilisez le monde physique pour concevoir le virtuel immersif : ➢ Concevez en immersion ➢ Faites des Proofs of Concept pour itérer facilement. Alexia Buclet Objets physiques Un mètre
  • 22. Les challenges des interfaces immersives Alexia Buclet
  • 23. ➢ Avec une dimension en plus et les appareils immersifs actuels arrive une multitude de nouveaux challenges à relever ! Alexia Buclet
  • 24. ➢ Ces challenges ne doivent pas se reporter sur l’utilisateur, mais sur l’équipe de conception/développement : ➢ Adaptez votre manière de penser et vos outils. ➢ Soyez attentifs aux choix pris dans les expériences que vous essayez. ➢ Apprenez des autres métiers déjà spécialisés en 3D. Alexia Buclet