Case Study: il primo anno del team di progettazione di HoloLensCase study - My first year on the HoloLens design team

Il mio viaggio da un Flatland 2D al mondo 3D è stato avviato quando ho aggiunto il team di progettazione di HoloLens a gennaio 2016.My journey from a 2D flatland to the 3D world started when I joined the HoloLens design team in January, 2016. Prima di partecipare al team, ho avuto poca esperienza nella progettazione 3D.Before joining the team, I had very little experience in 3D design. Era come il proverbio cinese di un viaggio di migliaia di chilometri che iniziava con un unico passaggio, tranne nel mio caso, il primo passaggio era 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!

Salto da 2D a 3DTaking the Leap from 2D to 3D
Salto da 2D a 3DTaking the leap from 2D to 3D

"Mi sentivo come se avessi saltato il posto del conducente senza sapere come guidare l'auto. Ero sopraffatto e spaventato, ma molto concentrato ".“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

Nel corso dell'anno scorso, ho preso le competenze e le conoscenze più velocemente possibile, ma ho ancora molto da imparare.During the past year, I picked up skills and knowledge as fast as I could, but I still have a lot to learn. Qui ho scritto 4 osservazioni con un'esercitazione video che documenta la transizione da un interaction designer 2D a 3D.Here, I’ve written up 4 observations with a video tutorial documenting my transition from a 2D to 3D interaction designer. Spero che la mia esperienza ispiri altri designer a passare a 3D.I hope my experience will inspire other designers to take the leap to 3D.

Fotogramma di addio.Good-bye frame. Interfaccia utente di Hello Spatial/diegeticaHello spatial / diegetic UI

Ogni volta che ho progettato poster, riviste, siti Web o schermate di app, un frame definito (in genere un rettangolo) era una costante per ogni problema.Whenever I designed posters, magazines, websites, or app screens, a defined frame (usually a rectangle) was a constant for every problem. A meno che non si stia leggendo questo post in un HoloLens o in un altro dispositivo VR, si sta esaminando questa operazione dall'esterno attraverso la schermata 2D protetta in modo sicuro all'interno di un frame.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. Il contenuto è esterno all'utente.Content is external to you. Tuttavia, l'auricolare realtà mista Elimina il frame , in modo che si trovi all'interno dello spazio di contenuto, cercando ed esaminando il contenuto dall'interno.However, Mixed Reality headset eliminates the frame , so you are within the content space, looking and walking through the content from inside-out.

