Design patterns
in
AR apps
Prepared by Kai Turner kai@kaigani.com – @kaigani

Design patterns
Real-world
objects
Camera
composition
Computer
vision
Follow
Catch
VR
immersion

Real-world Objects
QR CODES SHAPES TRADING
CARDS
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 Hockey
Playstation 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
FACE
DETECTION
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 Uppy
Blue 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

Thank you!
Image credits
Created by Sodie Hauge Katan
from The Noun Project
Created by Luboš Volkov
from The Noun Project
Created by James Fenton
from The Noun Project
Created by Christopher T. Howlett
from The Noun Project