WebAR that puts ‘your brand’ first!
There are a lot of Augmented Reality experiences out there and some of them are truly amazing. Even then, some of the best are really challenging to ‘start’ using, with more people watching the ‘promo video’ than actually ‘trying’ it.
Using web-based AR or web AR is the best way to reduce this friction, so people don’t have to find and download or install an app.
They open a link and it works.
In this post we’ll dive into the details of how to create an amazing ‘start’ experience to ensure as many people as possible actually ‘try’ your AR experience.
Let’s start at the most important place — putting ‘your brand’ first.
Start with your brand
In a great webAR experience you should be able to display your brand message within a second or two. Some webAR platforms insist on taking up this, the most valuable real estate within your experience, by putting their own brand first. At AWE, we know you need to use this for your own messages. Our platform makes it easy and cost effective to do that.
It’s also important to think about this part of your experience as a ‘communication space’. Some designers add only a ‘loading animation’ or ‘spinner’ here to try to keep people engaged while the webAR experience is loading.
But, this is the web!
You can add any message you want during the loading sequence, and since you’ve just grabbed their attention, this is the perfect opportunity to present your key branding message.
You can do this in an animated way using CSS and Javascript, and it gives you a chance to set the tone for the whole experience. This is all part of making your audience want to invest their time engaging with your webAR story. And if they don’t, then at least you’ll have communicated your most important message to them.
Make them feel welcome
Once the initial loading process of your webAR experience is complete then present people with a clear message that sets the scene, and helps them understand what to do to interact with the webAR content.
With the AWE platform you can choose to drop people right into the heart of the webAR experience, if you choose. We give you a tonne of design options enabling you to craft the experience you really want. We also recommend presenting an HTML Page based ‘call to action’ first. This has a number of benefits
1. Explain the ‘Value Exchange’
2. Give them ‘Clear Instructions’
3. Reduce ‘Permission Rejection’
4. Give them a ‘Sense of Agency’
5. Automatically ‘Unlock Audio Playback’
Let’s look at each of these points in more detail…
Explain the ‘Value Exchange’
People are more likely to engage with your webAR experience if they understand “what’s in it for me”. You don’t have to give away a prize (although some of our customers have driven a lot of traffic to their webAR experiences that way!). You just have to clearly let them know why they’re here and what this experience will let them do. This is the heart of making them feel welcome and setting the scene.
Give them ‘Clear Instructions’
Even though it may seem obvious, it’s a good idea to clearly let people know exactly “what do I have to do”.
If this is an Image based webAR experience show them a hint on which image they need to find in the real world and to point their device at to unlock the content. If it’s just one image then you might even want to set the background of this page to be that image.
If this is a Spatial webAR experience then you may want them to place an object on the floor in front of them. The AWE platform makes it easy for you to design a user experience that makes that easy when the scene loads, however showing this hint up front gives them a chance to move to a place where they have a clear space in front of them.
If this is a Face based webAR experience just letting them know that is a good idea. Most people love selfies, but it’s nice to know your camera is about to be turned on and you’ll see an image of your own face on your screen.
If this is a GPS based webAR experience then letting them know they’ll need to roam around and maybe “hunt” for digital objects outside gives them a chance to get ready to move about.
The options are endless… AWE also supports Relative webAR, Object based webAR, 360° and webVR experiences with more coming soon. And that’s the point. Because webAR can do so much, it’s even more important to make sure people know exactly what to do to get the most of the experience you’ve created!
Reduce ‘Permission Rejection’
If your webAR experience needs to access the camera then the browser/device will prompt for permission. If you also need to access the gyro then some devices will prompt for permission for that. And if you need to access the GPS to get the device’s geolocation then the device will prompt for that too.
These prompts can confuse some people and without knowing why this is happening, some will reject these requests for permission. This will block them from accessing your webAR creation.
Even if it’s just asking for access to the camera, it’s a good idea to let people know before this happens.
This is all part of increasing the proportion of people that actually make it through to ‘trying’ your experience.
Give them a ‘Sense of Agency’
By adding a ‘Start’ button (or choose any language you want) you are giving people control over when this ‘experience’ starts. It’s good to add some CSS or Javascript to this button to make it respond immediately when someone touches or clicks it so that your experience feels responsive. It’s also a good idea to make the whole viewport a hotspot for this tap or click even if you have a distinct button. This means that any action by the user will start the experience. But of course this depends on your design goals and if you have more than one interactive element on the page then you may choose a different strategy.
Automatically ‘Unlock Audio Playback’
Another benefit of adding a ‘Start’ action (e.g. a button) is that it gets people to touch the screen of their mobile device.
All modern browsers now require some type of user gesture before they’ll allow any audio to be played.
This is to prevent abuse by advertisers that want to autoplay audio in their web ads.
If you don’t get some type of user gesture, any audio in your experience that’s set to autoplay will not be able to start, and any videos set to autoplay that don’t have audio muted by default won’t play either. In order to solve this user experience challenge the AWE platform automatically displays a modal asking the person to tap OK to unlock audio playback — but only when it really needs to. By adding a ‘Start’ action (e.g. a button) you can avoid this interaction pattern altogether. Easy!
Transitions
One of the most powerful features of the AWE platform is enabling you to weave different types of webAR scenes together. You can seamlessly move from an HTML Page, to an Image based scene, to a Spatial scene, to a Face scene, to a GPS scene, etc. You can link different types of scenes together in any order and use all kinds of user interactions to transition from one scene to the next. This means you can create really rich and interactive immersive webAR experiences.
Each time you move from one scene to another, the content of the current scene is removed and the content of the next scene is set up. In some cases this can be immediate, but in others where the content files are larger, this can be visually noticeable. Moving from an HTML Page to an Image based scene is one example of this.
In these cases you might want to show an HTML overlay while this transition happens and then remove it once the next scene is ready to interact with.
In your startup experience you can combine this with the ‘Request Permission’ step to make it really clear to people what is happening and why.
It’s alive!
Now you immediately see the live webAR experience. The heart of your whole creation which is the content you really want people to see and interact with.
This may seem like a few steps, however if you design this correctly then your audience will see this as one smooth and continuous experience. They’ll open the link and within 1–2 seconds see your experience come to life. They’ll see your brand message first and then be guided through to the point your webAR comes to life.
You’ll increase your conversion ratios and leave people feeling in control.
You’ll ensure your brand message not only looks good, but feels great too!
Choose a great domain
We recommend creating a short and memorable domain for your webAR experience that helps communicate your brand message or value exchange. You may offer a QR code (see below), but not everyone will scan that. People may also want to share links to your experience too. Even when people do scan your QR code they will see your domain in the link preview before it opens. By having a clear and simple domain for your project you increase the chance the link will be clicked or opened.
Offer a QR code
The quickest way to get anyone to access your webAR experience is with a QR code.
From a phone with it’s screen turned off you can
1. Turn on the device
2. Swipe to open the camera app
3. Scan the QR code
4. Go directly to a webAR experience
All with a single swipe and tap, completed within 1–2 seconds.
All AWE projects automatically generate default QR codes for your project and for deep links directly into each of the scenes. Then, using tools like QR Code Monkey you can customize these QR codes by adding colors, changing the code style, adding images and more. This is yet another chance to stamp your brand message onto the ‘start’ of your webAR experience.
What if they didn’t feel welcome?
Not everyone will choose to continue on and ‘try’ your webAR creation. In your ‘Welcome’ page it’s a great idea to offer a fallback option that provides a link to other web content. This may also give them a chance to view a ‘promo video’ that shows what the using the webAR experience is like. This can be used as a channel to convert more reluctant people, or at least move them to engage with a more conventional web experience.
What if their device is not supported?
Even though webAR is now accessible on nearly 5 Billion mobile devices and computers, not everyone will have a device that’s capable. The AWE platform automatically detects which capabilities each browser and device has available and lets you provide a message and guidance to unsupported devices.
webAR is now accessible on nearly 5 Billion mobile devices and computers
What about multiple languages?
You may also want to provide multiple versions of your webAR experience that present information in different languages, or just not English (the default language enabled). AWE automatically detects which language the browser has selected and allows you to define your own content to match.
Think about the whole experience!
If you want people to experience your whole creation, then it’s important to think about their whole journey — from first hearing about your webAR through to spending time engaging with it.
Start by putting ‘your brand’ first, then giving them control over how they ‘Start’. Provide seamless transitions and let them know why you need ‘Permissions’ before they are prompted for them. Then when they get into your amazing webAR creation it will be running smoothly and blow their socks off!
This should give you a good introduction to creating a custom branded webAR experience.
The key message we hope you take away from this is that webAR is here right now and it provides an amazing opportunity for creative people like you to weave new and exciting immersive experiences.
Please share this post and come back again when we continue exploring how you create webAR. You may also like to checkout our first post in this series.
Looking for help getting started with webAR?
Here’s a guide to setting up your free trial and getting started creating webAR. And here’s a guide to creating your first Image based webAR experience.
If you have any questions or need any help please contact support [at] awe.media — we love to help!
