Pantalla: Editar Datos Personales
Identificador: SCR-USR-002
Nombre: Editar Datos Personales
Modulo: MTS-USR-001 - Gestion de Usuarios
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
| Atributo |
Valor |
| Tipo |
Formulario de edicion |
| Acceso |
SCR-USR-001 > Datos Personales |
| Roles |
PI, CR |
| Tiers |
Todos |
| Prioridad |
Alta |
2. Proposito
Permite al usuario editar su informacion personal incluyendo nombre, email, telefono y direccion. Los cambios en email y telefono requieren verificacion.
3. Wireframe
+--------------------------------------------------+
| [<] Datos Personales [Guardar]|
+--------------------------------------------------+
| |
| +---------------+ |
| | [Avatar] | |
| | [Cambiar] | |
| +---------------+ |
| |
+--------------------------------------------------+
| NOMBRE |
+--------------------------------------------------+
| Nombre * |
| +--------------------------------------------+ |
| | Maria | |
| +--------------------------------------------+ |
| |
| Apellidos * |
| +--------------------------------------------+ |
| | Garcia Lopez | |
| +--------------------------------------------+ |
| |
+--------------------------------------------------+
| CONTACTO |
+--------------------------------------------------+
| Email * |
| +--------------------------------------------+ |
| | maria@email.com [lock] | |
| +--------------------------------------------+ |
| Cambiar email requiere verificacion |
| |
| Telefono * |
| +--------------------------------------------+ |
| | +52 | 55 1234 5678 [lock] | |
| +--------------------------------------------+ |
| Cambiar telefono requiere verificacion |
| |
+--------------------------------------------------+
| INFORMACION ADICIONAL |
+--------------------------------------------------+
| Fecha de Nacimiento |
| +--------------------------------------------+ |
| | 15/03/1979 [lock] | |
| +--------------------------------------------+ |
| Cambiar requiere verificacion de identidad |
| |
| Genero |
| +--------------------------------------------+ |
| | Femenino [v] | |
| +--------------------------------------------+ |
| |
| Direccion (opcional) |
| +--------------------------------------------+ |
| | Calle Principal 123 | |
| | Col. Centro, CDMX | |
| | CP 06000 | |
| +--------------------------------------------+ |
| |
+--------------------------------------------------+
| |
| |
+--------------------------------------------------+
4. Elementos de UI
4.1. Componentes
| ID |
Componente |
Tipo |
Requerido |
| header |
Top App Bar |
CMP-NAV-002 |
Si |
| btn_save |
Text Button |
- |
Si |
| avatar_section |
Avatar con boton |
Custom |
Si |
| input_nombre |
Text Field |
CMP-INP-001 |
Si |
| input_apellidos |
Text Field |
CMP-INP-001 |
Si |
| input_email |
Text Field (locked) |
CMP-INP-001 |
Si |
| input_telefono |
Phone Field |
Custom |
Si |
| input_fecha_nac |
Date Field (locked) |
CMP-INP-005 |
Si |
| dropdown_genero |
Dropdown Select |
CMP-INP-006 |
No |
| input_direccion |
Multiline Text Field |
CMP-INP-001 |
No |
4.2. Especificaciones de Campos
Campos Editables Directamente:
- Nombre, Apellidos
- Genero
- Direccion
Campos con Verificacion:
| Campo |
Verificacion |
Proceso |
| Email |
Envio de email |
Link de confirmacion |
| Telefono |
SMS OTP |
Codigo 6 digitos |
| Fecha nacimiento |
Identidad |
Documento oficial |
5. Estados
| Estado |
Visual |
| Sin cambios |
Boton Guardar disabled |
| Con cambios |
Boton Guardar enabled |
| Guardando |
Spinner en boton |
| Error validacion |
Campos con error border |
| Exito |
Snackbar + volver |
5.2. Estados de Campos Bloqueados
Campo Email con candado:
+--------------------------------------------------+
| Email * |
| +--------------------------------------------+ |
| | maria@email.com [lock] | |
| +--------------------------------------------+ |
| [Tap to unlock] Cambiar email |
+--------------------------------------------------+
Al tap en campo bloqueado:
- Mostrar modal explicativo
- Ofrecer iniciar proceso de verificacion
- Si acepta, navegar a flujo de cambio
6. Interacciones
6.1. Flujo de Cambio de Email
flowchart TD
A[Tap campo email] --> B[Modal: Cambiar Email]
B --> C[Ingresar nuevo email]
C --> D[Validar formato]
D --> E[Enviar email verificacion]
E --> F[Mostrar: Revisa tu correo]
F --> G{Usuario confirma?}
G -->|Si via link| H[Email actualizado]
G -->|No en 24h| I[Expira, mantener anterior]
6.2. Flujo de Cambio de Telefono
flowchart TD
A[Tap campo telefono] --> B[Modal: Cambiar Telefono]
B --> C[Ingresar nuevo numero]
C --> D[Validar formato E.164]
D --> E[Enviar SMS OTP]
E --> F[Mostrar input OTP]
F --> G{Codigo correcto?}
G -->|Si| H[Telefono actualizado]
G -->|No, 3 intentos| I[Bloquear 30 min]
6.3. Gestos
| Gesto |
Elemento |
Accion |
| Tap |
Campo bloqueado |
Modal de cambio |
| Tap |
Avatar |
Bottom sheet cambiar foto |
| Tap |
Guardar |
Validar y guardar |
| Swipe back |
Pantalla |
Confirmar si hay cambios |
7. Validaciones
7.1. Validaciones de Campo
| Campo |
Validacion |
Mensaje Error |
| Nombre |
Min 2 caracteres |
"El nombre es muy corto" |
| Nombre |
Max 50 caracteres |
"El nombre es muy largo" |
| Apellidos |
Min 2 caracteres |
"Los apellidos son muy cortos" |
| Email |
Formato email valido |
"Ingresa un email valido" |
| Telefono |
Formato E.164 |
"Numero de telefono invalido" |
| Direccion |
Max 200 caracteres |
"Direccion muy larga" |
7.2. Validaciones de Negocio
| Validacion |
Condicion |
Accion |
| Email duplicado |
Otro usuario tiene email |
Error: "Email ya registrado" |
| Telefono duplicado |
Otro usuario tiene tel |
Error: "Telefono ya registrado" |
8. Confirmacion de Salida
Cuando hay cambios sin guardar:
+--------------------------------------------------+
| Cambios sin guardar |
+--------------------------------------------------+
| |
| Tienes cambios que no has guardado. |
| Que deseas hacer? |
| |
| [Descartar] [Guardar y salir] |
+--------------------------------------------------+
9. Accesibilidad
9.1. Screen Reader
| Elemento |
Label |
Hint |
| input_nombre |
"Nombre, campo obligatorio" |
"Ingresa tu nombre" |
| input_email |
"Email, bloqueado" |
"Toca para iniciar cambio de email" |
| lock_icon |
"Campo protegido" |
- |
| btn_save |
"Guardar cambios" |
"Guarda los cambios realizados" |
9.2. Focus Order
- Avatar (opcional)
- Campo Nombre
- Campo Apellidos
- Campo Email
- Campo Telefono
- Campo Fecha Nacimiento
- Dropdown Genero
- Campo Direccion
- Boton Guardar
10. Eventos de Analytics
| Evento |
Trigger |
Parametros |
| personal_data_edit_started |
Abrir pantalla |
- |
| field_edited |
Modificar campo |
field: [nombre] |
| email_change_initiated |
Tap cambiar email |
- |
| phone_change_initiated |
Tap cambiar tel |
- |
| personal_data_saved |
Guardar exitoso |
fields_changed: [lista] |
| personal_data_save_failed |
Error al guardar |
error: [tipo] |
11. Casos de Prueba
| ID |
Caso |
Resultado Esperado |
| TC-001 |
Cambiar nombre |
Se guarda sin verificacion |
| TC-002 |
Cambiar email |
Inicia flujo verificacion |
| TC-003 |
Validacion nombre < 2 chars |
Error mostrado |
| TC-004 |
Salir sin guardar |
Dialog confirmacion |
| TC-005 |
Email duplicado |
Error de negocio |
| TC-006 |
Guardar sin cambios |
Boton deshabilitado |
12. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)