Information Spaces in Virtual Reality

Slide 1

Slide 1 text

Rebecca Torbochkin | @torbochkina | scarletinteractive.com | Slides: goo.gl/9lwAUR Note: A few GIFs of mild / non-graphic / cartoony violence (< 5)

Slide 2

Slide 2 text

Gaming peripheral? @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 3

Slide 3 text

Yeah, maybe. @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Relieve pain better than morphine

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 8

Slide 8 text

But we should probably come back down to earth

Slide 9

Slide 9 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 10

Slide 10 text

Learn how to use dangerous machinery @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 11

Slide 11 text

Teach kids history and science @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 12

Slide 12 text

Redo your kitchen! @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 13

Slide 13 text

Hang out with friends long distance @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 14

Slide 14 text

Meet new ones @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 15

Slide 15 text

Meet new ones @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 16

Slide 16 text

Get a workout @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 17

Slide 17 text

Create art @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 18

Slide 18 text

Travel to other places @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 19

Slide 19 text

Visit Tuscany @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 20

Slide 20 text

Impossible places @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 21

Slide 21 text

Impossible places @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 22

Slide 22 text

Watch movies @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 23

Slide 23 text

Watch esports @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 24

Slide 24 text

Command virtual armies @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 25

Slide 25 text

Evade and fight off robots @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 26

Slide 26 text

Visualize large datasets @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 27

Slide 27 text

Conquer other galactic nations @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 28

Slide 28 text

Become a space pirate @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 29

Slide 29 text

Who knows what you can do @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 30

Slide 30 text

And right now you’re like… @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 31

Slide 31 text

Or maybe you’re like: @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 32

Slide 32 text

What even is Virtual Reality? @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 33

Slide 33 text

An illusion @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 34

Slide 34 text

A trick that your brain believes @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 35

Slide 35 text

IT FEELS REALLY REAL! @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Virtual Reality right now consists of: COMPUTER SPACE HEAD MOUNTED DISPLAY INPUT TRACKING HEAD, HANDS, FEET, SEAT, ETC. @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 38

Slide 38 text

Why now? @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 39

Slide 39 text

60s: Ivan Sutherland’s “Ultimate Display” @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 40

Slide 40 text

3D + Haptic + Audio + Interaction or “a room within which the computer can control the existence of matter” @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 41

Slide 41 text

60s: Flight simulators of Thomas Furness @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 42

Slide 42 text

1980s: Jaron Lanier’s visual programming lab @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 43

Slide 43 text

1990s: Nintendo + SEGA @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 44

Slide 44 text

Palmer Luckey @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 45

Slide 45 text

Palmer Luckey @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 46

Slide 46 text

This is a medium @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 47

Slide 47 text

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

What does VR mean for us as designers? @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 50

Slide 50 text

Physical UX @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 51

Slide 51 text

Industrial Design @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 52

Slide 52 text

Design of Environments @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 53

Slide 53 text

<3 Generalism @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 54

Slide 54 text

What does VR mean for us as information architects? @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 55

Slide 55 text

Site maps IA = Search Wireframes Labeling Content Models Controlled Vocab Hierarchy Taxonomy Topology Navigation @torbochkina | slides: goo.gl/9lwAUR | #ias16 Organization Schemes

Slide 56

Slide 56 text

Site maps IA = Search Wireframes Labeling Content Models Controlled Vocab Hierarchy Taxonomy Topology Navigation @torbochkina | slides: goo.gl/9lwAUR | #ias16 Organization Schemes

Slide 57

Slide 57 text

IA is built around the idea of a page @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 58

Slide 58 text

Relationships between pages A favorite I still find myself referring to: Visual Vocab via Jesse James Garrett http://www.jjg.net/ia/visvocab/

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

Layout inside pages @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 61

Slide 61 text

But in VR… @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 62

Slide 62 text

There is no page. @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 63

Slide 63 text

• http://www.jjg.net/ia/visvocab/

Slide 64

Slide 64 text

There’s not really any screen. @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 65

Slide 65 text

• http://www.jjg.net/ia/visvocab/

Slide 66

Slide 66 text

There’s not even any corners. @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 67

Slide 67 text

• http://www.jjg.net/ia/visvocab/

Slide 68

Slide 68 text

So how do we structure the information that the user needs? @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 69

Slide 69 text

Where are we going to put all this stuff?!??! @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 70

Slide 70 text

• http://www.jjg.net/ia/visvocab/

