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

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

3.
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

4.
Real-world Objects
AR Basketball

5.
Real-world Objects
Table Ice Hockey
Playstation Vita
US Postal Service - AR App
Pokémon concept

6.
Blippar

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

8.
Follow Catch
The Hidden Park
AR Invaders
Happi Full Throttle

9.
VR Immersion
• Uses device orientation and compass
• Spherical panoramic background/scene
• Doesn’t use camera
Andy’s Dinosaur adventure
CBeebies Playtime app

10.
Star Chart

11.
Camera composition
• Easy to use – position elements by hand
• Uses camera only – no device dependencies
• Save photo / render video
• Face capture
Disney Infinity: Action!

12.
Camera composition
Disney Infinity: Action!
IKEA Catalogue app
Toca Hair Salon Me

13.
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

14.
Computer vision
Keepy Uppy
Blue Peter
OpenCV demo Kung Fu Skeeter
Color Band

15.
ColAR Mix

16.
Computer vision

17.
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

18.
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