Estudo de caso – meu primeiro ano na equipe de design do HoloLensCase study - My first year on the HoloLens design team

Minha jornada de um Flatland 2D para o mundo 3D começou quando ingressei na equipe de design do HoloLens em janeiro de 2016.My journey from a 2D flatland to the 3D world started when I joined the HoloLens design team in January, 2016. Antes de ingressar na equipe, eu tinha muito pouca experiência no design 3D.Before joining the team, I had very little experience in 3D design. Era como o chinês provérbio sobre uma jornada de milhares de milhas que começa com uma única etapa, exceto no meu caso, a primeira etapa era um salto!It was like the Chinese proverb about a journey of a thousand miles beginning with a single step, except in my case that first step was a leap!

Levando o salto de 2D para 3DTaking the Leap from 2D to 3D
Levando o salto de 2D para 3DTaking the leap from 2D to 3D

"Pensei que, embora eu tenha colocado na estação do driver sem saber como dirigir o carro. Fiquei sobrecarregado e medo, mas muito focado. "“I felt as though I had jumped into the driver’s seat without knowing how to drive the car. I was overwhelmed and scared, yet very focused.”
— Hae Jin Lee— Hae Jin Lee

Durante o ano passado, eu escolhi habilidades e conhecimento o mais rápido possível, mas ainda tenho muito o que aprender.During the past year, I picked up skills and knowledge as fast as I could, but I still have a lot to learn. Aqui, escrevi quatro observações com um tutorial em vídeo documentando minha transição de um designer de interação 2D para 3D.Here, I’ve written up 4 observations with a video tutorial documenting my transition from a 2D to 3D interaction designer. Espero que minha experiência inspirará outros designers para levar o salto para o 3D.I hope my experience will inspire other designers to take the leap to 3D.

Quadro de boa-adeus.Good-bye frame. Saudação da interface espacial/diegeticHello spatial / diegetic UI

Sempre que projetei cartazes, revistas, sites ou telas de aplicativos, um quadro definido (geralmente um retângulo) era uma constante para cada problema.Whenever I designed posters, magazines, websites, or app screens, a defined frame (usually a rectangle) was a constant for every problem. A menos que você esteja lendo esta postagem em um HoloLens ou outro dispositivo VR, você está olhando para isso na tela externa por meio de 2D protegida com segurança dentro de um quadro.Unless you are reading this post in a HoloLens or other VR device, you are looking at this from the outside through 2D screen safely guarded within a frame. O conteúdo é externo a você.Content is external to you. No entanto, o headset da realidade misturada elimina o quadro , portanto, você está dentro do espaço de conteúdo, examinando e percorrendo o conteúdo de dentro para fora.However, Mixed Reality headset eliminates the frame , so you are within the content space, looking and walking through the content from inside-out.

Entendi isso conceitualmente, mas no início eu fiz o erro de simplesmente transferir o raciocínio 2D para o espaço 3D.I understood this conceptually, but in the beginning I made the mistake of simply transferring 2D thinking into 3D space. Isso obviamente não funcionou bem porque o espaço 3D tem suas próprias propriedades exclusivas, como uma alteração de exibição (com base no movimento do cabeçalho do usuário) e um requisito diferente para o conforto do usuário (com base nas propriedades dos dispositivos e nos seres humanos que os utilizam).That obviously didn’t work well because 3D space has its own unique properties such as a view change (based on user’s head movement) and different requirement for user comfort (based on the properties of the devices and the humans using them). Por exemplo, em um espaço de design de interface do usuário 2D, bloquear elementos da interface do usuário no canto de uma tela é um padrão muito comum, mas essa interface do usuário do estilo HUD (exibição de rumo) não se sente natural em experiências com o Sr/VR; Ele impede o imersão do usuário no espaço e faz discomfort do usuário.For example, in a 2D UI design space, locking UI elements into the corner of a screen is a very common pattern, but this HUD (Head Up Display) style UI does not feel natural in MR/VR experiences; it hinders user’s immersion into the space and causes user discomfort. É como ter uma partícula de poeira incômodo nos óculos dos quais você está curioso de se livrar.It’s like having an annoying dust particle on your glasses that you are dying to get rid of. Ao longo do tempo, aprendi que parece mais natural posicionar o conteúdo em espaço 3D e adicionar comportamento de corpo bloqueado que faz com que o conteúdo acompanhe o usuário em uma distância fixa relativa.Over time, I learned that it feels more natural to position content in 3D space and add body-locked behavior that makes the content follow the user at a relative fixed distance.

