Étude de cas-3 interface utilisateur HoloStudio et apprentissage de la conception d’interactionCase study - 3 HoloStudio UI and interaction design learnings

HoloStudio était l’une des premières applications Microsoft pour HoloLens.HoloStudio was one of the first Microsoft apps for HoloLens. Pour cette raison, nous avons dû créer de nouvelles pratiques pour l’interface utilisateur 3D et la conception d’interaction.Because of this, we had to create new best practices for 3D UI and interaction design. Nous l’avons fait à travers un grand nombre de tests utilisateur, de prototypages, d’essais et d’erreurs.We did this through a lot of user testing, prototyping, and trial and error.

Nous savons que tous les utilisateurs n’ont pas les ressources nécessaires pour effectuer ce type de recherche. nous avions donc notre concepteur SR. holographique, Marcus Ghaly, à partager trois choses que nous avons appris pendant le développement de HoloStudio sur l’interface utilisateur et la conception d’interaction pour les applications HoloLens.We know that not everyone has the resources at their disposal to do this type of research, so we had our Sr. Holographic Designer, Marcus Ghaly, share three things we learned during the development of HoloStudio about UI and interaction design for HoloLens apps.

Regarder la vidéoWatch the video

Problème #1 : les gens ne veulent pas se déplacer dans leurs créationsProblem #1: People didn't want to move around their creations

Nous avons initialement conçu le Workbench dans HoloStudio comme un rectangle, comme vous le feriez dans le monde réel.We originally designed the workbench in HoloStudio as a rectangle, much like you'd find in the real world. Le problème est que les gens ont une durée de vie qui leur demande de rester quand ils sont assis sur un bureau ou qu’ils travaillent devant un ordinateur, de sorte qu’ils ne se déplacent pas dans l’atelier et explorent leur création en 3D de tous les côtés.The problem is that people have a lifetime of experience that tells them to stay still when they're sitting at a desk or working in front of a computer, so they weren't moving around the workbench and exploring their 3D creation from all sides.

La conception rectangulaire du Workbench dans HoloStudio dissuaded les utilisateurs de se déplacer et de voir leurs créations de tous les côtés.

Nous avons eu l’idée de faire en sorte que le banc d’essai fasse l’aller de l’avant, ce qui signifie qu’il n’y avait pas de « front » ou d’endroit évident que vous étiez supposé reposer.We had the insight to make the workbench round, so that there was no "front" or clear place that you were supposed to stand. Lorsque nous avons testé cette solution, soudain, les utilisateurs ont commencé à se déplacer et à explorer leurs créations eux-mêmes.When we tested this, suddenly people started moving around and exploring their creations on their own.

La conception circulaire Workbench encourage les utilisateurs à se familiariser avec leurs créations.

Nos enseignementsWhat we learned

Réfléchissez toujours à ce qui est confortable pour l’utilisateur.Always be thinking about what's comfortable for the user. Tirer parti de leur espace physique est une fonctionnalité utile de HoloLens et un élément que vous ne pouvez pas faire avec d’autres appareils.Taking advantage of their physical space is a cool feature of HoloLens and something you can't do with other devices.

Problème #2 : les boîtes de dialogue modales sont parfois hors du frame holographiqueProblem #2: Modal dialogs are sometimes out of the holographic frame

Parfois, il se peut que votre utilisateur regarde dans une autre direction que celle qui nécessite une attention particulière dans votre application.Sometimes, your user may be looking in a different direction from something that needs their attention in your app. Sur un PC, vous pouvez simplement afficher une boîte de dialogue, mais si vous effectuez cette opération dans un environnement 3D, il peut sembler que la boîte de dialogue s’affiche.On a PC, you can just pop up a dialog, but if you do this in someone's face in a 3D environment, it can feel like the dialog is getting in their way. Vous en avez besoin pour lire le message, mais leur instinct est de tenter de s’en éloigner.You need them to read the message, but their instinct is to try to get away from it. Cette réaction est intéressante si vous jouez à un jeu, mais dans un outil conçu pour le travail, il est moins que parfait.This reaction is great if you're playing a game, but in a tool designed for work, it's less than ideal.

