207 lines
5.5 KiB
Markdown
207 lines
5.5 KiB
Markdown
# 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.
|