Corpo-bloqueadoBody-locked
Corpo-bloqueadoBody-locked


Protegido pelo mundoWorld-locked
Protegido pelo mundoWorld-locked

Fragmentos: um exemplo de grande interface do usuário do DiegeticFragments: An example of great Diegetic UI

Fragmentos, um thriller de crime de primeira pessoa desenvolvido pelo Asobo Studio para o HoloLens demonstra uma excelente interface do usuário Diegetic.Fragments, a first-person crime thriller developed by Asobo Studio for HoloLens demonstrates a great Diegetic UI. Neste jogo, o usuário se torna um caractere principal, uma detecção que tenta resolver um mistério.In this game, the user becomes a main character, a detective who tries to solve a mystery. As pistas dinâmicas para resolver esse mistério são espalhadas na sala física do usuário e geralmente são os horários inseridos dentro de um objeto fictício, e não os existentes por conta própria.The pivotal clues to solve this mystery get sprinkled in the user’s physical room and are often times embedded inside a fictional object rather than existing on their own. Essa interface do usuário do diegetic tende a ser menos detectável do que a interface do usuário bloqueada pelo corpo, portanto, a equipe do Asobo usava com muita atenção muitos indícios, incluindo a direção dos caracteres virtuais ' olhar, som, luz e guias (por exemplo, seta apontando o local da pista) para obter a atenção do usuário.This diegetic UI tends to be less discoverable than body-locked UI, so the Asobo team cleverly used many cues including virtual characters’ gaze direction, sound, light, and guides (e.g., arrow pointing the location of the clue) to grab user’s attention.

Fragmentos-exemplos da interface do usuário do DiegeticFragments - Diegetic UI examples
Fragmentos-exemplos da interface do usuário do DiegeticFragments - Diegetic UI examples

Observações sobre a interface do usuário do amdiegeticObservations about diegetic UI

A interface do usuário espacial (de corpo bloqueado e de bloqueio mundial) e a interface do usuário do diegetic têm seus próprios pontos fortes e fracos.Spatial UI (both body-locked and world-locked) and diegetic UI have their own strengths and weaknesses. Recomendo que os designers experimentem tantos aplicativos MR/VR quanto possível e desenvolvam sua própria compreensão e Sensibility para vários métodos de posicionamento da interface do usuário.I encourage designers to try out as many MR/VR apps as possible, and to develop their own understanding and sensibility for various UI positioning methods.

O retorno da interação esqueumorfismo e mágicoThe return of skeuomorphism and magical interaction

Esqueumorfismo, uma interface digital que imita a forma dos objetos do mundo real é "não legal" nos últimos 5 a 7 anos no setor de design.Skeuomorphism, a digital interface that mimics the shape of real world objects has been “uncool” for the last 5–7 years in the design industry. Quando a Apple finalmente deu o caminho para o design simples no iOS 7, parecia que Esqueumorfismo estava finalmente inoperante como uma metodologia de design de interface.When Apple finally gave way to flat design in iOS 7, it seemed like Skeuomorphism was finally dead as an interface design methodology. Mas, em seguida, um novo Headset médio, Sr/VR chegou ao mercado e parece que Esqueumorfismo retornou novamente.But then, a new medium, MR/VR headset arrived to the market and it seems like Skeuomorphism returned again. : ): )

Simulador de trabalho: um exemplo de design skeuomorphic VRJob Simulator: An example of skeuomorphic VR design

O simulador de trabalho, um jogo estranho desenvolvido pelo Owlchemy Labs , é um dos exemplos mais populares para o design do skeuomorphic VR.Job Simulator, a whimsical game developed by Owlchemy Labs is one of the most popular example for skeuomorphic VR design. Nesse jogo, os jogadores são transportados para o futuro, onde os robôs substituem seres humanos e seres humanos visitam um museu para experimentar o que parece executar tarefas de comuns em um dos quatro trabalhos diferentes: mecânico automático, gourmet chefe, administrador da loja ou operador do Office.Within this game, players are transported into future where robots replace humans and humans visit a museum to experience what it feels like to perform mundane tasks at one of four different jobs: Auto Mechanic, Gourmet Chef, Store Clerk, or Office Worker.

