If you have an Android app and want to keep its visual style, you can maintain that design language in Android XR. For new apps or redesigns, consider following Material Design guidelines for UI size, accessibility, typography, color schemes, and components.
2D mobile or large-screen Android apps can take advantage of Full Space capabilities with very little additional development work. For high XR impact, consider spatializing panels and creating spatial UI. For more immersive user journeys, consider adding 3D models and environments.
If you have or are building a Unity, Open XR, or WebXR app, you are free to follow any design language you choose. The design recommendations provided by Material Design can help you apply colors, spacing, scale, buttons, and typography.
How to test your app's visual design
Testing your app's visual design is crucial to ensure a comfortable and accessible user experience. Here's how to test across different XR platforms and environments.
Use emulators, simulators, and real devices
- If you're developing an Android app, test your app on the Android XR emulator. This helps you identify potential issues and quickly iterate without a physical device.
Visual design testing checklist
- Test any movement or animations to ensure they don't trigger motion sickness. Check for smooth transitions, stable frame rates, and predictable motion.
- Try out passthrough in real-world settings to ensure virtual elements blend with physical surroundings.
- Test your app in different lighting conditions, including bright and dim environments.
- Check text readability at different distances and angles.
- Evaluate the color scheme for accessibility and comfort.
Gather user feedback
Conduct user testing to identify any areas for improvement. Include users with varying levels of XR experience and visual abilities for a comprehensive perspective.
Targets in Android XR
In an XR app, a target is the tappable or pointable area that users interact with. Larger targets increase precision, comfort, and usability. To make your app accessible, follow Material Design target guidelines. They will work with Android, Unity, OpenXR, and WebXR apps. If your app already follows Material Design recommendations, your target sizes meet the minimum, though 56dp is optimal.
All interactive UI elements should consider:
- Recommended target: 56dp x 56dp or larger
- Visual affordance: 48dp x 48dp or larger
- Offset between target and visual affordance: 4dp
- For accurate interactions, pointer targets of different UI elements should not overlap
Make sure you add hover states
For increased accessibility, incorporate hover and focus states in addition to the basic interactive states for interactive components. Hover states can be helpful for everyone, and are particularly crucial for users who rely on pointer inputs to select UI elements.
Hover states play an important role in enabling eye tracking functionality within the system. However, when eye tracking is enabled, hover states are inaccessible to the application to protect user privacy and prevent data sharing. The system will draw a user-visible-only highlight state to convey which UI components are interactable.
Distance between targets
Material Design recommends a minimum 8dp of space between targets, including buttons. This spacing ensures that users can easily distinguish between interactive elements and avoid accidental selections.
The specific distance between buttons can vary depending on their context and size. Some factors to consider:
- Button size: Larger buttons may require more space between them to maintain visual clarity.
- Button grouping: Buttons that are closely related functionally can be grouped closer together, while unrelated buttons should have more separation.
- Layout: The overall layout of the screen can influence the spacing between buttons. For example, buttons in a toolbar may be spaced more closely than buttons in a dialog.
Panel size and scale
Android XR is designed to make your app comfortable, legible, and accessible to a wide audience. For an optimal experience, Android XR uses 0.868 dp-to-dmm.
If you are using panels, your XR app will most likely be farther away from a user than a physical screen. Consider the user is wearing a headset. For optimal comfort, place primary content in a 41° field of view so users don't have to move their head to interact.
Recommendations
- Panels have 32dp rounded corners. You can override this default.
Panel depth behaviors
- Home Space: Apps launch 1.75 meters from the user, and developers can't override this.
- Full Space: By default, apps launch at the same position they were in Home Space. You can use spatial logic to place panels based on the user's position, though we recommend a launch distance of 1.75 meters.
When an app is 1.75 meters from the user:
- 1024dp is perceived as 1556.24 millimeters
- 720dp is perceived as 1093.66 millimeters
- 1 meter in physical reality = 1 meter in XR
Buttons and icons
If you have an existing Android app, you don't need to design special components for Android XR. Follow Material Design's guidelines for buttons and icons. If you have a Unity, OpenXR, or WebXR app, you can keep your buttons and icons as-is, or be inspired by Material Design.
If you decide to build your own buttons or icons, opt for simple forms, clean lines, basic shapes, and a limited color palette. Avoid overly detailed designs. Make them scalable and legible across varying resolutions and viewing distances. For accessibility, ensure sufficient contrast between the component and its background, and provide text descriptions or tooltips for users with screen readers or other assistive technologies.
Colors
Android XR follows Material Design's color system to ensure a consistent and visually-appealing interface. To create an immersive visual style tailored to XR, design with sufficient contrast, choose a balanced palette, use colors accessible for those with color vision deficiencies, and avoid jarring combinations that can cause eye strain or disorientation.
Dark and light themes in XR
Use dark and light themes as you would on an Android mobile app. Users can switch between dark and light themes in Android XR, choosing the visual style that best meets their individual preferences.
Learn more about Material Design color schemes.
XR typography
Font legibility is critical to a comfortable user experience in XR. We recommend using typescale options with a font size of 14dp or larger, and a font weight of normal or higher for improved legibility.
To create an app that is easy to use, consider following Material Design's typography guidance.
Best practices for typography in XR
- Size for variable distances: Remember that users will be moving and viewing text from varying locations. Ensure font sizes are large enough to be read from a distance.
- Position text in the user's natural field of view: This avoids excessive head movement and neck strain.
- Consider depth and scale: Use depth cues and scale to create hierarchy in the 3D space.
- Make sure text is legible against a user's background: Heavier weights offer more contrast. Adjust depending on the environment's colors, lighting, and complexity.
- Use adaptable typography: Panels may be too close, too far, and at awkward viewing angles from a user.
- Limit text attached to moving objects: This can cause motion sickness.
Accessible typography in XR
- Select fonts for legibility: Prioritize fonts with clear letterforms at small sizes and far distances.
- Use sentence case text: Sentence case text is easier to read than uppercase text.
- Limit line length: Aim for shorter line lengths to improve readability.
- Select accessible colors: Use color combinations that are legible to users with color vision differences.
- Avoid overcrowding: Give text ample breathing room.
- Allow text scaling: Let users adjust text size to meet their individual needs.