Information Spaces in Virtual Reality

Looking at the current state of virtual reality and how that intersects with the practice of information architecture. Some do's, don'ts, and design patterns for doing IA in VR.

Transcript

1. Rebecca Torbochkin | @torbochkina | scarletinteractive.com | Slides: goo.gl/9lwAUR Note: A few GIFs of mild / non-graphic / cartoony violence (< 5)
2. Gaming peripheral? @torbochkina | slides: goo.gl/9lwAUR | #ias16
3. Yeah, maybe. @torbochkina | slides: goo.gl/9lwAUR | #ias16
4. Clinical trials have shown games lead to… •Reduced depression + anxiety •Better real-life cooperation skills •Improved eyesight •Greater determination and resiliency MORE: Jane McGonigal: The game that can give you 10 extra years of life http://www.ted.com/talks/jane_mcgonigal_the_game_that_can_give_you_10_extra_years_of_life @torbochkina | slides: goo.gl/9lwAUR | #ias16
5. Relieve pain better than morphine
6. Research by and copyright copyright Hunter Hoffman, University of Washington: https://www.hitl.washington. edu/projects/vrpain/ Images copyright NBC News: http://www.nbcnews.com/vi deo/rock-center/49849152 @torbochkina | slides: goo.gl/9lwAUR | #ias16
7. @torbochkina | slides: goo.gl/9lwAUR | #ias16
8. But we should probably come back down to earth
9. @torbochkina | slides: goo.gl/9lwAUR | #ias16
10. Learn how to use dangerous machinery @torbochkina | slides: goo.gl/9lwAUR | #ias16
11. Teach kids history and science @torbochkina | slides: goo.gl/9lwAUR | #ias16
12. Redo your kitchen! @torbochkina | slides: goo.gl/9lwAUR | #ias16
13. Hang out with friends long distance @torbochkina | slides: goo.gl/9lwAUR | #ias16
14. Meet new ones @torbochkina | slides: goo.gl/9lwAUR | #ias16
15. Meet new ones @torbochkina | slides: goo.gl/9lwAUR | #ias16
16. Get a workout @torbochkina | slides: goo.gl/9lwAUR | #ias16
17. Create art @torbochkina | slides: goo.gl/9lwAUR | #ias16
18. Travel to other places @torbochkina | slides: goo.gl/9lwAUR | #ias16
19. Visit Tuscany @torbochkina | slides: goo.gl/9lwAUR | #ias16
20. Impossible places @torbochkina | slides: goo.gl/9lwAUR | #ias16
21. Impossible places @torbochkina | slides: goo.gl/9lwAUR | #ias16
22. Watch movies @torbochkina | slides: goo.gl/9lwAUR | #ias16
23. Watch esports @torbochkina | slides: goo.gl/9lwAUR | #ias16
24. Command virtual armies @torbochkina | slides: goo.gl/9lwAUR | #ias16
25. Evade and fight off robots @torbochkina | slides: goo.gl/9lwAUR | #ias16
26. Visualize large datasets @torbochkina | slides: goo.gl/9lwAUR | #ias16
27. Conquer other galactic nations @torbochkina | slides: goo.gl/9lwAUR | #ias16
28. Become a space pirate @torbochkina | slides: goo.gl/9lwAUR | #ias16
29. Who knows what you can do @torbochkina | slides: goo.gl/9lwAUR | #ias16
30. And right now you’re like… @torbochkina | slides: goo.gl/9lwAUR | #ias16
31. Or maybe you’re like: @torbochkina | slides: goo.gl/9lwAUR | #ias16
32. What even is Virtual Reality? @torbochkina | slides: goo.gl/9lwAUR | #ias16
33. An illusion @torbochkina | slides: goo.gl/9lwAUR | #ias16
34. A trick that your brain believes @torbochkina | slides: goo.gl/9lwAUR | #ias16
35. IT FEELS REALLY REAL! @torbochkina | slides: goo.gl/9lwAUR | #ias16
36. Main systems • Mobile | Google Cardboard, Samsung GearVR • Immersive | Oculus Rift, HTC Vive • Console | PlayStation VR @torbochkina | slides: goo.gl/9lwAUR | #ias16
37. Virtual Reality right now consists of: COMPUTER SPACE HEAD MOUNTED DISPLAY INPUT TRACKING HEAD, HANDS, FEET, SEAT, ETC. @torbochkina | slides: goo.gl/9lwAUR | #ias16
38. Why now? @torbochkina | slides: goo.gl/9lwAUR | #ias16
39. 60s: Ivan Sutherland’s “Ultimate Display” @torbochkina | slides: goo.gl/9lwAUR | #ias16
40. 3D + Haptic + Audio + Interaction or “a room within which the computer can control the existence of matter” @torbochkina | slides: goo.gl/9lwAUR | #ias16
41. 60s: Flight simulators of Thomas Furness @torbochkina | slides: goo.gl/9lwAUR | #ias16
42. 1980s: Jaron Lanier’s visual programming lab @torbochkina | slides: goo.gl/9lwAUR | #ias16
43. 1990s: Nintendo + SEGA @torbochkina | slides: goo.gl/9lwAUR | #ias16
44. Palmer Luckey @torbochkina | slides: goo.gl/9lwAUR | #ias16
45. Palmer Luckey @torbochkina | slides: goo.gl/9lwAUR | #ias16
46. This is a medium @torbochkina | slides: goo.gl/9lwAUR | #ias16
47. Print | Radio | TV | Film | Internet @torbochkina | slides: goo.gl/9lwAUR | #ias16
48. Difference between AR + VR • Augmented = Overlaid on reality = Google Glass • Virtual = Different world • Similar UI patterns • Potentially very different usage environment @torbochkina | slides: goo.gl/9lwAUR | #ias16
49. What does VR mean for us as designers? @torbochkina | slides: goo.gl/9lwAUR | #ias16
50. Physical UX @torbochkina | slides: goo.gl/9lwAUR | #ias16
51. Industrial Design @torbochkina | slides: goo.gl/9lwAUR | #ias16
52. Design of Environments @torbochkina | slides: goo.gl/9lwAUR | #ias16
53. <3 Generalism @torbochkina | slides: goo.gl/9lwAUR | #ias16
54. What does VR mean for us as information architects? @torbochkina | slides: goo.gl/9lwAUR | #ias16
55. Site maps IA = Search Wireframes Labeling Content Models Controlled Vocab Hierarchy Taxonomy Topology Navigation @torbochkina | slides: goo.gl/9lwAUR | #ias16 Organization Schemes
56. Site maps IA = Search Wireframes Labeling Content Models Controlled Vocab Hierarchy Taxonomy Topology Navigation @torbochkina | slides: goo.gl/9lwAUR | #ias16 Organization Schemes
57. IA is built around the idea of a page @torbochkina | slides: goo.gl/9lwAUR | #ias16
58. Relationships between pages A favorite I still find myself referring to: Visual Vocab via Jesse James Garrett http://www.jjg.net/ia/visvocab/
60. Layout inside pages @torbochkina | slides: goo.gl/9lwAUR | #ias16
61. But in VR… @torbochkina | slides: goo.gl/9lwAUR | #ias16
62. There is no page. @torbochkina | slides: goo.gl/9lwAUR | #ias16
63. • http://www.jjg.net/ia/visvocab/
64. There’s not really any screen. @torbochkina | slides: goo.gl/9lwAUR | #ias16
65. • http://www.jjg.net/ia/visvocab/
66. There’s not even any corners. @torbochkina | slides: goo.gl/9lwAUR | #ias16
67. • http://www.jjg.net/ia/visvocab/
68. So how do we structure the information that the user needs? @torbochkina | slides: goo.gl/9lwAUR | #ias16
69. Where are we going to put all this stuff?!??! @torbochkina | slides: goo.gl/9lwAUR | #ias16
70. • http://www.jjg.net/ia/visvocab/
71. We’re still figuring that out. @torbochkina | slides: goo.gl/9lwAUR | #ias16
72. IA of most early experiences + demos: A room or A world You’re in a VR ROOM! LOOK! WHOA!!!!! @torbochkina | slides: goo.gl/9lwAUR | #ias16
73. Tuscany @torbochkina | slides: goo.gl/9lwAUR | #ias16
74. A little more, but still very simple (no or 1 menu) Instructions Let’s get adjusted. How do we do this? OK, let’s go. Lobby Experience / Room @torbochkina | slides: goo.gl/9lwAUR | #ias16
75. I Expect You to Die @torbochkina | slides: goo.gl/9lwAUR | #ias16
76. Guided Meditation for VR Instructions Lobby World World World @torbochkina | slides: goo.gl/9lwAUR | #ias16
80. Starting to get a little more complex @torbochkina | slides: goo.gl/9lwAUR | #ias16
81. More complex: Air Mech Main Menu Lobby + Title Screen Game Settings @torbochkina | slides: goo.gl/9lwAUR | #ias16
82. More complex: Air Mech
83. More complex: Air Mech
84. More complex: Air Mech
85. More complex: Air Mech
86. More complex: Air Mech
87. More complex: Air Mech
88. More complex: Air Mech
89. More complex: Air Mech
90. More complex: Air Mech
91. Wanna get a little crazy….?
92. Fantastic Contraption World Almost like a real functional piece of software or something. MENU WORLD Your Saved Contraptions Online Contraptions Friends’ Contraptions Exit Current Contraption @torbochkina | slides: goo.gl/9lwAUR | #ias16
93. @torbochkina | slides: goo.gl/9lwAUR | #ias16
94. @torbochkina | slides: goo.gl/9lwAUR | #ias16
95. @torbochkina | slides: goo.gl/9lwAUR | #ias16
96. @torbochkina | slides: goo.gl/9lwAUR | #ias16
97. @torbochkina | slides: goo.gl/9lwAUR | #ias16
98. Hat world = Save as… @torbochkina | slides: goo.gl/9lwAUR | #ias16
99. @torbochkina | slides: goo.gl/9lwAUR | #ias16
100. @torbochkina | slides: goo.gl/9lwAUR | #ias16
101. @torbochkina | slides: goo.gl/9lwAUR | #ias16
102. @torbochkina | slides: goo.gl/9lwAUR | #ias16
103. @torbochkina | slides: goo.gl/9lwAUR | #ias16
104. @torbochkina | slides: goo.gl/9lwAUR | #ias16
105. Toolbar > Cat @torbochkina | slides: goo.gl/9lwAUR | #ias16
106. Toolbar > Cat @torbochkina | slides: goo.gl/9lwAUR | #ias16
107. Toolbar > Cat @torbochkina | slides: goo.gl/9lwAUR | #ias16
108. Toolbar > Cat, Pet @torbochkina | slides: goo.gl/9lwAUR | #ias16
109. @torbochkina | slides: goo.gl/9lwAUR | #ias16
110. @torbochkina | slides: goo.gl/9lwAUR | #ias16
111. @torbochkina | slides: goo.gl/9lwAUR | #ias16
112. @torbochkina | slides: goo.gl/9lwAUR | #ias16
113. Exit > Burrito http://www.jjg.net/ia/visvocab/ @torbochkina | slides: goo.gl/9lwAUR | #ias16
114. Exit > Burrito http://www.jjg.net/ia/visvocab/ @torbochkina | slides: goo.gl/9lwAUR | #ias16
115. Create Shape or New = Gesture @torbochkina | slides: goo.gl/9lwAUR | #ias16
116. Menu, tied to Fingers @torbochkina | slides: goo.gl/9lwAUR | #ias16
117. Menu, tied to Arm @torbochkina | slides: goo.gl/9lwAUR | #ias16
118. Movement + WASD > Teleport http://www.gamasutra.com/view/news/266687/Do_the_locomotion_How_VR_devs_are_expanding_the_virtual_space.php @torbochkina | slides: goo.gl/9lwAUR | #ias16
119. A little more practical? How ‘bout shopping.
120. Oculus Store
121. Categories, Paging @torbochkina | slides: goo.gl/9lwAUR | #ias16
122. Categories, Paging @torbochkina | slides: goo.gl/9lwAUR | #ias16
123. Paging doesn’t really scale @torbochkina | slides: goo.gl/9lwAUR | #ias16
124. This isn’t exactly shoe shopping, though. @torbochkina | slides: goo.gl/9lwAUR | #ias16
125. What if we want to go that far? @torbochkina | slides: goo.gl/9lwAUR | #ias16
126. Does that even make sense? @torbochkina | slides: goo.gl/9lwAUR | #ias16
127. @torbochkina | slides: goo.gl/9lwAUR | #ias16
128. @torbochkina | slides: goo.gl/9lwAUR | #ias16
129. @torbochkina | slides: goo.gl/9lwAUR | #ias16
130. @torbochkina | slides: goo.gl/9lwAUR | #ias16
131. Customized @torbochkina | slides: goo.gl/9lwAUR | #ias16
132. No inventory cost No returns @torbochkina | slides: goo.gl/9lwAUR | #ias16
133. Infinite selection @torbochkina | slides: goo.gl/9lwAUR | #ias16
134. As large as we can make navigable @torbochkina | slides: goo.gl/9lwAUR | #ias16
135. Browse for any book @torbochkina | slides: goo.gl/9lwAUR | #ias16
136. Still walk the shelves @torbochkina | slides: goo.gl/9lwAUR | #ias16
137. But no waiting in line to check out! @torbochkina | slides: goo.gl/9lwAUR | #ias16
138. Filter the bookstore @torbochkina | slides: goo.gl/9lwAUR | #ias16
139. Books are particularly suited to this But could be anything @torbochkina | slides: goo.gl/9lwAUR | #ias16
140. That said, there are some problems. @torbochkina | slides: goo.gl/9lwAUR | #ias16
141. @torbochkina | slides: goo.gl/9lwAUR | #ias16
142. There’s a lot of work to do for UX + IA @torbochkina | slides: goo.gl/9lwAUR | #ias16
143. Exactly what inputs should you support? @torbochkina | slides: goo.gl/9lwAUR | #ias16
144. Exactly what inputs should you support? • HTC Vive Controllers • Xbox Gamepad • Oculus Remote • Oculus Touch • Leap Motion • One button on Gear or Cardboard • Flight stick?! • More…. @torbochkina | slides: goo.gl/9lwAUR | #ias16
145. What form of UIs will work best in VR for you? @torbochkina | slides: goo.gl/9lwAUR | #ias16
146. What form do they take? • 2D panel? • 3D controller? • 3D interactive object • Something else? @torbochkina | slides: goo.gl/9lwAUR | #ias16
147. Where do we anchor UIs? @torbochkina | slides: goo.gl/9lwAUR | #ias16
148. Where do we anchor UIs? • Air? • Wall? • Ground? • In a dashboard? • On a physical object? • Character? • No “UI” at all @torbochkina | slides: goo.gl/9lwAUR | #ias16
149. How do we collaborate? @torbochkina | slides: goo.gl/9lwAUR | #ias16
150. How do we collaborate? • In 3D – Unity, 3D environments, physical models • Establish vocabulary • Lots of iteration • Lots of user testing
151. How do we keep experiences comfortable?
152. Not making people sick • High latency and performance • Minimize moving cameras outside of user control • Noses + vehicle frames • Design for comfort • Seated experiences • Teleportation • Clear content warnings @torbochkina | slides: goo.gl/9lwAUR | #ias16
153. It’s easy to overdose on hype.
154. Enormous potential + creativity
155. With great power…
156. Thank you @torbochkina slides: https://goo.gl/9lwAUR game: astralshard.com consulting: scarletinteractive.com @torbochkina | slides: goo.gl/9lwAUR | #ias16
157. References • Research on the positive effects of games: • http://www.ted.com/talks/jane_mcgonigal_the_game_that_can_give_you_10_extra_years_of_life • https://www.superbetter.com/ • https://janemcgonigal.com/ • Bullet Train: http://www.theverge.com/2015/9/24/9392659/bullet-train-oculus-touch-epic-games-virtual- reality • Gifs of Valve HTC Vive Demo / Launch videos: http://www.techinsider.io/what-virtual-reality-looks-like-photos- 2016-4 | Video itself: https://www.youtube.com/watch?v=qYfNzhLXYGc • Industrial training: http://www.virtalis.com/media/galleries/?tags=training • Ikea VR Experience: http://store.steampowered.com/app/447270/ • Oculus Toybox gif: http://www.huffingtonpost.com/sophia-dominguez/what-happened-at-oculus- c_b_8234326.html • Van Gogh world: The Night Café, by Borrowed Light VR • Eve Valkyrie space game gif: http://kotaku.com/one-wild-occasionally-nauseating-week-of-virtual-reali- 1767442615
158. References • Woman next to man using Leap Motion Gif https://medium.com/@downtohoerth/i-love-vr-but-hundreds-of- thousands-of-people-think-i-hate-it-5a3e803ea3e0#.kb3sj3v0r • Child falling using Vive: http://www.theverge.com/2016/3/10/11196388/virtual-reality-table-gif • Samsung Gear VR Users: via Austin Evans BIT.LY/1QJZTKG • VR History: http://www.vrs.org.uk/virtual-reality/history.html • VR History: http://www.theatlantic.com/technology/archive/2016/03/virtual-reality-is-just-television-for-the- computer-junkie/475632/ • VR History: http://www.theverge.com/a/virtual-reality/ • Images of Palmer Luckey: http://www.smithsonianmag.com/innovation/how-palmer-luckey-created-oculus-rift- 180953049/?all • Oculus prototype images: https://forums.oculus.com/community/discussion/7544/listing-of-all-oculus-rift- versions • Oculus protoype images: http://arstechnica.com/gaming/2012/09/virtual-realitys-time-to-shine-hands-on- with-the-oculus-rift/ • VR Icons via Noun Project, designers names on images themselves • Matrix images: http://www.nowverybad.com/the-matrix-1999/
159. References • Visual Vocab by Jesse James Garret http://www.jjg.net/ia/visvocab/ • World of Warcraft screenshot: BIT.LY/1KKJ6KT • GUIDEDMEDITATIONVR.COM • Airmech gameplay video: https://www.youtube.com/watch?v=8r6jI9Xp0fY • VRDC Fantastic Contraption ”Menus Suck” by Colin Northway: http://www.gdcvault.com/play/1023668/Menus • About Fantastic Contraption Trailers: http://vrscout.com/projects/fantastic-contraption-htc-vive-mixed- reality/ • Fantastic Contraption playthrough https://www.youtube.com/watch?v=FG7r2D02Qz0 • Teleporting Interactions: http://www.gamasutra.com/view/news/266687/Do_the_locomotion_How_VR_devs_are_expanding_the _virtual_space.php • eVRydayVR CV1 Oculus Home Walkthrough: https://www.youtube.com/watch?v=emO-eUL2YP4