Better UX Design in Virtual Reality

@DylanSeychell
Better UX Design
for Virtual Reality

@DylanSeychell
Hello!
I’m Dylan
UX & Multimedia Researcher
Academic at @stmartinsedu
Founder of GDG Malta
@DylanSeychell

@DylanSeychell
Many of us are used to
traditional UX design...

@DylanSeychell
And today, we’re exploring VR
Milgram et al, 1994

@DylanSeychell
We’re dealing with:
● Users
● Viewing objects
● In VR Environments

@DylanSeychell
And that’s comfortable
because we have control...

@DylanSeychell
Designing for Desktop

@DylanSeychell
or handheld devices

@DylanSeychell
We take something
particularly for granted...
Any ideas?

@DylanSeychell
Everything has an
Intended Viewing Distance

@DylanSeychell
Let’s start from dealing with
objects.

@DylanSeychell
And we are used to this principle
in our real environment
A
A
A
A
A
Different size along but we expect to see
pretty much the same thing from the
intended view distance.

@DylanSeychell
Some people might overuse this!

@DylanSeychell
Why does text of different
size looks the same from a
specific point?
They have the same angular size.

@DylanSeychell
Let’s take degrees as an example unit
Consider a screen that is 60-degrees across
A large screen but with only 60 units.
Imagine designing a billboard that only has
60px across.

@DylanSeychell
Degrees?
360 of them in 1 revolution
Something easier?
Yes please.
Radians?
60’ of Arc per degree, better fidelity but large numbers.

@DylanSeychell
Calculating change in size
over distance can be tricky.
...definitely not convenient.

@DylanSeychell
Distance Independent
Millimeter (dmm)
A measure proposed by Daydream Team

@DylanSeychell
The dmm
▷ Inspired by the Device/Density
Independent Pixel in Android
▷ 1mm height at a 1m away.
1m
1mm

@DylanSeychell
The power of dmm
Extendible…
▷ 2mm at 2m away
▷ 0.5mm at 0.5m away
And so on...

@DylanSeychell
Example
In order to maintain dmm size of your screen-space layout, you must scale
your UI container in world space based on it’s intended viewing distance.
As an example, if your UI is intended to be seen from 2.5 meters away, you
will need to scale it within your 3D environment by 2.5x for it to be readable
at that distance.
Source: DayDream Design Guidelines

@DylanSeychell
dmm
Consistent measure that can be scaled and not bound to
width or height.

@DylanSeychell
“The further away the object is in a
VR environment, the more difficult
it is for you to portray concepts.
Chris McKenzie, Google

@DylanSeychell
Time to focus on the user.

@DylanSeychell
2D-design meets
3D-design
It’s not easily transferrable.

@DylanSeychell
We’ll need to plan for designers
with different needs.
2D Designers 3D Designers

@DylanSeychell
Ergonomics of the Eye
30-degrees from the
centre to
circumference

@DylanSeychell
Ergonomics of the Neck
Neck Comfort limit is
120-degrees wide

@DylanSeychell
Viewing horizon

@DylanSeychell
All combined.

@DylanSeychell
Overlay these on your 2D
design board

@DylanSeychell
1px = 1dmm
Easily to transfer from 2D to 3D Design
N.B: Set the 3D world scale to mm

@DylanSeychell
How comfortable is this?
Might require effort beyond
comfort to view edges

@DylanSeychell
Solution, bend the UI on a cylinder
Issues:
1 -Curved controls feel odd
2-UI is too dense

@DylanSeychell
Solution
Solutions:
1 -Flatten control panel
2-Move cylinder centre
backwards Source: DayDream Design Guidelines

@DylanSeychell
What to take away...
▷ Every screen has an intended
viewing distance.
▷ Use dmm as a normalised measure.
▷ Consider Ergonomics
▷ Check out the resources and get
started

@DylanSeychell
It is not just off the shelf
VR is technology that when used well, it can
create wonderful and meaningful experiences.

@DylanSeychell
References
https://www.google.com/design/spec-vr/designing-for-google-cardboard/a-new-
dimension.html#
https://www.crazyegg.com/blog/perfect-mobile-ecommerce-checkout/
http://www.astronomynotes.com/solarsys/s2.htm
http://198.185.178.104/iss/mars/o1112.xml
https://en.wikipedia.org/wiki/Device-independent_pixel
https://developers.google.com/vr/elements/overview
Sketch Sticker Sheet
https://developers.google.com/vr/design/sticker-sheet

@DylanSeychell
Thanks!
Any questions?
You can find me at:
@DylanSeychell

Better UX Design in Virtual Reality

Recommandé

Recommandé

Contenu connexe

Similaire à Better UX Design in Virtual Reality

Similaire à Better UX Design in Virtual Reality (20)

Dernier

Dernier (20)

Better UX Design in Virtual Reality