case/workspace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d0fc85ded1348cb3b805a995696ee8e1942fe34f
workspace/projects/kipp/research/alexa-plus-ui.md

12 KiB
Raw Blame History

Alexa+ UI Design Patterns for Smart Displays

Research compiled Feb 2026 from Amazon official sources, The Verge, CNET, PCMag, Android Central

1. Key UI Patterns

Home Screen / Dashboard Mode

  • Personalized home screen that adapts based on user, time of day, and proximity
  • Visual ID (facial recognition via 13MP camera) — recognizes who approaches and personalizes the display (your calendar, your smart home favorites)
  • Proximity-aware UI: Shows larger fonts/info when you're far away, detailed widgets when close
  • Ambient brightness adaptation via ambient light sensor
  • Content rotation: Home screen cycles through widgets, photos, suggestions, weather, calendar events
  • Home Content Categories toggle: Users can enable/disable content types (recipes, news, shopping suggestions, etc.) via Settings > Display & Appearance > Home Content Categories

Conversation Mode (Alexa+ AI Interaction)

  • Voice-first, screen-second: Conversation transcription appears on-screen during voice interaction
  • Visual aids: Alexa+ shows pictures, videos, recipe cards, or product images as contextual visual responses
  • Multi-turn conversation: Follow-up questions without re-saying wake word; conversation context maintained
  • No persistent chat window: The conversation UI appears as an overlay during interaction and returns to dashboard when done — it's NOT a chat app
  • Suggestion chips: When idle, Alexa+ can display "things to try" suggestions on the home screen

Smart Home Dashboard Mode

  • Full-screen smart home dashboard accessed via Menu > Smart Home or voice ("Alexa, open my smart home dashboard")
  • Derived from Echo Hub interface — grid of device controls with room switching
  • Map View integration — visual floor plan layout of devices (from Alexa Map View feature)
  • Camera feeds inline — view Ring/security camera live feeds directly
  • Home/Away/Night modes — single-tap to change home state
  • Device status at a glance — lights, locks, thermostats, cameras all visible

Media/Entertainment Mode

  • Media control center: Dedicated browsing pages for music, ambient sounds, podcasts, books
  • TV & Videos experience: Aggregated content from multiple streaming providers
  • Full-screen video playback for shows, recipes, video calls

2. Color Schemes and Typography

Visual Design Language

  • Clean, modern aesthetic — described as "cleaner, sleeker full-screen UI" (The Verge)
  • Dark backgrounds with bright accent elements for widgets (typical of ambient displays)
  • Adaptive brightness — screen adjusts to room lighting automatically
  • Photo-forward: When idle, displays personal photos from Amazon Photos as ambient wallpaper/slideshow
  • Card-based UI: Information presented in distinct card/widget containers with rounded corners
  • High contrast readability: Font sizes scale based on distance (proximity sensor)

Typography

  • Amazon's custom typeface family (Amazon Ember)
  • Large, glanceable text for time, weather, calendar — designed to be read across a room
  • Smaller detail text when user is close/interacting
  • Bold headers for widget titles, lighter weight for content

