# UX — Selección de avatares bloqueados y desbloqueo por anuncios

## Objetivo

Definir cómo debe verse y comportarse la pantalla de selección de avatar cuando la mayoría de avatares estén bloqueados por defecto y puedan desbloquearse mediante logros o anuncios.

Este documento complementa `Monetización publicidad y gamificación.md` y sirve como referencia para implementar la UI cuando se acometa el cambio.

---

## Principios de diseño

- El usuario debe percibir colección y progreso, no castigo.
- Los avatares bloqueados deben tentar, no frustrar.
- Los desbloqueados deben destacar inmediatamente.
- El desbloqueo debe sentirse como una recompensa.
- La pantalla debe seguir siendo limpia y usable aunque existan muchos avatares bloqueados.

---

## Estados de avatar

Cada avatar debe tener uno de estos estados:

### 1. Desbloqueado

- Se muestra normalmente.
- Se puede seleccionar.
- Al tocarlo, se elige como avatar activo.
- Puede mostrar una pequeña marca de “desbloqueado” si ayuda visualmente.

### 2. Bloqueado

- Se muestra con un filtro suave.
- El dibujo se intuye ligeramente, sin revelar demasiado.
- No se puede seleccionar.
- Puede mostrar un pequeño indicador discreto de bloqueo o un botón contextual de desbloqueo.

### 3. Desbloqueable por logro

- Igual que bloqueado, pero al tocarlo se muestra una sugerencia del tipo:
  - “Desbloquea este avatar con un logro”
  - o “Ver anuncio corto para desbloquear”
- Nunca debe obligar; siempre debe ser opcional.

### 4. Desbloqueable por anuncio

- Se muestra la opción de ver un video corto o largo, según la regla de monetización definida.
- Si el usuario acepta y el anuncio termina correctamente, el avatar cambia a desbloqueado.

---

## Orden de listado

El orden visual de la lista debe ser:

1. **Avatares desbloqueados**
2. **Avatares bloqueados** mezclados en orden aleatorio

Reglas adicionales:

- El orden aleatorio de bloqueados debe recalcularse al cargar la pantalla o al cambiar el conjunto de desbloqueados.
- No debe ser el mismo orden rígido siempre, para que la pantalla se sienta viva.
- Los desbloqueados no deben mezclarse con los bloqueados.

---

## Apariencia visual de los bloqueados

### Filtro recomendado

El filtro debe ser sutil. La idea es que el usuario “adivine” el avatar, pero no lo vea claramente.

Opciones visuales permitidas:

- blur suave,
- desaturación parcial,
- oscurecimiento leve,
- reducción de contraste,
- ligero velo translúcido.

### Evitar

- candados gigantes,
- overlays agresivos,
- textos largos encima del avatar,
- ocultar por completo la imagen,
- una estética demasiado fea o punitiva.

La intención es que el avatar siga siendo tentador.

---

## Interacción al tocar un avatar bloqueado

Al pulsarlo:

1. No se selecciona.
2. Se abre un panel o modal pequeño con:
   - nombre del avatar,
   - motivo de bloqueo o condición de desbloqueo,
   - acción disponible:
     - `Ver anuncio corto para desbloquear`,
     - `Ver anuncio largo para liberar`,
     - o `Consigue este logro para desbloquearlo`.
3. Si el avatar no tiene desbloqueo disponible todavía, se muestra solo la condición de logro.

---

## Interacción al tocar un avatar desbloqueado

Al pulsarlo:

- se selecciona como avatar activo,
- se resalta con animación breve,
- puede sonar un feedback corto si está activado el sonido,
- opcionalmente puede mostrar una etiqueta tipo “Seleccionado”.

---

## Flujo de desbloqueo por anuncio

### Video corto

Uso típico:

- el usuario consigue un logro,
- ve que un avatar especial está bloqueado,
- la app ofrece un video corto para desbloquearlo.

Regla:

- el desbloqueo puede ser temporal o permanente según la monetización definida;
- si luego se define permanente, documentarlo explícitamente.

### Video largo

Uso típico:

- el usuario quiere desbloquear un avatar concreto sin esperar al logro,
- puede ver un anuncio más largo,
- el avatar queda desbloqueado.

Regla UX:

- el video largo debe sentirse como una elección del usuario, no como una imposición.

---

## Animaciones recomendadas

Al desbloquear un avatar:

- zoom in suave,
- brillo breve,
- transición de filtro bloqueado a estado normal,
- pequeño destello de recompensa,
- confetti muy moderado si encaja con la pantalla.

No usar demasiada pirotecnia. La recompensa debe sentirse elegante, no infantil.

---

## Texto sugerido en UI

### Bloqueado por logro

- `Desbloquéalo consiguiendo este logro`
- `Completa el requisito para usarlo`

### Desbloqueo por anuncio corto

- `Ver anuncio corto y desbloquear`
- `Desbloqueo rápido`

### Desbloqueo por anuncio largo

- `Ver anuncio largo y liberar avatar`
- `Desbloqueo especial`

### Estado desbloqueado

- `Disponible`
- `Desbloqueado`

---

## Reglas de compatibilidad con la app

- No romper la selección actual de avatar del perfil.
- No dejar que un avatar bloqueado se guarde como avatar principal.
- Si el avatar activo pasa a bloquearse por cambios futuros, la app debe migrar al avatar por defecto.
- El sistema debe funcionar sin backend al principio.
- Si más adelante hay cuenta online, la regla de desbloqueo debe seguir siendo cosmética/local salvo que se decida sincronizarla.

---

## Criterio de aceptación

Se considerará bien implementado cuando:

- los desbloqueados se vean claramente primero,
- los bloqueados se intuyan pero no se puedan seleccionar,
- el desbloqueo por anuncio tenga sentido visual y narrativo,
- la pantalla siga siendo atractiva aunque el 80% de los avatares estén bloqueados,
- el usuario entienda en un segundo qué está desbloqueado y qué no.