O benefício do Esqueumorfismo é claro.The benefit of Skeuomorphism is clear. Os ambientes e os objetos conhecidos desse jogo ajudam os novos usuários de VR a se sentir mais confortáveis e apresentarem espaço virtual.Familiar environments and objects within this game help new VR users feel more comfortable and present in virtual space. Ele também faz com que eles se sintam no controle associando conhecimento e comportamentos familiares a objetos e suas reações físicas correspondentes.It also makes them feel like they are in control by associating familiar knowledge and behaviors with objects and their corresponding physical reactions. Por exemplo, para bebida uma xícara de café, as pessoas simplesmente precisam ir para a máquina de café, pressionar um botão, pegar a alça da xícara e inclinar a sua boca como faria no mundo real.For example, to drink a cup of coffee, people simply need to walk to the coffee machine, press a button, grab the cup handle and tilt it towards their mouth as they would do in the real world.

Simulador de trabalhoJob Simulator
Simulador de trabalhoJob Simulator

Como o Sr/VR ainda é um meio de desenvolvimento, usar um certo grau de esqueumorfismo é necessário para desmistificar a tecnologia Sr/VR e apresentá-la a públicos maiores em todo o mundo.Because MR/VR is still a developing medium, using a certain degree of skeuomorphism is necessary to demystify MR/VR technology and to introduce it to larger audiences around the world. Além disso, o uso da representação esqueumorfismo ou realista pode ser benéfico para tipos específicos de aplicativos, como cirurgia ou simulação de voo.Additionally, using skeuomorphism or realistic representation could be beneficial for specific types of applications like surgery or flight simulation. Como o objetivo desses aplicativos é desenvolver e refinar habilidades específicas que podem ser aplicadas diretamente no mundo real, quanto mais próxima a simulação for o mundo real, mais transferível será o conhecimento.Since the goal of these apps is to develop and refine specific skills that can be directly applied in the real world, the closer the simulation is to the real world, the more transferable the knowledge is.

Lembre-se de que esqueumorfismo é apenas uma abordagem.Remember that skeuomorphism is only one approach. O potencial do mundo do Sr/VR é muito maior que isso, e os designers devem se esforçar para criar interações de mágico do Hyper-natural — novas capacidades que são exclusivamente possíveis no mundo do Sr/VR.The potential of the MR/VR world is far greater than that, and designers should strive to create magical hyper-natural interactions — new affordances that are uniquely possible in MR/VR world. Como um início, considere adicionar mágico poweries a objetos comuns para permitir que os usuários atendam aos seus desejos fundamentais, incluindo a Teleportation e a omniscience.As a start, consider adding magical powers to ordinary objects to enable users to fulfill their fundamental desires—including teleportation and omniscience.

Doraemon da porta mágico (esquerda) e Ruby slippers (direita)Doraemon’s magical door (left) and Ruby slippers(right)
Doraemon da porta mágico (esquerda) e Ruby slippers (direita)Doraemon’s magical door (left) and ruby slippers(right)

Observações sobre esqueumorfismo em VRObservations about skeuomorphism in VR

De "porta de qualquer lugar" em Doraemon, "Ruby slippers" no assistente de Oz para "mapa de Maurader" no Harry Potter, exemplos de objetos comuns com mágico Power abound em ficção popular.From “Anywhere door” in Doraemon, “Ruby Slippers” in The Wizard of Oz to “Maurader’s map” in Harry Potter, examples of ordinary objects with magical power abound in popular fiction. Esses objetos mágico nos ajudam a visualizar uma conexão entre o mundo real e o fantástico, entre o que é e o que poderia ser.These magical objects help us visualize a connection between the real-world and the fantastic, between what is and what could be. Tenha em mente que, ao criar o objeto mágico ou surreal, é necessário fazer um equilíbrio entre a funcionalidade e a diversão.Keep in mind that when designing the magical or surreal object one needs to strike a balance between functionality and entertainment. Tenha cuidado com a tentação de criar algo puramente mágico apenas para a novidade.Beware of the temptation to create something purely magical just for novelty’s sake.

Compreendendo diferentes métodos de entradaUnderstanding different input methods

