Google Design has an interesting article this week about “Designing for Transparent Screens” and the work that went into Jetpack Compose Glimmer, Android XR’s design system for Display AI Glasses.
For those who haven’t used smart glasses with displays before, the first thing to know is that the “interface doesn’t actually appear on the surface of the lens itself.” Rather, it is “projected to a perceived depth of about one meter away.” Additionally, the display area is a square.
You can get an idea of what to expect by “placing your hand in front of you at arm’s length and focusing on your fingers.” As you do this, the “environment behind and around your hand goes out of focus,” as seen in the video below.
This was a really pivotal realization for our Android XR design team early on. It sounds like a small detail, but it means that to read any content, a user has to consciously shift their focus. They’re moving their gaze from the real world — say, a friend’s face, a stunning sunset, or the street ahead — to this one-meter focal plane. It’s not a passive glance; it’s an active, physical choice to engage with the UI, even if just for a millisecond.
Motion on this type of display cannot be “distracting or extraneous.” Google’s work on notifications found that a “typical motion transition of around 500 milliseconds” appeared too quickly:
Instead of slowly drawing someone’s attention, they would essentially “blink” and a notification would suddenly be in view.
The implementation Android XR settled on has incoming notification transitions spanning about two seconds during which a circle (badged profile avatar) expands into a pill.
With text, Google Sans Flex’s optical size axis is used to improve readability at that one-meter distance:
…letters like a and e have larger counters (the openings inside the letter), and the dots on j’s and i’s are further away from the letter body.
Bold typography and increased letter spacing are also recommended, with text measured in visual angle (degrees) instead of pixels or points:
Think of it like driving along a highway. You see exit signs or speed-limit signs with text and graphics printed at a fixed size. But how big that text appears to you changes dramatically based on your distance. Far away, it’s tiny; as you get closer, it grows. That’s visual angle in action.
These glasses use an additive display that can only add light. It cannot create black, which appears as 100% transparent, with Google equating it to “how a home movie projector can’t project black.”
This proved an issue when Google initially tried to port existing Material components:
Material Design, with its tactile metaphors of paper and layers, relies heavily on bright, opaque surfaces and subtle shadows. On an additive display, those “surfaces” turned into large, bright blocks of light, creating distracting glare and rapidly draining battery life.
We quickly discovered another significant problem: halation. Halation is that effect where bright light sources bleed into adjacent darker areas, creating a blurry, halo-like fringe. On these displays, our bright surfaces would bleed into transparent content, making text completely illegible.
Google’s solution sees “surfaces use black to provide a legible ‘clean plate’ foundation for your content.” This is paired with a “new depth system that casts dark, rich shadows to convey a sense of occlusion and space.”
Additionally, “highly saturated colors we’d typically use on a phone simply ‘disappear’ against the real world.” As such, Android XR UI is “neutral by default” to “harmonize with the diverse colors of the real world.” Color is used sparingly to draw attention to buttons and other important elements.
Surfaces in Glimmer are always dark and the content itself is always bright. This high-contrast default is our foundation for legibility in most environments.
FTC: We use income earning auto affiliate links. More.
Comments