30  Interface Design: Worked Examples

ux-design
interface

30.1 Start Simple

Use each worked example as a diagnostic story. Start by asking what the person is trying to do, which system state they can see, what goes wrong, and how the interface can make recovery, fallback, accessibility, or confidence stronger without hiding technical truth.

In 60 Seconds

This chapter walks through a complete voice interface design case study for elderly users in a retirement community, covering intent-based natural language understanding (supporting 40+ phrasings per action), hearing-accessible audio design (lower frequencies, adaptive volume), cognitive accessibility (maximum 2 choices in clarification, system takes blame for errors), automatic room detection, and multi-modal fallbacks ensuring core functions work even when voice recognition fails.

30.2 Learning Objectives

By studying these worked examples, you will be able to:

  • Design Voice Interfaces for Diverse Users: Create accessible voice interactions for elderly users with hearing and cognitive variations
  • Apply Multi-Modal Feedback Strategies: Implement redundant feedback channels for different abilities
  • Build Error Recovery Systems: Design forgiving error handling that maintains user confidence
  • Implement Accessibility Fallbacks: Ensure core functions remain accessible when primary modalities fail
Worked Interface Examples

This chapter walks through a complete, real-world design case study: building a voice-controlled smart home system for elderly residents in a retirement community. You will see how every design decision – from supporting 40+ phrasings of “turn on the lights” to using lower-frequency audio tones for hearing-impaired users – comes from understanding specific user needs. The worked example shows that good IoT interface design is not about adding features, but about deeply understanding who will use the system and designing every interaction to match their abilities and context.

Chapter Roadmap

This chapter is one extended design review, so use this path:

  1. First define what a worked example must prove: user role, room context, uncertainty, recovery, and fallback.
  2. Then walk the retirement-community voice case from intent recognition through hearing access, cognitive access, room detection, and physical fallback.
  3. Next compare that case with the visual gallery, knowledge checks, and the 85% success-rate analysis.
  4. Finally decide when voice is appropriate, avoid overbuilt NLU, and practice the same design moves yourself.

Checkpoints recap the main decisions as you go. Anything that looks like a calculation audit is a deeper verification path, not the first thing to memorize.

Key Concepts

  • Interaction Design: Discipline defining how users communicate with digital systems through input, output, and feedback mechanisms.
  • Multimodal Interface: System accepting input and delivering output through multiple channels (touch, voice, gesture, haptic) simultaneously.
  • User Testing: Structured observation of representative users attempting defined tasks, exposing interface problems invisible to designers.
  • Prototype Fidelity: Level of detail in a prototype: low fidelity (paper sketch) validates concepts; high fidelity (interactive mockup) validates usability.
  • Information Architecture: Structural design of digital spaces to support usability and findability, determining where content lives and how users navigate.
  • Cognitive Load: Mental effort required to use an interface; IoT systems must minimise cognitive load for users managing many connected devices.
  • Usability Heuristic: Principle-based rule for evaluating interface quality (e.g. Nielsen’s 10 heuristics) without requiring user testing.

30.3 Prerequisites

30.4 Design Commitments in Examples

A worked IoT interface example should make the design commitment visible: who the user is, which context matters, what the system believes, what it will do, and how the user can recover. In the retirement-community voice example, the commitment is not “add voice.” It is “let residents control lighting and comfort without memorizing syntax, while preserving physical fallback and confidence.”

Read each example by asking what would make the design fail in real use. Voice recognition may fail because of background TV audio, slower speech, hearing variation, room ambiguity, accent mismatch, or network loss. A good example names the fallback before the failure reaches the resident.

The example also shows why “interface” means more than a screen. A resident may speak a request, hear a confirmation, see a lamp blink, press a wall switch, use a large-button remote, or ask staff for help. Each channel must carry the same product state: heard, clarifying, accepted, completed, failed, cancelled, or waiting for assistance. If the voice channel is friendly but the light, app, and support desk disagree, the experience is not coherent.

