Designing better user interfaces in AR — Implications and guidelines

Muhammad Sajjad Shahid
Inside Design
Published in
7 min readMay 23, 2018

According to AngelList, more than a 1,000 startups are working in the Augmented Reality (AR) space. Despite setbacks in the adoption of AR technology in the last few years, the growth of AR-enabled products/services has remained significant. In 2017 alone, Statista reported that the market size of AR-gear was around $9 billion and will reach $17 billion by 2020.

AR has the potential of changing the way we interact with reality. The good news is that the field is still open to developers who have an interest in making engaging AR-enabled UIs.

Read more: Getting started with AR and VR design

Tech-futurists predict that AR for mobile is going to be more marketable in near future because the devices that can be used for AR are already available in the market.

Understanding mobile constraints

Mobile AR brings in a new set of interaction challenges as users have to hold the smartphone in front of them for the entire session. Designers need to overcome these challenges to lower lost interaction sessions and increase engagement. The major challenges that AR experience designers face include:

Screen restrictions

Mobile devices are just one way of delivering AR experiences. However, its market share is the highest among the users. Experts suggest that mobile will remain the biggest medium for the next few years because there isn’t much use of AR-gear other than augmenting reality experiences.

Therefore, designers need to consider the varying screen sizes, orientation, and proximity while designing the AR UIs. They also need to note that users will be holding the phone with one hand, while looking at their surroundings through the phone’s screen.

Difference in dimensions

While designing the AR interfaces, the designers need to keep in mind the human interaction models. The most used AR model is the “Wizard of Oz.” It works by adding pointers at various places and then triggering them when a user gets near.

This model is applicable only to users who move around. For users who don’t, the traditional 2D approach to UI design is more suitable. However, note that this experience is not pleasing and thus the designers need to be creative in interface design and encourage movements that lead users to a richer experience.

Environmental hurdles

AR app designers should take care of varying floor sizes, floor elevations, and/or overlapping planes. Though the AR systems can navigate planes smartly, the designers should come up with unique ideas that can help users engage with the physical spaces in AR worlds.

Train the users

Users are not familiar with the actions they need to enjoy immersive experiences. In particular, two functionalities (scale and zoom) should be part of the AR tutorials. Reticle and raycast are two ways to do it, but to increase the engagement designers should focus on getting a character that reacts to various proximity levels. This will keep the users engaged while informing them of how to use the app.

Location-based AR indicators

AR applications are a great way of informing users about geo specific prompts. For example, consider a banner that shows discounts to the users once they get near to a location. There are two ways to implement this banner:

Bluetooth beacons

Bluetooth beacons allow users with Bluetooth enabled smartphones to request information on the AR app when they get close to a beacon in the area. The concept is already in practice at many hotels in the USA and the UK.

GPS

The second way is to use location-based markings for AR activities. In this implementation, AR developers mark various places on a map and then use the data available on the GPS to prompt information in AR when the user gets near to it. This idea forms the basis of the popular Pokemon Go game.

Best practices of AR UI design

A great AR design is a mixture of multiple design approaches. Designers shouldn’t restrict themselves to a single format and work on designing an all-inclusive AR experience. For this to happen, here is a list of common AR practices that the designers need to focus on for building a usable AR UI design.

Keep it fixed or expand it to 360

Traditional UIs limit users to a small screen but 360 degree AR/VR devices come with wider lenses that enable the users to look in all directions or at least see the augmented reality content from all aspects. On a small screen, adding designs and pointers is complex because they take up too much of the available screen real estate. A good fix for this situation is to resize the icons to screen sizes.

The 360 degree cameras are feature-rich and make interactions easier. But, considering that majority of the phones today still have smaller screens, designers will have to come up with novel ideas that go around the screen size problem.

Remember to provide value

Make sure the AR app you’re designing provides benefits to the user. For example, Yelp’s Monocle app provides ratings of restaurants in AR whenever they get near to a restaurant. The idea is great because it works precisely as described. A small bar with review rating block is enough to make the user come to a decision about the restaurant.

Focus on object proximity

Another problem with AR apps is the proximity issue. While working with the AR designs, the designers should give special attention to the proximity levels of various pointers. It would leave a bad impression if the user’s screen is filled with a large AR pointer or indicator if they don’t want to see it.

Instead, showing a notification as arrows or pointers that lead users to the destination is a better idea.

Overcoming AR design challenges

The good news is that many of the AR design challenges are not the end of the road. Rather, they are roadblocks that could be easily sidetracked. Here are a few suggestions that could help AR UI/UX designers beat the odds.

Don’t limit yourself to 3D

Most designers make the mistake of thinking that AR UI should be designed in 3D. But in reality, basic 2D images will work for many simple tasks such as pointing out areas of interest. In fact, for startups that don’t have the budget can easily draw directions or characters in 2D, without sacrificing too much of the user experience.

2D UX best practices don’t work in 3D

Most AR designers believe that the designs should be in 3D. But considering that no strict rules exist, UI experts can play with various models in any way they want. The best way is to get real users to test the designs and they will provide a more realistic feedback.

Take interaction with physical objects as inspiration

Do you read the roadside sign boards? As an AR designer, these are just some cues that you can use while creating AR apps. Highlighting the roadside sign boards with an arrow, or adding pointers that pop up more information when users click on them are just some design ideas. AR designers can get inspiration from real-life examples to add to their AR designs.

Make it comfortable for users

One design factor that you should keep in mind while designing AR UIs is that the app shouldn’t be too intrusive. AR apps that are uncomfortable to use will quickly get uninstalled.

Don’t mess with their screen unless the information you provide is of high importance. Otherwise, keep the pointers on the sides so they can actually see the real world.

A decent example of this case is an AR app by Hastings District Council called Magical Parks. The app helps children stay in the park by making them solve AR puzzles. The app comes with non-intrusive models that don’t cover the whole screen, letting the kids differentiate between reality and AR.

Opt for direct interaction with objects over onscreen controls

Most current AR apps focus on on-screen controls instead of interaction with the models. For a truly immersive experience, the designers should create object interaction models instead of on-screen controls. While on-screen controls are great for static or limited experiences, the impact diminishes for mobile AR experience.

  • Keep it clean and simple

Don’t over complicate the design by adding chivalries to the interfaces. Instead, focus on a clean design that makes the users understand the instructions provided in a robust way. Driving navigation apps are doing it in a subtle way.

In the above example, NVIDIA AR provides navigating paths and points of interest that don’t interfere with the driver’s sight.

Final words!

There is no hard and fast rule for making AR designs. Since this is an evolving field, the designers have a lot of room to experiment and come up with UI models that are unique to the AR industry.

What would you like to add more to this article? Let me know in the comments below.

--

--

Muhammad Sajjad Shahid
Inside Design

Sajjad is an Ecommerce Community Manager at Cloudways. He loves helping out Ecommerce store owners, merchants and marketers in establishing their businesses.