Estudo de caso-3 HoloStudio de interface do usuário e de design de interaçãoCase study - 3 HoloStudio UI and interaction design learnings

HoloStudio foi um dos primeiros aplicativos da Microsoft para o HoloLens.HoloStudio was one of the first Microsoft apps for HoloLens. Por isso, tivemos que criar novas práticas recomendadas para a interface do usuário 3D e o design de interação.Because of this, we had to create new best practices for 3D UI and interaction design. Fizemos isso por vários testes de usuário, protótipos e avaliação e erro.We did this through a lot of user testing, prototyping, and trial and error.

Sabemos que nem todos têm os recursos em sua disposição para fazer esse tipo de pesquisa, então tivemos nosso designer Sr. Holographic, Marcus Ghaly, compartilhamos três coisas que aprendemos durante o desenvolvimento de HoloStudio sobre o design de interação e a interface do usuário para aplicativos do 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.

Assista ao vídeoWatch the video

Problema #1: as pessoas não queriam se mover em suas criaçõesProblem #1: People didn't want to move around their creations

Originalmente, criamos o Workbench em HoloStudio como um retângulo, assim como você encontraria no mundo real.We originally designed the workbench in HoloStudio as a rectangle, much like you'd find in the real world. O problema é que as pessoas têm um tempo de vida de experiência que os instrui a permanecer ainda quando estiverem sentado em uma mesa ou trabalhando na frente de um computador, de modo que não se estivessem passando pelo Workbench e explorando a criação de 3D de todos os lados.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.

O design retangular do Workbench em HoloStudio dissuaded os usuários de se movimentar e ver suas criações de todos os lados.

Tivemos a percepção de fazer o Workbench ser arredondado, de forma que não houvesse nenhuma "frente" ou claro que você deveria parar.We had the insight to make the workbench round, so that there was no "front" or clear place that you were supposed to stand. Quando testamos isso, as pessoas repentinamente começaram a percorrer e explorar suas próprias criações por conta própria.When we tested this, suddenly people started moving around and exploring their creations on their own.

O design do Workbench circular incentiva os usuários a percorrer o caminho em relação às suas criações.

O que aprendemosWhat we learned

Sempre esteja pensando sobre o que é confortável para o usuário.Always be thinking about what's comfortable for the user. Tirar proveito do espaço físico é um recurso interessante do HoloLens e algo que você não pode fazer com outros dispositivos.Taking advantage of their physical space is a cool feature of HoloLens and something you can't do with other devices.

Problema #2: caixas de diálogo modais às vezes estão fora do quadro HolographicProblem #2: Modal dialogs are sometimes out of the holographic frame

Às vezes, o usuário pode estar olhando em uma direção diferente de algo que precisa de sua atenção em seu aplicativo.Sometimes, your user may be looking in a different direction from something that needs their attention in your app. Em um PC, você pode simplesmente exibir uma caixa de diálogo, mas se fizer isso na face de alguém em um ambiente 3D, pode parecer que a caixa de diálogo está ficando de seu jeito.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. Você precisa deles para ler a mensagem, mas seu instinto é tentar sair dela.You need them to read the message, but their instinct is to try to get away from it. Essa reação será excelente se você estiver jogando um jogo, mas em uma ferramenta projetada para o trabalho, será menos do que o ideal.This reaction is great if you're playing a game, but in a tool designed for work, it's less than ideal.

Depois de experimentar algumas coisas diferentes, finalmente temos liquidado o uso de um sistema de "bolha pensada" para nossas caixas de diálogo e adicionamos tendrils que os usuários podem seguir para onde a atenção é necessária em nosso aplicativo.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. Também fizemos o pulso tendrils, que implícita uma noção de direcionalidade para que os usuários soubessem aonde ir.We also made the tendrils pulse, which implied a sense of directionality so that users knew where to go.

O sistema de "bolha pensada" incluiu Pulsing tendrils que fornecia uma noção de direção, levando os usuários a onde sua atenção era necessária no aplicativo.

O que aprendemosWhat we learned

É muito mais difícil em 3D alertar os usuários sobre as coisas de que precisam para prestar atenção.It's much harder in 3D to alert users to things they need to pay attention to. O uso de diretores de atenção, como som espacial, raios leves ou bolhas de pensamento, pode levar os usuários a onde precisam.Using attention directors such as spatial sound, light rays, or thought bubbles, can lead users to where they need to be.

Problema #3: às vezes a interface do usuário pode ser bloqueada por outros hologramasProblem #3: Sometimes UI can get blocked by other holograms

Há ocasiões em que um usuário deseja interagir com um holograma e seus controles de interface do usuário associados, mas eles são bloqueados da exibição porque outro holograma está na frente deles.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. Enquanto estávamos desenvolvendo o HoloStudio, usamos a avaliação e o erro para chegar a uma solução para isso.While we were developing HoloStudio, we used trial and error to come to a solution for this.

Um controle de interface do usuário associado a um holograma pode se tornar bloqueado se houver outro holograma entre ele e o usuário com o HoloLens.

Tentamos mover o controle da interface do usuário para mais perto de quando ele não podia ser bloqueado, mas descobriu que não era confortável que o usuário examinasse um controle que estava perto de você ao olhar simultaneamente um holograma que estava muito distante.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. No entanto, se movermos o controle na frente do holograma mais próximo para o usuário, eles acharam que ele foi desanexado do holograma que deveria estar afetando.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.

Finalmente acabamos de duplicar o controle de interface do usuário e colocá-lo com a mesma distância de um User como o holograma ao qual ele está associado, para que ambos se sintam conectados.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. Isso permite que o usuário interaja com o controle, mesmo que ele tenha sido obscurecido.This allows the user to interact with the control even though it's been obscured.

A solução: fantasmas o controle da interface do usuário, que permitia a interação com o controle e o fizemos conectado ao holograma que estava afetando.

O que aprendemosWhat we learned

Os usuários precisam ser capazes de acessar facilmente os controles da interface do usuário, mesmo que tenham sido bloqueados; portanto, descubra métodos para garantir que os usuários possam concluir suas tarefas, independentemente de onde estão os hologramas no mundo real.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.

Sobre o autorAbout the author

Picture of Marcus Ghaly Marcus GhalyMarcus Ghaly
Designer do Sr. Holographic @MicrosoftSr. Holographic Designer @Microsoft

Consulte tambémSee also