Explorer les interactions de l'interface utilisateur XR dans « Idea Engine »

Moteur d'idées vous permet de créer et de partager des expériences de réalité virtuelle et mixte. Construire un outil aussi polyvalent nécessite des interfaces utilisateur complexes. Dans cet article invité, le développeur Brett Jackson partage ses approches en matière d'interaction avec l'interface utilisateur.

Article invité de Brett Jackson

Brett Jackson développe des projets VR depuis 2015 et est le directeur de la nouvelle société basée au Royaume-Uni. X82 Ltée. Ses versions précédentes incluent : Dimensional (PC VR), Breath Tech (PC VR), Jigsaw 360 (PC VR et mobile VR) et 120 Hz (SideQuest).

Il est courant de présenter une interface utilisateur via des panneaux interactifs 2D dans XR. Ce n’est pas une perspective passionnante, mais c’est familier et efficace. Cependant, même si nous acceptons cette intrusion 2D dans nos mondes XR, il existe encore de nouvelles considérations et opportunités pour s’affranchir des paradigmes 2D.

Je me suis rapidement lassé des pointeurs laser qui exagéraient les mouvements de ma main sur des panneaux distants, ainsi que de leurs vecteurs cibles incohérents et de leur détection de pincement intermittente. Ma préférence est d'atteindre et d'interagir avec le monde. Je veux que le panneau soit juste devant moi pour pouvoir le positionner confortablement et l'utiliser comme un appareil du monde réel.

Mon dernier projet, Moteur d'idées, est développé en utilisant Kit stéréo, une bibliothèque open source OpenXR. Il a une philosophie axée sur les mains et fournit une prise en charge prête à l'emploi du suivi manuel ainsi qu'une prise en charge du contrôleur. Il permet la création efficace de fenêtres dynamiques avec des contrôles d'interface utilisateur typiques. C’est un excellent outil pour créer rapidement des projets XR et présente de nombreux autres avantages.

Panneaux

Mon point de départ est donc un panneau d'interface utilisateur que nous pouvons saisir à tout moment (pas de poignées ou de bords spéciaux à trouver) avec une belle aura affichée lorsque nous sommes à portée de saisie. Maintenant, ajoutons d'autres considérations XR.

Dans XR, il est facile pour un utilisateur de se retrouver derrière un panneau d’interface utilisateur. Plutôt que d'afficher un arrière vierge ou une interface utilisateur inversée, je retourne l'interface utilisateur du côté que l'utilisateur regarde, c'est simple. Cela semble trivial, mais cela vaut la peine d’envisager des scénarios spécifiques au XR. Une autre approche consiste à faire pivoter automatiquement le panneau pour qu'il soit constamment face au joueur, mais cela supprime le contrôle de l'utilisateur. S’ils veulent que le panneau soit placé sous un angle étrange, laissez-les faire, ils ont peut-être une bonne raison.

Un panneau individuel doit être limité à une petite taille (taille de la page / taille du moniteur) afin que l'utilisateur puisse facilement absorber le contenu sans avoir à tourner la tête, mais XR nous offre une abondance d'espace. J'aime rechercher des opportunités pour sortir des limites de la page. Mes zones de défilement ont une poignée pour saisir et déplacer le contenu. Lors de la saisie, vous voyez une vue considérablement élargie de la zone de contenu et vous pouvez glisser-déposer dans ce mode, offrant ainsi une plus grande plage de placement.

J'affiche des astuces sur le côté des panneaux, avec une ligne vers le composant d'interface utilisateur qu'ils décrivent. Cela réduit la quantité de texte sur le panneau. Les utilisateurs peuvent parcourir les astuces et masquer celles qu’ils connaissent.

Dans un autre projet, j'ai prototype un diagramme de Gantt 3D qui défilait horizontalement sur la page et s'estompait au loin. L’utilisateur se concentrait toujours sur le panneau central de taille normale, mais il pouvait éventuellement s’adapter au contexte plus large.

Bien que les panneaux soient pratiques et familiers, nous ne devrions pas nous sentir limités par leurs limites et il est amusant de chercher des moyens de s’en sortir.

menus

StereoKit m'a présenté le menu radial, que j'ai ensuite développé. J’aime cette idée car on l’utilise d’une seule main, donc c’est pratique, accessible. Je rends le même système de menus disponible à droite et à gauche et j'utilise la même approche pour les menus contextuels sur les panneaux par souci de cohérence.

Mon menu volumétrique va encore plus loin et a été motivé uniquement par le désir d’utiliser cette 3ème dimension. Je l'utilise pour sélectionner des destinations de téléportation (avec un pointeur vers chaque destination) et pour sélectionner les nœuds proches à modifier. Je l'utilise également pour la saisie au clavier lors de la navigation dans les adresses métaverse. C'est assez expérimental. Il présente l'avantage que tous les symboles sont à égale distance du centre et que vous voyez votre saisie sans avoir à détourner le regard (un problème courant avec les claviers virtuels). L’inconvénient est qu’il n’est pas familier aux utilisateurs, je m’attends donc à une certaine résistance. Remarquez dans la vidéo que les lettres s'éloignent en spirale d'avant en arrière par ordre alphabétique, donc dans peu de temps, leur position devrait devenir familière.

