18
Prepared by Kai Turner [email protected] @kaigani Design patterns in AR apps

UX Design Patterns for Augmented Reality (AR) apps & games

Embed Size (px)

Citation preview

Page 1: UX Design Patterns for Augmented Reality (AR) apps & games

Prepared by Kai Turner � [email protected] – � @kaigani

Design patternsin

AR apps

Page 2: UX Design Patterns for Augmented Reality (AR) apps & games

Design patterns

Real-worldobjects

Cameracomposition

Computervision

Follow&

Catch

VRimmersion

Page 3: UX Design Patterns for Augmented Reality (AR) apps & games

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

Page 4: UX Design Patterns for Augmented Reality (AR) apps & games

Real-world Objects

AR Basketball

Page 5: UX Design Patterns for Augmented Reality (AR) apps & games

Real-world Objects

Table Ice HockeyPlaystation Vita

US Postal Service - AR App

Pokémon concept

Page 6: UX Design Patterns for Augmented Reality (AR) apps & games

Blippar

Page 7: UX Design Patterns for Augmented Reality (AR) apps & games

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

Page 8: UX Design Patterns for Augmented Reality (AR) apps & games

Follow & Catch

The Hidden Park

AR Invaders

Happi Full Throttle

Page 9: UX Design Patterns for Augmented Reality (AR) apps & games

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

Andy’s Dinosaur adventure CBeebies Playtime app

Page 10: UX Design Patterns for Augmented Reality (AR) apps & games

Star Chart

Page 11: UX Design Patterns for Augmented Reality (AR) apps & games

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

Disney Infinity: Action!

Page 12: UX Design Patterns for Augmented Reality (AR) apps & games

Camera composition

Disney Infinity: Action!

IKEA Catalogue app

Toca Hair Salon Me

Page 13: UX Design Patterns for Augmented Reality (AR) apps & games

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

Page 14: UX Design Patterns for Augmented Reality (AR) apps & games

Computer vision

Keepy UppyBlue Peter

OpenCV demo Kung Fu Skeeter

Color Band

Page 15: UX Design Patterns for Augmented Reality (AR) apps & games

ColAR Mix

Page 16: UX Design Patterns for Augmented Reality (AR) apps & games

Computer vision

Page 17: UX Design Patterns for Augmented Reality (AR) apps & games

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

Page 18: UX Design Patterns for Augmented Reality (AR) apps & games

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!