UX Design · Study deck

Interaction Patterns: Synchronization and Recovery

A thermostat app, wall unit, web page, and voice tool may show different states.

UX Uma is your guide for this deck.

interfaceinteractionpatterns

UX Uma, the module guide, in a scene from this chapter.

After studying this chapter

Learning objectives

You will be able to:

Explain: Simultaneous-change and offline-edit conflicts are races between two commands that both look valid; the timestamp or merge rule settles them without a person needing to know a race happened.
Explain: The design lesson is broader than lower latency: distributed controls need an explicit authority model, version or ordering evidence, visible intermediate states, and a recovery rule when interfaces disagree.
Explain: Interactions that change device state (locking a door, arming a sensor) without immediate visual or auditory feedback leave users uncertain whether their action was registered, often triggering repeated taps.

Major section

Ecobee State Synchronization

Establish the authoritative setpoint first, then follow one wall-unit change through the local display, cloud record, mobile and web views, and voice response.

At each hand-off ask whether the value is pending, confirmed, stale, rejected, or queued offline.

Major section

Ecobee State Synchronization (continued)

The design lesson is broader than lower latency: distributed controls need an explicit authority model, version or ordering evidence, visible intermediate states, and a recovery rule when interfaces disagree.

Without those contracts, a fast interface can still present a convincing but obsolete value and invite a second command based on false state.
When a user adjusted the temperature on the wall unit, the app could show stale data for up to 30 seconds.
Design lesson: For any IoT product with multiple control interfaces, push-based synchronization with optimistic UI is not optional -- it is the minimum viable architecture.

Major section

Interaction Pattern Pitfalls

Design Principle:: Acknowledge immediately (< 100 ms), show progress (1-5s), confirm completion, prevent double-submission.

The Problem:: Commands sent to IoT devices take 1-5 seconds due to network latency, but UI provides no feedback, leading users to tap repeatedly.

Major section

Optimistic UI for Garage Doors

Scenario: A smart garage door takes 8-12 seconds to fully open or close (physical mechanical operation).

Network round-trip adds 200-500 ms latency.
Key Lesson: For any IoT action with > 500 ms latency, optimistic UI is not optional—it's required for acceptable UX.

Major section

State Sync Strategy Choices

Simultaneous-change and offline-edit conflicts are races between two commands that both look valid; the timestamp or merge rule settles them without a person needing to know a race happened.

Creates inconsistency windows where users see stale data and make conflicting changes.

Major section

Pending vs Confirmed States

The Problem: When a user taps "Lock Door," the UI immediately shows a locked icon.

If the command fails (network error, battery dead, door jammed), the UI still shows "locked" for several seconds until the error is detected.

Major section

3. Ignoring State Transition Feedback

Interactions that change device state (locking a door, arming a sensor) without immediate visual or auditory feedback leave users uncertain whether their action was registered, often triggering repeated taps.

Acknowledge every state change with a clear animation, LED change, or sound within 200 ms.

Major section

For Kids: Meet the Sensor Squad!

Interaction patterns are the secret rules that make smart devices feel smooth and responsive!

"Is it broken?" asked Temperature Terry, pressing the button again.
That way, Sammy sees instant feedback!".
If something goes wrong, it changes back and says "Oops, the light didn't respond.

Major section

Concept Relationships

Builds on: Interface Design Fundamentals provides the UI component hierarchy foundation that interaction patterns operate within.

Privacy consideration: Privacy and Compliance distributed state synchronization affects data residency and GDPR compliance.

Deck summary

Key takeaways

Establish the authoritative setpoint first, then follow one wall-unit change through the local display, cloud record, mobile and web views, and voice response.

The design lesson is broader than lower latency: distributed controls need an explicit authority model, version or ordering evidence, visible intermediate states, and a recovery rule when interfaces disagree.
Design Principle:: Acknowledge immediately (< 100 ms), show progress (1-5s), confirm completion, prevent double-submission.
Scenario: A smart garage door takes 8-12 seconds to fully open or close (physical mechanical operation).
The Problem: When a user taps "Lock Door," the UI immediately shows a locked icon.