Slide 71

Slide 71 text

We’re still figuring that out. @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Tuscany @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

I Expect You to Die @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 76

Slide 76 text

Guided Meditation for VR Instructions Lobby World World World @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

No content

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

Starting to get a little more complex @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 81

Slide 81 text

More complex: Air Mech Main Menu Lobby + Title Screen Game Settings @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 82

Slide 82 text

More complex: Air Mech

Slide 83

Slide 83 text

More complex: Air Mech

Slide 84

Slide 84 text

More complex: Air Mech

Slide 85

Slide 85 text

More complex: Air Mech

Slide 86

Slide 86 text

More complex: Air Mech

Slide 87

Slide 87 text

More complex: Air Mech

Slide 88

Slide 88 text

More complex: Air Mech

Slide 89

Slide 89 text

More complex: Air Mech

Slide 90

Slide 90 text

More complex: Air Mech

Slide 91

Slide 91 text

Wanna get a little crazy….?

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 94

Slide 94 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 95

Slide 95 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 96

Slide 96 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 97

Slide 97 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 98

Slide 98 text

Hat world = Save as… @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 99

Slide 99 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 100

Slide 100 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 101

Slide 101 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 102

Slide 102 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 103

Slide 103 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 104

Slide 104 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 105

Slide 105 text

Toolbar > Cat @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 106

Slide 106 text

Toolbar > Cat @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 107

Slide 107 text

Toolbar > Cat @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 108

Slide 108 text

Toolbar > Cat, Pet @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 109

Slide 109 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 110

Slide 110 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 111

Slide 111 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 112

Slide 112 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 113

Slide 113 text

Exit > Burrito http://www.jjg.net/ia/visvocab/ @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 114

Slide 114 text

Exit > Burrito http://www.jjg.net/ia/visvocab/ @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 115

Slide 115 text

Create Shape or New = Gesture @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 116

Slide 116 text

Menu, tied to Fingers @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 117

Slide 117 text

Menu, tied to Arm @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

A little more practical? How ‘bout shopping.

Slide 120

Slide 120 text

Oculus Store

Slide 121

Slide 121 text

Categories, Paging @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 122

Slide 122 text

Categories, Paging @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 123

Slide 123 text

Paging doesn’t really scale @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 124

Slide 124 text

This isn’t exactly shoe shopping, though. @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 125

Slide 125 text

What if we want to go that far? @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 126

Slide 126 text

Does that even make sense? @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 127

Slide 127 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 128

Slide 128 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 129

Slide 129 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 130

Slide 130 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 131

Slide 131 text

Customized @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 132

Slide 132 text

No inventory cost No returns @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 133

Slide 133 text

Infinite selection @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 134

Slide 134 text

As large as we can make navigable @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 135

Slide 135 text

Browse for any book @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 136

Slide 136 text

Still walk the shelves @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 137

Slide 137 text

But no waiting in line to check out! @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 138

Slide 138 text

Filter the bookstore @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 139

Slide 139 text

Books are particularly suited to this But could be anything @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 140

Slide 140 text

That said, there are some problems. @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 141

Slide 141 text

@torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 142

Slide 142 text

There’s a lot of work to do for UX + IA @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 143

Slide 143 text

Exactly what inputs should you support? @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 144

Slide 144 text

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

Slide 145

Slide 145 text

What form of UIs will work best in VR for you? @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 146

Slide 146 text

What form do they take? • 2D panel? • 3D controller? • 3D interactive object • Something else? @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 147

Slide 147 text

Where do we anchor UIs? @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 148

Slide 148 text

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

Slide 149

Slide 149 text

How do we collaborate? @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 150

Slide 150 text

How do we collaborate? • In 3D – Unity, 3D environments, physical models • Establish vocabulary • Lots of iteration • Lots of user testing

Slide 151

Slide 151 text

How do we keep experiences comfortable?

Slide 152

Slide 152 text

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

Slide 153

Slide 153 text

It’s easy to overdose on hype.

Slide 154

Slide 154 text

Enormous potential + creativity

Slide 155

Slide 155 text

With great power…

Slide 156

Slide 156 text

Thank you @torbochkina slides: https://goo.gl/9lwAUR game: astralshard.com consulting: scarletinteractive.com @torbochkina | slides: goo.gl/9lwAUR | #ias16

Slide 157

Slide 157 text

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

Slide 158

Slide 158 text

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/

Slide 159

Slide 159 text

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