Over the past several years, augmented reality (AR) technology has established a home in entertainment, marketing, education, and many other industries. The use of AR apps in the enterprise will grow to $2.4 billion in 2019.
On the flip side, augmented reality also
brings a lot of challenges for designers. Nowadays, the most experienced
designers have solid skills in designing web and mobile apps, but these skills
aren’t always applicable to immersive AR experiences. We want to fill this gap
by providing this guide for augmented
reality design.
What is AR?
Augmented reality (or AR) is a technology
that layers computer-generated images on top of the real world. AR adds a
programmed layer over actual reality to create a third, dynamic level of
augmented experience. With AR apps, instead of just seeing information, users
interact with it and receive live feedback on the action they have performed.
Why AR is in the spotlight
Unlike virtual reality, which requires users to purchase pricey headsets in order to be immersed in an altered experience, it’s possible to experience AR on mobile. Both Android and iOS devices can drop virtual objects alongside real ones through the phone’s camera. This makes augmented reality a more feasible option for developers and marketers. Currently, we have more than 3.2 billion smartphone users worldwide, and this number continues to increase.
A quick guide to Augmented reality UI design
Understand the problem and ensure that AR is the right medium for solving this problem
When it comes to building AR apps, the
concept of “measure twice, cut once” becomes especially important. Before
diving into AR design and development, it’s important to have a clear answer to
the question, “What do I want to achieve with this AR app?” Your ultimate goal
is to ensure that the AR experience is right for the project. That’s why the
first step is finding out if AR is the right medium for solving the user problem.
Product designers should start with identifying the users and their needs.
After that, ask the fundamental question, “Do these problems involve immersing
the user in real-time?”
Augmented reality design should be tied to clear business and user objectives
You shouldn’t create an AR app just because
it’s trendy—that’s almost a sure way to create a poor UX. Rather, the desired
functionality needs to be evaluated to fit with the experience that the AR
display medium can offer.
AR in an app should be a layer of added value that reduces the time required to complete tasks. AR should empower the users and make them more productive. Consider the Ikea’s Place app. This app allows you to see whether a product will fit your existing environment. Ordering and placing an actual couch or lamp within your physical space would be much more time-consuming.
Ikea Place allows you to see how the furniture will look in your interiorConsider hardware capabilities
Offer
AR features only on capable devices. If your app’s primary purpose is AR, make
your app available only to devices that are capable of that. If your app
includes features that require specific AR capabilities, don’t show users an
error if they try to use these features on a device that doesn’t support them.
Instead, avoid offering the feature on an unsupported device in the first
place.
Don’t limit yourself with the rectangular frames
It’s natural for UI and UX designers to
start ideas in a box. When we design a new digital experience for mobile
devices, we usually draw within the iPhone screen frame. While this approach is
okay for the regular app, it won’t work for AR. Why? Because by doing that, you
create boundaries, and those boundaries will subconsciously limit your
creativity.
The great thing about AR is that it’s not
limited to the device screen. The device screen becomes more like a window that
we use to see the world. That’s why we should break down the boxes and instead
think about an interface as being flexible.
Design comfortable interactions
User comfort is a top priority for product
designers, and AR design isn’t an exception. Anticipate that people will use
your app in a wide variety of real-world environments.
Set initial expectations about the space required for interactions
Give users a clear understanding of the
amount of space they will need to experience your AR. Is it possible to use an
app in the living room, or will they need an open space for that? Communicate your app’s requirements and
expectations to people upfront to help them understand how their physical
environment can affect their AR experience. Include a preview with AR
interactions in the AppStore/Play Store, and add instructions in the app
itself.
Various spaces for the interactions. Image by Wikipedia.Public or private environment
Since you will integrate an AR design
solution into the users’ environment, you want it to feel as natural as
possible. The type of environment significantly affects AR design:
- In a private environment (e.g., home or work), product designers can
count on long user sessions and complex interactions. The whole user body can
be involved in the interaction.
- In public environments (e.g., outdoors), it’s essential to focus on
short user sessions. Because regardless of how much people might enjoy the AR
experience, they won’t want to walk around with their hands up, holding a
device for an extended period of time.
Collect all the details of the physical
environment to be augmented. The more environmental conditions you identify
before building a product, the better.
Design for safety
Sometimes users can get too immersed in an
AR experience, so they ignore physical objects around them. As a result, they
can bump into objects or people. To prevent such behavior, you need to build in
reminders for users to check their surroundings.
Don’t make users walk backward
The chances of bumping into furniture and
other objects are much greater when a user is moving backward. That’s why it’s
recommended to design experience that guides users to move forward, not
backward.
Don’t make users walk backward while they interact with AR. Image by Google.Consider physical constraints
Users will hold mobile devices while
interacting with your product. Thus, make comfortable designs to prevent
physical strains. For example, holding a device at a certain distance or angle
for longer periods can be fatiguing. To prevent causing fatigue, consider
keeping sessions short, and add periods of downtime to help users get relaxed.
Allow users to take a break
People tend to spend more time in experience if they are afraid to lose their progress. For example, when people playing an AR game are unable to save their progress on an individual level, they often finish the level otherwise, they will lose their progress. Let users pause or save their current progress in the AR app. Make it easy to continue an experience where they left off, even if they switch their physical location.
Usability testing is must
Usability testing should be a critical step
in the product design process. When the first working prototype of your augmented reality design
is ready, you should run comprehensive usability tests on the product in real
conditions. Your ultimate goal here is to make interactions with the product
comfortable for users.
Minimize the input
AR experiences should be designed to
require as little physical input from users as possible. When users are looking
through the device screen at an augmented picture, it’s going to be hard for
them to input data at the same time. Use alternative ways of collecting
information. For example, utilize a
device camera or sensors for this step.
Immerse users in experience
Don’t clutter UI
A good AR experience immerses users into
interactions. It only happens when people believe that what they see on the
screen is real. It’s vital to devote as much of the screen as possible to
display the physical world and your app’s virtual objects. Avoid cluttering the
screen with visible UI controls and information because they diminish the
immersive experience.
Strive for convincing illusions when placing realistic objects
To help users believe that the AR world is real, make sure your app updates the scene 60 times per second, so objects don’t appear to flicker. You can measure Frame rate (expressed in frames per second or FPS) in Xcode for iOS and Android Studio for Android devices.
Use audio
Audio is a multipurpose tool. Sound effects
can improve the usability of a product. For example, it’s possible to add a
sound effect to confirm that a user picked up a virtual object. Background
music can also help envelop people in the virtual world by creating the right
mood.
Offer easy onboarding
Many users have never experienced an AR
environment before. When users encounter their first AR experiences, they will
need guidance on how to interact with it. Onboarding plays a key role in
creating a great UX. Let users start in AR quickly by making a tutorial a part
of the main experience flow.
Avoid teaching users all the key tasks or mechanics at once
Show instructions or tips on how to perform
specific things in the context of actual interactions. By doing that, you won’t
overload users with information, and they’ll be able to get all the important
information at hand.
PLNAR, the digital desk platform, uses a swipe-through onboarding. This type of onboarding won’t work well for AR experience because the interactions are described out of the actual context. Image by vovakurbatov.For example: when a user is interacting
with an AR game, provide the user with steps and tips that they can use as they
progress through various levels in order to break apart the information.
Squishy Hoops, a free AR arcade game, reveals the instructions gradually to the user. Image by vovakurbatov.Guide the user visually
Use a combination of visual cues, motion,
and animation to teach users. Illustrate and use in-app experiences as much as
possible.
Google Map uses animated fox to guide users visually.Use familiar UI patterns
When
it comes to augmented
reality design, many designers try to invent and use new and unexpected
interaction patterns. They believe that by doing that, they will make an app
more desirable for potential users. In reality, they increase the learning
curve and make the first time users invest more time in learning how to use the
app.
That’s why when it comes to augmented reality interface
design, it’s always better not to reinvent the wheel. Instead, take advantage
of your users’ existing knowledge. A majority of mobile users know how to tap,
drag and swipe objects. And you can use those interaction patterns in your UI.
By doing that you won’t have to teach the user a whole new way to perform
simple tasks.
Conclusion
AR is one of the emerging technologies that have an
opportunity to change the way we interact with digital products.
The most important thing that any product
designer should remember about AR is that it’s just a technology. With each
product, people are seeking out experiences, not technologies, and they won’t
like a technology that isn’t friendly to use.