VRUI – 5 Conseils pour Designer votre Interface Utilisateur en Réalité Virtuelle

Le futur du réseau social sera en réalité virtuelle, cela ne fait aucun. Mais on n’y est pas encore. Il faudra quelques mois voire quelques années pour que le grand public s’équipe de casques de réalité virtuelle, ce qui nous laisse encore un peu de marge pour switcher Beloola du Web 3D au Web VR (d’ailleurs on fait déjà quelques trucs pas trop mal en Web VR !).

Voici ce qui s’est passé il y a quelques mois. Beloola est une plateforme qui permet aux utilisateurs partageant des passions communes de vivre une expérience sociale et de contenus unique au sein d’un univers immersif. Parce que la plateforme est en WebGL, elle est accessible sans aucun téléchargement sur n’importe quel navigateur destkop ou mobile. Pourquoi ne pas faire le portage de la plateforme en Réalité Virtuelle ? HEY mais attendez, si c’est du WebGL, est-ce que ça signifie que Beloola peut déjà marcher en réalité virtuelle sur un navigateur compatible avec la VR?!

On a donc essayé Beloola dans le navigateur Chromium (le browser expérimental de Google Chrome) avec l’Oculus Rift et ça a marché instantanément. Du coup on s’est dit « OK : on va faire ce truc Web VR, à 100% ». En tant que Lead UX / UI Designer de Beloola, mon challenge était de travailler sur le design et la conceptualisation d’une nouvelle interface et expérience utilisateur dédiée à la réalité virtuelle, qui serait évidemment totalement différente de la version desktop ou mobile. Puisque la VR (et tout particulièrement la Web VR) sont des disciplines très récentes, il existe peu de travaux consacrés à la « VRUI » pour les plateformes sociales et c’est pour cela que je souhaitais partager mon travail avec la communauté.

1. Envisager de nouveaux champs textes

VRUI New Inputs

Les casques de VR transforment la façon dont êtres humains et machine interagissent. Ils mobilisent 100% de nos sens visuels et auditifs afin de nous plonger en totale immersion dans un nouvel environnement virtuel. Une bonne UX en VR se doit d’être basée sur les mouvements et intuitions du corps humain : mouvements de la tête, nos oreilles… En d’autres termes, une bonne VRUX nécessite des champs textes disruptifs. On va déjà commencer par se débarrasser du clavier 😉

Comment un utilisateur peut-il taper des mots-clés dans une barre de recherche ou participer à une conversation en chat s’il a déjà un casque sur la tête ? Et quelles sont les alternatives aux claviers physiques et virtuels ? Nous devons envisager d’autres inputs proposés par les casques de VR : un chat vocal plutôt qu’un chat clavier ?

La fatigue physique est également un facteur à prendre en considération. En VR, les mouvements de tête sont certes plus naturels mais également plus éprouvants pour l’utilisateur. Il faut donc optimiser la VRUI : on peut suggérer à l’utilisateur d’explorer une galeries d’images sur un axe horizontal plutôt que vertical pour éviter les torticolis.

Il existe déjà pas mal de casques de VR disponibles pour les développeurs et chaque constructeur propose ses propres contrôleurs, ce qui peut parfois rendre très difficile l’uniformisation de la VRUI / VRUX pour tous les devices mis à disposition. Chez Beloola, nous avons la chance de tester différents appareils de façon régulière, et nous sommes convaincus qu’il s’agit de la meilleure démarche pour mieux appréhender les usages, les avantages et les contraintes de chaque device et ainsi proposer une VRUI & VRUX optimisée.

2. Design Simple et Interfaces Pertinentes

Simple and Relevant Interfaces

La taille limitée des champs de vision en réalité virtuelle constitue une contrainte majeure. L’oeil humain est limité à un champ de vision à 30°. Au-delà, nous ne distinguons que des formes floues. De plus, interagir avec une UI peut s’avérer fastifieux lorsque l’on utilise un réticule. La vision est moins précise comparée à une souris ou à un touch screen, et il faut un minimum de maîtrise pour viser un élément à l’aide de ses yeux.

Il faut donc simplifier et ordonnancer l’UI : les CTAs doivent être plus grands et il faut prioriser les fonctionnalités afin de proposer une interface plus épurée.

Cette démarche peut également être enrichissante pour l’UI desktop ainsi que l’UI mobile : simplifier et ordonnancer un produit est toujours positif en termes d’expérience utilisateur.

3. Créer des interfaces narratives

Diegetic Interfaces

