A Quick Guide to Designing for Augmented Reality on Mobile (Part 3)
This article is part 3 of an ongoing series, catch up on Part 1 and Part 2 and Part 4.
AR is driven by behavior and interaction. This article will dive into different types of experiences, as well as common design patterns and styles found in current AR apps.
Early definition of these experiences makes it easy to scope the type of content that will need to be produced. Testing is a crucial part of the design process, and understanding the focus of each experience will allow you to produce testing plans early and often.
Defining the Primary Focus of the Experience
FOCUS 1: Real-Time First
e.g.; Ikea Place App
In a real-time first experience, the success of the experience relies on the user interacting in real-time with 2D or 3D content.
This type of experience is most common in commerce apps. Users often need to preview a product to better observe or understand it. They may place, manipulate or browse content.
FOCUS 2: Narrative First
e.g.; Pokemon Go
In a narrative first experience, the success of the experience relies on the user performing a sequence of actions in order to reach a final goal or destination.
Narrative first experiences are most often used for gaming and story based experiences, they also rely a lot on device orientation, location and maps.
FOCUS 3: Capture First
e.g.; Instagram
In a capture first experience, the success of the experience relies on the user ultimately capturing a video or an image. A capture first experience is the basis of most sharing and platform based applications. These experiences usually involve layering data over the real world and often pinning and tracking to a real space or object.
Designing
Designers should create elements that are agnostic to their environment and work on all hues and levels of contrast.
In AR, we are essentially layering data over a live camera feed. We have no control over what the camera shows, and have to design accordingly.
It is good practice to preview and test the interface over a variety of background images and videos as the design evolves.
Current Observations
Here are some common design patterns in the current AR landscape. There aren’t many AR apps available to the public right now, so the research pool is still relatively small. The following are subject to change!
Color
- White is the most common color for text, icons and guides.
- Some applications have additional vignettes or gradients in the header and footer to make fixed elements more legible.
- Brand colors are used sparingly or not at all when in camera view.
- System colors outside of the brand colors may be used to reference errors, warnings or completed states. e.g., Red warning when getting too close.
- Opaque colors are usually reserved for call to action buttons or features such as triggers that may be obscured by the users hand.
Position
- Fixed elements are usually situated on the top and/or bottom of the screen. This lets the user focus on the center of the camera and composition.
- Additional prompts and elements that do not focus on content remain close to the bottom. e.g.; carousels and additional options.
Text
- Text is usually treated as a caption or label and in sans-serif since it’s easier to read.
- Text is most often in white or yellow unless on a background color.
- Text usually has an opaque or semi-opaque container to improve legibility.
- Text without containers are treated with a soft shadows and/or a subtle stroke.
Icons
- Icon treatments range between detailed, filled and outlined.
- Detailed icons often have containers to distinguish them from the camera feed in the background.
- Icons are used sparingly just like text.
- Icons often have outlines or shadows to help them stand out.
Indicators
- Indicators range from being super minimal to being complex and animated.
- Indicators are most often in white, yellow, blue or a low opacity black.
- Indicators are dynamic and adjust accordingly, they are also not persistent and disappear when an action has taken place.
Blend Modes
Video game UI has a lot in common with AR: both mediums deal with an active, user-controlled camera.
Video game interfaces are dynamic, and constantly change to adapt to user needs over time. They also make heavy use of icons and graphical elements to keep the user alert and focused on the environment.
Taking a cue from video games, Designers can wander beyond opaque and transparent UI and consider adding blend modes to their graphic elements. This method will allow the user to still see parts of the background without completely obstructing the view. Blend modes may also reduce the visual weight of a fixed element.
Types of AR User Interfaces
AR can manifest itself in several different interfaces. The following are common acronyms for some of them:
- GUI (Graphical User Interface): Interacting with data through graphic and visual indicators.
e.g., Pressing ❌ to cancel - HUD (Heads Up Display): Interacting with data layered over a fixed transparent display.
e.g., Guides on a back up camera. - VUI (Voice User Interface): Interacting with data through voice or speech. e.g., Asking Siri to set an alarm
- FUI (Future User Interface): A future facing interpretation of interacting with data.
e.g., Iron Man visuals - TUI (Tangible User Interface): Data influenced by interacting with the physical world.
e.g., Tracking your daily steps with a fitbit
In part four I will explore what it means to design for 3D in AR.
Thank you again to Devon Ko and Brendan Ford for the editing help and support.
