ux design patterns for augmented reality (ar) apps & games

Prepared by Kai Turner � kai@kaigani.com – � @kaigani

Design patternsin

AR apps

Design patterns

Real-worldobjects

Cameracomposition

Computervision

Follow&

Catch

VRimmersion

Real-world Objects

QR CODES SHAPES TRADINGCARDS

STAGE

• Unique identifier

• Reads as design for mobile apps

• Less intruisive design

• Can relate to unlockables

• Physical collectibles

• 2D-to-3D relationship

• Fixed point in the world

• Allows relative size & scale

Real-world Objects

AR Basketball

Real-world Objects

Table Ice HockeyPlaystation Vita

US Postal Service - AR App

Pokémon concept

Blippar

Follow & Catch• Uses accelerometer and gyroscope• Layers images on top of the camera background• Virtual objects are not constrained by the real world

Follow & Catch

The Hidden Park

AR Invaders

Happi Full Throttle

VR Immersion• Uses device orientation and compass• Spherical panoramic background/scene• Doesn’t use camera

Andy’s Dinosaur adventure CBeebies Playtime app

Star Chart

Camera composition• Easy to use – position elements by hand• Uses camera only – no device dependencies• Save photo / render video• Face capture

Disney Infinity: Action!

Camera composition

Disney Infinity: Action!

IKEA Catalogue app

Toca Hair Salon Me

Computer vision

FACEDETECTION

EDGE& COLOUR

OBJECTS GESTURE& MOTION

• Humanises the technology

• Puts participant in the scene

• Help with perspective

• Real-world scene definition

• Magical transformation of real to virtual

• Interact with objects through the lens of the device

• Get active

Computer vision

Keepy UppyBlue Peter

OpenCV demo Kung Fu Skeeter

Color Band

ColAR Mix

Computer vision

Recommendations• Expect snafus – don’t depend on AR features• Make it fun despite (tech) failure• Don’t require precision• Use broad gestures• Allow for play with or without real world objects• ‘Draw your own’ trumps ‘print a copy’• Replayability trumps one-off gimmicks• Choose the best aspects of each AR feature• Create something new & unexpected

Image creditsCreated by Sodie Hauge Katanfrom The Noun Project

Created by Luboš Volkovfrom The Noun Project

Created by James Fentonfrom The Noun Project

Created by Christopher T. Howlettfrom The Noun Project

Thank you!