Les casques de VR offrent un champ de vision intégral et sans limite, ce qui change radicalement de l’expérience proposée sur desktop ou mobile. La VR ne possède pas de frontières, l’utilisateur est immergé au coeur de l’environnement virtuel et cela a forcément des conséquences sur le design de la VRUI.

Il est préférable d’opter pour un design « narratif ». Une UI « narrative » est une UI contextualisée dans la réalité du produit. Je vous conseille fortement de regarder la conférence Designing UI For VR: Develop 2015 de Dan Gilmore du Atom Hawk studio pour plus d’informations sur ce concept.

Les interfaces narratives sont très atypiques dans le mondes virtuels, elles sont généralement desginées sur les extrémités de l’écran afin de proposer des éléments d’informations additionnels. Le device influe évidemment sur la forme du contenu.

La logique diffère en ce qui concerne la réalité virtuelle. Il est préférable d’appréhender le monde virtuel qui nous entoure et lier l’interaction et ses interfaces à ce monde virtuel : les fonctionnalités de chat devraient être intégrées au monde virtuel plutôt qu’intégrées au sein d’une interface isolée. C’est le même principe pour les fonctionnalités sociales.

4. L’interface doit être facile d’utilisation

VRUI must be easy

Les utilisateurs de Beloola sont en mouvement permanent au sein de l’environnement virtuel : ils peuvent se déplacer avec leur avatar, changer d’angle de vue… ce qui signifie qu’il est encore plus compliqué de fixer certains éléments essentiels d’une interface tels qu’un menu.

L’usage classique sur desktop ou mobile consiste à ferrer le menu en haut ou en bas de l’écran. Et en réalité virtuelle ?

Il faut inventer de nouvelles règles. Il est possible de s’inspirer des données comportementales de nos utilisateurs telles que leur position au sein de l’espace ou leur angle de vue plutôt que de raisonner en termes de contrôleurs et d’appareils.

Sur Beloola, nous travaillons actuellement sur un menu facile d’accès et quelle que soit la position ou l’angle de vue de l’utilisateur. Les utilisateurs peuvent regarder vers le bas pour accéder aux principales fonctionnalités. Ce menu est toujours fixé à l’axe du champ du vision de l’utilisateur et est toujours situé à la même hauteur. Les utilisateurs peuvent accéder à ce menu facilement quel que soit leur positionnement et quelle que soit la hauteur du champ de vision tant qu’aucun élément virtuel ne vienne obstruer l’expérience.

LeCardboard Design Lab propose d’intéressantes pistes de réflexion en termes de design en VR et je vous recommande fortement d’y jeter un oeil.

5. Toujours tester votre design

Always Test Your Design

Concevoir et tester une VRUI sont deux choses très différentes. Les outils de création d’UI sont pour le moment quasi-exclusifs au desktop. Lorsqu’il s’agit de créer des interfaces VR, nous essayons de reproduire les mêmes perspectives, angles de vue et rendus immersifs. Cependant, cette démarche est forcément biaisée par la nature-même du desktop.

Les designers doivent toujours tester leur UI directement sur un casque de réalité virtuelle pour s’assurer que le rendu réel est similaire au rendu perçu sur desktop. Le Quick VR Mockup créé par Josh Carpenter de Mozilla est un outil incroyable que j’ai personnellement utilisé dès mes premiers pas dans la conceptualisation de l’interface VRUI de Beloola. Il ‘agit d’une scène en 3D avec un cylindre vide entourant l’utilisateurs et sur lequel des mockups 2D peuvent être appliqués.

Il est rapide et facile de tester son design au sein d’un espace 3d tout en tenant compte des contraintes d’un casque de VR sans développement additionnel requis. L’étape la plus importante est de valider les bonnes intentions et de se débarrasser des fausses pistes et mauvais concepts afin de débuter le développement d’un premier prototype.

Conclusion

Voici mon premier feedback en termes de création de VRUI pour Beloola. J’espère que mon travail vous sera utile. J’essayerai de publier d’autres articles régulièrement avec l’équipe à propos de ce travail. En attendant, je vous conseille vivement de vous abreuver de ces quelques références ci-dessous :

Post originel par Vincent Munoz sur Medium

One thought on “VRUI – 5 Conseils pour Designer votre Interface Utilisateur en Réalité Virtuelle

  1. […] nous sommes appuyés sur les travaux de notre UI/UX Designer Vincent publiés sur notre blog il y a quelques mois et avons commencé à développer notre propre interface utilisateur en réalité virtuelle pour […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>