Use the worked example as a review template. First identify the resident role, room, device, and risk. Then list the ordinary phrases the resident might use, the state the system can infer safely, the confirmation it should provide, and the escape path when confidence is low. A good example does not hide uncertainty. It shows what the product does when it is unsure, because that is where trust is won or lost.

  • Intent: map natural phrases such as “it’s dark” or “I’m cold” to a bounded action and confirmation.
  • Feedback: make acknowledgement, clarification, completion, and error recovery understandable through more than one channel.
  • Fallback: keep physical switches, remotes, caregiver/front-desk help, and local control available when voice is weak.
UX UmaCheckpoint: Reading Worked Examples

You now know:

  • A worked interface example should expose the user role, room, device, risk, confirmation, and fallback path.
  • Voice is only one channel; the example must keep the lamp, app, switch, remote, and support desk aligned on the same product state.
  • The test plan needs realistic stressors such as TV audio, HVAC noise, nighttime volume limits, muted microphones, ambiguous rooms, and disconnected gateways.

30.5 Example to Test Plan

The example becomes useful when its decisions can be tested. Define resident roles, hearing range, cognitive load, room context, background-noise scenarios, and command categories before testing. Then instrument the prototype with ASR transcript logs, NLU intent/confidence scores, room-detection source, command ids, device acknowledgement, audio-level settings, and support escalation records.

Use real design alternatives. Wake-word detection may be local. ASR may run on-device or in a cloud service. NLU may use intent classification with slots for room, device, action, and level. Room context may come from motion sensors, microphone direction, recent activity, or explicit room names. Feedback may use spoken response, light blink, app state, large-button remote, wall switch, or staff notification.

Convert the retirement-community scenario into a matrix before building. Rows should cover tasks such as “turn on lights”, “make it warmer”, “dim bedroom lights”, “cancel”, “undo”, “call assistance”, and “recover after three failed attempts”. Columns should cover spoken phrase, expected intent, room source, confidence threshold, device command, visible or audible confirmation, physical fallback, support evidence, and privacy note. This matrix makes design choices reviewable instead of treating the demo script as the specification.

Test under realistic constraints. Run sessions with TV audio playing, HVAC noise, nighttime volume limits, a muted microphone, a disconnected gateway, an ambiguous room name, a denied account role, and a resident who changes their mind mid-command. Include screen-reader and large-target checks for the companion app or remote. Include staff-facing tasks too: can a caregiver see whether the resident asked for help, whether a command timed out, and whether the wall switch still works locally?

  1. Script representative tasks: include lights, brightness, temperature, room ambiguity, background TV, and repeated failure.
  2. Limit clarification: cap choices, use plain language, and ask before executing inferred high-impact actions.
  3. Measure confidence: compare first-attempt success, wrong-action rate, recovery success, support calls, and resident confidence ratings.

The acceptance gate should be concrete: residents complete core actions without memorized syntax, wrong-room actions stay below the agreed threshold, repeated failures produce useful help instead of blame, and fallback controls remain obvious. If those signals are missing, the example is still a promising concept rather than a deployable interface pattern. ## Voice UX Needs State {.depth-l2}

Voice examples can sound simple while hiding hard system boundaries. The system must distinguish wake-word activation, speech endpointing, ASR transcript confidence, NLU intent confidence, room resolution, authorization, command acceptance, device completion, and user confirmation. If any stage is uncertain, the UX should expose uncertainty rather than guessing silently. Voice interface flow from wake-word detection through speech recognition, natural-language understanding, action execution, and response generation with feedback loops.

Under-the-hood checks should include confidence thresholds, fallback prompts, command acknowledgement, idempotency key, timeout, duplicate command handling, local control path, privacy setting, microphone mute state, motion-sensor freshness, device-shadow or retained-state version, and support correlation id. These details decide whether “I didn’t catch that” is enough or whether the system should offer a specific safe action.

For implementation, separate the recognition pipeline from the action pipeline. A speech transcript such as “I’m cold” may produce an intent candidate, but the system still needs authorization, room resolution, thermostat capability, current mode, safety bounds, and command acknowledgement. The UI should not say “done” when the thermostat service only accepted a queued request. It should distinguish accepted, pending, rejected, timed out, and completed states in language the resident can understand.

