Since the early years of tech, engineers and designers tried to overcome the separation between their product and their users. What if I tell you, you do not have to worry about this anymore? With the emergence of VR, your users are finally in your applications. This changes the way people interact with the digital world dramatically. And it increases your power over other people's lives. But with great power comes great responsibility – this is why my talk will focus on Virtual Reality in the web and what you as a developer or designer can do, if you do not want to harm your users. We will begin with a short introduction into the basic concepts of virtual reality, like stereoscopic images and tracking. Then we will take a look at the current status of the WebVR ecosystem, like the WebVR API and the Gamepad API. This will lead us to the topic I'm most passionate about: a good user experience in VR applications. As developers we are confronted with various questions: How can we avoid triggering simulation sickness or what can we do to prevent triggering phobias or seizures?

1. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
More Ways to Make Your Users Sick
About WebVR and UX Design
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017

2. geildanke.com @fischaelameer
You should care about WebVR,
because you care about your users.
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017

3. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
VR Concepts

4. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
VR Concepts WebVR API

5. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
VR Concepts WebVR API UX Design & VR

6. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Virtual Reality is tricking our eyes and brain
to think of a 2D image to be in 3D.

7. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Virtual Reality changes the
way we relate to technology.

8. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
VR Is Good For
Understanding Spatial Relationships

9. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
VR Is Good For
Multi Tasking

10. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
VR Is Good For
Simulations

11. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
What is VR Bad At?

12. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://www.reddit.com/r/VRFail/comments/4p9zgj/pool_shot/

13. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://www.reddit.com/r/VRFail/comments/4p9zgj/pool_shot/

14. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Virtual Reality
Hardware and Concepts

15. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Mobile VR Desktop VR Standalone VR
Google Cardboard Samsung Gear VR Google Daydream View

16. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Mobile VR Desktop VR Standalone VR
Oculus Rift HTC Vive Playstation VR

17. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Mobile VR Desktop VR Standalone VR
https://en.wikipedia.org/wiki/Virtual_Boy

18. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Stereoscopic Images

19. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

20. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

21. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

22. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
IPD = Interpupillary distance

23. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

24. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

25. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

26. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Tracking

27. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

28. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Rotation

29. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Rotation
Position

30. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 http://bit.ly/2iK1Zv7

31. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017 http://bit.ly/2iK1Zv7

32. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

33. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Rotation
Position

34. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
https://github.com/mrdoob/three.js

35. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebGL
https://github.com/mrdoob/three.js

36. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebVRWebGL
https://github.com/mrdoob/three.js

37. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebVRWebGL
https://github.com/mrdoob/three.js
three.js
Ricardo Cabello

38. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

39. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

40. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

41. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

42. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
x: 0, y: 1.6, z: 0

43. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
x: 0, y: 1.6, z: 0

44. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

45. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera( 75,
window.innerWidth / window.innerHeight, 0.1, 10000 );
let renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
let geometry = new THREE.SphereGeometry( 500, 60, 40 );
geometry.scale( -1, 1, 1 );
let video = document.createElement( 'video' );
let videoTexture = new THREE.VideoTexture( video );
let videoMaterial = new THREE.MeshBasicMaterial( { map: videoTexture } );
let mesh = new THREE.Mesh( geometry, videoMaterial );
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();

46. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera( 75,
window.innerWidth / window.innerHeight, 0.1, 10000 );
let renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
let geometry = new THREE.SphereGeometry( 500, 60, 40 );
geometry.scale( -1, 1, 1 );
let video = document.createElement( 'video' );
let videoTexture = new THREE.VideoTexture( video );
let videoMaterial = new THREE.MeshBasicMaterial( { map: videoTexture } );
let mesh = new THREE.Mesh( geometry, videoMaterial );
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();

47. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera( 75,
window.innerWidth / window.innerHeight, 0.1, 10000 );
let renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
let geometry = new THREE.SphereGeometry( 500, 60, 40 );
geometry.scale( -1, 1, 1 );
let video = document.createElement( 'video' );
let videoTexture = new THREE.VideoTexture( video );
let videoMaterial = new THREE.MeshBasicMaterial( { map: videoTexture } );
let mesh = new THREE.Mesh( geometry, videoMaterial );
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();

48. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera( 75,
window.innerWidth / window.innerHeight, 0.1, 10000 );
let renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
let geometry = new THREE.SphereGeometry( 500, 60, 40 );
geometry.scale( -1, 1, 1 );
let video = document.createElement( 'video' );
let videoTexture = new THREE.VideoTexture( video );
let videoMaterial = new THREE.MeshBasicMaterial( { map: videoTexture } );
let mesh = new THREE.Mesh( geometry, videoMaterial );
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();

49. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
let vrDisplay;
navigator.getVRDisplays().then( function( displays ) {
if ( displays.length > 0 ) {
vrDisplay = displays[ 0 ];
} else {
console.log( 'No VR Displays found.' );
}
});

50. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
VRDisplay.isConnected
VRDisplay.isPresenting
VRDisplay.getEyeParameters()
VRDisplay.requestAnimationFrame()

51. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
vrDisplay.requestPresent( [ { source: myCanvas } ] );

52. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
myButton.addEventListener( 'click', function() {
vrDisplay.requestPresent( [ { source: myCanvas } ] );
});

53. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
myButton.addEventListener( 'click', function() {
vrDisplay.requestPresent( [ { source: myCanvas } ] )
.then( function() {
vrDisplay.requestAnimationFrame( render );
});
});

54. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
function render() {
vrDisplay.requestAnimationFrame( render );
}

55. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
function render() {
vrDisplay.requestAnimationFrame( render );
// update display pose
// update scene and meshes
}

56. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
let pose = vrDisplay.getPose();
console.log( pose.orientation );
// [ 0, 0, 0, 1 ]
// [ -0.0000724312, -0.06752134, 0.0028374712, 0.9977243 ]
console.log( pose.position );
// null
// [ 0.05234, -0.043485, 0.0003243 ]

57. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
let leftEyeParameters = vrDisplay.getEyeParameters( 'left' );
console.log( leftEyeParameters.offset );
// [ -0.03, 0, 0 ]
console.log( leftEyeParameters.renderWidth );
// 640.5
console.log( leftEyeParameters.renderHeight );
// 721

58. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
function render() {
vrDisplay.requestAnimationFrame( render );
// update display pose
// update scene and meshes
vrDisplay.submitFrame( pose );
}

59. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

60. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

61. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerhttps://caniuse.com/#search=webvr

62. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

63. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

64. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

65. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

66. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

67. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebVRWebGL
three.js WebVR Polyfill
https://github.com/googlevr/webvr-polyfill

68. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
WebGL & static image fallbacks

69. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
WebGL
Touch & Gyroscope Input

70. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Mobile and Desktop VR Devices

71. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Mobile and Desktop VR Devices
Progressive Loading

72. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebVRWebGL
three.js WebVR Polyfill

73. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebVRWebGL
three.js WebVR Polyfill
A-Frame by Mozilla

74. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Browser
WebVRWebGL
three.js WebVR Polyfill
A-Frame by Mozilla React VR by Facebook

75. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
A-Frame by Mozilla

76. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
A-Frame by Mozilla

77. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
A-Frame by Mozilla
<head>
<script src="aframe.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<video id="video" src="video.mp4" autoplay loop></video>
</a-assets>
<a-videosphere src="#video"></a-videosphere>
</a-scene>
</body>

78. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
A-Frame by Mozilla
<head>
<script src="aframe.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<video id="video" src="video.mp4" autoplay loop></video>
</a-assets>
<a-videosphere src="#video"></a-videosphere>
</a-scene>
</body>

79. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
A-Frame by Mozilla
<head>
<script src="aframe.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<video id="video" src="video.mp4" autoplay loop></video>
</a-assets>
<a-videosphere src="#video"></a-videosphere>
</a-scene>
</body>

80. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
A-Frame by Mozilla
<head>
<script src="aframe.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<video id="video" src="video.mp4" autoplay loop></video>
</a-assets>
<a-videosphere src="#video"></a-videosphere>
</a-scene>
</body>

81. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
A-Frame by Mozilla
<a-box> <a-cone> <a-cylinder> <a-dodecahedron>
<a-icosahedron> <a-octahedron> <a-ring> <a-sphere>
<a-tetrahedron> <a-torus-knot> <a-torus>
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017

82. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
A-Frame by Mozilla
geildanke.com @fischaelameer
<a-video> <a-videosphere> <a-image> <a-sound>
<a-gltf-model> <a-obj-model> <a-text>
<a-light> <a-sky> <a-cursor>
<a-box> <a-cone> <a-cylinder> <a-dodecahedron>
<a-icosahedron> <a-octahedron> <a-ring> <a-sphere>
<a-tetrahedron> <a-torus-knot> <a-torus>

83. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
React VR by Facebook

84. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
React VR by Facebook

85. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
import React from 'react';
import { AppRegistry, VideoPano, View } from 'react-vr';
class GEILDANKE_REACTVR_PANO extends React.Component {
render() {
return (
<View>
<VideoPano source={{uri: 'video.mp4'}} />
</View>
);
}
};
AppRegistry.registerComponent('GEILDANKE_REACTVR_PANO', () => GEILDANKE_REACTVR_PANO);
React VR by Facebook

86. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
import React from 'react';
import { AppRegistry, VideoPano, View } from 'react-vr';
class GEILDANKE_REACTVR_PANO extends React.Component {
render() {
return (
<View>
<VideoPano source={{uri: 'video.mp4'}} />
</View>
);
}
};
AppRegistry.registerComponent('GEILDANKE_REACTVR_PANO', () => GEILDANKE_REACTVR_PANO);
React VR by Facebook

87. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
import React from 'react';
import { AppRegistry, VideoPano, View } from 'react-vr';
class GEILDANKE_REACTVR_PANO extends React.Component {
render() {
return (
<View>
<VideoPano source={{uri: 'video.mp4'}} />
</View>
);
}
};
AppRegistry.registerComponent('GEILDANKE_REACTVR_PANO', () => GEILDANKE_REACTVR_PANO);
React VR by Facebook

88. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Box Cylinder CylindricalPanel Plane Sphere
geildanke.com @fischaelameer
AmbientLight DirectionalLight PointLight SpotLight
Model Sound VrButton
Pano Video VideoPano
React VR by Facebook

89. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

90. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Browser
WebVRWebGL
three.js WebVR Polyfill
A-Frame by Mozilla React VR by Facebook

91. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Browser
WebVRGamepad WebGL
three.js WebVR Polyfill
A-Frame by Mozilla React VR by Facebook

92. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Browser
WebVRGamepad Web AudioWebGL
three.js WebVR Polyfill
A-Frame by Mozilla React VR by Facebook

93. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Browser
WebVRGamepad Web Audio Web SpeechWebGL
three.js WebVR Polyfill
A-Frame by Mozilla React VR by Facebook

94. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
UX Design for VR

95. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Comfort
Interpretability
Usefulness
Delight
Beau Cronin
https://medium.com/@beaucronin/the-hierarchy-of-needs-in-virtual-reality-development-4333a4833acc

96. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Presence
Comfort
Interpretability
Usefulness
Delight
Beau Cronin
https://medium.com/@beaucronin/the-hierarchy-of-needs-in-virtual-reality-development-4333a4833acc

97. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Ergonomics

98. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
It was the pioneer days; people had to make their own interrogation rooms. Out of
cornmeal. These endless days are finally ending in a blaze. When I say, 'I love you,'
it's not because I want you or because I can't have you. It's my estimation that every
man ever got a statue made of him was one kind of sommbitch or another. Oh my god you
will never believe what happened at school today. From beneath you, it devours. I am
never gonna see a merman, ever.
It was supposed to confuse him, but it just made him peppy. It was like the Heimlich,
with stripes! How did your brain even learn human speech? I'm just so curious.
Apocalypse, we've all been there; the same old trips, why should we care? Frankly, it's
ludicrous to have these interlocking bodies and not...interlock. I just don't see why
everyone's always picking on Marie-Antoinette. You're the one freaky thing in my freaky
world that still makes sense to me. You are talking crazy-person talk.
http://www.commercekitchen.com/whedon-ipsum/

99. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
It was the pioneer days; people had to make their own interrogation rooms. Out of
cornmeal. These endless days are finally ending in a blaze. When I say, 'I love you,'
it's not because I want you or because I can't have you. It's my estimation that every
man ever got a statue made of him was one kind of sommbitch or another. Oh my god you
will never believe what happened at school today. From beneath you, it devours. I am
never gonna see a merman, ever.
It was supposed to confuse him, but it just made him peppy. It was like the Heimlich,
with stripes! How did your brain even learn human speech? I'm just so curious.
Apocalypse, we've all been there; the same old trips, why should we care? Frankly, it's
ludicrous to have these interlocking bodies and not...interlock. I just don't see why
everyone's always picking on Marie-Antoinette. You're the one freaky thing in my freaky
world that still makes sense to me. You are talking crazy-person talk.
http://www.commercekitchen.com/whedon-ipsum/

100. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017

101. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
It was the pioneer days; people had to make their own interrogation rooms. Out of
cornmeal. These endless days are finally ending in a blaze. When I say, 'I love you,'
it's not because I want you or because I can't have you. It's my estimation that every
man ever got a statue made of him was one kind of sommbitch or another. Oh my god you
will never believe what happened at school today. From beneath you, it devours. I am
never gonna see a merman, ever.
It was supposed to confuse him, but it just made him peppy. It was like the Heimlich,
with stripes! How did your brain even learn human speech? I'm just so curious.
Apocalypse, we've all been there; the same old trips, why should we care? Frankly, it's
ludicrous to have these interlocking bodies and not...interlock. I just don't see why
everyone's always picking on Marie-Antoinette. You're the one freaky thing in my freaky
world that still makes sense to me. You are talking crazy-person talk.
http://www.commercekitchen.com/whedon-ipsum/

102. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

103. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

104. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

105. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

106. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
70°

107. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
130°
Comfortably bending 30° to each side

108. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
230°
Stretching 80° to each side
https://www.youtube.com/watch?v=00vzW2-PvvE

109. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
0.5m
20m
https://www.youtube.com/watch?v=00vzW2-PvvE

110. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
~20px
~10ppd
< 20px
60ppd

111. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

112. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

113. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

114. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerhttps://www.youtube.com/watch?v=ES9jArHRFHQ

115. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
dmm
https://www.youtube.com/watch?v=ES9jArHRFHQ

116. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
dmm = distance-independent millimeter
https://www.youtube.com/watch?v=ES9jArHRFHQ

117. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerhttps://sizecalc.com

118. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerhttps://sizecalc.com

119. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

120. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

121. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

122. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

123. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Gaze Cues

124. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Gaze Cues

125. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Gaze Cues

126. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Gaze Cues

127. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
Gaze Cues

128. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017

129. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Goodbye, UX metaphors!

130. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Goodbye, UX metaphors!

131. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
Goodbye, UX metaphors!

132. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
avoid eyestrain: use darker colors
avoid focussing on different depths
do not trigger phobias
use correct scales
do not move things fast towards the camera
do not attach things near the camera
make the user comfortable

133. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
avoid eyestrain: use darker colors
avoid focussing on different depths
do not trigger phobias
use correct scales
do not move things fast towards the camera
do not attach things near the camera
make the user comfortable

134. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
avoid eyestrain: use darker colors
avoid focussing on different depths
do not trigger phobias
use correct scales
do not move things fast towards the camera
do not attach things near the camera
make the user comfortable

135. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
avoid eyestrain: use darker colors
avoid focussing on different depths
do not trigger phobias
use correct scales
do not move things fast towards the camera
do not attach things near the camera
make the user comfortable

136. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
avoid eyestrain: use darker colors
avoid focussing on different depths
do not trigger phobias
use correct scales
do not move things fast towards the camera
do not attach things near the camera
make the user comfortable

137. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
avoid eyestrain: use darker colors
avoid focussing on different depths
do not trigger phobias
use correct scales
do not move things fast towards the camera
do not attach things near the camera
make the user comfortable

138. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerIcon made by Freepik from www.flaticon.com

139. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameerIcon made by Freepik from www.flaticon.com

140. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

141. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer

142. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep a low latency and a high frame rate
avoid flicker and blur
add a stable focus point
support short usage
abstract design is better than realistic
do not make your users sick!

143. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://web.colby.edu/cogblog/2016/05/09/2451/

144. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://web.colby.edu/cogblog/2016/05/09/2451/

145. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep a low latency and a high frame rate
avoid flicker and blur
add a stable focus point
support short usage
abstract design is better than realistic
do not make your users sick!

146. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep a low latency and a high frame rate
avoid flicker and blur
add a stable focus point
support short usage
abstract design is better than realistic
do not make your users sick!

147. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep a low latency and a high frame rate
avoid flicker and blur
add a stable focus point
support short usage
abstract design is better than realistic
do not make your users sick!

148. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep a low latency and a high frame rate
avoid flicker and blur
add a stable focus point
support short usage
abstract design is better than realistic
do not make your users sick!

149. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
http://vtrav.com/2015/04/nose-reduces-simulator-sickness/

150. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
http://vtrav.com/2015/04/nose-reduces-simulator-sickness/

151. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep a low latency and a high frame rate
avoid flicker and blur
add a stable focus point
support short usage
abstract design is better than realistic
do not make your users sick!

152. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
no acceleration
do not move the horizon or the camera
always keep a low latency and a high frame rate
avoid flicker and blur
add a stable focus point
support short usage
abstract design is better than realistic
do not make your users sick!

153. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://blog.mozvr.com/a-painter/
http://www.kotaku.co.uk/2016/12/16/the-state-of-virtual-reality-in-2016

154. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://blog.mozvr.com/a-painter/
http://www.kotaku.co.uk/2016/12/16/the-state-of-virtual-reality-in-2016

155. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
You are responsible for the
well-being of your users!

156. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://www.reddit.com/r/Vive/comments/4i49d3/when_instinct_takes_over/
https://www.reddit.com/r/VRFail/comments/4s7nc1/friend_loses_his_vrginity_and_then_some_crappy/

157. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://www.reddit.com/r/Vive/comments/4i49d3/when_instinct_takes_over/
https://www.reddit.com/r/VRFail/comments/4s7nc1/friend_loses_his_vrginity_and_then_some_crappy/

158. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://imgur.com/gallery/DDaNZ
https://giphy.com/gifs/leroypatterson-l3UcefaIhwXpDFeBa

159. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
https://imgur.com/gallery/DDaNZ
https://giphy.com/gifs/leroypatterson-l3UcefaIhwXpDFeBa

160. @fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017
You are responsible for the
well-being of your users!

161. geildanke.com @ FRONTEND CONF ZURICH 2017 @fischaelameer
http://www.uxofvr.com/
https://webvr.rocks/
General information
https://webvr-slack.herokuapp.com/
Community
https://www.reddit.com/r/WebVR/
https://w3c.github.io/webvr/
https://github.com/googlevr/webvr-polyfill
https://threejs.org/
API, frameworks, libraries
https://facebook.github.io/react-vr/
https://aframe.io/
https://geildanke.com/en/vr/
Geil,Danke!
https://bit.ly/webvrcomet

162. geildanke.com @fischaelameer
Thank you!
@fischaelameergeildanke.com @ FRONTEND CONF ZURICH 2017