Place UI Kit — the Future of Augmented Reality Mobile Apps

When Apple released ARKit, designing for augmented reality wasn’t defined as a field. But during autumn of 2017 in App Store appeared a lot of AR apps. Almost all of them used ARKit.

In the beginning, the user flow of augmented reality applications wasn’t clear. I wanted to define what interaction patterns are the most popular in ARKit apps. So, I made an extensive analysis of the onboarding process for almost all apps available in the App Store. Also, I have made UX reviews for free just to get experience and more insights.

I keep noticing that for the first time, users were tough to understand how AR works. Also, UI wasn’t clear even for experienced in AR users. So the learning curve for new users became even longer.

It looks like first demos build mostly by Unity and iOS developers. Obviously, they didn’t have the time or any other resources to hire experienced UX designer. Those times there wasn’t settled interactions patterns that could be followed.

Thus in my article “Onboarding in augmented reality mobile application” I tried to cover the essential steps and clarify what to focus and what to avoid. I hope that it made at least a single app more user-friendly.

After some time, Apple and Google released its own guidelines for AR apps. Although they are beneficial, they still left blind spots. I do recommend to have a look if you didn’t have a chance to learn them. (www.blog.google, developer.apple.com)

While the time I collected a lot of screenshots and started noticing some pattern in building user flows and using UI components in AR apps. So I decided to create a UI kit that could be sophisticated enough for designers, but also can be useful for developers that can find suitable UI solutions to copy.

For easy searching I sorted all the screens in the next categories:

Scanning:

It’s first and the most confusing moment for first-time users. An app should gently (or not) let a user know that it needs some info about the environment.

Placing:

Once application scanned area and detected planes, a user can start placing 3d content. There are different interaction patterns, that can be suitable for different situations.

Manipulate and tips:

This step is about playing with augmented objects itself. In flat UI there are a lot of stable well-know patters, as swipe from the top to update page, and so on. In AR, it’s like the wild west. Apple and Google tried to define some situations. But sometimes a case requires unique interactions. It’s critical to introduce them gently. Depending on the importance it can be a small tip net to the button or almost full-page popup.

‍

‍

Location:

Maybe the most well known AR app is Pokémon GO, what is location-based. I hope that in future we will get much more interesting cases of using location-based augmented reality.

‍

‍

Catalogues:

For some applications, AR isn’t the main feature. Show object in AR is the only option. Apple suggested the icon for consistency. But I haven’t noticed it in any application that I tested. Also, lists and galleries are the most obvious ways to find a model.

‍

Camera view:

All his time, a user spends in the camera view. There can be various UI components that help interact with the AR world.

‍

Icons:

To quickly explain some gestures and concepts to a user, I created the collection of icons:

‍

I hope that this collection will help to create more user-friendly augmented reality mobile applications.

😎 Download Full Version on Gumroad

🤗 Download Free Version on Gumroad

👨‍💻 Check full preview on Behance

‍