Especificacion UI Consolidada - MTS-AUTH-001¶

Identificador: UI-MTS-AUTH-001 Modulo Funcional: MTS-AUTH-001 - Autenticacion y Seguridad Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Completado

1. Resumen Ejecutivo¶

1.1. Alcance¶

Este documento consolida la especificacion completa de interfaz de usuario para el modulo de Autenticacion y Seguridad (MTS-AUTH-001). Cubre todos los flujos de entrada a la aplicacion: splash, login social, registro, recuperacion de cuenta, verificacion MFA y desbloqueo biometrico.

NOTA CRITICA V1.0: MedTime V1.0 utilizaexclusivamente Firebase Authentication con autenticacion social (Google Sign-In, Apple Sign-In). Email/password NO esta disponible en V1.0.

1.2. Metricas del Modulo¶

Metrica	Valor
Total de pantallas	6
Componentes unicos	18
User journeys documentados	3
Nivel WCAG	AA
Cobertura de accesibilidad	100%

1.3. Pantallas Incluidas¶

ID	Nombre	Prioridad	Estado
SCR-AUTH-001	Splash / Welcome	Critica	Especificado
SCR-AUTH-002	Login Social	Critica	Especificado
SCR-AUTH-003	Registro	Critica	Especificado
SCR-AUTH-004	Recuperacion	Alta	Especificado
SCR-AUTH-005	Verificacion 2FA	Alta	Especificado
SCR-AUTH-006	Biometria	Alta	Especificado

2. User Journeys¶

Persona: Maria, 45 anos, descarga MedTime por recomendacion de su medico.

Objetivo: Crear cuenta y acceder a la aplicacion.

Flujo principal:

Abrir app -> Ver splash con logo
Ver carrusel de bienvenida (3 slides)
Tap "Comenzar" -> Pantalla login
Tap "Continuar con Google"
Seleccionar cuenta Google
Autorizar permisos
Ver mensaje de bienvenida
Continuar a onboarding

Tiempo objetivo: < 30 segundos (sin contar tiempo en OAuth)

Puntos de friccion mitigados:

Carrusel skippable para usuarios impacientes
Solo 2 opciones de login (no paralisis de eleccion)
OAuth nativo con Face ID integrado (Apple)

Persona: Roberto, 55 anos, tier Perfect, seguridad prioritaria.

Objetivo: Acceder de forma segura con segundo factor.

Flujo principal:

Abrir app -> Splash rapido
Tap "Continuar con Apple" (Face ID)
Ver pantalla MFA (tier Perfect)
Abrir Google Authenticator
Ingresar codigo 6 digitos
Acceso automatico al dashboard

Tiempo objetivo: < 20 segundos

Restricciones de seguridad:

No bypass de MFA para tier Perfect
Rate limiting en codigos
Recovery key como escape

2.3. Usuario Existente - Desbloqueo Biometrico¶

Persona: Ana, 28 anos, usa Face ID para acceso rapido.

Objetivo: Desbloquear app en menos de 2 segundos.

Flujo principal:

Abrir app
Prompt automatico de Face ID
Mirar pantalla
Acceso instantaneo

Tiempo objetivo: < 2 segundos

Fallbacks:

3 fallos biometricos -> PIN
PIN bloqueado -> Login completo

3. Arquitectura de Navegacion¶

3.1. Diagrama de Flujo¶

flowchart TD
    COLD[Cold Start] --> SPLASH[SCR-AUTH-001]
    RESUME[App Resume] --> CHECK{Sesion?}

    SPLASH -->|Primera vez| CAROUSEL[Carrusel 3 slides]
    SPLASH -->|Usuario existente| CHECK

    CHECK -->|Valida + Bio| BIO[SCR-AUTH-006]
    CHECK -->|Invalida| LOGIN[SCR-AUTH-002]

    CAROUSEL --> LOGIN

    LOGIN -->|Google/Apple| OAUTH{OAuth}
    LOGIN -->|Crear cuenta| REGISTER[SCR-AUTH-003]
    LOGIN -->|Recuperar| RECOVER[SCR-AUTH-004]

    REGISTER --> OAUTH

    OAUTH -->|Exito nuevo| ONBOARD[Onboarding]
    OAUTH -->|Exito existente| TIER_CHECK{Tier?}
    OAUTH -->|Error| LOGIN

    TIER_CHECK -->|Perfect| MFA[SCR-AUTH-005]
    TIER_CHECK -->|Free/Pro| DASHBOARD[Dashboard]

    MFA -->|Valido| DASHBOARD
    MFA -->|Recovery| RECOVER

    RECOVER -->|Exito| LOGIN
    RECOVER -->|Reset Free| SPLASH

    BIO -->|Exito| DASHBOARD
    BIO -->|Fallback| PIN_INPUT[PIN Input]
    PIN_INPUT -->|Exito| DASHBOARD
    PIN_INPUT -->|Bloqueado| LOGIN