Privacy and support are also system boundaries. Microphone mute state must be visible and respected. Raw audio retention should be minimized or disabled unless there is a justified support case. Logs should use correlation ids and summaries rather than unnecessary personal recordings. Support staff need enough detail to diagnose repeated failures, but not so much that a help ticket exposes private speech or household routines.

  • Inference boundary: ask before acting when intent, room, safety, privacy, or resident preference is uncertain.
  • Recovery path: make cancel, undo, physical switch, large-button remote, and assistance paths visible before repeated failure creates abandonment.
  • Validation scope: separate lab recognition, in-home use, long-term adoption, and support burden; each proves a different claim.

A robust worked example therefore includes both UX copy and state-machine evidence. It should name the events, thresholds, timeouts, and fallback transitions that make the interface forgiving without becoming unpredictable.

Interactive: IoT Dashboard Designer

Interactive: IoT Notification Designer

30.6 Smart Home Voice Interface

We have the review template; now the chapter applies it to one concrete case. Track each tab as a design commitment, not as a feature list.

30.7 Voice UX for Retirement Living

Scenario: You are designing a voice-controlled lighting and climate system for a retirement community. The primary users are elderly residents (ages 65-90) who want to control their apartments hands-free. Many have arthritis limiting switch use, some have mild cognitive decline, and the environment includes background noise from televisions and HVAC systems.

Goal: Create an accessible, forgiving voice interface that elderly users can operate confidently, with graceful fallbacks when voice recognition fails.

What we do: Map the variety of ways elderly users naturally express lighting and climate commands, avoiding rigid syntax requirements.

Intent Recognition Matrix:

User Intent Natural Variations to Support Canonical Command
Turn on lights “Lights on”, “Turn on the lights”, “Light please”, “I need light”, “It’s dark in here”, “Can you turn on lights?” lights.on()
Turn off lights “Lights off”, “Turn off lights”, “Kill the lights”, “Enough light”, “Too bright” lights.off()
Adjust brightness “Dim the lights”, “Brighter please”, “Not so bright”, “A little more light”, “Make it dimmer” lights.brightness(+/-)
Set temperature “Make it warmer”, “It’s cold”, “Too hot in here”, “Set to 72”, “I’m freezing” thermostat.adjust()
Room context “Kitchen lights”, “Bedroom too warm”, “Living room brighter” room.device.action()

Why: Elderly users often speak conversationally rather than using command syntax. They might say “I’m cold” instead of “Set thermostat to 74 degrees.” The system must understand intent, not just keywords. We support 40+ phrasings per core action.

Design Decision: Use intent classification (not keyword matching) with high tolerance for incomplete sentences, implicit requests, and contextual statements.

What we do: Design audio feedback that accommodates hearing loss common in elderly populations while avoiding startling loud responses.

Feedback Strategy:

Feedback Type Design Approach Example
Acknowledgment Clear, moderate volume (60-70 dB), lower frequency range (easier for age-related hearing loss) “Okay, turning on lights”
Confirmation Spoken + physical (light blinks once) “Lights are now on” + brief flash
Clarification Slower speech rate (120 words/min vs typical 150), simple vocabulary “Did you mean the bedroom or living room?”
Error Non-judgmental, offers alternatives “I didn’t catch that. You can say ‘lights on’ or ‘it’s too dark’”

Volume Adaptation:

Ambient noise detection:
  - Quiet room (<40 dB): Respond at 55 dB
  - TV on (50-65 dB): Respond at 70 dB
  - Multiple sound sources (>65 dB): Respond at 75 dB + visual indicator

Time of day adjustment:
  - Daytime (7 AM - 9 PM): Normal volume
  - Nighttime (9 PM - 7 AM): Reduced volume, shorter confirmations

Why: Age-related hearing loss (presbycusis) affects high frequencies first. Using lower pitch responses (180-220 Hz vs. typical 300+ Hz) improves comprehension. Volume must be loud enough to hear but not startling.

What we do: Create forgiving error handling that doesn’t frustrate users with memory challenges or cause them to lose confidence.

Error Recovery Hierarchy:

Level 1 - Partial Understanding:
  User: "Turn the... um... the thing"
  System: "Did you mean the lights or the thermostat?"
  [Offers exactly 2 choices, not 5]

