AR UI best practice – designing for augmented reality experiences

With Apple and Google introducing their own AR development platforms (ARKit and ARCore) and with Apple’s big focus on Augmented Reality (AR) at their recent Keynote event, it’s clear that the world is set to embrace AR technology and that brands will need to think carefully about how users interact with them in this new reality. 

Thinking about the AR UI (Augmented Reality user interface) isn’t as straight forward as you might think. By definition a good AR experience integrates the digital world and physical world seamlessly and any interactions should feel like you are interacting within a real world environment. With this in mind, the concept of traditional navigation design patterns can be somewhat redundant and AR will usher in a new era in user interface design. 

Think outside the box

Designing for these ‘new reality’ AR experiences requires a different way of thinking. No longer is the UI just ‘fixed to screen space’ with the only interaction being a simple swipe of the finger.

AR can be utilised in a number of ways (and on a number of different devices) and, therefore, designers need to think carefully about the context and function of the AR experience. Of course, this could be said of other digital experiences although when you take into consideration the vital extra dimension of complexity that is the real world (and all of the random elements that can’t be controlled – lighting, human interaction, etc) it means that there is much more to consider and also more opportunity to create something unique and engaging.

So for example, a rear view camera on your car (not an obvious example of AR but still valid) shows a digital projection of where your car is heading and is overlaid on the real world camera. The only interaction (and control from the user – the driver) is the movement of the vehicle (camera) to align the digital and real elements.

AR UI - Rear view AR camera

Another amazing example and an app that is a favourite amongst the Engine Creative team is Google Translate. This has minimal interface to set the language and the AR experience simply acts as a magic lens to transform the text in front of your eyes.

AR UI - Google translate AR app

Both of these examples show that the user interaction isn’t based on interacting with the screen but instead just moving the camera intuitively to augment the physical world with digital content. 

Different approaches to AR UI

From our extensive experience in developing AR solutions since 2011, we have identified 3 key ways of adding interaction to AR experiences:

1. Fixed to screen space 

All elements are locked to the screen space as per traditional app UI and don’t relate to the real world. These AR experiences lock to the screen in the same way a responsive website would and rely on the user to position the camera in a specific way to experience AR.

AR UI - Hotel beds selfie app

2. Real world related 

The AR UI relates to the environment and the physical world around the user. This is used for apps such as Yelp’s monocle feature, allowing users to see reviews of the best (and worst!) restaurants around them.

AR UI - Yelp Monocle AR mode

3. Object related 

The UI is attached to a particular object or trigger in real world space. We’ve produced a few apps with this UI integration for brands such as Black & Decker and Delphi. These can be real world objects that have interaction tethered to them or digital objects that are triggered by scanning a marker.

These different ways of interacting are commonly used in conjunction with one another and there is no need to be restricted to a single format at any one time, meaning AR experiences can be massively engaging to the user.

Apple’s approach to designing engaging AR experiences

As part of Apple’s growing investment in AR technology and in tandem with the launch of ARKt, the tech giant has produced their own guide for designing great, human-focussed Augmented Reality experiences.

AR UI - Apple's Human Interface Design for Augmented reality

Apple’s guide to delivering “immersive, engaging experiences that seamlessly blend realistic virtual objects with the real world” provides a lot of detail and, whilst much of it is common sense, it provides a good overview of interaction design for AR with highlights as follows:

  • Ensure interactions are accessible
  • Make the experience as clean and simple as you can
  • Consider lighting and environment and suggest fixes when problems occur
  • Onboard the user if required, this should be done in real world space if possible
  • Opt for direct interaction with objects over onscreen controls
  • Keep interactions simple stupid
  • Use the entire display to engage people
  • Use it for a reason (and that reason being the experience can only be achieved through AR)

Augmented Reality experts

Here at Engine Creative we have been designing AR experiences for many years and have picked up a thing or two along the way. We’ve learnt that there is a very careful balancing act needed to create a functional application of AR that still provides the immersive experience you can only get from augmented reality. We believe that this experience of being true augmented reality specialists and approaching AR projects in a different way to traditional digital projects has been key to the awards and recognition we have for the AR experiences we have created – it’s a true point of difference from other agencies.

While other digital platforms offer amazing solutions to advertise and promote your company, only AR is a contextually aware experience which creates an unrivalled connection between your brand and your customer in the real world.

The opportunities for brands across all sectors to tap in to these new reality experiences is huge – to find out more and let us help you find and design the best use case for augmented reality in your business please get in touch now.

Awwwards