Fallstudie-3 holostudio UI und Interaktionen Design ErkenntnisseCase study - 3 HoloStudio UI and interaction design learnings

Holostudio war eine der ersten Microsoft-Apps für hololens.HoloStudio was one of the first Microsoft apps for HoloLens. Aus diesem Grund mussten wir neue bewährte Methoden für die 3D-Benutzeroberfläche und den Interaktions Entwurf erstellen.Because of this, we had to create new best practices for 3D UI and interaction design. Wir haben dies durch eine Vielzahl von Benutzer Tests, Prototypen und Test-und Fehler Tests durchgeführt.We did this through a lot of user testing, prototyping, and trial and error.

Wir wissen, dass nicht jeder Benutzer über die zur Verfügung stehenden Ressourcen verfügt, um diese Art von Untersuchungen durchzuführen. daher hatten wir unseren SR. Holographic Designer, Marcus Ghaly, drei Dinge, die wir bei der Entwicklung von holostudio kennengelernt haben, über UI-und Interaktions Entwürfe für hololens-apps.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.

Video ansehenWatch the video

Problem #1: Personen wollten sich nicht um ihre Schöpfungen bewegen.Problem #1: People didn't want to move around their creations

Wir haben die Workbench ursprünglich in holostudio als Rechteck entworfen, ähnlich wie Sie es in der realen Welt finden.We originally designed the workbench in HoloStudio as a rectangle, much like you'd find in the real world. Das Problem besteht darin, dass die Benutzer über die Lebensdauer einer Erfahrung verfügen, die Sie darüber informiert, dass Sie immer noch unterwegs sind, wenn Sie sich an einem Computer befinden oder vor einem Computer arbeiten, sodass Sie nicht in der Workbench unterwegs waren und Ihre 3D-Erstellung auf allen Seiten untersucht.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.

Der rechteckige Entwurf der Workbench in holostudio hat Benutzern den Umstieg auf die Entwicklung von allen Seiten durchgeführt.

Wir hatten die Einblicke, um die Workbench zu runden, sodass es keine "Front"-oder Clear-Position gab, die Sie positionieren sollten.We had the insight to make the workbench round, so that there was no "front" or clear place that you were supposed to stand. Als wir dies getestet haben, begannen plötzlich Benutzer, ihre eigenen Schöpfungen zu erkunden.When we tested this, suddenly people started moving around and exploring their creations on their own.

Der zirkuläre Workbench-Entwurf hat die Benutzer dazu ermutigt, sich ganz auf ihre Schöpfungen zu bewegen.

Was wir gelernt habenWhat we learned

Denken Sie immer daran, was für den Benutzer von Bedeutung ist.Always be thinking about what's comfortable for the user. Der physische Speicherplatz zu nutzen, ist ein interessantes Feature von hololens und etwas, das Sie mit anderen Geräten nicht erledigen können.Taking advantage of their physical space is a cool feature of HoloLens and something you can't do with other devices.

Problem #2: Modale Dialoge sind manchmal aus dem Holographic-Frame heraus.Problem #2: Modal dialogs are sometimes out of the holographic frame

Manchmal kann der Benutzer in einer anderen Richtung als etwas sehen, das seine Aufmerksamkeit in Ihrer APP benötigt.Sometimes, your user may be looking in a different direction from something that needs their attention in your app. Auf einem PC können Sie einfach ein Dialogfeld einklappen, aber wenn Sie dies in einer 3D-Umgebung auf einem anderen Element tun, kann es so aussehen, als ob das Dialogfeld in den Weg kommt.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. Sie benötigen Sie, um die Nachricht zu lesen, aber Ihr Instinkt besteht darin, die Nachricht zu erhalten.You need them to read the message, but their instinct is to try to get away from it. Diese Reaktion ist großartig, wenn Sie ein Spiel spielen, aber in einem Tool, das für die Arbeit entwickelt wurde, ist es weniger als ideal.This reaction is great if you're playing a game, but in a tool designed for work, it's less than ideal.

Nachdem wir einige unterschiedliche Dinge ausprobiert haben, haben wir uns schließlich mit der Verwendung eines "gedankenblasen"-Systems für unsere Dialoge und der hinzugefügten tendrils befasst, die Benutzer nachvollziehen können, wo Ihre Aufmerksamkeit in unserer Anwendung benötigt wird.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. Wir haben auch den "tendrils"-Impuls erstellt, der einen Sinn der Direktionalität impliziert, damit die Benutzer wissen, wo Sie unterwegs sind.We also made the tendrils pulse, which implied a sense of directionality so that users knew where to go.

Das System "Thought Blase" enthielt pulsierender-tendrils, das eine Vorstellung von Richtung bot, sodass Benutzer in der APP an der Stelle waren, an der Ihre Aufmerksamkeit notwendig war.

Was wir gelernt habenWhat we learned

Es ist in 3D viel schwieriger, Benutzer an Dinge zu warnen, auf die Sie achten müssen.It's much harder in 3D to alert users to things they need to pay attention to. Mithilfe von Aufmerksamkeits Leitern, wie z. b. räumlichem Sound, Lichtstrahlen oder gedankenblasen, können Benutzer dazu führen, wo Sie sich befinden müssen.Using attention directors such as spatial sound, light rays, or thought bubbles, can lead users to where they need to be.

Problem #3: Manchmal kann die Benutzeroberfläche durch andere Hologramme blockiert werden.Problem #3: Sometimes UI can get blocked by other holograms

Es gibt Zeiten, in denen ein Benutzer mit einem – Hologramm und den zugehörigen UI-Steuerelementen interagieren möchte, die jedoch nicht in der Ansicht angezeigt werden, da ein anderes – Hologramm vorhanden ist.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. Während der Entwicklung von holostudio haben wir Test-und Fehlerinformationen verwendet, um zu einer Lösung zu gelangen.While we were developing HoloStudio, we used trial and error to come to a solution for this.

Ein UI-Steuerelement, das einem – Hologramm zugeordnet ist, kann blockiert werden, wenn zwischen dem Benutzer und dem Benutzer hololens ein anderes – Hologramm vorhanden ist.

Wir haben versucht, das UI-Steuerelement näher an den Benutzer zu verschieben, sodass es nicht blockiert werden konnte, aber es war nicht gut, dass der Benutzer sich ein Steuerelement ansehen konnte, das sich in Ihrer Nähe befand, gleichzeitig ein – Hologramm, das weit entfernt war.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. Wenn wir jedoch das Steuerelement vor dem nächstgelegenen – Hologramm an den Benutzer verschoben haben, haben Sie das Gefühl, dass es von dem – Hologramm getrennt wurde, das beeinträchtigt werden sollte.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.

Schließlich haben wir das UI-Steuerelement in die gleiche Entfernung versetzt wie das – Hologramm, dem es zugeordnet ist, sodass beide miteinander verbunden sind.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. Dies ermöglicht es dem Benutzer, mit dem Steuerelement zu interagieren, auch wenn es verdeckt ist.This allows the user to interact with the control even though it's been obscured.

Die Lösung: Wir haben das UI-Steuerelement gehosttet, das sowohl eine Interaktion mit dem Steuerelement ermöglichte als auch eine Verbindung mit dem – Hologramm hergestellt hat, das es beeinflusst hat.

Was wir gelernt habenWhat we learned

Benutzer müssen problemlos auf UI-Steuerelemente zugreifen können, selbst wenn Sie blockiert wurden. Daher sollten Sie Methoden ermitteln, um sicherzustellen, dass Benutzer ihre Aufgaben unabhängig davon, wo sich Ihre Hologramme in der realen Welt befinden, ausführen können.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.

Zum AutorAbout the author

Picture of Marcus Ghaly Marcus GhalyMarcus Ghaly
SR. Holographic-Designer @MicrosoftSr. Holographic Designer @Microsoft

Weitere InformationenSee also