Caso práctico: mi primer año en el equipo de diseño de HoloLensCase study - My first year on the HoloLens design team

Mi viaje desde un Flatland de 2D al mundo en 3D comenzó cuando se unió al equipo de diseño de HoloLens en enero 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 unirse al equipo, tenía muy poca experiencia en el diseño 3D.Before joining the team, I had very little experience in 3D design. Era como el proverbor chino sobre un recorrido de mil millas que comienza con un solo paso, excepto en el caso de que el primer paso fuera un 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!

Realizar el salto de 2D a 3DTaking the Leap from 2D to 3D
Realizar el salto de 2D a 3DTaking the leap from 2D to 3D

"Me sentía como si hubiera saltado el puesto del conductor sin saber cómo impulsar el coche. Me abrumaron y mezclarlas, pero muy centrados ".“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

En el año pasado, reconozco las habilidades y los conocimientos tan rápido como podía, pero todavía tengo mucho 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. Aquí, he escrito 4 observaciones con un tutorial en vídeo que documenta la transición de un diseñador de interacciones de 2D a 3D.Here, I’ve written up 4 observations with a video tutorial documenting my transition from a 2D to 3D interaction designer. Espero que mi experiencia inspire a otros diseñadores para que tomen el salto en 3D.I hope my experience will inspire other designers to take the leap to 3D.

Fotograma bueno: adiós.Good-bye frame. Interfaz de usuario de Hola espacial/diegeticHello spatial / diegetic UI

Cada vez que se diseñan pósteres, revistas, sitios web o pantallas de aplicación, un fotograma definido (normalmente un rectángulo) era una 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 lea esta entrada en un dispositivo HoloLens u otro dispositivo VR, lo examinará de la pantalla exterior a la 2D protegida de forma segura dentro de un marco.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. El contenido es externo.Content is external to you. Sin embargo, el casco de realidad mixta elimina el fotograma , por lo que se encuentra dentro del espacio de contenido, mirando y recorriendo el contenido desde dentro.However, Mixed Reality headset eliminates the frame , so you are within the content space, looking and walking through the content from inside-out.

Entiendo esto conceptualmente, pero al principio he cometido el error de simplemente transferir el pensamiento 2D en el espacio 3D.I understood this conceptually, but in the beginning I made the mistake of simply transferring 2D thinking into 3D space. Obviamente, eso no funcionaba bien porque el espacio 3D tiene sus propias propiedades únicas, como un cambio de vista (basado en el movimiento del usuario) y un requisito diferente para la comodidad del usuario (en función de las propiedades de los dispositivos y los usuarios que las usan).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 ejemplo, en un espacio de diseño de la interfaz de usuario 2D, el bloqueo de los elementos de la interfaz de usuario en la esquina de una pantalla es un patrón muy común, pero esta interfaz de usuario de estilo HUD (presentación de encabezado) no se siente natural en las experiencias MR/VR; dificulta la inmersión del usuario en el espacio y hace que el usuario se haga más cómodo.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. Es como tener una partícula de polvo molesta en sus anteojos de los que Dying deshacerse.It’s like having an annoying dust particle on your glasses that you are dying to get rid of. Con el tiempo, aprendí que es más natural colocar el contenido en el espacio 3D y agregar un comportamiento con bloqueo de cuerpo que hace que el contenido siga el usuario a una distancia fija 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.

Con bloqueo del cuerpoBody-locked
Con bloqueo del cuerpoBody-locked


Con bloqueo mundialWorld-locked
Con bloqueo mundialWorld-locked

Fragmentos: un ejemplo de excelente interfaz de usuario de DiegeticFragments: An example of great Diegetic UI

En el caso de los fragmentos, un mayor emocionado de delitos desarrollado por Asobo Studio para HoloLens demuestra una excelente interfaz de usuario de Diegetic.Fragments, a first-person crime thriller developed by Asobo Studio for HoloLens demonstrates a great Diegetic UI. En este juego, el usuario se convierte en un carácter principal, un detective que intenta resolver un misterio.In this game, the user becomes a main character, a detective who tries to solve a mystery. Las pistas dinámicas para solucionar este misterio se separan en el salón físico del usuario y, a menudo, se insertan en un objeto ficticio en lugar de hacerlo por su cuenta.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. Esta interfaz de usuario de diegetic tiende a ser menos reconocible que la interfaz de usuario bloqueada por el cuerpo, por lo que el equipo de Asobo ha usado de forma inteligente muchas guías, como la dirección de miración de los caracteres virtuales, el sonido, la luz y las guías (por ejemplo, la flecha que apunta a la posición de la pista) para atraer la atención del usuario.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: ejemplos de la interfaz de usuario de DiegeticFragments - Diegetic UI examples
Fragmentos: ejemplos de la interfaz de usuario de DiegeticFragments - Diegetic UI examples

