Posted January 17 by Lukas Horak
Jan 17 by Lukas Horak

8 Things To Know When Designing Augmented Reality

8-things-to-know-when-designing-augmented-reality-img 8-things-to-know-when-designing-augmented-reality-img

Augmented Reality is a technology that complements the real world with text or graphic objects in real-time. Most often, it is an addition to a live image with information about the objects that are within the user’s field of view. The aim of this article is to highlight the fundamental differences, new interactions, or the spectrum of devices you can encounter when designing an augmented reality.

“If you have a feeling that augmented reality is something new and futuristic, look at the parking assistant in your car. You are probably using augmented reality almost every day.” Lukas Horak, CEO at PLATFORM.

The concept of augmented reality is not at all unknown. Among the most popular examples of augmented reality are mobile applications like PokemonGo, Google Translator or Snapchat. However, a much better known and older example is an ordinary parking assistant, which is used by most of us almost every day.

Parking Assistant
Augmented reality is commonly used in parking cameras

 

The number of mobile apps, using augmented reality, is constantly growing. These are graphical interfaces that we cannot control primarily by giving orders (non-command user interface), so designing such interfaces is an unknown territory for many designers. However, working with non-command user interfaces or voice user interfaces (VUIs) is very natural and it gives the designer the ultimate opportunity to upgrade UX of the existing products or create a whole new product.

To create an effective solution of augmented reality, we as a designers need to understand the goals and context. Let’s take a look at the basic UX principles of augmented reality.

Interactions
First of all, we need to realize that the interaction is strongly influenced by the particular situation in which we use the augmented reality. Is it appropriate to require tapping the screen in this particular situation? Isn’t rotating the smartphone enough? Will the voice command be the safer option (e.g. while driving)? Does the user have enough time for command? When using augmented reality, you’ll interact with:

  • Tap
  • Vertical or horizontal swipe
  • Pinch in/out
  • Rotate
  • Voice command
  • Facial expressions
PLATFORM's AR Airport app
Our concept of AR Airport App. Check out our Case Study.

 

Of course, smartphone interactions are not likely to be used for HoloLens or car displays. First of all, designers have to consider the hardware the user will be using. Then they need to think about the situation a user might be in when interacting with the app, and suggest the most appropriate interactions accordingly.

On top of reality
Many UX and UI designers begin the design process by sketching into predefined templates such as iPhone screen or other devices. There is nothing wrong with that, but when designing augmented reality, this traditional approach can be very limiting. You do not put the graphic interface of augmented reality into the smartphone screen. You put it in the real world.

You do not put the graphic interface of augmented reality into the smartphone screen. You put it in the real world.

3D objects
In the real world, everything is three-dimensional and therefore the use of 3D objects in the UI of augmented reality is very natural. All the elements around us are distinguished by different features like size, distance, color or movement. In an augmented reality, you’ll probably be working for the first time with 3D volumetrics that give users experience closer to reality. These are 3D objects that deal with light, shadows or position on X, Y, and Z axes. Using photogrammetry or 3D scanning, you can even convert real objects into 3D models to create your own object database.

“In the real world, everything is three-dimensional and therefore the use of 3D objects in the UI of the augmented reality is very natural.”

Interesting apps are already available in the app store today. Magnolia Market shopping app (video below) lets users view different home accessories in their living room, kitchen, or other part of the apartment.

Magnolia Market Shopping app

Google launched a platform called Poly, which makes it easier to find and distribute 3D objects for augmented and virtual reality. We believe that working with objects appropriate for AR and VR applications will be easier every day.

Animated media, pictures and videos
Animated media like pictures or videos are commonly used in augmented reality. In both cases, different data in the form of text and the UI elements itself are normally included in the user interface. 2D objects are almost identical to what we know today, but with augmented reality, these objects are used in a different context.

Visual guides
Visual guides help users understand how to use individual UI elements. Because augmented reality apps are relatively new, the use of visual guides should not be underestimated. Which elements are clickable? What primary action is required? What gestures should I use?

PLATFORM's AR app for setting up the electronic device
PLATFORM's concept of AR App that helps users to set a an electronic device. Check out full Case Study.

 

It is also necessary to think about the elements that are outside the field of view. Sometimes we need to indicate to the users that they need to look around or pick up the smartphone over their heads. Otherwise, they may miss out on great things. New, and untraditional interactions need to be explained in a clear way. Sometimes, text or sound is enough to let the user know they need to perform some action.

Voice commands and use of sounds
Sounds are an enormously important part of the real world. Think about how much sound helps you better evaluate your situation, e.g., when crossing the street. You can often recognize what’s going on around you without having to look.

However, designers often don’t attribute great importance to the use of sounds. Providing feedback in the form of sounds or sound notifications can really help the user interface, even more in the augmented reality. We recommend that you try to look beyond the screen of your smartphone.

PLATFORM's design of Smarthome device
PLATFORM's concept of smarthome device using VUI.

 

Even though voice control has recently been appearing as a science fiction, voice commands are becoming a natural part of products. We already use devices that have voice commands as the primary way of communication — Amazon Echo or Apple’s HomePod. At the same time, smartphones, tablets and television manufacturers are expanding voice control.

Voice control may be more natural in some cases of augmented reality than clicking on a screen or typing. Using voice commands is a relatively new way of communicating between humans and computers, however, when used properly it can be very useful.

Colors and texts
As with designing websites, mobile apps, or other graphical interfaces, the same rules and principles apply to augmented reality. Each color has a different meaning, users have certain colors associated with well-known actions. For example, the red button evokes a warning, an error message, a negative action, or a stop. The green button, on the other hand, stands for successfully completed task or a positive action. Color psychology works in the same way also in augmented reality.

PLATFORM's design of car's windshield AR dashboard.
PLATFORM's design of car's windshield AR dashboard.

 

Text and graphic objects must have a certain contrast to be easily readable. Individual elements are placed as an enhancement of reality (e.g., camera view on smartphone), therefore you have to test the graphic elements on different backgrounds. Sometimes you just need to use the right text size and contrast, other times, the use of semi-transparent surfaces placed under important information can help with readability.

Keep the well-known interactions
Designing augmented reality is a fairly new discipline. Too many new interactions and unusual graphical interfaces could hurt the product. We recommend that you primarily follow the standard ways of interactions. You certainly do not want to discourage your users. Make sure buttons look like buttons and use familiar interactions. Users will feel comfortable using your design of interface.

Roman Kalina
Lukas is Founder & CEO of design agency PLATFORM. Since 2001 he has been working hard on delivering award-winning digital experiences for clients such as Spotify, LG, Avon, BMW, Mattel Inc, etc.