Quando projetei para a mídia 2D, tive que me concentrar nas interações de toque, mouse e teclado para entradas.When I designed for the 2D medium, I had to focus on touch, mouse, and keyboard interactions for inputs. No espaço de design do Sr/VR, nosso corpo torna-se a interface e os usuários podem usar uma seleção mais ampla de métodos de entrada: incluindo fala, olhar, gesto, 6-DOF controladorese luvas que oferecem conexão mais intuitiva e direta com objetos virtuais.In the MR/VR design space, our body becomes the interface and users are able to use a broader selection of input methods: including speech, gaze, gesture, 6-dof controllers, and gloves that afford more intuitive and direct connection with virtual objects.

Entradas disponíveis no HoloLensAvailable inputs in HoloLens
Entradas disponíveis no HoloLensAvailable inputs in HoloLens

"Tudo é o melhor para algo e o pior para outra coisa".“Everything is best for something, and worst for something else.”
Bill Buxton compartilharáBill Buxton

Por exemplo, a entrada de gestos usando sensores de câmera e Bare-up em um dispositivo HMD libera os usuários da manutenção de controladores ou utilizando o luvas Sweaty, mas o uso frequente pode causar fadiga física (a. k. a Gorilla ARM).For example, gesture input using bare hand and camera sensors on an HMD device frees users hand from holding controllers or wearing sweaty gloves, but frequent use can cause physical fatigue (a.k.a gorilla arm). Além disso, os usuários precisam manter suas mãos dentro da linha de visão; se a câmera não puder ver as mãos, as mãos não poderão ser usadas.Also, users have to keep their hands within the line of sight; if the camera cannot see the hands, the hands cannot be used.

A entrada de fala é boa na passagem de tarefas complexas, pois permite que os usuários recortem menus aninhados com um comando (por exemplo, "Mostre-me os filmes feitos pelo Laika Studio".) e também muito econômico quando combinado com outra modalidade (por exemplo, o comando "face para mim" orienta o holograma que um usuário está examinando em direção ao usuário).Speech input is good at traversing complex tasks because it allows users to cut through nested menus with one command (e.g., “Show me the movies made by Laika studio.”) and also very economical when coupled with other modality (e.g., “Face me” command orients the hologram a user is looking at towards the user). No entanto, a entrada de fala pode não funcionar bem em um ambiente barulhento ou pode não ser apropriada em um espaço muito silencioso.However, speech input may not work well in noisy environment or may not appropriate in a very quiet space.

Além de gestos e falas, os controladores rastreados de bolso (por exemplo, Oculus Touch, Naopak, etc.) são métodos de entrada muito populares porque são fáceis de usar, precisos, aproveitam o proprioceptiondas pessoas e fornecem indicações de Haptic passivas. No entanto, esses benefícios têm o custo de não poder ser práticos e usar o controle de dedo completo.Besides gesture and speech, hand-held tracked controllers (e.g., Oculus touch, Vive, etc.) are very popular input methods because they are easy to use, accurate, leverage people’s proprioception, and provide passive haptic cues. However, these benefits come at the cost of not being able to be bare-hands and use full finger tracking.

Senso (à esquerda) e Manus VR (direita)Senso (Left) and Manus VR(Right)
Senso (à esquerda) e Manus VR (direita)Senso (Left) and Manus VR (Right)

Embora não sejam tão populares quanto os controladores, o luvas está ganhando impulso novamente graças ao Sr/VR Wave.While not as popular as controllers, gloves are gaining momentum again thanks to the MR/VR wave. Mais recentemente, a entrada cérebro/mental começou a obter força como uma interface para ambientes virtuais ao integrar o sensor EEG ou EMG ao headset (por exemplo, MINDMAZE VR).Most recently, brain/mind input have started to gain traction as an interface for virtual environments by integrating EEG or EMG sensor to headset (e.g., MindMaze VR).

Observações sobre os métodos de entradaObservations about input methods

Esses são apenas um exemplo de dispositivos de entrada disponíveis no mercado para o Sr/VR.These are a just a sample of input devices available in the market for MR/VR. Eles continuarão a proliferar até que o setor se expanda e concorde com as práticas recomendadas.They will continue to proliferate until the industry matures and agrees upon best practices. Até lá, os designers devem continuar cientes dos novos dispositivos de entrada e ser bem informados nos métodos de entrada específicos para seu projeto específico.Until then, designers should remain aware of new input devices and be well-versed in the specific input methods for their particular project. Os designers precisam procurar soluções criativas dentro de limitações, enquanto também estão jogando nos pontos fortes do dispositivo.Designers need to look for creative solutions inside of limitations, while also playing to a device’s strengths.

Esboço da cena e do teste no headsetSketch the scene and test in the headset

