# 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.