Patron de Diseno: Formularios¶

Identificador: PAT-001 Version: 1.0.0 Fecha: 2025-12-05 Autor: SpecQueen (Consolidacion FASE 5) Estado: Aprobado

1. Proposito¶

Este documento define los patrones estandarizados para formularios en MedTime. Garantiza consistencia en la experiencia de entrada de datos, validacion y manejo de errores en toda la aplicacion.

2. Anatomia del Formulario¶

2.1. Estructura General¶

+------------------------------------------+
|  [Form Title]                            |  <- H1 o Top App Bar
+------------------------------------------+
|                                           |
|  [Section Title]                          |  <- H2 opcional
|                                           |
|  Label del campo *                        |  <- Label (requerido si *)
|  +------------------------------------+   |
|  | [Icon?] Placeholder...         [?] |   |  <- Input con helper icon
|  +------------------------------------+   |
|  Helper text o instrucciones              |  <- Helper text
|                                           |
|  [Mas campos...]                          |
|                                           |
+------------------------------------------+
|                                           |
|  [Secundario]          [Primario]        |  <- Action buttons
|                                           |
+------------------------------------------+

2.2. Componentes del Formulario¶

Componente	Obligatorio	Descripcion
Label	Si	Siempre visible, no solo placeholder
Input	Si	Campo de entrada
Placeholder	Opcional	Ejemplo de formato esperado
Helper text	Recomendado	Instrucciones adicionales
Error text	Condicional	Se muestra en validacion fallida
Required indicator	Condicional	Asterisco (*) para campos obligatorios
Character counter	Opcional	Para campos con limite

3. Estados de Campo¶

3.1. Estados Visuales¶

Estado	Borde	Fondo	Label	Icono
Default	neutral.400	transparent	neutral.600	-
Focused	primary.main (2dp)	transparent	primary.main (elevado)	-
Filled	neutral.400	transparent	neutral.600 (elevado)	-
Error	error.main (2dp)	error.50	error.main	error icon
Success	success.main	transparent	success.main	check icon
Disabled	neutral.300	neutral.100	neutral.400	-
Read-only	neutral.300	neutral.50	neutral.500	lock icon

3.2. Transiciones de Estado¶

Default -> (tap) -> Focused -> (input) -> Filled
Filled -> (blur + validate) -> Success | Error
Error -> (tap) -> Focused (error style) -> (input) -> Filled
Filled -> (clear) -> Focused

4. Validacion¶

4.1. Momento de Validacion¶

Tipo	Momento	Uso
On blur	Al perder foco	Validacion principal
On change	Durante escritura	Solo para formatos estrictos (PIN, telefono)
On submit	Al enviar	Validacion final completa
Real-time	Cada caracter	Contador de caracteres, fortaleza password

4.2. Mensajes de Error¶

Estructura del mensaje:

[Icono Error] [Descripcion del problema]. [Sugerencia de solucion].

Ejemplos:

Campo	Mensaje Incorrecto	Mensaje Correcto
Email	"Email invalido"	"El formato de email no es valido. Ejemplo: nombre@dominio.com"
Dosis	"Error"	"La dosis debe ser un numero positivo"
Fecha	"Fecha invalida"	"Ingresa una fecha valida. Formato: DD/MM/AAAA"

4.3. Visualizacion de Errores¶

Dosis *
+------------------------------------+
| -5                             [!] |  <- Borde error + icono
+------------------------------------+
[!] La dosis debe ser un numero positivo

- Color del borde: error.main (#D32F2F)
- Color del texto de error: error.main
- Icono: error_outline, 16dp
- Espacio: 4dp entre input y mensaje
- Screen reader: Anunciado automaticamente

4.4. Resumen de Errores (Multi-campo)¶

Para formularios largos, mostrar resumen al inicio:

+------------------------------------+
| [!] Hay 3 campos con errores:      |
|                                    |
| - Nombre del medicamento           |
| - Dosis                            |
| - Frecuencia                       |
|                                    |
| Corrigelos para continuar.         |
+------------------------------------+

5. Tipos de Campo¶

5.1. Text Field (CMP-INP-001)¶

Nombre del medicamento *
+------------------------------------+
| Metformina 850mg                   |
+------------------------------------+
Ej: Paracetamol 500mg

Especificaciones:
- Height: 56dp
- Padding: 16dp horizontal
- Font size: 16sp
- Label elevado: 12sp

5.2. Numeric Field con Stepper¶

Dosis *
+------+ +------------------------+ +------+
|  [-] | |          2             | |  [+] |
+------+ +------------------------+ +------+
         tabletas

Especificaciones:
- Botones: 44x44dp touch target
- Valor: 20sp bold, centrado
- Long press: incremento rapido
- Min/Max: validacion automatica

5.3. Selector/Dropdown¶

Unidad *
+------------------------------------+
| mg                             [v] |  <- Chevron down
+------------------------------------+

Al expandir:
+------------------------------------+
| [x] mg                             |  <- Selected
|     g                              |
|     ml                             |
|     gotas                          |
|     unidades                       |
+------------------------------------+

5.4. Date Picker¶

Fecha de inicio *
+------------------------------------+
| 15 de diciembre, 2025         [O] |  <- Calendar icon
+------------------------------------+

-> Abre date picker modal (Material/Cupertino segun OS)

5.5. Time Picker¶

Hora de la toma *
+------------------------------------+
| 08:00 AM                      [O] |  <- Clock icon
+------------------------------------+

Quick options (chips):
[Desayuno] [Almuerzo] [Cena] [Dormir] [Personalizar]

5.6. Multi-select Chips¶

Dias de la semana *
+------+ +------+ +------+ +------+
|  Lu  | |  Ma  | |  Mi  | |  Ju  |
+------+ +------+ +------+ +------+
+------+ +------+ +------+
|  Vi  | |  Sa  | |  Do  |
+------+ +------+ +------+

Estados:
- Unselected: outlined, neutral.400
- Selected: filled, primary.main
- Touch target: 44x44dp minimo

5.7. Toggle/Switch¶

+------------------------------------+
| Recordatorio activo                |
|                             [====] |  <- Switch ON
+------------------------------------+

Estados:
- OFF: track neutral.400, thumb neutral.50
- ON: track primary.main, thumb white
- Disabled: opacity 38%

5.8. Text Area¶

Instrucciones especiales
+------------------------------------+
| Tomar con alimentos. Evitar        |
| pomelo o jugo de toronja.          |
|                                    |
|                                    |
+------------------------------------+
                              45/200  <- Character counter

Especificaciones:
- Min height: 88dp (3 lineas)
- Max height: expandible o scrollable
- Character counter: si tiene limite

6. Formularios Wizard (Multi-paso)¶

6.1. Indicador de Progreso¶

+------------------------------------------+
|  [<]    Agregar Medicamento       2/3    |  <- Paso actual
+------------------------------------------+
|                                           |
|  [ o ]----[ O ]----[ o ]                  |  <- Progress dots
|   1        2        3                     |
|                                           |

Variantes:

Dots: Para 3-5 pasos
Progress bar: Para procesos largos
Numbered steps: Cuando el orden importa

6.2. Navegacion entre Pasos¶

Accion	Comportamiento
Siguiente	Valida paso actual, avanza
Atras	Guarda datos temporalmente, retrocede
Cerrar (X)	Dialogo de confirmacion si hay cambios
Swipe back	Mismo que boton Atras

6.3. Persistencia de Datos¶

Comportamiento:
1. Datos se guardan localmente entre pasos
2. Al cerrar sin completar: dialogo "Guardar como borrador?"
3. Borradores expiran en 7 dias
4. Al completar: borrador se elimina

7. Formularios Inline¶

7.1. Edicion Inline¶

Estado normal:
+------------------------------------+
| Dosis: 850mg                  [Edit] |
+------------------------------------+

Estado edicion:
+------------------------------------+
| Dosis                              |
| +------------------------------+   |
| | 850                     | mg |   |
| +------------------------------+   |
| [Cancelar]           [Guardar]    |
+------------------------------------+

7.2. Quick Edit¶

Para cambios simples, usar bottom sheet:

+------------------------------------------+
|  Editar dosis                    [X]     |
+------------------------------------------+
|                                           |
|  Dosis actual: 850mg                      |
|                                           |
|  Nueva dosis *                            |
|  +------------------------------------+   |
|  | 1000                         | mg |   |
|  +------------------------------------+   |
|                                           |
|  +------------------------------------+   |
|  |          [Guardar]                 |   |
|  +------------------------------------+   |
|                                           |
+------------------------------------------+

8. Accesibilidad en Formularios¶

8.1. Labels y ARIA¶

iOS:
- accessibilityLabel = "Campo de dosis, requerido"
- accessibilityValue = "850 miligramos"
- accessibilityHint = "Ingresa la cantidad por toma"

Android:
- contentDescription para elementos no-texto
- labelFor en labels
- importantForAccessibility

8.2. Errores Accesibles¶

1. Error anunciado automaticamente (role="alert")
2. Focus se mueve al primer campo con error
3. Mensaje de error asociado al campo (aria-describedby)
4. Color + icono + texto (no solo color)

8.3. Navegacion con Teclado¶

Tab order:
1. Primer campo del formulario
2. Siguiente campo en orden visual
3. ...
4. Boton Cancelar
5. Boton Primario (Submit)

Enter: Submit del formulario (si es el ultimo campo)
Tab: Siguiente elemento focusable

9. Patrones Especificos MedTime¶

9.1. Formulario de Medicamento¶

Flujo estandar:
1. Buscar/seleccionar medicamento
2. Configurar dosis
3. Configurar horarios
4. Instrucciones (opcional)
5. Confirmar

Validaciones especificas:
- Dosis: positiva, razonable para el medicamento
- Frecuencia: al menos 1 toma
- Horarios: no duplicados, formato valido

9.2. Formulario de Perfil Medico¶

Campos sensibles (PHI):
- Condiciones medicas: autocomplete de catalogo
- Alergias: tags con severidad
- Medicamentos actuales: vinculados al modulo MED

Privacidad:
- Indicador de campos compartibles
- Preview de que veran los cuidadores

9.3. Formulario de Pago (via Store)¶

MedTime NO recopila datos de pago directamente.

Flujo:
1. Usuario selecciona plan
2. Redireccion a App Store / Google Play
3. Store maneja toda la transaccion
4. MedTime recibe confirmacion via webhook

UI muestra:
- Resumen del plan
- Precio mensual/anual
- Boton "Suscribirse con [Apple/Google]"

10. Metricas de Formularios¶

10.1. KPIs a Medir¶

Metrica	Target	Modulos
Tasa de completado	> 80%	Onboarding, Agregar Med
Tiempo promedio	< 2 min	Agregar Medicamento
Errores por sesion	< 2	Todos
Abandonos	< 15%	Wizard multi-paso

10.2. Eventos de Analytics¶

form_started: { form_id, step }
form_field_error: { form_id, field, error_type }
form_step_completed: { form_id, step, duration }
form_completed: { form_id, total_duration }
form_abandoned: { form_id, last_step, fields_filled }

11. Modulos que Usan este Patron¶

Modulo	Formularios Principales
MTS-MED-001	Agregar medicamento, Editar medicamento
MTS-ONB-001	Wizard de onboarding (8 pasos)
MTS-USR-001	Editar perfil, Datos medicos
MTS-AUTH-001	Registro, Recuperacion
MTS-CIT-001	Agregar cita
MTS-EVT-001	Registrar evento
MTS-RX-001	Agregar receta manual
MTS-ANA-001	Cargar resultado

12. Referencias¶

02-component-library.md - Componentes CMP-INP-*
03-accessibility-guidelines.md - Seccion 4.8
Material Design 3 - Text Fields
Apple HIG - Text Fields

13. Historial de Cambios¶

Version	Fecha	Cambios
1.0.0	2025-12-05	Version inicial - Consolidacion FASE 5

Documento generado por SpecQueen "Un formulario bien disenado es invisible. El usuario solo ve su objetivo."