Mastering Google Glass UI: Design Guidelines for Cards, Timelines, and Immersive Modes

Introduction

Google Glass offers a unique user experience based on a timeline of cards. This guide explains the UI components, design principles, patterns, and visual style needed to build effective Glass applications.

User Interface

Timeline Concept

The main UI consists of 640×360 px cards arranged on a timeline. Users scroll to view past, present, and future cards; new cards appear near the home card, which is the default view when Glass is activated.

Timeline Areas

Home Area – The default home card is the Glass clock, providing system‑level voice and touch commands to launch other apps.

History Area – Displays only static cards; older cards gradually move right and are removed after 7 days of inactivity or when exceeding 200 cards.

Current & Future Area – Shows both static and dynamic cards related to the current moment. Dynamic cards stay here while active; static cards with future timestamps or fixed positions (e.g., Google Now cards) also appear.

Settings Area – Located at the far left, allowing adjustment of system options such as volume and Wi‑Fi.

Card Types

Dynamic Cards can update frequently, access sensors (accelerometer, GPS), and support multitasking while running in the background.

Static Cards present text, HTML, images, or video without real‑time updates, typically used for quick notifications.

Both card types can include menu items for actions like share, reply, or remove.

Sharing and Immersion

Static cards can be shared with contacts or other Glassware. Immersion mode lets developers render custom Android activities outside the timeline, providing a fully customized experience for use cases that don’t fit the timeline model.

Design Principles

Glass differs fundamentally from smartphones, tablets, and desktops. When designing Glass apps, follow these principles:

Design for Glass – Focus on simple, real‑time, context‑aware information; avoid transplanting mobile or desktop UI patterns.

Don’t Obstruct the User – Appear when needed and disappear when not, complementing the user’s life rather than interrupting it.

Context Relevance – Deliver information at the right time and place to create a magical experience.

Avoid Surprises – Ensure functionality matches user expectations; avoid frequent or mistimed notifications.

Human‑Centric Design – Use voice and natural gestures, keep interactions brief, and communicate in a friendly, conversational tone.

Design Patterns

Components

Key UI elements include static cards, dynamic cards, and immersion mode activities.

Invocation Methods

Users can trigger actions via voice commands (e.g., “OK Glass”) or touch gestures on cards.

Voice Command Guidelines

Focus on the user’s desired action, not the technical operation.

Minimize the time from intent to execution.

Use natural, easy‑to‑say phrases of at least two words.

Make commands generic enough to work across multiple Glassware.

Common Patterns

Periodic Notifications – Insert static cards into the timeline on a schedule (e.g., hourly news).

Continuous Tasks – Long‑running dynamic cards (e.g., stopwatch) that users can pause, resume, or stop via menu items.

Immersion Mode – Full‑screen Android activities that temporarily replace the timeline, with a swipe‑down gesture to return.

Visual Style

Metrics and Grid

Glass defines standard layout dimensions and margins for consistent card design. Key areas include the main content (Roboto Thin), full‑bleed images, footers (Roboto Light, 26 px, white, centered), and status bar components.

Layout Templates

Common templates cover primary layouts, full‑bleed images with text, author/content combos, left‑aligned images, and lists. Implementation details are available in the Mirror API playground.

Color Palette

White: #ffffff

Gray: #808080

Blue: #34a7ff

Red: #cc3333

Green: #99cc33

Yellow: #ddbb11

These colors are used for standard text and to highlight urgent information.

Typography

Default fonts are Roboto Thin (primary) and Roboto Light (secondary). Text scales dynamically based on content volume, with larger sizes for more important information.

Copy Guidelines

Keep copy short, simple, and friendly.

Address the user directly using second‑person language.

Lead with the most important information within the first 11 characters.

Avoid repetition and unnecessary detail.

Following these guidelines ensures clear communication on the limited display space of Glass.