farolero/docs/ux_avatares_bloqueados.md

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.