Nov 01, 2017

Design Tips for AR: Immersion

At its best, augmented reality is an interactive storybook that briefly forces the end user to suspend their disbelief and feel as though their physical surroundings are integrated with digital content. Your aim as an AR designer is to surprise and delight users, maintaining immersion throughout the entire experience.

A good comparison is a magician pulling a rabbit out of a hat—you know that she put the rabbit in there, but it ruins the illusion if you see her do it. Here are some practical tips that will help ensure that you are never caught hiding a bunny in a hat, or with cards up your sleeve. 

By Anna Broadhurst, Lead Designer at Zappar


Bring the target image to life with video and animation

When designing an experience for a client, try to make sure that the first frame of the experience is identical to the target. By matching the two, you gain the ability to transition out elements that exist on the physical target which you don’t want, and bring in the bits of content that you do. Having things simply appear on the screen, with no relevance to what existed previously, is a sure fire way to break the magic.

For ZapWorks Designer users, we recommend using the first frame of a video as part of your tracking image. This is the simplest way to give the “coming to life” effect that is immediately rewarding when your target audience scan the code. If you are planning to use video in a Designer experience, video editing tools such as After Effects or Premiere Pro can be great for animating components of the target image off the screen. If Studio is more you, then you can animate with controllers and states, and timelines—or you could even decide to use motion graphics created in 3rd party software.

 Learn how to bring images to life with ZapWorks Designer in this tutorial.


Transitions when you don’t control the target image

In an ideal world, as AR designers we would always have control over the target image. However, we often have to create an experience off a target that has already been agreed. In this case we have a couple of options. A nice way to transition into an experience is to break the target image in half, giving the illusion of two doors sliding away from each other, progressively revealing the inside of a room. That way, when we introduce new content such as a 3D model or video, the experience has context and it feels natural. We actually built a tutorial here showing you how to do this in ZapWorks Studio. You can also check out a great example made by a Massfar, an AR agency from Brazil below. 

Think this is cool? Make something similar with this step-by-step tutorial


Break the fourth wall

AR is meant to behave like another layer to reality, making you, as a user, part of it. If you have a 3D character standing on a target, why not make them turn around to face you when you look at them from another angle? Have your character look up at the user, not straight-on into the distance just like a stage play, making sure everything is performed with the knowledge that an audience needs to watch.

This experience from WAY back in 2012 is still a great example of breaking the fourth wall in AR 


Interactivity, interactivity, interactivity

AR has an advantage over a more traditional medium such as TV or film in that we are able to design and build in interactivity with the content in question. The more interactivity you add to your experience, the more immersive and differentiated it will become. Touching, swiping, looking—really engage your user’s sense of exploration right down to the small details! A really nice example is this football mini-game tutorial below that we wrote for you to try. This experience is actually fairly simple compared to some of the things it is possible to create in ZapWorks, however you should be able to see how additional layers of complexity might be added.

If you want to build this mini-game, check out the tutorial here


Integrate visual and audio feedback

An easy place to start is to add some visual or audio feedback on button presses. For example, create a button that is actually a 3D model, so when the user clicks the button it squashes, and a noise is triggered. One thing to keep in mind when creating these visual responses, and with animating your experiences in general, is that in AR it’s best to over-emphasise. We’ve found that because the user is already moving their device around, subtle movements can easily get lost.


In Conclusion

Like any good magician, starting small and perfecting the fundamentals is key to long-term success. Use these design tricks to create memorable immersive experiences that will have users coming back again and again. Finally, don’t be afraid to experiment and innovate. AR is still in its infancy and you have an opportunity to help define the design conventions in a whole new medium.

Ready to start creating your own AR experiences?

Begin your 30 day trial of ZapWorks today.


Related links:

Showcase your best work on the ZapWorks forum

Designing AR experiences that add real value

Assembling the AR dream team