Level 2 - Ambient Confusion:
  User: (TV says "turn off the lights")
  System: [Detects TV audio pattern, ignores]
  System: [Only responds to sustained speech directed at device]

Level 3 - No Understanding:
  User: [Inaudible or heavily accented speech]
  System: "I didn't understand. Would you like to try again,
          or I can turn on the bedroom lights for you?"
  [Offers most common action as suggestion]

Level 4 - Repeated Failures:
  After 3 failed attempts in 2 minutes:
  System: "I'm having trouble hearing you today.
          The light switch by the door also works,
          or I can call for assistance."
  [Graceful escalation to human help option]

Memory Support:

  • Never require remembering exact syntax
  • Offer suggestions proactively: “You can say things like ‘too cold’ or ‘lights brighter’”
  • Recent commands available: “Do you want me to do the same as before?”

Why: Cognitive decline makes it harder to remember specific commands or recover from errors. Each failure increases frustration and decreases confidence. The system takes responsibility for misunderstanding rather than implying user error.

What we do: Implement room awareness so users don’t need to specify location for every command.

Context Detection:

Signal How Detected Context Use
User location Motion sensors, voice direction “Lights on” controls nearest room
Time of day Clock + patterns Morning = bedroom, Evening = living room
Recent activity Last room interacted with “A little warmer” adjusts same room as previous
Explicit override User says room name “Kitchen lights” overrides auto-detection

Conversation Flow:

User: "Lights on"
[System detects user in living room via motion sensor]
System: "Living room lights are on."

User: "Too bright"
[System remembers context: living room lights]
System: "Dimming living room lights."

User: "Actually, bedroom lights"
[Explicit room reference takes priority]
System: "Turning on bedroom lights. Should I adjust living room too?"

Why: Requiring room specification for every command (“Turn on living room lights”) is exhausting. Natural conversation assumes context. However, the system announces which room it’s affecting to prevent surprises (elderly user in living room shouldn’t wonder why bedroom lights came on).

What we do: Ensure core functions remain accessible when voice fails, respecting that no single modality works 100%.

Multi-Modal Fallback Design:

Primary Method Fallback 1 Fallback 2 Emergency
Voice command Physical wall switch Large button remote Caregiver call
“Lights on” Press illuminated button Tap bright-colored remote Button calls front desk
“Too cold” Thermostat dial (60pt numbers) Remote up/down buttons Staff notification

Physical Control Requirements:

  • Switches at 44” height (wheelchair accessible)
  • Large toggle switches (not small buttons)
  • High contrast labeling (white on dark blue)
  • Illuminated when off (findable in dark)
  • Work during power outages (battery backup)

Remote Design:

  • 5 large buttons only: Lights On, Lights Off, Warmer, Cooler, Help
  • Tactile differentiation (bumps on Warmer, ridges on Cooler)
  • Bright orange “Help” button always visible
  • Weekly battery check notification to staff

Why: Voice-first doesn’t mean voice-only. Residents may have days when their voice is hoarse, the system is having recognition issues, or they simply prefer physical control. Dignity means having options.

Outcome: After deployment, 87% of elderly residents successfully use voice commands daily, compared to 23% who attempted the previous system. Support calls for “it doesn’t understand me” dropped by 92%. Resident satisfaction surveys show 4.4/5 for ease of use.

Key Decisions Made:

Decision Rationale
Intent-based NLU (not keywords) Supports natural speech patterns like “I’m cold”
Lower frequency audio responses Accommodates age-related high-frequency hearing loss
Maximum 2 choices in clarification Reduces cognitive load for memory-impaired users
System takes blame for errors Maintains user confidence (“I didn’t understand” not “Invalid command”)
Automatic room detection Eliminates need to remember/specify location each time
Physical switches remain primary Voice augments rather than replaces proven accessibility
Large, simple remote as backup Independent control when voice isn’t working
“Help” button always available Safety net for any situation

Validation Method: Conduct in-home testing with 20 residents across hearing ability, cognitive status, and tech comfort levels. Measure: successful command rate, time to complete task, error recovery success, and qualitative confidence ratings. Iterate on recognition model and prompts until >85% first-attempt success across all user groups.

