UX y Feedback de Escaneo

Paso 5 de 11

Expo HapticsExpo AV

Un escáner sin feedback se siente “muerto”. Para una UX premium, debemos confirmar al usuario que la acción fue exitosa mediante tres canales:

Háptico

Una vibración corta y sutil (ImpactFeedbackStyle.Light) al momento exacto de la lectura.

Visual

Cambio de color en el overlay o un destello rápido para confirmar el éxito.

Auditivo

Un “beep” clásico, útil en entornos industriales donde el usuario no mira la pantalla.

1. Feedback Háptico (Vibración)

Es el estándar de la industria. Siente la confirmación física sin mirar la pantalla.

# terminal
npx expo install expo-haptics

// src/app/(checkout)/scanner.tsx
import * as Haptics from 'expo-haptics';

const handleBarCodeScanned = () => {
  Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
  // ... resto de la lógica
};

2. Indicadores Visuales

Usa un overlay (una “mira”) que cambie de color o brille cuando detecte algo.

IDLE: Buscando QR...

LOW-POWER

BEEP/HAPTIC

VIBRATE

Estado Idle: Mira blanca/gris con animación de escaneo.
Estado Éxito: Mira verde + icono de check.
Estado Error: Mira roja + icono de alerta.

3. Audio (Beeps)

Especialmente útil en entornos de inventario donde el operario no siempre mira el smartphone.

# terminal
npx expo install expo-av

// src/lib/core/qr/audioService.ts (Hypothetical)
import { Audio } from 'expo-av';

async function playSuccessSound() {
  const { sound } = await Audio.Sound.createAsync(
     require('./assets/success_beep.mp3')
  );
  await sound.playAsync();
}