design do's and don'ts for great ar

DOs & DONTs OF AR

D O s & D O N T s O F A R

Hello

!!

His work at ChaiOne has been spent questioning, deconstructing, and

crafting successful research-driven designs for users inhabiting diverse

environments.

As a Lead User Researcher, Evelina

uses her expertise in cognitive

neuroscience and psychology to help

Fortune 500 companies achieve their

business objectives by improving the

user experience of their tools.

LEAD USER RESEARCHER DESIGN PRINCIPAL

Osama AshawaEvelina Tapia, PhD

@LMAOSAMA@MYNAMEISEVELINA

2

AUGMENTED REALITY

AR

MIXED REALITY

MR

VIRTUAL REALITY

VR

THREE REALITIES


3

AUGMENTED REALITY

THREE REALITIES

Augmented reality (AR) is a live direct or indirect view of a physical, real-world environment whose elements are augmented (or supplemented) by computer-generated sensory input such as sound, video, graphics or GPS data.

AR takes your view of the real world and adds digital information and/or data on top of it


1/3

4

MIXED REALITY

THREE REALITIES

Mixed reality (MR), sometimes referred to as hybrid reality, is the merging of real and virtual worlds to produce new environments and visualizations where physical and digital objects co-exist and interact in real time.

Mixed reality lets the user see the real world (like AR) while also seeing believable, virtual objects (like VR).


2/3

5

VIRTUAL REALITY

THREE REALITIES

The computer-generated simulation of a three-dimensional image or environment that can be interacted with in a seemingly real or physical way by a person using special electronic equipment, such as a helmet with a screen inside or gloves fitted with sensors.


3/3

6


REA

LIT

Y S

PEC

TR

UM

7

AR MR VR

AUGMENTED REALITY


8

AUGMENTED REALITY

AR can be experienced on multiple

platforms.

Mobile Devices

People experience AR most commonly

on smart phones and tablets.

Smart Glasses

A hands-free option for experiencing

AR, great for industrial and manufacturing use cases.

Viewer Boxes

More of an immersive experience,

Headsets that utilize a smart phone have increased in popularity most

notably with Google’s Cardboard.

AR


9


EXA

MP

LE O

F M

OB

ILE

10


EXA

MP

LE O

F M

OB

ILE

+ V

IEW

ER B

OX

11


EXA

MP

LE O

F S

MA

RT

GLA

SS

ES

12

13

AR

MO

BIL

E A

RD O s & D O N T s O F A R

Mobile Devices

MOBILE AR


14

MO

BIL

E A

R

INTERFACE DESIGN INTERACTION DESIGNDIGITAL OBJECTS

WE WILL COVER


15

DIGITAL OBJECTS


16

DOs&DONTs

17

Animations

Appearance Touch, don’t look

Digital objects should aim to appear 3-dimensional rather

than flat.

Give your objects expression and creativity

Reward users with interaction — watching an animation loop

is boring, engage the user."

#$



Digital objects should aim to appear 3-dimensional rather than flat

AppearanceDIG

ITA

L O

BJE

CT

S


Make objects in the scene more expressive and creative through animations.

Animations can:

• Capture the user’s attention

• Indicate interactivity

AnimationsDIG

ITA

L O

BJE

CT

S


Reward users with interaction — watching an animation loop is boring, engage the user.

Touch, don’t lookDIG

ITA

L O

BJE

CT

S

INTERFACE DESIGN


21

DOs&DONTs

22

Reuse Mobile Patterns

Visual Hierarchy Space & Type

Highlighting Interactivity

2D foreground of app UI feels interactive (e.g as in Augment app); use opacity to create a

sense of foreground and separate 3D and 2D menu regions

Use some of the mobile UI elements - don’t have to

invent a whole new language.

Use animation, highlighting, graphic states, and even

vibration to indicate interactive elements within view. Visual

cues elicit discovery.

Clearly distinguish between interactive and non-interactive

elements of your digital object.

Designing things for low

resolution - text needs to be easy to read until hardware catches up

% &

'(



• Use 2D interface layers to contrast against the 3D object and live world view

• Anchored elements reinforce the perception of an interface rather than an element in the augmented world.

2D / 3D LAYERSINT

ERFA

CE

DES

IGN


Buttons, switches, sliders, and menus are already well established mobile interaction patterns and UI elements.

• Large video area

• Use clear and large icons

• Text overlay

REUSE MOBILE PATTERNSIN

TER

FAC

E D

ESIG

N


Reusing pixels for different content — based on user’s proximity show/hide different things — especially small screen in cardboard cases

PIXEL ECONOMYINT

ERFA

CE

DES

IGN


Use animation, highlighting, graphic states, and even vibration to indicate interactive elements within view.

Visual cues help prompt discovery, so including object highlighting, looping animation(i.e. wiggle), or an explicit prompt as the user nears the virtual object will help distinguish your interactive elements.

HIGHLIGHTING INTERACTIVITYIN

TER

FAC

E D

ESIG

N


• Concise and exact

• Communicate the need-to-know

• Consider the moving environment

CAREFUL TYPOGRAPHY FOR LOW RESOLUTIONIN

TER

FAC

E D

ESIG

N

INTERACTION DESIGN


28

DOs&DONTs

29

Touch-Free

Touch FeedbackFollow established interaction

patterns and guidelines for touch

controls. Give attention with

foreground UI and their legibility against the live scene.

Directional interactions like “look and wait” for making

choices as well as head gestures like nodding, will be

necessary.

Visual and haptic feedback, established by mobile UI

patterns, reassure interactivity to users.

)

*+



Touch is great for user engagement.

It promotes discovery and is the most natural type of interaction with mobile devices, especially if they’re simulating physical properties through digital objects.

Touch

INT

ERA

CT

ION

DES

IGN


When experiencing AR through a viewer box, touch interaction is extremely limited or non-existent. We’re left with a couple options:

• “Look” and wait

• Gestures

Touch-Free

INT

ERA

CT

ION

DES

IGN


How you provide feedback to the user depends on the modality of interaction. Touch and non-touch interactions can provide feedback in these ways:

• Audio

• Visual

• Haptic

Feedback

INT

ERA

CT

ION

DES

IGN

33

TO

SU

M U

P

Rapid prototyping and testing of new UI patterns will be necessary to verify efficacy.

TEST NOVEL UIMOBILE PATTERNS

UX principles and best practices for AR will need to be continuously tested and

revised as a community.

COMMUNITY DRIVEN

Rely on tried-and-true mobile UI patterns and practices. Consider the live camera view’s effect on UI clarity.


,- . /

ZAPPAR MAKEUP GENIUS AUGMENT

DINOSAURS! ANATOMY 4D INKHUNTER

IRON HUD SIGHT PLUS

TRY IT


34

Thanks ConveyUX

TH

E EN

D

35D O s & D O N T s O F A R