Observaciones sobre la interfaz de usuario de diegeticObservations about diegetic UI

La interfaz de usuario espacial (tanto con bloqueo de cuerpo como con bloqueo mundial) y la interfaz de usuario de diegetic tienen sus propios puntos fuertes y débiles.Spatial UI (both body-locked and world-locked) and diegetic UI have their own strengths and weaknesses. Animamos a los diseñadores a probar tantas aplicaciones de MR/VR como sea posible y desarrollar sus propios conocimientos y Sensibility para varios métodos de posicionamiento de la interfaz de usuario.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.

La devolución de skeuomorphism e interacción mágicaThe return of skeuomorphism and magical interaction

Skeuomorphism, una interfaz digital que imita la forma de objetos del mundo real ha sido "inestable" durante los últimos 5 y 7 años en el sector del diseño.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. Por último, cuando Apple dio forma a un diseño plano en iOS 7, parecía que Skeuomorphism estuvo inactivo como una metodología de diseño de interfaz.When Apple finally gave way to flat design in iOS 7, it seemed like Skeuomorphism was finally dead as an interface design methodology. Pero, a continuación, se ha llegado a un nuevo casco de MR/VR en el mercado y parece que Skeuomorphism vuelve a devolverse.But then, a new medium, MR/VR headset arrived to the market and it seems like Skeuomorphism returned again. : ): )

Simulador de trabajo: ejemplo de diseño de skeuomorphic VRJob Simulator: An example of skeuomorphic VR design

El simulador de trabajo, un juego de divertidos desarrollado por Owlchemy Labs , es uno de los ejemplos más populares del diseño de skeuomorphic VR.Job Simulator, a whimsical game developed by Owlchemy Labs is one of the most popular example for skeuomorphic VR design. Dentro de este juego, los jugadores se transportan en el futuro, donde los robots reemplazan a los seres humanos y los seres humanos visitan un museo para experimentar lo que le gustaría realizar tareas rutinarias en uno de cuatro trabajos diferentes: mecánico automático, chef de gourmet, encargado de la tienda u trabajador de oficina.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.

La ventaja de Skeuomorphism es clara.The benefit of Skeuomorphism is clear. Los entornos y objetos conocidos de este juego ayudan a los nuevos usuarios de VR a sentirse más cómodos y presentan espacio virtual.Familiar environments and objects within this game help new VR users feel more comfortable and present in virtual space. También hace que se sientan como están en el control mediante la Asociación de conocimientos y comportamientos conocidos con objetos y sus reacciones físicas correspondientes.It also makes them feel like they are in control by associating familiar knowledge and behaviors with objects and their corresponding physical reactions. Por ejemplo, para beber una taza de café, las personas simplemente tienen que dirigirse al equipo de café, presionar un botón, captar el asa y inclinarlo hacia su boca como lo harían en el 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 trabajoJob Simulator
Simulador de trabajoJob Simulator

Dado que MR/VR sigue siendo un medio en desarrollo, es necesario usar un cierto grado de skeuomorphism para desrelacionar la tecnología MR/VR y para presentarla a audiencias de mayor tamaño en todo el 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. Además, el uso de skeuomorphism o la representación realista puede ser beneficioso para tipos específicos de aplicaciones como cirugía o simulación de vuelo.Additionally, using skeuomorphism or realistic representation could be beneficial for specific types of applications like surgery or flight simulation. Dado que el objetivo de estas aplicaciones es desarrollar y perfeccionar habilidades específicas que se pueden aplicar directamente en el mundo real, cuanto más se acerque la simulación al mundo real, mayor será la posibilidad de transferir la información.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.

Recuerde que skeuomorphism es solo un enfoque.Remember that skeuomorphism is only one approach. El potencial del mundo MR/VR es mucho mayor que eso, y los diseñadores deben procurar crear interacciones mágicas hipernaturales, nuevas prestaciones que son exclusivas en el mundo MR/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 inicio, considere la posibilidad de agregar las facultades mágicas a los objetos ordinarios para permitir que los usuarios cumplan sus deseos fundamentales, como teleportabilidad y Omniscience.As a start, consider adding magical powers to ordinary objects to enable users to fulfill their fundamental desires—including teleportation and omniscience.

