Skip to main content

Creative Bloq is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission. Learn more

5 pro tips on coding for AR

CG image of Castle rising out of smartphone
AR is moving from gimmick to mainstream tool, and developers need to get on board (Image credit: Pexels)

Once considered a forgettable gimmick, augmented reality has had a chequered history. But as the speed and flexibility of smartphones continue to grow, and retailers seek new ways to engage customers at point of sale, AR is swiftly emerging as a useful addition to any web developer's toolkit.

But developing for AR is very different from normal coding, and is fraught with pitfalls. In this post, our seven AR experts outline the challenges that it poses, and offer tips on how to meet them.

For more ideas on how to make your web designing life easier, see our top web design tools.

01. Make interactions super-obvious

GIF of woman interacting with AR mirror

An AR experience designed by Unit 9 for Burberry (Image credit: Unit 9)

"There are no user input conventions established in the AR space yet," points out Mark Vatsel, creative director (London) at UNIT9. "Websites have buttons and links, so users recognise them and use them. But taking a flat button and expanding it into a big floating bumper-car you need to hit in AR is rarely usable or fun. You don’t get that jolt, for one."

Until users and app makers establish these conventions, he believes we all need to examine our apps and make them incredibly obvious to interact with. "Where necessary, add a tutorial, text or gesture icons, and make time to observe users interacting with it, confirming that critical interactions work," he adds.

In short, you need to empathise with the user's struggle, stresses Olexandr Leuschenko, head of mobile stack at Ciklum. "Drawing parallels with mobile development, AR is in the pre-iPhone era," he explains. "Back in those days, apps for smartphones were tiny copies of their desktop versions, and only a few software development companies cared about the way people interacted with small screens."

Similarly, today most people need to learn to interact with AR; it's not yet instinctive. "So when we're coding a new AR project, not only does the development team need to implement the new way of interaction, but users need to get used to it too, and that's the biggest challenge."

02. Improve dev-designer communications

"To create good AR experiences, designers and developers have to learn new ways to communicate and work together," argues Tjeerd Hoek, head of creative at Argo Europe.

Why? "With 2D UI, it’s easy to create sketches and storyboards showing a flow of UI over time, and our software design tools have been developing over the past two decades to support these processes," he explains. "In contrast, to really understand whether an AR experience works you have to 'be in it', which makes it hard to capture the actual experience in screenshots, sketches, or storyboards. We need to find out how to simulate the real world setup the application is designed to handle."

03. Avoid flat content

Visualisation of girl sat on city pavement playing AR game

Promo shot for Unseen AR, a zombie chasing game developed by Unit 9 (Image credit: Unit 9)

Coding for AR isn't like normal coding, says Maciej Zasada, technical director at UNIT9. "After all, we’re talking about three-dimensions — or four, including time — alongside a lack of user constraints; people are free to move around in the real world. So it involves high level maths, physics and spatial imagination." 

Given that most developers are used to coding for ‘flat’ mediums like web or mobile apps, designing good AR UX can thus be very challenging. "We often defer to tapping screens or using text and buttons to present information and enable interactions," says Maciej. "But in the same way that you wouldn’t put radio content on TV, excessive use of flat visual content should be avoided."

In short, says Steve Thornton, technical director at ELVIS, "you need to rethink your approach to moving, scaling and manipulating objects and UI elements around a new three-dimensional virtual world."

So how do you go about it? "There are a number of frameworks or IDEs out there that really simplify these areas, or provide ways that abstract the complexities into convenient functions," he says. "In general though, I'd say reading up on modern game development techniques is a good place to start."

04. Be sensitive to device and browser limitations

For Ben Fogarty, CEO and Founder of Holoscribe, the biggest challenge of AR is delivering an in-browser experience that overcomes device limitations. "As developers of an AR and VR publishing platform, we have to code our way around the direct issues that IOS and Android present when it comes to placing our user within an AR world," he explains. 

In other words, don't try to run before you can walk. "It’s important that users are able to feel present and unrestricted in an AR world that's unhindered by browser limitations, which can work against accurate control of the accelerometer, gyroscope and detection and interface with the user's surroundings."

05. Limit the number of interactions

Three mobile screens showing Sea Shepherd AR experience

Resn developed this mobile AR experience for marine conservation organisation Sea Shepherd (Image credit: Resn)

Because interactions aren't yet intuitive to most people, it's best to limit them in number and scope, believes Matt Halford, creative technical director at Resn. "Limiting interaction to a single input, such as a tap, or intuitive gesture, helps keep experiences immediately engaging while being easy to pick up," he recommends. Taking advantage of AR's ability to let users move around objects can create deeper, more immersive and memorable experiences."

Animation and responsivity are key to adding life and realism, he adds. "They help integrate AR into the real world, and make elements react responsively. Aim to reward and delight, so users can't help but want to share, and are left eagerly wanting more."

Read more: