Watches and Small Displays

Choose a watch-sized task #

Start with a task that can finish with a brief look and a small number of deliberate actions. A reminder, playback control or quick saved item can fit; reviewing a long source, editing a complex permission record or comparing many entries usually needs a larger surface. A companion destination should preserve the chosen record and draft instead of silently starting a new task.

Decide whether this is a native Wear OS application, a tile/complication, a notification, or a web surface. They have different lifecycles and input contracts. This package supplies React/DOM components; importing them does not create a native Compose or Wear OS implementation.

Watch anatomy and device-owned controls #

Adapt the task to movement, attention, context and connectivity. A timely view should use actual event freshness and permitted context, while keeping slow/offline recovery and a larger-device continuation available. The browser specimen has no native watch face, complication, hardware-button or rotary integration.

Choose the native layout surface #

The captured layout guidance starts from 192dp screens and uses extra space above 225dp for additional content. It favors proportional margins, shallow inline navigation, a scroll indicator and appropriate edge-hugging native actions. These are native reference decisions; the web lab’s 180/220/260 CSS-pixel viewports are independent geometric cases, not dp conversions or native layout implementations.

Review bold/system text settings on both small and large devices. Add useful information on a larger display rather than merely stretching everything. For non-scrolling surfaces, do not solve overflow by hiding the only action or forcing text smaller.

Round-screen geometry and focus clearance #

A rectangular phone layout can lose its corners on a circular display. Protect essential text, targets and focus cues using an inset layout or the native platform’s shape-aware containers. Use the actual usable display bounds; a CSS viewport, device density and platform dp are different measurements.

The browser specimen uses a conservative centered square. For a circular usable diameter D, its largest inscribed square has side D/√2, because a square’s diagonal equals its side multiplied by √2. The lab subtracts the border, rounds down, then reserves four CSS pixels per edge for focus. This is a geometric containment choice for the specimen, not a universal Wear OS padding prescription.

• Check the complete hit area and focus outline, not only the visible glyph.
• Do not make the corners carry an essential close button or permission choice.
• Let long content scroll within a named region; retain the full text in an accessible larger reading/editing surface.
• Avoid fixed-height text containers that crop translated labels or user-enlarged text.
• Native round-screen lists and edge-hugging controls may use more of the display than this conservative square. Verify their platform layout and focus contracts separately.

Working geometry and local task lab #

Change shape, size and text enlargement without resetting the draft or saved snapshot. Scroll the small region, reach Save with the keyboard, and compare the saved text with the editable text. Clearing a saved snapshot retains the draft. This is an English interface fixture; it contains no invented language entry.

Hierarchy, targets and scrolling #

Input, attention and interruptions #

• Prefer direct, named actions for the essential route. Gestures and rotary input can provide shortcuts, but their availability must be established on the actual native platform.
• Do not intercept page-wide wheel or arrow events to pretend that a browser is a digital crown. The lab preserves native scrolling and keyboard semantics.
• Keep the current item and draft across a short interruption, screen-shape change or restored surface. Separate a transient visual frame from durable task state.
• For native watch work, follow its back/dismiss behavior and current accessibility APIs. Test screen reader, touch exploration, rotary focus/scroll and hardware back on the chosen device.
• Avoid committing consequential changes at pointer-down, when scrolling may have been intended. A confirmation or undo path must stay reachable.
• A haptic or sound can supplement a visible result; it cannot be the only confirmation, error or permission cue.

Color, type and expressive treatments #

Material’s current watch guidance includes shape-aware layouts, motion physics, changing shape, color roles and watch-specific type treatments. For a native implementation, follow the current platform resources rather than mechanically copying web CSS durations or pixel sizes. Keep a stable information hierarchy through decorative treatment.

Use a matched foreground/background role and distinguish meaning with text. The lab uses this library’s actual card and primary roles in both themes. An imported theme snapshot does not prove readability in outdoor light or on an always-on display.