Color Palette (observed from press images)

  • Background: Dark navy/charcoal or photo wallpaper
  • Widget cards: Semi-transparent dark cards with white text, or light cards with dark text
  • Accent colors: Alexa blue (#00CAFF-ish), warm amber for alerts/reminders
  • Smart home controls: Color-coded by device type (warm yellow for lights, blue for locks, etc.)
  • Conversation UI: Blue gradient for Alexa responses, lighter for user transcription

3. Widget Types and Layouts

Available Widget Types (Echo Show 15/21 + new Echo Show 8/11)

  • Clock/Time — large, always-visible
  • Weather — current conditions + forecast
  • Calendar — daily/weekly/monthly views, multi-calendar family support
  • Smart Home controls — quick-access device toggles
  • Camera feeds — live view from Ring cameras
  • Shopping list — editable list
  • To-do / Tasks — task widget (coming soon as of late 2025)
  • Reminders — upcoming reminders
  • Music/Now Playing — currently playing media with controls
  • Photos — Amazon Photos slideshow
  • Timers — multiple cooking timers visible simultaneously
  • Recipes — personalized recipe suggestions (coming soon)
  • News/Headlines — rotating news content
  • Sticky Notes — personal notes
  • Skill widgets — third-party skill mini-views
  • Personalized notifications — follow-ups from recent conversations

Layout System

  • Grid-based widget layout — widgets snap to a grid
  • Resizable widgets — can be expanded/collapsed
  • Drag-and-drop rearrangement — long-press to enter edit mode
  • Widget Gallery — swipe down from top to access available widgets
  • Different layouts for different screen sizes:
    • Echo Show 8 (8.7"): 1-2 widget columns, more compact
    • Echo Show 11 (11"): 2-3 widget columns
    • Echo Show 15 (15.6"): Full widget panel, landscape orientation, wall-mountable
    • Echo Show 21 (21"): Largest canvas, most widgets visible simultaneously
  • Left panel + right content: On larger screens (15, 21), widget sidebar on left with main content area on right

Widget Interaction

  • Tap to expand — widgets open to full-screen detail view
  • Swipe left on widget pane handle to access rearrangement
  • Voice-addressable — "Alexa, show my calendar" opens calendar widget full-screen

4. Conversation Interface Behavior

How It Appears

  1. Wake word trigger ("Alexa") — blue animation ring/bar appears at bottom of screen
  2. Listening state — screen shows blue animated waveform/indicator
  3. Processing — brief thinking animation
  4. Response — text transcription of conversation appears; visual content (images, cards, lists) shown alongside
  5. Multi-turn: Screen stays in conversation mode; displays ongoing transcript
  6. Suggestion follow-ups: After response, may show tappable suggestion chips

How It Disappears

  1. Conversation ends (timeout or "thank you") — UI fades back to home screen
  2. Gradual transition — conversation results may persist briefly as a notification/widget
  3. No chat history visible on home screen — it's ephemeral
  4. Results persist contextually: e.g., if you asked about weather, the weather widget may be promoted to prominent position

Visual Treatment During Conversation

  • Overlay model: Conversation takes over most of the screen but feels temporary
  • Blue accent theming during active Alexa interaction
  • Cards/results appear with smooth animations
  • Shopping lists, recipes, timers created during conversation persist as widgets after conversation ends

5. Home Dashboard vs Chat App — Design Philosophy

What Makes It Feel Like a HOME DASHBOARD:

  • Ambient-first: Default state is glanceable information, not a conversation thread
  • Photo wallpaper: Personal photos rotate as background — feels personal and decorative
  • Widget grid: Calendar, weather, smart home status visible at a glance — like a family command center
  • Proactive, not reactive: Shows relevant info (upcoming events, weather changes) without being asked
  • Environmental awareness: Uses presence sensors, temperature, ambient light to adapt
  • Family-centric: Visual ID recognizes different family members, shows personalized content per person
  • Physical space integration: Smart home controls are front-and-center; the device is about controlling YOUR space
  • Always-on display: Designed to be glanced at throughout the day, not actively used continuously

What Makes It NOT a Chat App:

  • No persistent conversation history on the display
  • No text input by default (keyboard available for accessibility but voice is primary)
  • Conversation is ephemeral — appears and disappears with the interaction
  • No message threads or bubbles — responses are full-screen cards, not chat bubbles
  • Content-forward: After a conversation, the RESULT persists (timer, reminder, shopping list) not the conversation itself
  • The display returns to ambient/dashboard mode — chat doesn't persist as the primary view

Key Design Principles:

  1. Glanceable over readable — information hierarchy favors quick scanning
  2. Voice-first, touch-second — primary interaction is voice; touch is supplementary
  3. Contextual intelligence — UI adapts to who's looking, time of day, what's happening
  4. Ambient computing — the device fades into the background of your home, activates when needed
  5. Family hub — shared device, personalized per user, central to household operations
  6. Proactive assistance — surface relevant info before being asked (upcoming event, package delivery, missed routine)

6. Screenshot URLs and Visual References

Official Amazon Press Images

The Verge Hands-On Photos

Android Central Widget Customization Screenshots

Review Articles with UI Photos

7. Technical Framework Notes

Alexa Presentation Language (APL)

Device Specifications (for UI design reference)

Device Screen Size Resolution Orientation
Echo Show 5 5.5" 960×480 Landscape
Echo Show 8 (2025) 8.7" 1340×800 Landscape
Echo Show 11 (2025) 11" 1920×1200 Landscape
Echo Show 15 15.6" 1920×1080 Landscape (wall-mount)
Echo Show 21 21" 1920×1200 Landscape (wall-mount)

Key Hardware Features Relevant to UI

  • AZ3 Pro chip with AI accelerator — enables smooth transitions, multitasking between voice and visual
  • Omnisense presence sensor (ultrasound + Wi-Fi radar) — fine motion detection for proximity-aware UI
  • 13MP camera with Visual ID — facial recognition for personalization
  • Ambient light sensor — adaptive brightness
  • Ambient temperature sensor — can trigger routines

8. Key Takeaways for KIPP

  1. Dashboard-first, conversation-second: The display should feel like a home information hub that happens to have AI conversation capabilities, not a chatbot with a screen
  2. Ephemeral conversation UI: Conversations appear as overlays and fade back to dashboard — results persist, conversations don't
  3. Widget grid system: Modular, customizable cards that users arrange to their preference
  4. Proximity awareness: Different information density based on distance from screen
  5. Visual ID / personalization: Per-user customization is key to making a shared device feel personal
  6. Ambient mode is the default state: Photos, clock, weather — the device should be beautiful when idle
  7. Proactive intelligence: Surface information before being asked — upcoming events, deliveries, routine changes
  8. Voice-first interaction model: Touch/visual is supplementary to voice