Ho compreso questo concetto concettualmente, ma all'inizio ho commesso l'errore di trasferire semplicemente il pensiero 2D nello spazio 3D.I understood this conceptually, but in the beginning I made the mistake of simply transferring 2D thinking into 3D space. Questo ovviamente non funziona bene perché lo spazio 3D ha proprietà univoche quali la modifica di una vista (in base al movimento Head dell'utente) e requisiti diversi per la comodità degli utenti , in base alle proprietà dei dispositivi e degli utenti che li usano.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). Ad esempio, in uno spazio di progettazione dell'interfaccia utente 2D, il blocco degli elementi dell'interfaccia utente nell'angolo di una schermata è un modello molto comune, ma questa interfaccia utente dello stile HUD (Head up display) non è naturale nelle esperienze di MR/VR. ostacola l'immersione degli utenti nello spazio e causa disagio dell'utente.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. È come avere una particella di polvere fastidioso nei bicchieri che si sta morendo per eliminare.It’s like having an annoying dust particle on your glasses that you are dying to get rid of. Nel corso del tempo, ho capito che è più naturale posizionare il contenuto nello spazio 3D e aggiungere il comportamento di blocco del corpo che rende il contenuto seguito dall'utente a una distanza fissa 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-bloccatoBody-locked
Corpo-bloccatoBody-locked


Con blocco globaleWorld-locked
Con blocco globaleWorld-locked

Frammenti: un esempio di interfaccia utente diegetica eccellenteFragments: An example of great Diegetic UI

Frammenti, un thriller per la prima persona, sviluppato da Asobo Studio per HoloLens, dimostra una grande interfaccia utente di diegetica.Fragments, a first-person crime thriller developed by Asobo Studio for HoloLens demonstrates a great Diegetic UI. In questo gioco, l'utente diventa un carattere principale, un detective che tenta di risolvere un mistero.In this game, the user becomes a main character, a detective who tries to solve a mystery. Gli indizi cruciali per risolvere questo mistero vengono spruzzati nella stanza fisica dell'utente e spesso sono incorporati all'interno di un oggetto fittizio anziché esistere in modo autonomo.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. Questa interfaccia utente di diegetica tende a essere meno individuabile rispetto all'interfaccia utente bloccata dal corpo, quindi il team di Asobo ha usato in modo intelligente molti suggerimenti, tra cui direzione dello sguardo, suono, luce e guide, ad esempio la freccia che punta alla posizione dell'indizio, per attirare l'attenzione dell'utente.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.

Frammenti-esempi di interfaccia utente di diegeticaFragments - Diegetic UI examples
Frammenti-esempi di interfaccia utente di diegeticaFragments - Diegetic UI examples

Osservazioni sull'interfaccia utente di diegeticaObservations about diegetic UI

L'interfaccia utente spaziale (sia bloccata dal corpo che bloccata a livello globale) e l'interfaccia utente diegetica hanno i propri punti di forza e debolezze.Spatial UI (both body-locked and world-locked) and diegetic UI have their own strengths and weaknesses. Si consiglia ai progettisti di provare il maggior numero possibile di app di MR/VR e di sviluppare la propria comprensione e sensibilità per diversi metodi di posizionamento dell'interfaccia utente.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 restituzione di skeuomorphism e l'interazione magicaThe return of skeuomorphism and magical interaction

Skeuomorphism, un'interfaccia digitale che simula la forma degli oggetti reali è stata "uncool" negli ultimi 5-7 anni nel settore della progettazione.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 Apple ha infine fornito una soluzione di progettazione semplice in iOS 7, sembrava che skeuomorphism fosse finalmente morto come metodologia di progettazione dell'interfaccia.When Apple finally gave way to flat design in iOS 7, it seemed like Skeuomorphism was finally dead as an interface design methodology. Tuttavia, un nuovo mezzo, l'auricolare MR/VR è arrivato al mercato e sembra che skeuomorphism restituito nuovamente.But then, a new medium, MR/VR headset arrived to the market and it seems like Skeuomorphism returned again. : ): )

Simulatore di processi: esempio di progettazione di Skeuomorphic VRJob Simulator: An example of skeuomorphic VR design

Simulatore di processi, un gioco stravagante sviluppato da Owlchemy Labs è uno degli esempi più diffusi per la progettazione di Skeuomorphic VR.Job Simulator, a whimsical game developed by Owlchemy Labs is one of the most popular example for skeuomorphic VR design. All'interno di questo gioco, i giocatori vengono trasportati in futuro, in cui i robot sostituiscono gli uomini e gli uomini visitano un museo per sperimentare il modo in cui si vuole eseguire attività banali in uno dei quattro diversi processi: auto Mechanic, gourmet chef, Store Clerk o Office worker.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.

Il vantaggio di skeuomorphism è chiaro.The benefit of Skeuomorphism is clear. Gli ambienti e gli oggetti familiari all'interno di questo gioco consentono ai nuovi utenti di VR di essere più comodi e presenti nello spazio virtuale.Familiar environments and objects within this game help new VR users feel more comfortable and present in virtual space. Inoltre, si ritiene che siano in controllo associando le conoscenze e i comportamenti familiari agli oggetti e alle reazioni fisiche corrispondenti.It also makes them feel like they are in control by associating familiar knowledge and behaviors with objects and their corresponding physical reactions. Ad esempio, per bere una tazza di caffè, è sufficiente che le persone debbano passare alla macchina da caffè, premere un pulsante, estrarre il punto di controllo della tazza e inclinarlo verso la bocca come farebbe nel mondo reale.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.

Simulatore di processiJob Simulator
Simulatore di processiJob Simulator

Poiché MR/VR è ancora un supporto di sviluppo, l'uso di un determinato grado di skeuomorphism è necessario per demistificare la tecnologia di MR/VR e per introdurlo a destinatari più grandi in tutto il mondo.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. Inoltre, l'uso di skeuomorphism o di una rappresentazione realistica può essere utile per tipi specifici di applicazioni, ad esempio la simulazione di un intervento chirurgico oAdditionally, using skeuomorphism or realistic representation could be beneficial for specific types of applications like surgery or flight simulation. Poiché l'obiettivo di queste app è quello di sviluppare e perfezionare competenze specifiche che possono essere applicate direttamente nel mondo reale, più vicino è la simulazione al mondo reale, più è trasferibile la conoscenza.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.

Tenere presente che skeuomorphism è un unico approccio.Remember that skeuomorphism is only one approach. Il potenziale del mondo di MR/VR è molto più grande del previsto e i progettisti devono impegnarsi a creare interazioni ipernaturali magiche, nuove affordances che sono in realtà possibili in 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. Come inizio, è consigliabile aggiungere poteri magici a oggetti ordinari per consentire agli utenti di soddisfare i propri desideri fondamentali, tra cui Teleporting e onniscienza.As a start, consider adding magical powers to ordinary objects to enable users to fulfill their fundamental desires—including teleportation and omniscience.

Portello magico di Doraemon (a sinistra) e Ruby pantofole (Right)Doraemon’s magical door (left) and Ruby slippers(right)
Portello magico di Doraemon (a sinistra) e Ruby pantofole (Right)Doraemon’s magical door (left) and ruby slippers(right)

Osservazioni su skeuomorphism in VRObservations about skeuomorphism in VR

Da "dovunque" in Doraemon, "Ruby pantofole" nella procedura guidata di Oz alla "mappa di Maurader" in Harry Potter, esempi di oggetti ordinari con energia magica ricca di romanzi popolari.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. Questi oggetti magici consentono di visualizzare una connessione tra il mondo reale e quello fantastico, tra le funzionalità e i possibili risultati.These magical objects help us visualize a connection between the real-world and the fantastic, between what is and what could be. Tenere presente che quando si progetta l'oggetto magico o surreale, è necessario trovare un equilibrio tra funzionalità e divertimento.Keep in mind that when designing the magical or surreal object one needs to strike a balance between functionality and entertainment. Prestare attenzione alla tentazione di creare un elemento puramente magico solo a scopo di novità.Beware of the temptation to create something purely magical just for novelty’s sake.

Informazioni sui diversi metodi di inputUnderstanding different input methods

Quando ho progettato per il supporto 2D, ho dovuto concentrarmi sulle interazioni tra tocco, mouse e tastiera per gli input.When I designed for the 2D medium, I had to focus on touch, mouse, and keyboard interactions for inputs. Nello spazio di progettazione di MR/VR, il corpo diventa l'interfaccia e gli utenti sono in grado di usare una selezione più ampia di metodi di input: tra cui sintesi vocale, sguardo, movimento, controller 6 DOFe guanti che consentono una connessione più intuitiva e diretta con oggetti virtuali.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.

Input disponibili in HoloLensAvailable inputs in HoloLens
Input disponibili in HoloLensAvailable inputs in HoloLens

"Tutto è adatto a qualcosa e peggio per qualcosa di diverso."“Everything is best for something, and worst for something else.”
- Fattura BuxtonBill Buxton

Ad esempio, l'input dei movimenti usando i sensori bare hand e camera su un dispositivo HMD consente agli utenti di liberare i controller o di indossare guanti sudati, ma l'uso frequente può causare affaticamento fisico (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). Inoltre, è necessario che gli utenti rimangano all'interno della linea di controllo; Se la fotocamera non è visibile, non è possibile usare le mani.Also, users have to keep their hands within the line of sight; if the camera cannot see the hands, the hands cannot be used.

L'input vocale è adatto all'attraversamento di attività complesse perché consente agli utenti di tagliare i menu nidificati con un unico comando (ad esempio, "Mostra i film realizzati da Laika Studio)" e anche molto economico quando abbinato ad altre modalità (ad esempio, il comando "Face me" orienta l'ologramma a cui un utente sta cercando verso l'utente).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). Tuttavia, l'input vocale potrebbe non funzionare correttamente nell'ambiente rumoroso o potrebbe non essere appropriato in uno spazio molto silenzioso.However, speech input may not work well in noisy environment or may not appropriate in a very quiet space.

Oltre ai movimenti e ai dialoghi, i controller gestiti manualmente, ad esempio Oculus touch, vive e così via, sono metodi di input molto diffusi, perché sono facili da usare, accurati, sfruttano i propriocezionedi persone e forniscono segnali tattili passivi. Tuttavia, questi vantaggi comportano il costo di non essere in grado di essere rilevati e di usare il rilevamento automatico delle dita.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 (Left) e Manus VR (Right)Senso (Left) and Manus VR(Right)
Senso (Left) e Manus VR (Right)Senso (Left) and Manus VR (Right)

Sebbene non sia così comune come i controller, i guanti stanno riprendendo il momento grazie all'onda di MR/VR.While not as popular as controllers, gloves are gaining momentum again thanks to the MR/VR wave. Più recentemente, l'input Brain/Mind ha iniziato a ottenere la trazione come interfaccia per gli ambienti virtuali integrando il sensore EEG o EMG con la cuffia (ad esempio, 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).

Osservazioni sui metodi di inputObservations about input methods

Si tratta di un semplice esempio di dispositivi di input disponibili sul mercato per il Sig.These are a just a sample of input devices available in the market for MR/VR. Continueranno a proliferare fino a quando il settore non è maturo e accetta le procedure consigliate.They will continue to proliferate until the industry matures and agrees upon best practices. Fino a quel momento, le finestre di progettazione devono rimanere a conoscenza dei nuovi dispositivi di input ed essere ben versati nei metodi di input specifici per il progetto specifico.Until then, designers should remain aware of new input devices and be well-versed in the specific input methods for their particular project. È necessario che i progettisti cerchino soluzioni creative all'interno delle limitazioni, giocando anche ai punti di forza di un dispositivo.Designers need to look for creative solutions inside of limitations, while also playing to a device’s strengths.

Disegnare la scena e testare l'auricolareSketch the scene and test in the headset

Quando ho lavorato in 2D, ho disegnato principalmente solo il contenuto.When I worked in 2D, I mostly sketched just the content. Tuttavia, nello spazio di realtà misto che non era sufficiente.However, in mixed reality space that wasn’t sufficient. Ho dovuto disegnare l'intera scena per immaginare meglio le relazioni tra l'utente e gli oggetti virtuali.I had to sketch out the entire scene to better imagine the relationships between the user and virtual objects. Per aiutare il mio pensiero spaziale, ho iniziato a disegnare scene in cinema 4D e talvolta creare risorse semplici per la creazione di prototipi in Maya.To help my spatial thinking, I started to sketch scenes in Cinema 4D and sometimes create simple assets for prototyping in Maya. Non avevo mai usato alcun programma prima di unirlo al team di HoloLens e sono ancora un newbie, ma l'uso di questi programmi 3D mi ha aiutato a familiarizzare con la nuova terminologia, ad esempio shader e IK (cinematica 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).

"Indipendentemente dal modo in cui ho disegnato la scena in 3D, l'esperienza effettiva nell'auricolare è quasi mai identica a quella dello sketch. Per questo motivo è importante testare la scena negli auricolari di destinazione. "-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

Per il prototipo di HoloLens, ho provato a eseguire tutte le esercitazioni sulle esercitazioni della realtà mista .For HoloLens prototyping, I tried out all the tutorials at Mixed Reality tutorials to start. Ho iniziato a giocare con HoloToolkit. Unity fornito da Microsoft agli sviluppatori per accelerare lo sviluppo di applicazioni olografiche.Then I began to play with HoloToolkit.Unity that Microsoft provides to developers to accelerate development of holographic applications. Una volta bloccata, ho inviato la mia domanda a HoloLens question & Forum di risposta.When I got stuck with something, I posted my question to HoloLens Question & Answer Forum.

Dopo aver acquisito la conoscenza di base del prototipo di HoloLens, ho voluto consentire agli altri non codificatori di eseguire il prototipo autonomamente.After acquiring basic understanding of HoloLens prototyping, I wanted to empower other non-coders to prototype on their own. Quindi, ho creato un'esercitazione video che insegna come sviluppare un semplice proiettile usando HoloLens.So I made a video tutorial that teaches how to develop a simple projectile using HoloLens. Illustrerò brevemente i concetti di base, quindi anche se non si ha esperienza con lo sviluppo HoloLens, è necessario poter proseguire.I briefly explain the basic concepts, so even if you have zero experience in HoloLens development, you should be able to follow along.


Questa semplice esercitazione è stata eseguita per i programmatori non come me.I made this simple tutorial for non-programmers like myself.

Per la creazione di prototipi di VR, ho avuto corsi presso VR dev School e ho preso anche la creazione di contenuto 3D per la realtà virtuale in Lynda.com.For VR prototyping, I took courses at VR Dev School and also took 3D Content Creation for Virtual Reality at Lynda.com. VR dev School mi ha fornito una conoscenza approfondita del codice e il corso di Lynda mi ha offerto una breve introduzione alla creazione di asset per 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.

IntercalareTake the leap

Un anno fa, ho pensato che questo era un po' opprimente.A year ago, I felt like all of this was a bit overwhelming. Ora posso dire che è stato il 100% vale la pena.Now I can tell you that it was 100% worth the effort. MR/VR è ancora molto giovane e ci sono molte possibilità interessanti in attesa di essere realizzate.MR/VR is still very young medium and there are so many interesting possibilities waiting to be realized. Mi sento ispirata e fortunata per poter giocare una piccola parte della progettazione del futuro.I feel inspired and fortunate be able to play one small part in designing the future. Ci auguriamo che tu possa partecipare al viaggio nello spazio 3D.I hope you will join me on the journey into 3D space!

Informazioni sull'autoreAbout the author

Picture of Hae Jin Lee HAE Jin LeeHae Jin Lee
Progettazione UX @MicrosoftUX Designer @Microsoft