Curved headings and prominent numerals have specialized native typography roles. Keep essential prose readable in a conventional text flow; do not warp a source spelling into an arc to make it fit. Any decorative curved duplicate needs an ordinary accessible text equivalent.

• A pressed or selected state may change visual shape while retaining the target, name and stable task meaning. Do not infer selection from color or corner radius alone.
• Motion should describe the change and remain interruptible. Reduced motion must preserve the outcome. A finite web easing curve is not a native spring system.
• Do not reduce font size to compensate for a longer label. Reflow, shorten an interface label with its meaning intact, or move the complex task to a suitable surface.
• Use the current licensed type/icon assets for the chosen platform. The web specimen preserves MobTranslate’s existing theme.

Native type, color and feedback policy #

Numeral roles support a few prominent digits; arc roles adjust spacing for curved titles or short actions. Neither is a license to bend essential source prose into a decorative shape. Use the selected platform’s actual assets and keep an ordinary accessible equivalent.

Wear OS guidance builds its canvas from black and uses platform-tailored role pairs. Keep primary/on-primary and primary-container/on-primary-container relationships; primary-dim is not a substitute for an on-color. Secondary, tertiary and container roles can distinguish action emphasis. This library’s Earth-theme colors remain its web specimen contract, not a native Wear palette.

Native motion and shape changes can explain hierarchy or selection while names and targets remain stable. Use system haptic patterns where available, stronger emphasis for an important confirmed event and subtler feedback for precision scrolling. Synchronize optional tactile/audio feedback without making either the sole outcome or requiring users to tolerate it.

Ambient state, power and data #

An interactive view and an ambient/always-on view are separate modes. Decide which information remains useful when interaction, refresh rate and color are constrained. An ambient snapshot must not imply that a stale permission or server result is current.

A web layout lab cannot measure battery, display burn-in, background execution or device sensor behavior. Native implementation needs the platform’s current lifecycle/power guidance and measurement on supported hardware. Avoid polling or animation merely to make an idle screen appear alive.

• Show when a remote value was last confirmed if freshness changes the task.
• Retain a visible queued/offline state until the actual operation completes. A watch tap is not proof that its companion accepted a request.
• Keep access and publication permission attached to the actual record and purpose; do not cache private content solely for convenience.
• Make reconnection, expired authorization and interrupted audio paths explicit.
• For cross-device handoff, use an addressable destination and verify received identity, revision, draft and authorization in the receiving app.

Implementation and source #

The compiled specimen below uses a native scroll region and the exported Button. Shape/text controls update geometry only; local saved state remains independent. Its controlled draft is copied at Save time, so later edits do not rewrite the saved snapshot. All source bytes are checked by the example generator.

'use client';
import {useEffect,useState} from 'react';
import {Button} from '@mobtranslate/ui';

