Patron de Diseno: Alertas y Notificaciones
Identificador: PAT-004
Version: 1.0.0
Fecha: 2025-12-05
Autor: SpecQueen (Consolidacion FASE 5)
Estado: Aprobado
1. Proposito
Este documento define los patrones estandarizados para alertas, notificaciones y mensajes de sistema en MedTime. Abarca desde notificaciones push hasta alertas inline, organizadas por severidad y contexto.
2. Taxonomia de Alertas
2.1. Por Severidad
| Nivel |
Color |
Icono |
Uso |
| Critical |
error.main (#D32F2F) |
error/warning |
Interacciones CONTRAINDICADO, emergencias |
| Serious |
warning.dark (#F57C00) |
warning |
Interacciones SERIO, tomas muy vencidas |
| Warning |
warning.main (#FF9800) |
info |
Tomas pendientes, inventario bajo |
| Info |
info.main (#2196F3) |
info_outline |
Recordatorios, informacion general |
| Success |
success.main (#4CAF50) |
check_circle |
Confirmaciones, tomas completadas |
2.2. Por Tipo
| Tipo |
Persistencia |
Interrupcion |
Ejemplo |
| Push Notification |
Persiste hasta dismiss |
Alta |
Recordatorio de toma |
| In-App Banner |
4-10 segundos |
Media |
Toma confirmada |
| Toast/Snackbar |
3-4 segundos |
Baja |
Accion completada |
| Modal Alert |
Requiere accion |
Muy alta |
Interaccion critica |
| Inline Alert |
Persistente |
Nula |
Error de formulario |
| Badge |
Persistente |
Nula |
Items pendientes |
3. Notificaciones Push
3.1. Estructura iOS
+------------------------------------------+
| MedTime 08:00 |
| Hora de tomar tus medicamentos |
| |
| Metformina 850mg, Lisinopril 10mg |
| |
| [Tomado] [Posponer] [Ver] |
+------------------------------------------+
Especificaciones:
- Title: Bold, max 50 chars
- Body: Regular, max 150 chars
- Actions: Max 4 buttons
3.2. Estructura Android
+------------------------------------------+
| [M] MedTime 08:00 AM [>] |
| |
| Hora de tomar tus medicamentos |
| Metformina 850mg, Lisinopril 10mg |
| |
+------------------------------------------+
| [Tomado] [Posponer] [Ver] |
+------------------------------------------+
Especificaciones:
- Small icon: 24x24dp, monocromo
- Large icon: Opcional, 64x64dp
- Expanded: Muestra lista completa
3.3. Categorias de Notificacion
| Categoria |
Prioridad |
Sonido |
Vibracion |
Persistente |
| MEDICATION_REMINDER |
High |
Custom |
Si |
Si |
| EMERGENCY_ALERT |
Max |
Alarma |
Patron fuerte |
Si |
| INTERACTION_CRITICAL |
Max |
Alarma |
Si |
Si |
| INTERACTION_WARNING |
High |
Default |
Si |
No |
| INVENTORY_LOW |
Default |
No |
No |
No |
| ADHERENCE_UPDATE |
Low |
No |
No |
No |
| PROMOTIONAL |
Min |
No |
No |
No |
3.4. Acciones de Notificacion
Toma de medicamento:
[Tomado] - Marca como completado, cierra notificacion
[Posponer] - Abre time picker, reprograma
[Ver] - Abre detalle de alerta en app
[Omitir] - (long press) Registra como omitida
Interaccion critica:
[Entiendo] - Reconoce alerta, requiere confirmacion
[Mas info] - Abre detalle de interaccion
[Contactar medico] - Inicia llamada a emergencia
4. Alertas Modales
4.1. Interaccion CONTRAINDICADO
+------------------------------------------+
| |
| +------------------------------+ |
| | [!] CONTRAINDICADO | |
| | | |
| | Warfarina + Aspirina | |
| | | |
| | Esta combinacion tiene | |
| | riesgo de sangrado severo. | |
| | | |
| | NO TOMAR JUNTOS | |
| | | |
| | [Contactar medico] | |
| | | |
| | Ingresa codigo para | |
| | continuar bajo tu riesgo: | |
| | | |
| | [ _ _ _ _ _ _ ] | |
| | | |
| +------------------------------+ |
| |
+------------------------------------------+
Caracteristicas:
- NO se puede cerrar sin accion
- Fondo: error.main pulsing border
- Codigo de 6 digitos para override
- Log de decision para auditoria
4.2. Confirmacion de Accion Critica
+------------------------------------------+
| |
| +------------------------------+ |
| | | |
| | Eliminar cuenta? | |
| | | |
| | Esta accion eliminara: | |
| | - Todos tus medicamentos | |
| | - Tu historial de tomas | |
| | - Tus datos medicos | |
| | | |
| | Tienes 30 dias para | |
| | recuperar tu cuenta. | |
| | | |
| | [Cancelar] [Eliminar] | |
| | ^-- Destructivo| |
| +------------------------------+ |
| |
+------------------------------------------+
Estilo boton destructivo:
- Text color: error.main
- No es el boton primario (no filled)
- Posicion a la derecha
4.3. Alerta de Emergencia
+------------------------------------------+
| |
| +---------------------------------+ |
| | [!!!] EMERGENCIA [!!!] | |
| | | |
| | Maria Garcia ha activado | |
| | la alerta de emergencia | |
| | | |
| | Ubicacion: Av. Principal 123 | |
| | Hora: 14:35 | |
| | | |
| | Medicamentos activos: | |
| | - Warfarina 5mg | |
| | - Metformina 850mg | |
| | | |
| | [Llamar 911] [Contactar] | |
| | | |
| | [Marcar como atendida] | |
| | | |
| +---------------------------------+ |
| |
+------------------------------------------+
Caracteristicas:
- Pantalla completa, no dismissable
- Sonido de alarma continuo
- Parpadeo de borde (respeta reduce motion)
- Informacion medica del paciente
- Acciones de emergencia prominentes
5. Alertas Inline
5.1. Banner de Alerta
+------------------------------------------+
| [!] Tienes 3 tomas pendientes de hoy |
| [Ver pendientes] |
+------------------------------------------+
| |
| [Contenido normal de la pantalla] |
| |
+------------------------------------------+
Posicion: Debajo del Top App Bar
Altura: 56-72dp
Dismissable: Si (excepto criticas)
5.2. Alert Card
+------------------------------------------+
| +------------------------------------+ |
| | [!] Inventario bajo | |
| | | |
| | Metformina 850mg: quedan 5 dosis | |
| | | |
| | [Agregar recordatorio de compra] | |
| +------------------------------------+ |
| |
| [Resto del contenido...] |
| |
+------------------------------------------+
Estilos por severidad:
- Critical: error.50 background, error.main border
- Warning: warning.50 background, warning.main border
- Info: info.50 background, info.main border
- Success: success.50 background, success.main border
5.3. Error de Campo
Dosis *
+------------------------------------+
| -5 [!] |
+------------------------------------+
[!] La dosis debe ser un numero positivo
- Icono: error_outline, 16dp
- Color: error.main
- Posicion: inmediatamente debajo del campo
- Anunciado por screen reader
6. Toasts y Snackbars
6.1. Toast Simple
+------------------------------------------+
| |
| [Contenido de la pantalla] |
| |
+------------------------------------------+
| |
| +------------------------------------+ |
| | [v] Medicamento guardado | |
| +------------------------------------+ |
| |
+------------------------------------------+
Duracion: 3 segundos
Posicion: Arriba de bottom nav
Sin accion: Solo informativo
6.2. Snackbar con Accion
+------------------------------------------+
| |
| [Contenido de la pantalla] |
| |
+------------------------------------------+
| |
| +--------------------------------------+ |
| | Medicamento eliminado [Deshacer]| |
| +--------------------------------------+ |
| |
+------------------------------------------+
Duracion: 6-10 segundos (tiene accion)
Accion: Un solo boton de texto
Swipe: Dismiss hacia cualquier lado
6.3. Snackbar Multi-linea
+------------------------------------------+
| |
| +------------------------------------+ |
| | Sincronizacion completada. | |
| | 15 medicamentos actualizados. | |
| | [Ver] | |
| +------------------------------------+ |
| |
+------------------------------------------+
Max lineas: 2
Accion alineada abajo-derecha
7. Badges y Indicadores
7.1. Badge Numerico
Bottom Nav con badge:
+-----------------------------------------------+
| [Home] [Meds] [+] [Calendar] [More] |
| o (3) o o o |
+-----------------------------------------------+
^-- Badge rojo con numero
Especificaciones:
- Size: 16dp minimo (para legibilidad)
- Background: error.main
- Text: 10sp, white, bold
- Max display: 99+ (para >99)
- Position: top-right del icono
7.2. Badge Dot
+------------------------------------------+
| [Bell] |
| * <- Dot rojo, 8dp |
+------------------------------------------+
Uso: Indicar que hay novedades sin numero
7.3. Status Indicator
+------------------------------------------+
| [Avatar] Juan Perez |
| o Activo <- Punto verde |
| ^-- 12dp, success.main |
+------------------------------------------+
Estados:
- Online: success.main
- Away: warning.main
- Offline: neutral.400
- Emergency: error.main (pulsing)
8. Alertas de Estado del Sistema
8.1. Modo Offline
+------------------------------------------+
| [cloud-off] Sin conexion - Modo offline |
+------------------------------------------+
| |
| [Contenido normal] |
| |
+------------------------------------------+
- Persistente hasta recuperar conexion
- Background: neutral.800
- Text: white, 12sp
- No dismissable
8.2. Sincronizacion en Progreso
+------------------------------------------+
| [sync] Sincronizando... 15% |
+------------------------------------------+
- Progress bar inline
- Dismissable con warning
8.3. Actualizacion Disponible
+------------------------------------------+
| +--------------------------------------+ |
| | Nueva version disponible (2.1.0) | |
| | | |
| | Mejoras: | |
| | - Nuevas alertas de interacciones | |
| | - Correcciones de rendimiento | |
| | | |
| | [Ahora no] [Actualizar] | |
| +--------------------------------------+ |
+------------------------------------------+
Modal no intrusivo
Puede posponerse
9. Tiempos y Persistencia
9.1. Duraciones Recomendadas
| Tipo |
Duracion |
Condicion |
| Toast informativo |
3s |
Auto-dismiss |
| Snackbar con accion |
6-10s |
Auto-dismiss |
| Banner warning |
30s |
Auto-dismiss |
| Banner critical |
Indefinido |
Requiere accion |
| Modal info |
- |
User dismiss |
| Modal critical |
- |
Requiere accion especifica |
9.2. Queue de Alertas
Prioridad de display:
1. Emergency/Critical (modal)
2. Push notifications
3. In-app banners
4. Toasts/snackbars
Si hay multiples:
- Mostrar la mas importante primero
- Queue las demas
- No mostrar mas de 1 toast a la vez
10. Sonidos y Vibracion
10.1. Patrones de Sonido
| Alerta |
Sonido |
Duracion |
| Recordatorio normal |
Tono suave |
1s |
| Recordatorio urgente |
Tono alerta |
2s |
| Emergencia |
Alarma |
Loop hasta dismiss |
| Exito |
Ding positivo |
0.5s |
| Error |
Tono negativo |
0.5s |
10.2. Patrones de Vibracion
Normal: [vibrate 200ms]
Urgente: [200ms] [pause 100ms] [200ms]
Emergencia: [500ms] [pause 200ms] [500ms] [pause 200ms] [500ms]
Respeta configuracion de sistema
Modo silencio: Solo vibracion
No molestar: Solo visuales
11. Accesibilidad
11.1. Screen Reader
Anuncios automaticos:
- role="alert" para mensajes importantes
- aria-live="polite" para toasts
- aria-live="assertive" para criticos
Ejemplo:
"Alerta: Interaccion de medicamentos detectada.
Warfarina y Aspirina tienen riesgo de sangrado.
Boton: Ver mas informacion."
11.2. Contraste y Colores
Todos los textos de alerta:
- Minimo 4.5:1 contra background
- Iconos con 3:1 minimo
- NO solo color para indicar severidad
Siempre incluir:
- Icono indicativo
- Texto descriptivo
- Color como refuerzo
11.3. Focus Management
Modal de alerta:
1. Focus se mueve al titulo
2. Tab navega solo dentro del modal
3. Focus trap activo
4. Escape cierra (si es dismissable)
5. Focus vuelve al trigger al cerrar
12. Patrones de Dismissal
12.1. Metodos de Cierre
| Tipo |
Tap outside |
Swipe |
Button |
Back |
Auto |
| Toast |
No |
Si |
No |
No |
Si |
| Snackbar |
No |
Si |
Opcional |
No |
Si |
| Banner |
No |
Si |
Si |
No |
Opcional |
| Modal info |
Si |
No |
Si |
Si |
No |
| Modal critical |
No |
No |
Especifico |
No |
No |
12.2. Confirmacion de Dismissal
Para alertas criticas que se intentan cerrar:
+------------------------------------------+
| +------------------------------+ |
| | Seguro que entiendes | |
| | el riesgo? | |
| | | |
| | Ignorar esta alerta puede | |
| | ser peligroso para tu | |
| | salud. | |
| | | |
| | [Volver] [Si, entiendo] | |
| +------------------------------+ |
+------------------------------------------+
13. Modulos que Usan este Patron
| Modulo |
Alertas Principales |
| MTS-ALT-001 |
Recordatorios de toma, centro de notificaciones |
| MTS-INT-001 |
Alertas de interacciones med-med |
| MTS-INT-002 |
Alertas de interacciones med-estudio |
| MTS-MED-001 |
Inventario bajo |
| MTS-ADH-001 |
Alertas de adherencia |
| MTS-USR-001 |
Alertas de emergencia |
| MTS-PAY-001 |
Vencimiento de suscripcion |
| MTS-ANA-001 |
Valores fuera de rango |
| MTS-RX-001 |
Renovacion de recetas |
| MTS-OFF-001 |
Estado offline |
| MTS-BCK-001 |
Backups |
14. Referencias
15. Historial de Cambios
| Version |
Fecha |
Cambios |
| 1.0.0 |
2025-12-05 |
Version inicial - Consolidacion FASE 5 |
Documento generado por SpecQueen
"Una alerta efectiva informa sin alarmar, excepto cuando alarmar es necesario."