Vous pourrez bientôt ajouter des menus comme ceux-ci à vos propres projets Idea Engine.

Widgets 3D

Un sélecteur de couleurs offrait une opportunité idéale d'expérimenter, avec trois valeurs (teinte, saturation et valeur) pouvant être mappées sur 3 dimensions. Dans mon sélecteur de couleurs 3D, vous pouvez modifier les trois valeurs à la fois ou définir individuellement la teinte, la saturation ou la valeur. Je pense qu'il est plus intéressant d'interagir avec les curseurs d'une page 2D.

De même pour la locomotion, je souhaite me déplacer en 3D, j'ai donc créé un joystick 3D pour un mouvement fluide suivi à la main. Faites simplement glisser la sphère dans la direction dans laquelle vous souhaitez voyager et faites rouler votre poignet pour une rotation rapide ou fluide. Il fonctionne en mode marche ou vol et la rotation peut être désactivée si l'utilisateur trouve trop difficile de penser à tout en un. Je prends toujours en charge les mouvements traditionnels basés sur un contrôleur, mais cette commande à une seule main duplique la fonctionnalité de plusieurs joysticks/boutons et constitue un exemple intéressant de la façon dont le mouvement de la main en 3D peut répondre aux exigences de nouvelles manières.

Mains

Dans tous mes exemples de vidéos, vous verrez que je cache la main de l'utilisateur dès qu'il commence à interagir avec l'interface utilisateur. De nombreux développeurs investissent des efforts pour créer soigneusement des poses de saisie à des fins différentes, et cela semble intéressant, mais pour moi, une main bien posée qui ne reflète pas la position de ma propre main est plus distrayante que pas de main du tout. Une main peut également constituer une obstruction visuelle une fois l’interaction commencée.

Une fois la main disparue, je suis également libre d’atténuer ou d’exagérer le mouvement de la main sans aucun conflit visuel. J'amortis le mouvement de la main dans le sélecteur de couleurs pour réduire la sensibilité et exagérer le mouvement de la main lors du défilement lorsqu'il y a beaucoup de contenu.

Texte

Bien qu'Idea Engine prenne en charge Sketchfab pour télécharger des modèles 3D, l'IA pour générer des images et l'importation de photos/audio, il est difficile de battre la facilité et l'accessibilité du texte et de la parole pour transmettre des récits complexes. Dans cet esprit, j'avais besoin d'un support décent pour le texte afin que les utilisateurs puissent fusionner tous les formats disponibles pour raconter leurs histoires.

Le texte n’a généralement pas fière allure en VR, donc je l’efface lorsque vous vous éloignez pour supprimer les artefacts disgracieux et fermer également les panneaux de texte. Les utilisateurs auront envie d'explorer l'environnement plutôt que de lire du texte. J'ai donc la possibilité de demander à un narrateur de lire automatiquement tout bloc de texte que vous rencontrez.

La saisie de texte était un défi sans une excellente solution. J'ai créé une saisie de texte de style mobile avec prise en charge du copier-coller et de la pagination automatique à l'aide d'un clavier virtuel. Quand j’ai fini, j’ai pensé, c’est OK, mais je ne voudrais pas taper un long passage en XR. Ensuite, j'ai ajouté la prise en charge de la voix en texte. Cela m’a aidé, mais j’ai découvert que j’avais besoin de faire beaucoup de retouches après ma dictée et que c’était encore plus lent que d’utiliser des moyens traditionnels. Je permets désormais aux utilisateurs de se connecter à leur casque depuis un navigateur sur n'importe quel appareil qu'ils possèdent et d'importer du texte via une page Web. J'utilise régulièrement les trois techniques, le navigateur étant utilisé pour la saisie de textes longs.

Ma leçon ici était qu’il n’est pas toujours nécessaire de tout résoudre en XR. Il est parfois préférable d’utiliser des appareils plus adaptés puis d’importer les résultats.

Essaye le

Des cartes mentales éducatives aux histoires et jeux interactifs, vous pouvez exploiter les ressources CC et importer vos propres photos, sons et textes pour construire votre idée. Ensuite, donnez-lui vie en ajoutant des états, des événements et des scripts de haut niveau et partagez-le sur notre métaverse X82. Un outil utilisateur final riche en fonctionnalités pour explorer les possibilités de XR.

La l'alpha publique est maintenant disponible et téléchargeable gratuitement sur App Lab, afin que vous puissiez venir essayer toutes les fonctionnalités évoquées et me faire part de vos commentaires.

• Contenu propulsé par le référencement et distribution de relations publiques. Soyez amplifié aujourd'hui.
• PlatoData.Network Ai générative verticale. Autonomisez-vous. Accéder ici.
• PlatoAiStream. Intelligence Web3. Connaissance Amplifiée. Accéder ici.
• PlatonESG. Carbone, Technologie propre, Énergie, Environnement, Solaire, La gestion des déchets. Accéder ici.
• PlatoHealth. Veille biotechnologique et essais cliniques. Accéder ici.
• La source: https://www.roadtovr.com/xr-interface-interactions-idea-engine-brett-jackson/