Especificacion UI Consolidada - MTS-USR-001
Identificador: UI-MTS-USR-001
Modulo Funcional: MTS-USR-001 - Gestion de Usuarios
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 Gestion de Usuarios (MTS-USR-001), que abarca la gestion de perfiles, cuidadores, contactos de emergencia, preferencias, privacidad y el flujo critico de eliminacion de cuenta.
1.2. Metricas del Modulo
| Metrica |
Valor |
| Total de pantallas |
12 |
| Componentes unicos |
35 |
| User journeys documentados |
3 |
| Nivel WCAG |
AA (AAA para SCR-USR-012) |
| Cobertura de accesibilidad |
100% |
| Componentes nuevos |
8 |
1.3. Pantallas Incluidas
| ID |
Nombre |
Prioridad |
Estado |
| SCR-USR-001 |
Perfil Principal |
Alta |
Especificado |
| SCR-USR-002 |
Editar Datos Personales |
Alta |
Especificado |
| SCR-USR-003 |
Informacion Medica |
Alta |
Especificado |
| SCR-USR-004 |
Lista de Cuidadores |
Alta |
Especificado |
| SCR-USR-005 |
Invitar Cuidador |
Alta |
Especificado |
| SCR-USR-006 |
Permisos de Cuidador |
Alta |
Especificado |
| SCR-USR-007 |
Contactos de Emergencia |
Alta |
Especificado |
| SCR-USR-008 |
Preferencias de App |
Media |
Especificado |
| SCR-USR-009 |
Privacidad y Datos |
Alta |
Especificado |
| SCR-USR-010 |
Perfil Medico Compartible |
Alta |
Especificado |
| SCR-USR-011 |
Generar QR/PDF |
Alta |
Especificado |
| SCR-USR-012 |
Eliminar Cuenta |
Critica |
Especificado |
2. User Journeys
2.1. Paciente Independiente (PI) - Gestionar Perfil
Persona: Paciente adulto autonomo
Objetivo: Mantener informacion personal y medica actualizada
Tiempo objetivo: < 1 minuto por seccion
Flujo:
- Abrir Perfil (SCR-USR-001)
- Navegar a seccion deseada
- Editar informacion
- Guardar cambios
Puntos de friccion mitigados:
- Guardado automatico donde sea posible
- Validaciones en tiempo real
- Campos pre-llenados desde perfil existente
2.2. Paciente Independiente (PI) - Agregar Cuidador
Persona: Paciente adulto
Objetivo: Invitar familiar como cuidador solidario
Tiempo objetivo: < 2 minutos
Flujo:
- Perfil > Mis Cuidadores (SCR-USR-004)
- Tap [+] > Invitar (SCR-USR-005)
- Wizard de 3 pasos: Contacto > Permisos > Confirmar
- Enviar invitacion
Permisos configurables:
| Permiso |
Default |
Bloqueado |
| Ver medicamentos |
ON |
No |
| Ver adherencia |
ON |
No |
| Ver recetas |
OFF |
No |
| Registrar tomas |
OFF |
No |
| Alertas tomas |
ON |
No |
| Alertas emergencia |
ON |
Si |
2.3. Cuidador Responsable (CR) - Gestionar Dependiente
Persona: Padre/tutor de menor
Objetivo: Crear y gestionar perfil de dependiente
Tiempo objetivo: < 3 minutos primera vez
Flujo:
- Perfil CR > Mis Dependientes
- Declaracion jurada (legal)
- Crear perfil dependiente
- Agregar info medica
- Opcionalmente agregar medicamentos
Limites por tier:
| Tier |
Dependientes |
| Free |
1 |
| Pro |
5 |
| Perfect |
10 |
3. Arquitectura de Navegacion
3.1. Diagrama de Flujo General
flowchart TD
NAV[Bottom Nav: Perfil] --> MAIN[SCR-USR-001<br>Perfil Principal]
MAIN --> EDIT[SCR-USR-002<br>Datos Personales]
MAIN --> MED[SCR-USR-003<br>Info Medica]
MAIN --> CARE[SCR-USR-004<br>Cuidadores]
MAIN --> EMERG[SCR-USR-007<br>Emergencia]
MAIN --> PREFS[SCR-USR-008<br>Preferencias]
MAIN --> PRIV[SCR-USR-009<br>Privacidad]
MAIN --> SHARE[SCR-USR-010<br>Compartir]
MAIN --> DEL[SCR-USR-012<br>Eliminar]
CARE --> INV[SCR-USR-005<br>Invitar]
CARE --> PERM[SCR-USR-006<br>Permisos]
SHARE --> QR[SCR-USR-011<br>QR/PDF/Link]
style DEL fill:#ffcccc
style QR fill:#ccffcc
3.2. Deep Links
| Ruta |
Destino |
medtime://profile |
SCR-USR-001 |
medtime://profile/edit |
SCR-USR-002 |
medtime://profile/medical |
SCR-USR-003 |
medtime://caregivers |
SCR-USR-004 |
medtime://caregivers/invite |
SCR-USR-005 |
medtime://caregivers/{id} |
SCR-USR-006 |
medtime://emergency-contacts |
SCR-USR-007 |
medtime://settings |
SCR-USR-008 |
medtime://privacy |
SCR-USR-009 |
medtime://profile/share |
SCR-USR-010 |
medtime://invite/{token} |
Flujo aceptacion |
4. Componentes Utilizados
4.1. Componentes del Design System
| Componente |
ID |
Uso en Modulo |
| Top App Bar |
CMP-NAV-002 |
Todas las pantallas |
| Bottom Navigation |
CMP-NAV-001 |
Acceso principal |
| Text Field |
CMP-INP-001 |
Formularios |
| Dropdown Select |
CMP-INP-006 |
Selecciones |
| Toggle/Switch |
CMP-INP-007 |
Permisos, opciones |
| Radio Group |
CMP-INP-009 |
Preferencias |
| PIN Input |
CMP-INP-003 |
OTP verificacion |
| Primary Button |
CMP-BTN-001 |
CTAs principales |
| Secondary Button |
CMP-BTN-002 |
Acciones secundarias |
| Danger Button |
CMP-BTN-006 |
Eliminar cuenta |
| Menu Row |
CMP-LST-002 |
Navegacion en perfil |
| Snackbar |
CMP-FBK-001 |
Feedback acciones |
| Dialog |
CMP-FBK-002 |
Confirmaciones |
| Bottom Sheet |
CMP-FBK-003 |
Formularios modales |
4.2. Componentes Personalizados (Nuevos)
| Componente |
Descripcion |
Pantalla(s) |
| ProfileHeader |
Avatar + nombre + tier badge |
SCR-USR-001 |
| CaregiverCard |
Card de cuidador con estado |
SCR-USR-004 |
| PendingInviteCard |
Card de invitacion pendiente |
SCR-USR-004 |
| PermissionToggleRow |
Toggle con descripcion |
SCR-USR-005, SCR-USR-006 |
| EmergencyContactCard |
Card ordenable con verificacion |
SCR-USR-007 |
| ShareProfilePreview |
Preview de contenido a compartir |
SCR-USR-010 |
| QRDisplayWithTimer |
QR con countdown |
SCR-USR-011 |
| DeletionWarningList |
Lista de datos a perder |
SCR-USR-012 |
5. Auditoria de Accesibilidad WCAG 2.1
5.1. Resumen de Cumplimiento
| Principio |
Estado |
Notas |
| Perceptible |
CUMPLE |
AA en todas, AAA en SCR-USR-012 |
| Operable |
CUMPLE |
Alternativas a gestos complejos |
| Comprensible |
CUMPLE |
Lenguaje claro, sin jerga |
| Robusto |
CUMPLE |
Semantica correcta |
5.2. Criterios Verificados
5.2.1. Perceptible
| Criterio |
ID |
Estado |
Implementacion |
| Alternativas texto |
1.1.1 |
OK |
Todos los iconos tienen labels |
| Info y relaciones |
1.3.1 |
OK |
Estructura semantica |
| Caracteristicas sensoriales |
1.3.3 |
OK |
No solo color para estados |
| Uso del color |
1.4.1 |
OK |
Color + icono + texto |
| Contraste minimo |
1.4.3 |
OK |
4.5:1 (7:1 en SCR-USR-012) |
| Cambio tamano |
1.4.4 |
OK |
Hasta 200% |
| Contraste no textual |
1.4.11 |
OK |
3:1 en UI |
5.2.2. Operable
| Criterio |
ID |
Estado |
Implementacion |
| Teclado |
2.1.1 |
OK |
Toda funcionalidad |
| Sin trampa teclado |
2.1.2 |
OK |
Focus siempre puede salir |
| Orden foco |
2.4.3 |
OK |
Secuencia logica |
| Foco visible |
2.4.7 |
OK |
Outline 2dp |
| Target size |
2.5.5 |
OK |
Minimo 44x44dp |
5.2.3. Comprensible
| Criterio |
ID |
Estado |
Implementacion |
| Idioma pagina |
3.1.1 |
OK |
lang declarado |
| Al recibir foco |
3.2.1 |
OK |
Sin cambios inesperados |
| Identificacion errores |
3.3.1 |
OK |
Errores claros |
| Etiquetas |
3.3.2 |
OK |
Labels en todos los inputs |
| Prevencion errores |
3.3.4 |
OK |
Multiples confirmaciones SCR-USR-012 |
5.3. Checklist por Pantalla
| Pantalla |
Touch |
Contraste |
SR |
Focus |
WCAG |
| SCR-USR-001 |
OK |
OK |
OK |
OK |
AA |
| SCR-USR-002 |
OK |
OK |
OK |
OK |
AA |
| SCR-USR-003 |
OK |
OK |
OK |
OK |
AA |
| SCR-USR-004 |
OK |
OK |
OK |
OK |
AA |
| SCR-USR-005 |
OK |
OK |
OK |
OK |
AA |
| SCR-USR-006 |
OK |
OK |
OK |
OK |
AA |
| SCR-USR-007 |
OK |
OK |
OK |
OK |
AA |
| SCR-USR-008 |
OK |
OK |
OK |
OK |
AA |
| SCR-USR-009 |
OK |
OK |
OK |
OK |
AA |
| SCR-USR-010 |
OK |
OK |
OK |
OK |
AA |
| SCR-USR-011 |
OK |
OK |
OK |
OK |
AA |
| SCR-USR-012 |
OK |
AAA |
OK |
OK |
AAA |
5.4. Consideraciones Especiales
5.4.1. Eliminacion de Cuenta (SCR-USR-012)
- Nivel AAA por criticidad de la accion
- Contraste 7:1 para textos de advertencia
- Multiples barreras de confirmacion
- Texto de confirmacion debe escribirse exactamente
- Screen reader anuncia consecuencias completas
5.4.2. Cuidadores y Permisos
- Toggles con labels descriptivos
- Estado "bloqueado" claramente anunciado
- Acciones de swipe tienen alternativas
5.4.3. QR Compartible
- QR tiene alternativa de link
- Timer anunciado periodicamente
- Contenido incluido legible por SR
6. Responsive Design
6.1. Breakpoints
| Ancho |
Adaptacion |
| < 360dp |
Compacto |
| 360-600dp |
Mobile standard |
| 600-840dp |
Tablet portrait |
| > 840dp |
Tablet landscape |
6.2. Adaptaciones por Breakpoint
| Pantalla |
Mobile |
Tablet |
| SCR-USR-001 |
Lista vertical |
Side panel opcional |
| SCR-USR-004 |
Cards apiladas |
Grid 2 columnas |
| SCR-USR-005 |
Wizard paso a paso |
Form single page |
| SCR-USR-010 |
Checkboxes verticales |
Grid de opciones |
7. Animaciones y Movimiento
7.1. Transiciones
| Transicion |
Duracion |
Ease |
Reducido |
| Screen push |
300ms |
ease-out |
Instant |
| Bottom sheet |
300ms |
ease-out |
100ms |
| Toggle change |
200ms |
ease |
Instant |
| QR timer pulse |
1s |
linear |
Solid color |
7.2. Movimiento Reducido
- Detectar
prefers-reduced-motion
- Duraciones < 100ms
- Sin animaciones de alerta (solo color)
8. Estados de Error
8.1. Errores de Validacion
| Contexto |
Mensaje Ejemplo |
| Email invalido |
"Ingresa un email valido" |
| Email duplicado |
"Este email ya esta registrado" |
| Telefono invalido |
"Numero de telefono no valido" |
| Password incorrecto |
"Contrasena incorrecta" |
| OTP incorrecto |
"Codigo incorrecto. Te quedan [n] intentos" |
8.2. Errores de Red
| Escenario |
UI |
| Sin conexion |
Banner offline |
| Error de API |
Toast con reintento |
| Timeout |
Toast con mensaje |
8.3. Errores de Negocio
| Codigo |
Mensaje |
Accion |
| USR-001 |
Limite cuidadores |
Modal upgrade |
| USR-002 |
Limite dependientes |
Modal upgrade |
| USR-003 |
Invitacion duplicada |
Toast warning |
| USR-005 |
Auto-invitacion |
Toast error |
9. Seguridad
9.1. Re-autenticacion
Requerida antes de:
- Cambiar email/telefono
- Generar perfil compartible
- Eliminar cuenta
- Revocar permisos de cuidador
9.2. Datos Sensibles
| Dato |
Manejo |
| Password |
Nunca mostrado, siempre masked |
| OTP |
Visible solo 5 segundos |
| Telefono en UI |
Parcialmente oculto ( ** 5678) |
| QR |
Expira en 15 minutos |
| Link compartible |
Expira en 24 horas |
10. Metricas de UX
10.1. KPIs del Modulo
| Metrica |
Objetivo |
Medicion |
| Perfiles completos |
> 70% |
analytics |
| Cuidadores por paciente |
1.5 promedio |
analytics |
| Conversion invitaciones |
> 60% |
funnel |
| Tiempo completar perfil |
< 5 min |
analytics |
| Cancelaciones en gracia |
> 30% |
metrics |
10.2. Eventos Clave
| Evento |
Descripcion |
| profile_completed |
Perfil 100% completo |
| caregiver_flow_completed |
Invitacion aceptada |
| share_profile_generated |
QR/PDF/Link creado |
| deletion_recovered |
Cancelacion en gracia |
11. Archivos del Modulo
11.1. Flujos
flows/UIF-USR-001-gestion-usuarios.md
11.2. Pantallas
screens/SCR-USR-001-perfil-principal.mdscreens/SCR-USR-002-editar-datos-personales.mdscreens/SCR-USR-003-informacion-medica.mdscreens/SCR-USR-004-lista-cuidadores.mdscreens/SCR-USR-005-invitar-cuidador.mdscreens/SCR-USR-006-permisos-cuidador.mdscreens/SCR-USR-007-contactos-emergencia.mdscreens/SCR-USR-008-preferencias-app.mdscreens/SCR-USR-009-privacidad-datos.mdscreens/SCR-USR-010-perfil-compartible.mdscreens/SCR-USR-011-generar-qr-pdf.mdscreens/SCR-USR-012-eliminar-cuenta.md
11.3. Especificacion Consolidada
specs/UI-MTS-USR-001.md (este documento)
12. Dependencias con Otros Modulos
| Modulo |
Dependencia |
| MTS-AUTH-001 |
Re-autenticacion |
| MTS-ALT-001 |
Contactos emergencia |
| MTS-PAY-001 |
Tiers y limites |
| MTS-MED-001 |
Info medica en perfil compartible |
| MTS-PRI-001 |
ARCO y privacidad |
13. Referencias
13.1. Especificacion Funcional
13.2. Design System
13.3. Accesibilidad
14. Historial de Cambios
| Version |
Fecha |
Cambios |
| 1.0.0 |
2025-12-05 |
Version inicial completa - 12 pantallas |
15. 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)
"El perfil es la puerta de entrada a la confianza del usuario."