3.2. Deep Links¶

Ruta	Destino
`medtime://login`	SCR-AUTH-002
`medtime://register`	SCR-AUTH-003
`medtime://recover`	SCR-AUTH-004
`medtime://verify-mfa`	SCR-AUTH-005

4. Componentes Utilizados¶

4.1. Componentes del Design System¶

Componente	ID	Uso en Modulo
Top App Bar	CMP-NAV-002	Registro, Recuperacion
Primary Button	CMP-BTN-001	CTAs principales
Secondary Button	CMP-BTN-002	CTAs secundarios
Social Auth Button	CMP-BTN-007	Login Google/Apple
Text Field	CMP-INP-001	Recovery key input
PIN Input	CMP-INP-003	PIN y MFA
TextArea	CMP-INP-009	Recovery key (24 palabras)
Dialog	CMP-FBK-002	Confirmaciones
Banner	CMP-FBK-004	Errores y warnings
Page Indicator	CMP-DAT-008	Carrusel splash
Offline Indicator	CMP-SPC-009	Estado sin conexion

4.2. Componentes Personalizados¶

Componente	Descripcion	Pantalla
CarouselSlide	Slide de bienvenida con ilustracion	SCR-AUTH-001
SocialButton	Boton OAuth con branding oficial	SCR-AUTH-002
RecoveryOptionCard	Card con opcion de recuperacion	SCR-AUTH-004
MFACodeInput	6 celdas para codigo TOTP	SCR-AUTH-005
CustomNumericKeyboard	Teclado numerico seguro	SCR-AUTH-005, SCR-AUTH-006
BiometricPromptWrapper	Wrapper para prompts nativos	SCR-AUTH-006
CooldownTimer	Countdown para rate limiting	SCR-AUTH-005, SCR-AUTH-006

5. Auditoria de Accesibilidad WCAG 2.1 AA¶

5.1. Resumen de Cumplimiento¶

Principio	Estado	Notas
Perceptible	CUMPLE	Todos los criterios AA
Operable	CUMPLE	Todos los criterios AA
Comprensible	CUMPLE	Todos los criterios AA
Robusto	CUMPLE	Todos los criterios AA

5.2. Criterios Verificados¶

5.2.1. Perceptible¶

Criterio	ID	Estado	Implementacion
Alternativas de texto	1.1.1	OK	Todos los iconos y botones tienen labels
Info y relaciones	1.3.1	OK	Estructura semantica con headings
Caracteristicas sensoriales	1.3.3	OK	Errores con color + icono + texto
Uso del color	1.4.1	OK	Estados nunca solo por color
Contraste minimo	1.4.3	OK	4.5:1 verificado en todas las pantallas
Cambio de tamano	1.4.4	OK	Soporte hasta 200%
Reflow	1.4.10	OK	Sin scroll horizontal a 320dp
Contraste no textual	1.4.11	OK	3:1 para bordes e iconos

5.2.2. Operable¶

Criterio	ID	Estado	Implementacion
Teclado	2.1.1	OK	Toda funcionalidad accesible
Sin trampa de teclado	2.1.2	OK	Focus siempre puede escapar
Orden de foco	2.4.3	OK	Secuencia logica documentada
Proposito de enlaces	2.4.4	OK	Links descriptivos
Encabezados y etiquetas	2.4.6	OK	Headings claros
Foco visible	2.4.7	OK	Outline 2dp primary
Tamano del objetivo	2.5.5	OK	Minimo 44x44dp, botones 56dp