Quando trabalhei em 2D, eu esbocei principalmente o conteúdo.When I worked in 2D, I mostly sketched just the content. No entanto, no espaço de realidade misturada que não era suficiente.However, in mixed reality space that wasn’t sufficient. Eu tinha que esboçar toda a cena para imaginar melhor as relações entre o usuário e os objetos virtuais.I had to sketch out the entire scene to better imagine the relationships between the user and virtual objects. Para ajudar meu pensamento espacial, comecei a esboçar cenas no cinema 4D e, às vezes, criamos ativos simples para a criação de protótipos no Maya.To help my spatial thinking, I started to sketch scenes in Cinema 4D and sometimes create simple assets for prototyping in Maya. Nunca usei nenhum programa antes de participar da equipe do HoloLens e ainda sou um jogador, mas trabalhar com esses programas 3D me ajudou a se sentir confortável com a nova terminologia, como o Shader e o IK (cinemática inversa).I had never used either program before joining the HoloLens team and I am still a newbie, but working with these 3D programs definitely helped me get comfortable with new terminology, such as shader and IK (inverse kinematics).

"Não importa quão bem esboço a cena em 3D, a experiência real em Headset quase nunca foi a mesma coisa que o esboço. É por isso que é importante testar a cena nos headsets de destino. "— Hae Jin Lee“No matter how closely I sketched out the scene in 3D, the actual experience in headset was almost never the same as the sketch. That’s why it’s important to test out the scene in the target headsets.” — Hae Jin Lee

Para o protótipo do HoloLens, experimentei todos os tutoriais em tutoriais de realidade misturados para começar.For HoloLens prototyping, I tried out all the tutorials at Mixed Reality tutorials to start. Em seguida, comecei a brincar com o HoloToolkit. Unity que a Microsoft fornece aos desenvolvedores para acelerar o desenvolvimento de aplicativos Holographic.Then I began to play with HoloToolkit.Unity that Microsoft provides to developers to accelerate development of holographic applications. Quando fui preso por algo, publiquei minha pergunta sobre o HoloLens question & Fórum de resposta.When I got stuck with something, I posted my question to HoloLens Question & Answer Forum.

Depois de adquirir a compreensão básica do protótipo do HoloLens, eu queria capacitar outros não-codificadores para que eles tenham um protótipo próprio.After acquiring basic understanding of HoloLens prototyping, I wanted to empower other non-coders to prototype on their own. Eu fiz um tutorial em vídeo que ensina como desenvolver um Projectile simples usando o HoloLens.So I made a video tutorial that teaches how to develop a simple projectile using HoloLens. Expliquei brevemente os conceitos básicos, portanto, mesmo que você tenha zero experiência no desenvolvimento do HoloLens, você deve ser capaz de acompanhar.I briefly explain the basic concepts, so even if you have zero experience in HoloLens development, you should be able to follow along.


Eu fiz este tutorial simples para não programadores como eu mesmo.I made this simple tutorial for non-programmers like myself.

Para o criação de protótipos VR, eu fiz cursos na escola de desenvolvimento VR e também fiz a criação de conteúdo 3D para a realidade virtual em Lynda.com.For VR prototyping, I took courses at VR Dev School and also took 3D Content Creation for Virtual Reality at Lynda.com. A escola de desenvolvimento VR me proporcionou um conhecimento mais aprofundado na codificação e o curso Laura me ofereceu uma boa introdução à criação de ativos para VR.VR Dev school provided me more in depth knowledge in coding and the Lynda course offered me a nice short introduction to creating assets for VR.

Pegue o saltoTake the leap

Há um ano, eu achei que tudo isso era um pouco difícil.A year ago, I felt like all of this was a bit overwhelming. Agora, posso dizer que era 100% do esforço.Now I can tell you that it was 100% worth the effort. O Sr/VR ainda é muito jovem e há tantas possibilidades interessantes aguardando para serem percebidas.MR/VR is still very young medium and there are so many interesting possibilities waiting to be realized. Sinto inspirado e sorte ser capaz de jogar uma pequena parte na criação do futuro.I feel inspired and fortunate be able to play one small part in designing the future. Espero que você se junte à jornada no espaço 3D!I hope you will join me on the journey into 3D space!

Sobre o autorAbout the author

Picture of Hae Jin Lee Hae Jin LeeHae Jin Lee
Designer de UX @MicrosoftUX Designer @Microsoft