Pantalla: Datos Personales
Identificador: SCR-ONB-003
Modulo: MTS-ONB-001 - Onboarding
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
Estado: Especificado
| Atributo |
Valor |
| Nombre |
Datos Personales |
| Proposito |
Capturar nombre y datos basicos del usuario |
| Tipo |
Full Screen (paso 3 de onboarding) |
| Acceso |
Desde SCR-ONB-002 |
| Prioridad |
Alta |
2. Wireframe ASCII
2.1. Estado: PI - Datos Personales
+------------------------------------------+
| [<-] Paso 3 de 8 ======---------- |
+------------------------------------------+
| |
| Datos personales |
| |
| Confirma o actualiza tu informacion |
| basica. |
| |
| |
| Nombre * |
| +------------------------------------+ |
| | Maria Garcia | | <- Pre-llenado de OAuth
| +------------------------------------+ |
| |
| Email |
| +------------------------------------+ |
| | maria@gmail.com [Lock] | | <- Read-only
| +------------------------------------+ |
| El email viene de tu cuenta de Google |
| |
| Fecha de nacimiento (opcional) |
| +------------------------------------+ |
| | dd/mm/aaaa | |
| +------------------------------------+ |
| Usamos esto para personalizar alertas |
| |
| |
| |
| +------------------------------------+ |
| | Continuar | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.2. Estado: CR - Datos + Primer Dependiente
+------------------------------------------+
| [<-] Paso 3 de 8 ======---------- |
+------------------------------------------+
| |
| Tus datos |
| |
| Nombre * |
| +------------------------------------+ |
| | Carlos Rodriguez | |
| +------------------------------------+ |
| |
| Email |
| +------------------------------------+ |
| | carlos@gmail.com [Lock] | |
| +------------------------------------+ |
| |
| ----------------------------------------|
| |
| Tu primer dependiente |
| |
| Nombre del dependiente * |
| +------------------------------------+ |
| | Ana Rodriguez | |
| +------------------------------------+ |
| |
| Relacion * |
| +------------------------------------+ |
| | Madre [v] | | <- Dropdown
| +------------------------------------+ |
| |
| Fecha de nacimiento * |
| +------------------------------------+ |
| | 15/03/1952 | |
| +------------------------------------+ |
| |
| +------------------------------------+ |
| | Continuar | |
| +------------------------------------+ |
| |
+------------------------------------------+
2.3. Estado: CS - Simplificado
+------------------------------------------+
| [<-] Configuracion rapida |
+------------------------------------------+
| |
| Datos basicos |
| |
| Solo necesitamos tu nombre para |
| empezar. |
| |
| Nombre * |
| +------------------------------------+ |
| | | |
| +------------------------------------+ |
| |
| |
| Crea tu PIN |
| |
| Tu PIN protege el acceso a la app. |
| |
| +----+ +----+ +----+ +----+ |
| | | | | | | | | |
| +----+ +----+ +----+ +----+ |
| |
| Confirmar PIN: |
| +----+ +----+ +----+ +----+ |
| | | | | | | | | |
| +----+ +----+ +----+ +----+ |
| |
| |
| +------------------------------------+ |
| | Continuar | |
| +------------------------------------+ |
| |
+------------------------------------------+
3. Componentes UI
3.1. Campo Nombre
| Propiedad |
Valor |
| Componente |
CMP-INP-001 (Text Field) |
| Variante |
outlined |
| Label |
"Nombre *" |
| Pre-fill |
Nombre de OAuth |
| Required |
Si |
| Validation |
Min 2 caracteres |
3.2. Campo Email (Read-only)
| Propiedad |
Valor |
| Componente |
CMP-INP-001 (Text Field) |
| Variante |
outlined |
| Label |
"Email" |
| Value |
Email de OAuth |
| Editable |
No |
| Icon trailing |
Lock icon |
| Helper text |
"El email viene de tu cuenta de {provider}" |
3.3. Campo Fecha Nacimiento
| Propiedad |
Valor |
| Componente |
CMP-INP-005 (Date Picker) |
| Label |
"Fecha de nacimiento (opcional)" |
| Format |
dd/mm/aaaa |
| Max date |
Hoy - 13 anos |
| Helper text |
"Usamos esto para personalizar alertas" |
3.4. Dropdown Relacion (CR)
| Propiedad |
Valor |
| Componente |
CMP-INP-006 (Dropdown Select) |
| Label |
"Relacion *" |
| Options |
Hijo/a, Padre, Madre, Abuelo/a, Esposo/a, Otro familiar, Tutela legal |
| Required |
Si (para CR) |
| Propiedad |
Valor |
| Componente |
CMP-INP-003 (PIN Input) |
| Variante |
4 digitos |
| Two-step |
PIN + Confirmacion |
| Match validation |
Ambos deben coincidir |
4. Comportamientos
4.1. Validaciones
| Campo |
Regla |
Mensaje Error |
| Nombre |
Min 2 chars |
"El nombre debe tener al menos 2 caracteres" |
| Nombre |
Required |
"Ingresa tu nombre para continuar" |
| Nombre PD |
Required (CR) |
"Ingresa el nombre del dependiente" |
| Relacion |
Required (CR) |
"Selecciona la relacion con el dependiente" |
| Fecha PD |
Required (CR) |
"Ingresa la fecha de nacimiento del dependiente" |
| PIN |
4 digitos |
"El PIN debe tener 4 digitos" |
| PIN confirm |
Match |
"Los PIN no coinciden" |
4.2. Flujo de Validacion
flowchart TD
A[Usuario edita campos] --> B{Validacion en tiempo real}
B -->|Valido| C[Clear error, enable si completo]
B -->|Invalido| D[Mostrar error inline]
C --> E{Todos campos OK?}
E -->|Si| F[Enable Continuar]
E -->|No| G[Continuar disabled]
F --> H{Tap Continuar}
H --> I[Submit datos]
I --> J[Siguiente pantalla]
4.3. Gestos
| Gesto |
Elemento |
Accion |
| Tap |
Campo |
Focus + teclado |
| Tap |
Date picker |
Abrir calendar modal |
| Tap |
Dropdown |
Abrir opciones |
| Tap |
Continuar |
Validar y navegar |
5. Estados
| Estado |
Condicion |
Visual |
| Initial |
Campos pre-llenados |
Normal styling |
| Editing |
Usuario modificando |
Focus styling |
| Error |
Validacion fallida |
Error border + mensaje |
| Valid |
Todos campos OK |
Success indicator |
| Submitting |
Enviando datos |
Button loading |
6. Accesibilidad
6.1. Labels y Hints
| Elemento |
accessibilityLabel |
accessibilityHint |
| Nombre |
"Nombre, requerido" |
"Ingresa tu nombre completo" |
| Email |
"Email, no editable" |
"Tu email de {provider}" |
| Fecha nac |
"Fecha de nacimiento, opcional" |
"Formato dia mes ano" |
| Dropdown |
"Relacion con dependiente" |
"Toca para seleccionar" |
| PIN |
"PIN de seguridad, {n} de 4 digitos" |
"Crea un PIN de 4 digitos" |
6.2. Orden de Foco
6.2.1. PI
- Back button
- Campo Nombre
- Campo Email (read-only, skip)
- Campo Fecha nacimiento
- Boton Continuar
6.2.2. CR
1-4 igual que PI
- Campo Nombre PD
- Dropdown Relacion
- Campo Fecha PD
- Boton Continuar
6.3. Screen Reader
| Evento |
Anuncio |
| Error |
"Error en {campo}: {mensaje}" |
| Form valido |
"Formulario completo, puedes continuar" |
7. Datos Requeridos
interface PersonalDataInput {
role: 'PI' | 'CR' | 'CS';
oauth_name?: string;
oauth_email: string;
oauth_provider: 'google' | 'apple';
}
7.2. Output Data
interface PersonalDataOutput {
name: string;
email: string;
birth_date?: Date;
// CR only
dependent?: {
name: string;
relationship: string;
birth_date: Date;
};
// CS only
pin?: string;
}
8. Metricas
8.1. Analytics Events
| Evento |
Parametros |
| screen_view |
screen_name: "onboarding_personal" |
| field_edited |
field_name, role |
| validation_error |
field_name, error_type |
| dependent_added |
relationship |
| step_completed |
step: 3, role |
9. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)