5.2.3. Comprensible¶

Criterio	ID	Estado	Implementacion
Idioma de pagina	3.1.1	OK	lang="es" declarado
Al recibir foco	3.2.1	OK	Sin cambios inesperados
Al recibir entrada	3.2.2	OK	Auto-submit solo en MFA/PIN
Identificacion de errores	3.3.1	OK	Errores claramente indicados
Etiquetas	3.3.2	OK	Labels en todos los inputs
Sugerencia de error	3.3.3	OK	Mensajes con soluciones
Prevencion de errores	3.3.4	OK	Confirmacion para reset destructivo

5.2.4. Robusto¶

Criterio	ID	Estado	Implementacion
Nombre, rol, valor	4.1.2	OK	Semantica correcta
Mensajes de estado	4.1.3	OK	Anuncios via screen reader

5.3. Checklist por Pantalla¶

Pantalla	Touch Targets	Contraste	Screen Reader	Focus Order
SCR-AUTH-001	OK	OK	OK	OK
SCR-AUTH-002	OK	OK	OK	OK
SCR-AUTH-003	OK	OK	OK	OK
SCR-AUTH-004	OK	OK	OK	OK
SCR-AUTH-005	OK	OK	OK	OK
SCR-AUTH-006	OK	OK	OK	OK

5.4. Consideraciones Especiales¶

5.4.1. Biometria¶

Face ID/Touch ID usan prompts nativos del sistema
Fallback a PIN siempre disponible
Anuncios claros de exito/fallo

5.4.2. MFA¶

Codigo de 6 digitos con auto-submit
Rate limiting con countdown accesible
Recovery key como alternativa

5.4.3. OAuth¶

Sheets nativos de Google/Apple
No control sobre accesibilidad de providers
Feedback claro pre/post OAuth

6. Responsive Design¶

6.1. Breakpoints¶

Ancho	Adaptacion
< 360dp	Compacto, margenes 16dp
360-600dp	Mobile standard, margenes 32dp
600-840dp	Tablet portrait, max-width 400dp centrado
> 840dp	Tablet landscape, split layout

6.2. Adaptaciones por Breakpoint¶

Pantalla	Mobile	Tablet
SCR-AUTH-001	Vertical stack	Ilustracion izquierda, texto derecha
SCR-AUTH-002	Full width buttons	Centrado con max-width
SCR-AUTH-005	Teclado custom	Teclado sistema + custom

7. Animaciones y Movimiento¶

7.1. Transiciones¶

Transicion	Duracion	Ease	Reducido
Splash -> Login	300ms	ease-out	Instant
Login -> OAuth	Sistema	Sistema	Sistema
MFA success	200ms	ease-out	Instant
Bio success	100ms	linear	Instant
Error shake	400ms	custom	Sin shake, solo clear

7.2. Movimiento Reducido¶

Detectar prefers-reduced-motion
Duraciones < 100ms
Sin shake animations
Mantener feedback haptico

8. Seguridad UI¶

8.1. Protecciones¶

Aspecto	Implementacion
Screenshot	Bloqueado en MFA y PIN
Screen recording	Bloqueado en MFA y PIN
PIN display	Solo puntos, nunca digitos
Recovery key	Visible para verificacion, no masking
OAuth tokens	Nunca mostrados en UI

8.2. Rate Limiting UI¶

Pantalla	Limite	Cooldown
SCR-AUTH-002	10 intentos/min	1 min
SCR-AUTH-005	5 intentos	5-30 min progresivo
SCR-AUTH-006 (PIN)	5 intentos	1-60 min progresivo

9. Estados de Error¶

9.1. Errores de Red¶

Escenario	UI
Sin conexion inicial	Banner offline + botones disabled
Perdida de conexion	Banner offline + mensaje
Error de API	Toast + Reintentar

9.2. Errores de Autenticacion¶

Error	Mensaje	Accion
OAuth cancelled	(ninguno)	Volver a estado inicial
Account not found	"No encontramos una cuenta"	Link crear cuenta
MFA invalid	"Codigo incorrecto"	Clear + retry
PIN blocked	"Demasiados intentos"	Countdown + login option