Après avoir essayé plusieurs choses, nous avons finalement décidé d’utiliser un système de « bulles de pensée » pour nos boîtes de dialogue et d’ajouter des tendrils que les utilisateurs peuvent suivre à l’endroit où leur attention est nécessaire dans notre application.After trying a few different things, we finally settled on using a "thought bubble" system for our dialogs and added tendrils that users can follow to where their attention is needed in our application. Nous avons également rendu l’impulsion tendrils, qui impliquait un sens de la direction afin que les utilisateurs connaissaient l’emplacement.We also made the tendrils pulse, which implied a sense of directionality so that users knew where to go.

Le système « bulle de pensée » comprenait des tendrilss d’impulsions qui offraient un sens de direction, les utilisateurs de premier plan à l’endroit où leur attention était nécessaire dans l’application.

Nos enseignementsWhat we learned

En 3D, il est beaucoup plus difficile d’alerter les utilisateurs en fonction de leurs besoins.It's much harder in 3D to alert users to things they need to pay attention to. L’utilisation de directeurs d’attention tels que le son spatial, les rayons de lumière ou les bulles de pensée peut amener les utilisateurs à l’endroit où ils doivent être.Using attention directors such as spatial sound, light rays, or thought bubbles, can lead users to where they need to be.

#3 du problème : parfois, l’interface utilisateur peut être bloquée par d’autres hologrammesProblem #3: Sometimes UI can get blocked by other holograms

Il peut arriver qu’un utilisateur souhaite interagir avec un hologramme et ses contrôles d’interface utilisateur associés, mais qu’il ne peut pas être affiché parce qu’un autre hologramme est devant eux.There are times when a user wants to interact with a hologram and its associated UI controls, but they are blocked from view because another hologram is in front of them. Pendant que nous développons HoloStudio, nous avons utilisé une version d’évaluation et une erreur pour résoudre ce problème.While we were developing HoloStudio, we used trial and error to come to a solution for this.

Un contrôle d’interface utilisateur associé à un hologramme peut être bloqué s’il y a un autre hologramme entre celui-ci et l’utilisateur qui a le port HoloLens.

Nous avons essayé de rapprocher le contrôle d’interface utilisateur de l’utilisateur afin qu’il n’ait pas pu être bloqué, mais il a été découvert qu’il n’était pas facile pour l’utilisateur d’examiner un contrôle qui était proche de vous en regardant simultanément un hologramme éloigné.We tried moving the UI control closer to the user so it couldn't get blocked, but found that it wasn't comfortable for the user to look at a control that was near to you while simultaneously looking at a hologram that was far away. Toutefois, si nous avons déplacé le contrôle devant l’hologramme le plus proche de l’utilisateur, il a pensé qu’il a été détaché de l’hologramme qu’il devrait affecter.If, however, we moved the control in front of the closest hologram to the user, they felt like it was detached from the hologram it should be affecting.

Nous avons finalement fini de dupliquer le contrôle de l’interface utilisateur et le placer à la même distance de l’utilisateur que l’hologramme auquel il est associé, de sorte qu’ils se sentent tous deux connectés.We finally ended up ghosting the UI control, and put it at the same distance from the user as the hologram it's associated with, so they both feel connected. Cela permet à l’utilisateur d’interagir avec le contrôle même s’il est masqué.This allows the user to interact with the control even though it's been obscured.

La solution : nous avons dupliqué le contrôle de l’interface utilisateur, qui permettait l’interaction avec le contrôle et a fait en sorte qu’il soit connecté à l’hologramme qu’il affectait.

Nos enseignementsWhat we learned

Les utilisateurs doivent être en mesure d’accéder facilement aux contrôles d’interface utilisateur même s’ils ont été bloqués. par conséquent, déterminez les méthodes permettant de s’assurer que les utilisateurs peuvent effectuer leurs tâches, quel que soit l’endroit où leurs hologrammes se trouvent dans le monde réel.Users need to be able to easily access UI controls even if they've been blocked, so figure out methods to ensure that users can complete their tasks no matter where their holograms are in the real world.

À propos de l’auteurAbout the author

Picture of Marcus Ghaly Marcus GhalyMarcus Ghaly
Concepteur de SR. holographique @MicrosoftSr. Holographic Designer @Microsoft

Voir aussiSee also