Retrieval practice

Recall check 1 of 4

UX Uma says: answer from memory, then check your reasoning.

Q1Your smart thermostat app experiences 3-second network latency when sending temperature adjustment commands. Users repeatedly tap the increase button, thinking it's not working, resulting in the temperature jumping 10 degrees higher than intended. What interaction pattern would prevent this?

AFreeze the whole app during the delay so users cannot tap again until the command finishes

BMake the temperature buttons smaller and farther apart so repeated taps are treated as accidental input

CShow pending temperature feedback immediately, suppress duplicate taps, then reconcile with the actual device state

DRequire a fixed five-second cooldown after every tap, even when the user intentionally wants another change

Show answer

Answer: C "Optimistic UI" provides immediate visual feedback assuming the command will succeed, then reconciles with reality when the response arrives.

Retrieval practice

Recall check 2 of 4

UX Uma says: answer from memory, then check your reasoning.

Q2A smart appliance has both a physical control panel and a mobile app. A user adjusts the temperature on the physical panel, but the app still shows the old value. What synchronization principle should govern this interaction?

APhysical controls should be disabled when the app is open

BThe app should immediately reflect changes made on the physical device

CUsers should manually refresh the app to see updates

DPhysical and digital interfaces should operate independently

Show answer

Answer: B Multi-interface IoT devices must maintain state synchronization - all interfaces should reflect the current device state in real-time.

Retrieval practice

Recall check 3 of 4

UX Uma says: answer from memory, then check your reasoning.

Q3Your smart security camera app sends notifications for every motion detection. Users receive 50+ notifications daily and eventually disable all notifications, missing actual security events. What notification strategy would fix this?

ABatch detections into a notification every 30 seconds while keeping the same routine motion triggers

BMake each motion alert louder and more prominent so users notice the notifications sooner

CFilter routine motion, use zones and schedules, send digests, and escalate only unusual events

DMove every motion alert from push to email so the phone is not interrupted as often

Show answer

Answer: C This demonstrates "alert fatigue" - too many notifications cause users to ignore all of them, including important ones.

Retrieval practice

Recall check 4 of 4

UX Uma says: answer from memory, then check your reasoning.

Q4Place each interaction pattern where it lives so you can guide attention, support action, and make every state change understandable.

AVisual Hierarchy

BNavigation Pattern

CInput Controls

DFeedback System

ELayout Grid

FMotion Design

Show answer

Answer: A Separate attention structure, action mechanisms, and response cues so you can diagnose whether an interface fails before, during, or after a user action.

Q5Complete the real-time sensor update handler:

Aconst display = document.getElementById(sensorId);

Bconst display = document.getElement(sensorId);

Cconst display = document.find(sensorId);

Dconst display = document.select(sensorId);

Show answer

Answer: A getElementById() finds elements by ID.

Print reference

Answers 1 of 2

Answer key.

C · "Optimistic UI" provides immediate visual feedback assuming the command will succeed, then reconciles with reality when the response arrives.
B · Multi-interface IoT devices must maintain state synchronization - all interfaces should reflect the current device state in real-time.
C · This demonstrates "alert fatigue" - too many notifications cause users to ignore all of them, including important ones.
A · Separate attention structure, action mechanisms, and response cues so you can diagnose whether an interface fails before, during, or after a user action.

Interaction Patterns: Synchronization and Recovery

Learning objectives

Ecobee State Synchronization

Ecobee State Synchronization (continued)

Interaction Pattern Pitfalls

Optimistic UI for Garage Doors

State Sync Strategy Choices

Pending vs Confirmed States

3. Ignoring State Transition Feedback

For Kids: Meet the Sensor Squad!

Concept Relationships

Key takeaways

Recall check 1 of 4

Recall check 2 of 4

Recall check 3 of 4

Recall check 4 of 4

Answers 1 of 2

Answers 2 of 2