9.3. Errores de Recuperacion¶

Error	Mensaje	Accion
Recovery key invalid	"Clave incorrecta"	Mostrar checklist
Email not verified	"Email no verificado"	Reenviar verificacion

10. Metricas de UX¶

10.1. KPIs del Modulo¶

Metrica	Objetivo	Medicion
Tiempo login (nuevo)	< 30s	analytics
Tiempo login (existente)	< 10s	analytics
Tiempo biometrico	< 2s	analytics
Tasa exito OAuth	> 95%	analytics
Tasa exito MFA	> 85%	analytics
Abandono en auth	< 10%	funnel

10.2. Eventos de Analytics¶

Ver documentacion individual de cada pantalla para lista completa de eventos.

11. Archivos del Modulo¶

11.1. Flujos¶

flows/UIF-AUTH-001-autenticacion.md

11.2. Pantallas¶

screens/SCR-AUTH-001-splash-welcome.md
screens/SCR-AUTH-002-login-social.md
screens/SCR-AUTH-003-registro.md
screens/SCR-AUTH-004-recuperacion.md
screens/SCR-AUTH-005-verificacion-2fa.md
screens/SCR-AUTH-006-biometria.md

11.3. Especificacion Consolidada¶

specs/UI-MTS-AUTH-001.md (este documento)

12. Referencias¶

12.1. Especificacion Funcional¶

MTS-AUTH-001 - Autenticacion y Seguridad

12.2. Design System¶

12.3. Accesibilidad¶

03-accessibility-guidelines.md

12.4. Recursos Externos¶

13. Historial de Cambios¶

Version	Fecha	Cambios
1.0.0	2025-12-05	Version inicial completa - Solo auth social V1.0

14. Aprobaciones¶

Rol	Nombre	Estado	Fecha
UX Lead	MobileUxUiDrone	Completado	2025-12-05
A11y Review	Pendiente	-	-
Product Owner	Pendiente	-	-

Documento generado por MobileUxUiDrone (Eight of Eight) "La puerta de entrada define la experiencia. Esta especificacion asegura que sea impecable."

Especificacion UI Consolidada - MTS-AUTH-001¶

1. Resumen Ejecutivo¶

1.1. Alcance¶

1.2. Metricas del Modulo¶

1.3. Pantallas Incluidas¶

2. User Journeys¶

2.1. Paciente Independiente (PI) - Login Primera Vez¶

2.2. Usuario Existente (Perfect) - Login con MFA¶

2.3. Usuario Existente - Desbloqueo Biometrico¶

3. Arquitectura de Navegacion¶

3.1. Diagrama de Flujo¶

3.2. Deep Links¶

4. Componentes Utilizados¶

4.1. Componentes del Design System¶

4.2. Componentes Personalizados¶

5. Auditoria de Accesibilidad WCAG 2.1 AA¶

5.1. Resumen de Cumplimiento¶

5.2. Criterios Verificados¶

5.2.1. Perceptible¶

5.2.2. Operable¶

5.2.3. Comprensible¶

5.2.4. Robusto¶

5.3. Checklist por Pantalla¶

5.4. Consideraciones Especiales¶

5.4.1. Biometria¶

5.4.2. MFA¶

5.4.3. OAuth¶

6. Responsive Design¶

6.1. Breakpoints¶

6.2. Adaptaciones por Breakpoint¶

7. Animaciones y Movimiento¶

7.1. Transiciones¶

7.2. Movimiento Reducido¶

8. Seguridad UI¶

8.1. Protecciones¶

8.2. Rate Limiting UI¶

9. Estados de Error¶

9.1. Errores de Red¶

9.2. Errores de Autenticacion¶

9.3. Errores de Recuperacion¶

10. Metricas de UX¶

10.1. KPIs del Modulo¶

10.2. Eventos de Analytics¶

11. Archivos del Modulo¶

11.1. Flujos¶

11.2. Pantallas¶

11.3. Especificacion Consolidada¶

12. Referencias¶

12.1. Especificacion Funcional¶

12.2. Design System¶

12.3. Accesibilidad¶

12.4. Recursos Externos¶

13. Historial de Cambios¶

14. Aprobaciones¶