Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

6,988 views

Published on

Augmented Reality apps and games for mobile are a developing technology. Some applications live up to expectations, while others fall short.
This is a review of the various design patterns to consider when designing an AR app, and some recommendations on how to make the most of the current technology.

Published in: Design, Technology
  • Login to see the comments

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

  1. 1. Design patterns in AR apps Prepared by Kai Turner kai@kaigani.com – @kaigani
  2. 2. Design patterns Real-world objects Camera composition Computer vision Follow Catch VR immersion
  3. 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. 4. Real-world Objects AR Basketball
  5. 5. Real-world Objects Table Ice Hockey Playstation Vita US Postal Service - AR App Pokémon concept
  6. 6. Blippar
  7. 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. 8. Follow Catch The Hidden Park AR Invaders Happi Full Throttle
  9. 9. VR Immersion • Uses device orientation and compass • Spherical panoramic background/scene • Doesn’t use camera Andy’s Dinosaur adventure CBeebies Playtime app
  10. 10. Star Chart
  11. 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. 12. Camera composition Disney Infinity: Action! IKEA Catalogue app Toca Hair Salon Me
  13. 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. 14. Computer vision Keepy Uppy Blue Peter OpenCV demo Kung Fu Skeeter Color Band
  15. 15. ColAR Mix
  16. 16. Computer vision
  17. 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. 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

×