La puerta mágica (izquierda) y las zapatas de Ruby (derecha) de DoraemonDoraemon’s magical door (left) and Ruby slippers(right)
La puerta mágica (izquierda) y las zapatas de Ruby (derecha) de DoraemonDoraemon’s magical door (left) and ruby slippers(right)

Observaciones sobre skeuomorphism en VRObservations about skeuomorphism in VR

Desde "puerta de cualquier lugar" en Doraemon, "zapatas de Ruby" en el Asistente de oz a "mapa de Maurader" en Harry Potter, ejemplos de objetos ordinarios con una potencia mágica en la conocida ficción.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. Estos objetos mágicos nos ayudan a visualizar una conexión entre el mundo real y el fantástico, entre lo que y lo que podría ser.These magical objects help us visualize a connection between the real-world and the fantastic, between what is and what could be. Tenga en cuenta que al diseñar el objeto mágico o surreal, es necesario conseguir un equilibrio entre funcionalidad y entretenimiento.Keep in mind that when designing the magical or surreal object one needs to strike a balance between functionality and entertainment. Tenga cuidado con la tentación de crear algo tan mágico como para la novedad.Beware of the temptation to create something purely magical just for novelty’s sake.

Descripción de los distintos métodos de entradaUnderstanding different input methods

Cuando se diseñó para el medio 2D, tuve que centrarme en las interacciones táctiles, del mouse y del teclado para las entradas.When I designed for the 2D medium, I had to focus on touch, mouse, and keyboard interactions for inputs. En el espacio de diseño MR/VR, nuestro cuerpo se convierte en la interfaz y los usuarios pueden usar una selección más amplia de métodos de entrada: como voz, mira, gesto, 6-DOF controladoresy guantes que permiten una conexión directa e intuitiva con objetos virtuales.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 disponibles en HoloLensAvailable inputs in HoloLens
Entradas disponibles en HoloLensAvailable inputs in HoloLens

"Todo lo mejor para algo y peor para algo".“Everything is best for something, and worst for something else.”
: Bill Buxton comparteBill Buxton

Por ejemplo, la entrada de gestos con sensores de cámara y de mano en un dispositivo HMD libera a los usuarios de la posesión de controladores o la utilización de Sweaty guantes, pero el uso frecuente puede provocar fatiga 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). Además, los usuarios deben mantener sus manos dentro de la línea de visión; Si la cámara no puede ver las manos, no se pueden usar las manos.Also, users have to keep their hands within the line of sight; if the camera cannot see the hands, the hands cannot be used.

La entrada de voz es buena en el recorrido de tareas complejas porque permite a los usuarios desplazarse por los menús anidados con un comando (por ejemplo, "mostrarme las películas realizadas por Laika Studio") y también muy económico cuando se acoplan con otra moda (por ejemplo, el comando "facial me" orienta el holograma que el usuario está mirando hacia el usuario).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). Sin embargo, es posible que la entrada de voz no funcione bien en un entorno ruidoso o que no sea adecuada en un espacio muy silencioso.However, speech input may not work well in noisy environment or may not appropriate in a very quiet space.

Además de los gestos y la voz, los controladores de seguimiento de mano (por ejemplo, Oculus Touch, Naopak, etc.) son métodos de entrada muy populares porque son fáciles de usar, precisos, aprovechan los proprioceptionde los usuarios y proporcionan indicaciones de hápticos pasivas. Sin embargo, estas ventajas suponen el costo de no ser capaces de ser manos libres y usar el seguimiento completo de los dedos.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.

Sens (left) y Manus VR (right)Senso (Left) and Manus VR(Right)
Sens (left) y Manus VR (right)Senso (Left) and Manus VR (Right)

Aunque no es tan popular como los controladores, los guantes están ganando tiempo de nuevo gracias a la ola de MR/VR.While not as popular as controllers, gloves are gaining momentum again thanks to the MR/VR wave. Más recientemente, la entrada de cerebro/mente comenzó a obtener la tracción como una interfaz para entornos virtuales mediante la integración del sensor de EEG o EMG en los auriculares (por ejemplo, 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).

Observaciones sobre los métodos de entradaObservations about input methods

