CONTACT

How to Successfully Design and Implement an Augmented Reality Feature

Joe Przybylo
  • Joe Przybylo
  • September 20, 2018
How to Successfully Design and Implement an Augmented Reality Feature

Is AR just the user interface trend of 2018? Don’t be fooled. AR is not and should not be treated as a UI trend, but rather as a tool or experience to solve problems and user pains. Solving a user’s problem in an intuitive and quick manner has always been the defining factor of a good mobile application and user experience. Augmented reality is no different, and should be used to solve problems in a more flexible way without the boundaries of a screen.

Trying out IKEA Place in the Punchkick office

What Is AR? What Is It Not?

Augmented reality (AR) isn’t new, but it is the emerging technology you keep hearing about more and more. AR is technology mobile platforms like iOS and Android are adopting to help tech agencies and their clients solve problems that current user interfaces still struggle with. In short, it’s the layering of user interface elements in a user’s reality.

You’ve probably seen applications of AR before Snapchat or IKEA Place without even knowing it. Ever watched a football game on TV? Those virtual lines helping you visualize the distance between the football and first down are a basic implementation of AR. A while back TV networks realized viewers at home were struggling to track the football and therefore losing interest in the program. They came up with the solution of placing and layering virtual lines or markers into the reality of the game. The markers were successful because they accomplished a few objectives: they were simple, didn’t take away from the game, and they helped viewers visualize the distance left to travel, creating excitement around the third and fourth down plays.

Nowadays augmented reality is making its way to everyone’s hand through their smartphone through two main means. The first is marker-based AR, which occurs when a digital element is rendered after an object is recognized by the system. The second, markerless-based AR, gives the user more control over the digital elements while giving them more flexibility with their environment and perspective. While marker-based AR is more popular for its object recognition, markerless-based AR is becoming more of a reality with Apple’s ARKit. We even made markless-based AR prototype ourselves recently, which you can read about here.

Snapchat, one of the most popular apps with prominent AR functionality, had over 188 million daily active users worldwide in the second quarter of 2018. Snapchat uses marker-based AR to detect an object, usually a face, with the phone’s camera before rendering an augmentation over the object. This results in interactive digital elements like facepaint, makeup, hats, etc. You can imagine that brands have found some pretty clever ways to take advantage of this. IKEA Place, by contrast, uses ARKit and markless-based AR, allowing the user to place digital renderings of furniture in their home without the app needing to recognize a predetermined object, or “marker,” so that it can be used in any environment, even subway stations.

Designing for AR

When designing for AR it is important to keep in mind the best practices currently established for mobile devices. In fact, a good starting point might be touching up on the latest releases of Apple’s Human Interface Guidelines and Material Design.

Accessibility is currently a big topic in interaction design and needs to be considered with augmented reality as well. Keeping onscreen UI elements simple, agnostic, and visual with limited word usage is the best start. Simplicity is key, as the UI will be more difficult to implement with the environment and background changing. Only present the most pertinent information on the screen. Think of your UI as visual clues for controlling the AR application while the user is in the driver seat of your app. Remember, you don’t want a distracted driver, so limit the number of necessary controls so that the user can pay attention to the real focal point of AR design: the real world, not your app.

Adding elements that incorporate gamification in apps can radically alter the way your app is used. This is one of the standout areas of augmented reality. Even the simplest gamification helps retain and engage users, making your application more successful. Therefore, leveraging gamification will help users better understand, learn, and get the most out of your AR application.

As AR is new tech to most smartphone users, being on the forefront of this trend does mean you need to take extra care to introduce AR elements in a way that is effective and beneficial. Complicating pre-existing features with AR or building out AR workflows that aren’t intuitive will make it very difficult for users to adopt your service and change their habits.

Rapid Prototyping

The main idea for rapid prototyping is to create a testable prototype with limited complexity in a short amount of time.

Instead of spending time on visuals and design, spend your time on the core interactions of the app or feature.

“This is about saving time and money by making sure that when you commit to building something by writing code, designing assets, you’re building the right thing.”

—Apple, 60 Second Prototyping, WWDC 2017

Rapid prototyping is a process used by many product teams to ensure their product is successful. At Punchkick, our process consists of sketching by hand, sharing, testing, and iterating before creating a bare bones digital prototype of an app, feature, or service in InVision. The bare bones prototype follows a similar process of sharing, iterating, testing, and iterating some more. It’s classic design thinking. This is the process we used to create our first rapid prototype of an AR experiment.

Connect

Let’s Build Together

Thanks for reaching out!

We will be in touch shortly.