john howard (loook inc) ux/ui design for vr and mixed reality

41
Spatial UX and UI John Howard LOOOK, Inc. john@loook.io www.loook.io

Upload: augmentedworldexpo

Post on 17-Jan-2017

342 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

Spatial UX and UI

John Howard LOOOK, [email protected]

www.loook.io

Page 2: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

Market Data

“We expect virtual and augmented reality to become an $80 billion market by 2025, roughly

the size of the desktop PC market today.”Goldman Sachs Research,

January 2016

Page 3: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

UX / UI Evolution

1984 2014

Most UX/UI design is still focused on flat, 2D screens.

Page 4: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

UX / UI Evolution

Microsoft

Page 5: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

UX / UI Evolution

2D 3D

GUI Touch CAD Spatial

How do we make the jump from 2D to 3D?

Page 6: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

The Dream

It’ll be just like Iron Man !!!

Page 7: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

This eye thing is annoying.

The Reality

Iron Man 3, Marvel Studios / Paramount Pictures

Page 8: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

My arms are tired.

Minority Report, DreamWorks

The Reality

Page 9: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

This menu is actually behind me.

The Division, Ubisoft

The Reality

Page 10: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

The Reality

“Maybe not like Iron Man…”

Fatigue UX should be tailored to the duration of the experience.

Where to anchor menus? Head-locked UX is annoying.

Occlusion and Clipping UI needs to respect the world.

Z-fighting Near/far focal length switching causes discomfort.

Vestibular discomfort AKA, simulator sickness.

Spatial UX/UI Challenges

Page 11: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

UX/UI Toolbox

Page 12: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

UX/UI Toolbox

User Gaze

Gaze Cursor

Voice

Spatial Audio / Haptic Audio

Context Sensitive Actions

Extended Desktop

Movement

Hand Tracking

The Spatial UX/UI Toolbox

Page 13: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

UX/UI Toolbox

User Gaze

Gaze Cursor

Voice

Spatial Audio / Haptic Audio

Context Sensitive Actions

Extended Desktop

Movement

Hand Tracking

The Spatial UX/UI Toolbox

Page 14: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

01: User Gaze

UX/UI Toolbox

Halo E3 2015, Microsoft

Page 15: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

Halo E3 2015, Microsoft

01: User Gaze

Page 16: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

UX / UI Toolbox

Caution! Aggressive or excessive event triggering with gaze is like pointing a loaded gun; users get gun-shy and it stresses them out.

01: User Gaze

Page 17: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

02: Gaze Cursor

UX/UI Toolbox

Case Western Reserve University School of Medicine

Page 18: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

CDM Smith / Object Theory

02: Gaze Cursor

Page 19: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

Case Western Reserve University School of Medicine

02: Gaze Cursor

Page 20: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

04: Spatial Sound

UX/UI Toolbox

RoboRaid, Microsoft

Page 21: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

Case Western Reserve University School of Medicine / Microsoft

04: Spatial Sound

Page 22: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

05: Haptic Audio

UX/UI Toolbox

Page 23: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

Luka Mivsek

05: Haptic Audio

Page 24: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

Autodesk / Microsoft

05: Haptic Audio

Page 25: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

Operation, Hasbro

05: Haptic Audio

Page 26: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

iStock

05: Haptic Audio

Page 27: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

06: Context-Sensitive Actions

UX/UI Toolbox

Trimble / Microsoft

Page 28: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

Case study: Indoor agriculture, LOOOK

06: Context Actions

Page 29: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

NASA / Jet Propulsion Laboratory / Microsoft

06: Context Actions

Page 30: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

MediSIM / Carnegie Mellon University

Page 31: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

MediSIM / Carnegie Mellon University

Page 32: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

UX / UI Toolbox

Caution! Context menus in densely populated or close-quarters space can result in environment clipping , occlusion or z-fighting.

Caution! Beware of too many nested fly-outs in pop-up menus. Consider gaze travel distance.

06: Context Sensitive Actions & Controls

Page 33: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

07: Extended Desktop

UX/UI Toolbox

Autodesk / Microsoft

Page 34: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

NASA / Jet Propulsion Laboratory / Microsoft

07: Extended Desktop

Page 35: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

Autodesk / Microsoft

07: Extended Desktop

Page 36: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

Trimble / Microsoft

07: Extended Desktop

Page 37: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

UX / UI Toolbox

Caution! A mouse pointer should follow surfaces like the gaze cursor but will appear to "jump" when transitioning between extreme z-depth changes.

“Lerp” to avoid jarring transitions and display a ray from mouse to destination so all users can follow the transition.

07: Extended Desktop

Page 38: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

In Conclusion…

User Gaze

Gaze Cursor

Voice

Spatial Audio / Haptic Audio

Context Sensitive Actions

Extended Desktop

Movement

Hand Tracking

The Spatial UX/UI Toolbox

Page 39: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

In Conclusion…

“I still want it to be like Iron Man…”

Page 40: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

Important!

Be like Tony Stark…

“Always Be Prototyping!”

Page 41: John Howard (LOOOK Inc) UX/UI Design for VR and Mixed Reality

Thank You.

John Howard LOOOK, [email protected]

www.loook.io