AR design and UX: 10 rules for WebAR people actually finish

Most AR projects lose people in the first seconds: they don't know what to scan, the start is slow, or the content flickers away when the hand shakes. The ten rules below fix that. None of them need code, and each one makes it more likely that people watch your AR to the end and share it.

1. Start from where people will be

Before you design anything, picture the moment someone opens your project. Answer a few plain questions:

• Where are they: at home, in a shop, at a bus stop, in a museum?
• How far away is the trigger: a card in their hand or a poster across the room?
• What is the light like, and is there good mobile internet?
• How long will they stay: ten seconds while waiting, or a few minutes on the sofa?

The answers decide the size of the print, the weight of your files and how long the experience should be.

2. Put a clear call to action on the print

People don't expect a poster or a package to do anything. Tell them, right on the print: what to do and what they will get. "Scan the code and point your phone at this picture to see the bottle come alive" works. A lonely QR code in a corner does not.

Keep the code close to the picture it starts, so people don't have to look for it.

3. Make the first seconds fast

The wait at the start is where most people give up. Keep files light: compress videos and textures, and use simple models for the first scene. Then make the wait look intentional: in WAS Design Studio you can customise the loading screen with your own design, so the first thing people see is your brand.

4. Let the content grow out of the real thing

The magic of AR is that the real object comes alive. If something unrelated just pops up on top, the illusion breaks. So make the first frame of your video match the trigger, and continue the artwork of the print: the character steps out of the poster, the drink pours out of the bottle on the label.

This is the easiest way to get the "wow" from the very first second.

5. Keep the real world in the picture

AR is a layer on top of reality, not a screen that covers it. Leave room around your content, place it where it makes sense in the space, and think about how it sits next to real things. A product on a table works better at its real size; a character looks better standing on the picture than floating in front of it.

6. Don't make it vanish when the hand shakes

If the content disappears every time the camera loses the picture, people think the project is broken. In WAS Design Studio, turn on screen fixation in the advanced settings: the content stays on the screen, and people can keep watching comfortably.

7. Break the fourth wall

AR puts the viewer inside the scene, so use it. A character can turn to face the viewer, look up at them or wave, instead of staring into the distance like an actor on a stage. Small reactions like this make people feel the content is really there.

8. Give people something to do

AR beats video because people can interact with it. Let them tap a product to see it in another colour, answer a question, open the next scene. In WAS Design Studio you can set animations and actions for every element and build several scenes with transitions between them.

Keep one clear action per screen. Three buttons that all look important mean that nobody presses any of them.

9. Make text easy to read

• Short phrases, large type, strong contrast against the camera image.
• Test it at the real distance and in real light, not only on your monitor.
• Use icons where you can. A play symbol or an arrow needs no translation, which helps when your audience speaks different languages.
• Remember sound: phone browsers usually don't play it until the viewer taps the screen, so the first seconds must work silently.

10. Give it an ending and a next step

Decide what people do when the AR is over: visit your site, get a discount, save your contacts, play again. Put that action on a clear button at the end. And make it easy to share: a WebAR project is just a link, so people can send it to friends in any messenger.

Test it like a visitor

Every rule above is easy to check on a phone and impossible to check on a computer. Before you print:

• Open the published project on two or three phones, including an older one.
• Use the real print, at its real size, in the place where people will see it.
• Try it on mobile data, not only on office Wi-Fi.
• Give it to someone who has never seen it and watch, without explaining anything.

A checklist before launch

Check	Why it matters
The print says what to do	Without a call to action, people don't scan
The first scene opens fast on mobile data	The start is where most people leave
The trigger tracks well	A picture with little detail never starts
The first frame matches the print	The "come alive" effect depends on it
Content stays when the hand shakes	Otherwise it looks broken
Text is readable at the real distance	Nobody zooms in AR
There is a clear next step at the end	That's where your result comes from

Picking the picture is a topic of its own: see how to pick a picture that tracks well. For campaign ideas, read WebAR marketing: 8 formats.

Ready to put this into practice? Try these rules on your next project in WAS Design Studio. The basic features are free, with no time limit.

FAQ

How long should an AR experience be?

As long as people stay where they scan it. A poster at a bus stop gets a short moment; a living photo album at home can hold attention much longer. Decide this first (rule 1), then design to fit.

Do I need a designer to make AR look good?

It helps, but the rules above matter more than polish. A clear call to action, a fast start and content that grows out of the print beat a beautiful scene that nobody finds.

Should every AR project be interactive?

Not necessarily. A living photo can be just a video. But even one action at the end, such as a button to your site, gives people a reason to finish and you a result to measure.

How do I know if people finish my AR?

Look at the analytics. Web-AR.Studio has built-in analytics, and you can connect Google or Facebook counters to your project.