export function WatchDisplayExample() {
  const [ready,setReady]=useState(false);
  const [diameter,setDiameter]=useState(204);
  const [shape,setShape]=useState('round');
  const [scale,setScale]=useState(1);
  const [note,setNote]=useState('Check the original source before sharing this note.');
  const [saved,setSaved]=useState<string|null>(null);
  const [status,setStatus]=useState('No local note snapshot saved.');
  useEffect(()=>setReady(true),[]);
  // A square inscribed in a circle has side D / sqrt(2). Account for the
  // 2px border on each edge, then reserve 4px per side for visible focus.
  const side=shape==='round'?Math.floor((diameter-4)/Math.SQRT2)-8:diameter-20;
  return <div data-watch-ready={ready} className="space-y-4">
    <p id="watch-boundary">Browser layout specimen in CSS pixels. This does not emulate Wear OS, physical pixels, rotary input, battery use or a watch’s accessibility services.</p>
    <div className="grid gap-4 sm:grid-cols-3">
      <label htmlFor="watch-shape">Display shape<select id="watch-shape" className="mt-input w-full mt-2" disabled={!ready} value={shape} onChange={event=>setShape(event.target.value)}><option value="round">Round</option><option value="rectangular">Rectangular</option></select></label>
      <label htmlFor="watch-size">CSS display size<select id="watch-size" className="mt-input w-full mt-2" disabled={!ready} value={diameter} onChange={event=>setDiameter(Number(event.target.value))}>{[160,204,240].map(size=><option key={size} value={size}>{size} × {size} CSS px</option>)}</select></label>
      <label htmlFor="watch-scale">Text enlargement<select id="watch-scale" className="mt-input w-full mt-2" disabled={!ready} value={scale} onChange={event=>setScale(Number(event.target.value))}>{[1,1.25,1.5,2].map(value=><option key={value} value={value}>{value*100}%</option>)}</select></label>
    </div>
    <label htmlFor="watch-note" className="block">English example note</label>
    <textarea id="watch-note" className="mt-textarea w-full" disabled={!ready} value={note} onChange={event=>setNote(event.target.value)} aria-describedby="watch-note-help" />
    <p id="watch-note-help">The complete editable text stays available here. Save in the small display to capture this exact text in the example’s local state.</p>
    <div data-watch-display aria-describedby="watch-boundary" style={{width:diameter,height:diameter,border:'2px solid var(--color-muted-foreground)',borderRadius:shape==='round'?'50%':'var(--radius-lg)',background:'var(--color-card)',color:'var(--color-card-foreground)',display:'grid',placeItems:'center',maxWidth:'100%'}}>
      <div data-watch-viewport role="region" aria-label="Scrollable small-display note" tabIndex={0} style={{width:side,height:side,overflow:'auto',padding:8,outlineOffset:0,fontSize:14*scale,lineHeight:1.4,overflowWrap:'anywhere'}}>
        <p className="font-semibold mb-2">Note</p>
        <p className="mb-3" lang="en" dir="auto">{note.trim()?note:'No note entered. Use the editor above.'}</p>
        <Button data-watch-save type="button" aria-label="Save local note" disabled={!ready||!note.trim()} onClick={()=>{setSaved(note);setStatus('Local snapshot saved in this example. No remote transfer occurred.');}} style={{width:'100%',minHeight:44,height:'auto',padding:'3px 0',scrollMargin:6,transition:'none',fontSize:16*scale,lineHeight:1.3,whiteSpace:'nowrap'}}>Save</Button>
      </div>
    </div>
    <p data-watch-geometry>{side} × {side} CSS px content viewport. {shape==='round'?'The square and its reserved focus margin fit inside the circle.':'The content viewport leaves an edge inset.'} Longer content scrolls without shrinking its text.</p>
    <p role="status" data-watch-status>{status}</p>
    {saved!==null&&<div><p className="font-semibold">Local saved snapshot</p><p data-watch-snapshot lang="en" dir="auto" className="whitespace-pre-wrap break-words">{saved}</p></div>}
    <Button type="button" variant="outline" style={{maxWidth:'100%',height:'auto',minHeight:44,whiteSpace:'normal',overflowWrap:'anywhere'}} disabled={!ready||saved===null} onClick={()=>{setSaved(null);setStatus('Local saved snapshot cleared; the editable note is retained.');}}>Clear local saved snapshot</Button>
  </div>;
}

Failures and verification #

• At every shape/size/text setting, verify root reflow, readable complete text, visible focus and a reachable action.
• Use keyboard scrolling and native button activation. Compare the saved snapshot with the exact entered text, then edit/resize and verify it remains stable until the next Save.
• Clear the snapshot and verify the draft remains; submit an empty/whitespace note and verify that Save is unavailable without losing the previous snapshot.
• Inspect both themes and long content at 320 CSS px. Test meaningful boundaries and focus contrast in forced colors.
• For a real native watch release, test actual screen shapes, device text scaling, rotary/touch/screen-reader/back behavior, interrupted sessions, ambient transitions and resource use. Browser results cover only this declared web specimen.
• Do not label the specimen as a Wear OS emulator, claim native spring/arc-text behavior, or replace source/review/permission evidence with a compact visual badge.

Related guidance #