UX UmaCheckpoint: Voice Case Decisions

You now know:

  • Intent-based NLU handles natural phrases such as “I’m cold” instead of forcing residents to memorize command syntax.
  • Hearing access changes the response itself: 60-70 dB, lower frequencies, slower clarification speech, and visual confirmation when noise rises.
  • Cognitive access limits clarification to exactly 2 choices, takes responsibility for misunderstanding, and escalates after 3 failed attempts in 2 minutes.
  • Voice-first still needs physical switches, a 5-button remote, and a visible Help path because no single modality works every day.

Common Pitfalls

Understand Timing Assumptions

Example code often uses fixed delays calibrated for one microcontroller clock speed that produce wrong timings on a different clock. Copying without checking can cause sensors to receive malformed I2C timing. Parameterise timing values from the clock speed constant and verify with a logic analyser on the actual target hardware.

Blocking Reads in Event Loops

Calling blocking sensor read functions within an MQTT callback can stall the network stack long enough for a watchdog reset or missed keep-alive. Trigger sensor reads from a timer, cache the latest value, and return cached data from any function called within a network callback.

Handle Partial Serial Reads

Assuming a serial read() always returns a complete packet causes firmware to process partial payloads as valid data when bytes arrive in multiple TCP segments. Implement a length-prefixed or delimiter-terminated framing protocol and accumulate bytes into a ring buffer until a complete frame is received.

Label the Diagram

💻 Code Challenge

30.9 Summary

This chapter demonstrated comprehensive worked examples:

Key Takeaways:

  1. Intent-Based Understanding: Design for natural speech patterns, not rigid command syntax
  2. Hearing Accessibility: Lower frequency responses, adaptive volume, visual redundancy
  3. Cognitive Accessibility: Limit choices, system takes blame, offer suggestions
  4. Context Awareness: Automatic room detection reduces cognitive burden
  5. Multi-Modal Fallbacks: Voice augments physical controls, doesn’t replace them
  6. Validation: Test across user abilities, iterate until 85%+ success rate
Concept Relationships

How this chapter connects to other IoT concepts:

See Also

Related topics for deeper exploration:

Try It Yourself

Hands-on exercises to practice voice interface design:

30.9.1 Test Intent Recognition

Build a simple voice command parser:

  1. Define one intent: “Turn on lights” with 10 phrase variations (“lights on”, “turn the lights on”, “I need light”, etc.)
  2. Implement keyword matching vs. intent-based classification
  3. Test with 20 natural phrases from friends/family
  4. Measure: What percentage of natural speech is recognized?

What to observe: Keyword matching catches 40-60% of variations. Intent-based (even simple regex patterns) catches 80-90%. Notice which phrases break your system—users say “it’s dark” not “activate illumination.”

30.9.2 Audio Feedback for Hearing Loss

Record a confirmation message (“Okay, turning on lights”):

  1. Version A: High-pitched voice (300-400 Hz female voice)
  2. Version B: Low-pitched voice (180-220 Hz male voice)
  3. Test with older adults (60+ years) in noisy environment (TV on at 60 dB)
  4. Measure comprehension: Can they repeat what the system said?

What to observe: Version A is missed by 40-50% of users with age-related hearing loss. Version B is understood by 85-90%. Lower frequencies penetrate background noise better and are less affected by presbycusis.

30.9.3 Memory Support vs Exact Syntax

Design two error recovery approaches:

  1. Exact syntax: “Invalid command. Please say ‘set temperature to [number] degrees Fahrenheit’”
  2. Memory support: “I didn’t catch that. You can say things like ‘too cold’ or ‘warmer’”

Test with users with mild cognitive decline:

What to observe: Exact syntax requires recalling complex structure (70% fail to reproduce it). Memory support with examples works for 90% of users. Notice how many users try the exact example phrase—that’s why examples matter.

30.10 What’s Next

Next Topic Description
Hands-On Lab Build an accessible IoT interface using the Wokwi ESP32 simulator
Process & Checklists Iterative design methodology and validation checklists
Multimodal Design Modality tradeoffs and accessibility considerations
Interface Overview Return to the chapter series overview