UI and interaction guidelines
Design glasses UI for readability, exit, and recovery. Do not simply shrink a phone page onto the glasses.
Glasses UI design reference#
Glasses UI/UX design guide · FigmaView design references for glasses UI and interactions.Display content#
- Check text size, contrast, and edge regions on the target glasses. Emphasize the current task and reduce long passages and continuous flashing.
- Verify layout in Studio, then optical appearance on the actual glasses. Do not infer the glasses' appearance from color images on a computer.
- Recheck long text for the current language and maintain your own translation table. Read host->locale_get instead of hardcoding one language.
Give every action a clear result#
- Distinguish single clicks, double clicks, long presses, and navigation TRIGGER events. Ignore unknown combinations.
- Head-gesture input must tolerate jitter and temporarily missing samples. Start with SDK example thresholds and state handling, then tune on the target device.
- Provide a clear exit path. Show progress and failure for long tasks, and allow retries after communication failures.
Keep work cycles short#
- Split time-consuming work across multiple on_loop calls. Avoid consecutive slow hardware operations in one event.
- Coalesce or rate-limit high-frequency data instead of sending a Bluetooth command for every IMU sample.
- Stop animation, sampling, and subscriptions promptly when the UI stops. Check that normal glasses use resumes after exit.
Use actual geometry and fonts to determine layout#
| Contents | Implementation | Verification |
|---|---|---|
| Canvas dimensions and coordinates | Query width and height with display_get_info and lay out in logical pixel coordinates. Studio defaults to 600 × 350. | Keep important text and focus indicators fully inside the actual drawable area. Set margins by physical-device readability; do not treat illustrative dimensions as firmware-reserved regions. |
| Font size and line height | Use font_default and font_large from the LVGL Host table, with font_get_line_height, text_get_size, and text_get_next_line for measurement. | Check function availability, then measure actual glyphs. A design mockup alone cannot require arbitrary 24 / 28 / 32 px font sizes. |
| Text hierarchy | Emphasize the current object, main result, and one primary action per screen. Split long content into sections or move it to the phone. | Check missing glyphs, clipping, line wrapping, and reading effort in the target language. |
| Graphics and Icons | Choose assets with clear outlines and contrast, drawn at their final display size. | Reinforce important meaning with text or state indicators; do not rely on color previews on a computer. |
| Focus and Layout Update | Update only changed control content. Reestablish a valid focus when deleting or rearranging controls. | After refresh, focus must not disappear or jump to the start, and invisible objects must not keep receiving input. |
Design at least five states for each page#
- Loading
Explain what is happening
For example, “Loading this section.” Do not leave the initial screen blank indefinitely. Provide a concrete action after timeout.
- Empty content
Explain why there is no result
For example, “No file selected. Choose one on your phone.” Make it clear which device to use next.
- Normal
Emphasize current information and the primary action
The title, body and focus remain stable; Use existing objects as much as possible when updating text.
- Failed
Retain what is available and describe the impact
For example, “Disconnected. You can still read the current content.” Show this only when it accurately describes the behavior.
- Stop
Leave no active resources after exit
Stop animation, IMU, and subscriptions. Release your UI according to its lifecycle and recreate it on the next start.
Keep games and continuous graphics responsive#
- Advance game logic using elapsed_ms in short, nonblocking on_loop calls. Do not create another infinite main loop inside a callback.
- Separate continuous input state from one-time actions. Navigation TRIGGER events may arrive repeatedly; PRIMARY SINGLE, LONG, and RELEASE have different meanings.
- Coalesce unnecessary refreshes and messages. Direct framebuffer drawing must follow tile-locking, dirty-region, and final-present rules.
- Handle on_suspend / on_resume for system suspension and recovery. Stop active work on user exit. An in-game pause must also provide clear resume and exit actions.
- Measure actual update time and input-to-display latency on physical hardware, then check sustained power use and recovery. display_get_info.refresh_hz is the nominal panel refresh rate, not guaranteed plugin FPS.
Reference files in the toolkit#
- GlassSDK/docs/GRAPHICS.md
- GlassSDK/examples/game/breakout
- PhoneSDK/examples/display-control-lab/README.md
- GlassSDK/include/gm_plugin_lvgl_api.h
- GlassSDK/include/gm_plugin.h