Se trata de un solo ejemplo de dispositivos de entrada disponibles en el mercado para MR/VR.These are a just a sample of input devices available in the market for MR/VR. Continuarán proliferando hasta que el sector madura y acepte los procedimientos recomendados.They will continue to proliferate until the industry matures and agrees upon best practices. Hasta entonces, los diseñadores deben seguir teniendo en cuenta los nuevos dispositivos de entrada y estar bien en los métodos de entrada específicos de su proyecto en particular.Until then, designers should remain aware of new input devices and be well-versed in the specific input methods for their particular project. Los diseñadores deben buscar soluciones creativa dentro de las limitaciones y, al mismo tiempo, reproducirse en las fortalezas de un dispositivo.Designers need to look for creative solutions inside of limitations, while also playing to a device’s strengths.

Esboce la escena y la prueba en el cascoSketch the scene and test in the headset

Cuando trabajaba en 2D, principalmente esbozamos solo el contenido.When I worked in 2D, I mostly sketched just the content. Sin embargo, en el espacio de realidad mixta que no era suficiente.However, in mixed reality space that wasn’t sufficient. Tuve que esbozar toda la escena para imaginar mejor las relaciones entre el usuario y los objetos virtuales.I had to sketch out the entire scene to better imagine the relationships between the user and virtual objects. Para ayudar a mi pensamiento espacial, comencé a esbozar escenas en cine 4D y a veces crear recursos simples para la creación de prototipos en Maya.To help my spatial thinking, I started to sketch scenes in Cinema 4D and sometimes create simple assets for prototyping in Maya. Nunca he usado ninguno de los programas antes de unirse al equipo de HoloLens y sigo siendo un novato, pero trabajar con estos programas en 3D nos ayudó a familiarizarse con la nueva terminología, como el sombreador y la 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).

"Independientemente de la profundidad de la escena en 3D, la experiencia real en el casco es casi nunca la misma que la del boceto. Por eso es importante probar la escena en los auriculares 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

En el caso de los prototipos de HoloLens, probé todos los tutoriales en tutoriales de realidad mixta para comenzar.For HoloLens prototyping, I tried out all the tutorials at Mixed Reality tutorials to start. Empezaron a jugar con HoloToolkit. Unity que Microsoft proporciona a los desarrolladores para acelerar el desarrollo de aplicaciones holográficas.Then I began to play with HoloToolkit.Unity that Microsoft provides to developers to accelerate development of holographic applications. Cuando me he quedado atascado, he publicado mi pregunta en la pregunta de HoloLens & el foro de respuestas.When I got stuck with something, I posted my question to HoloLens Question & Answer Forum.

Después de adquirir el conocimiento básico de la plataforma de prototipos de HoloLens, quería habilitar otros no codificadores en prototipo por su cuenta.After acquiring basic understanding of HoloLens prototyping, I wanted to empower other non-coders to prototype on their own. He realizado un tutorial en vídeo que enseña cómo desarrollar un proyectil sencillo mediante HoloLens.So I made a video tutorial that teaches how to develop a simple projectile using HoloLens. Explicaremos brevemente los conceptos básicos, por lo que, aunque no tenga experiencia en el desarrollo de HoloLens, debería poder continuar.I briefly explain the basic concepts, so even if you have zero experience in HoloLens development, you should be able to follow along.


He realizado este sencillo tutorial para los programadores que no son de este tipo.I made this simple tutorial for non-programmers like myself.

En el caso de la creación de prototipos de VR, se tomaron cursos en la escuela de desarrollo de VR y también se llevó a cabo la creación de contenido 3D para la realidad virtual en Lynda.comFor VR prototyping, I took courses at VR Dev School and also took 3D Content Creation for Virtual Reality at Lynda.com. La escuela de desarrollo de VR proporcionó más información en profundidad en la codificación y el curso de Lynda me ofrecía una buena introducción a la creación de recursos 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.

AvanceTake the leap

Hace un año, me parecía que todo esto fue un poco abrumador.A year ago, I felt like all of this was a bit overwhelming. Ahora puedo indicarle que el esfuerzo de 100% merece la pena.Now I can tell you that it was 100% worth the effort. MR/VR todavía es un medio muy joven y hay muchas posibilidades interesantes a la espera de ser realizadas.MR/VR is still very young medium and there are so many interesting possibilities waiting to be realized. Me siento inspirado y la suerte de poder jugar a una pequeña parte del diseño del futuro.I feel inspired and fortunate be able to play one small part in designing the future. Espero que se una al camino en el espacio 3D.I hope you will join me on the journey into 3D space!

Acerca del autorAbout the author

Picture of Hae Jin Lee Hae Jin LeeHae Jin Lee
Diseñador de la experiencia del usuario @MicrosoftUX Designer @Microsoft