-
Notifications
You must be signed in to change notification settings - Fork 0
/
imeve.html
103 lines (86 loc) · 4.76 KB
/
imeve.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
---
title: Du Hoang
---
{% include header.html %}
{% include user.html %}
</div>
</div>
</div>
<div class="content">
<div class="section">
<div class="tile">
<img src="img/imeve-screenshot-1.jpg" />
</div>
<div class="horizontal-section">
<div class="section-heading">Imeve</div>
<div class="section-info">
<p>Imeve is a live-streaming 360° video, VR telepresence startup. I work with the founders and help conceive the product, identify use cases, ideate features, and design novel VR interactions. </p>
</div>
</div>
</div>
<div class="section">
<div class="tile-grid">
<div class="t">
<img src="img/imeve-ux-c.png" />
</div>
<div class="t">
<img src="img/imeve-ux-b.png" />
</div>
<div class="t">
<img src="img/imeve-ux-a.png" />
</div>
</div>
<div class="horizontal-section">
<div class="section-heading">VR UX Design</div>
<div class="section-info">
<p>As a practitioner of Goal-Directed Design, my design process begins with user research and the creation of personas. Because only when we understand the users, their goals and pain points, can we ensure that our designs address their needs.</p>
<p>This is no different in a VR product than it is in a 2D product. The usual UX playbook of stakeholder/user interviews, mapping user journeys, storyboarding scenarios, wireframes, prototypes and iteration, all still applies. </p>
<p>What is unique about designing VR UX is the newness of the technology, and the unknowns that that entails. One cannot readily rely on existing design patterns and conventions, and often it is necessary to invent new UX paradigms.</p>
<p>There are also technical challenges and limitations particular to current VR technology. From motion sickness to vergence-accommodation conflict that VR UX has to consider.</p>
<p>R&D then becomes an integral part of designing for VR. We need to constantly experiments with new ways of interaction, and at the same time, make sure that our users are not adversely affected.</p>
</div>
</div>
</div>
<div class="section" style="max-width: 1024px;">
<div class="tile">
<img src="img/imeve-storyboard.png" />
</div>
</div>
<div class="section">
<div class="horizontal-section">
<div>
<div class="section-heading">VR UI Design</div>
<div class="section-info">
<p>We are in a transitional period where many users are being introduced to VR for the first time. One strategy for VR UI design is to translate familiar 2D interfaces into 3D. It is a quick way to onboard users and allow for the transfer of interaction skills from one domain to another. We can also make use of familiar physical objects (door knobs, light switches, street signs, etc.) to similar effects.</p>
<p>VR UI must account for a user's physical build, mobility and fitness, in an intimate way. UI objects has to be placed relative to height, and within reach. And very interaction needs to be mindful of the physical strain that is required from the user. </p>
<p>On the flip side, VR UI need not be constrained by the laws of physics. As such, teleportation and telekinesis are common devices in VR interactions.</p>
<p>The environment also plays a big role in VR UI design. It is the world where the UI lives, and therefore, the UI has to be believable that context. Sound effects becomes an indispensable part of the experience, and help further immerse the user into the environment.</p>
</div>
</div>
<div class="vertical-imgs">
<div class="t">
<img src="img/imeve-ui-components.gif" />
</div>
<div class="t" style="border: 1px solid #d4d4d4; margin: 32px 0;">
<img src="img/imeve-avatar.gif" />
</div>
<div class="t">
<img src="img/imeve-scene-1.jpg" />
</div>
</div>
</div>
</div>
<div class="section">
<div class="section-view video">
<div class="view-transform">
<div class="tile" style="border: 1px solid #d4d4d4;">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/xMjzQBPpGQo?controls=1&playlist=xMjzQBPpGQo&loop=1&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>
</div>
</div>
</div>
<div class="next-link" >
<a href="mapd.html">MapD<span class="icon" ><svg viewBox="0 0 24 24"><use xlink:href="#icon-arrow2"></use></svg></span></a>
</div>
</div>
</body>
</html>