Pantalla: Comparativa de Planes
Identificador: SCR-PAY-001
Nombre: Comparativa de Planes
Modulo: MTS-PAY-001 - Pagos y Suscripciones
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
| Atributo |
Valor |
| Tipo |
Landing/Comparativa |
| Acceso |
Multiple entry points |
| Roles |
Todos |
| Tiers |
Visible para todos, CTA varia |
| Prioridad |
Alta |
2. Proposito
Presenta los tres planes de MedTime (Free, Pro, Perfect) de forma clara y accesible, permitiendo al usuario comparar caracteristicas y tomar una decision informada sin presion.
3. Wireframe - Vista Movil
+--------------------------------------------------+
| [X] Elige tu plan |
+--------------------------------------------------+
| |
| Encuentra el plan perfecto para |
| cuidar tu salud |
| |
+--------------------------------------------------+
| [Mensual] [Anual - Ahorra 17%] |
| ^^^^ |
+--------------------------------------------------+
| |
| +--------------------------------------------+ |
| | FREE | |
| | Gratis | |
| +--------------------------------------------+ |
| | | |
| | [check] Hasta 3 medicamentos | |
| | [check] Recordatorios basicos | |
| | [check] Historial de 30 dias | |
| | [x] Con anuncios | |
| | [x] Sin sincronizacion | |
| | [x] Sin cuidadores | |
| | | |
| | [Plan actual] | |
| +--------------------------------------------+ |
| |
| +--------------------------------------------+ |
| | PRO [Popular] | |
| | $9.99/mes | |
| | (o $99.99/ano - $8.33/mes) | |
| +--------------------------------------------+ |
| | | |
| | [check] Medicamentos ilimitados | |
| | [check] Sin anuncios | |
| | [check] Sincronizacion en la nube | |
| | [check] Hasta 5 cuidadores | |
| | [check] Historial completo | |
| | [check] Exportar datos (PDF) | |
| | [check] 3 SMS de alerta/mes | |
| | | |
| | [Ver detalles] [Comenzar prueba] | |
| | 7 dias gratis | |
| +--------------------------------------------+ |
| |
| +--------------------------------------------+ |
| | PERFECT | |
| | $19.99/mes | |
| | (o $199.99/ano - $16.66/mes) | |
| +--------------------------------------------+ |
| | | |
| | [check] Todo de Pro, mas: | |
| | [check] Hasta 10 cuidadores | |
| | [check] SMS ilimitados | |
| | [check] MFA obligatorio | |
| | [check] Recovery Key | |
| | [check] Exportar FHIR | |
| | [check] Soporte prioritario | |
| | [check] 10 dependientes | |
| | | |
| | [Ver detalles] [Comenzar prueba] | |
| +--------------------------------------------+ |
| |
+--------------------------------------------------+
| Puedes cancelar en cualquier momento. |
| Pagos procesados por App Store. |
| |
| [Restaurar compras] [Terminos] |
+--------------------------------------------------+
4. Elementos de UI
4.1. Componentes
| ID |
Componente |
Tipo |
Requerido |
| header |
Top App Bar (X close) |
CMP-NAV-002 |
Si |
| hero_text |
Hero Text |
Custom |
Si |
| period_toggle |
Segmented Control |
Custom |
Si |
| plan_card_free |
Plan Card |
Custom |
Si |
| plan_card_pro |
Plan Card |
Custom |
Si |
| plan_card_perfect |
Plan Card |
Custom |
Si |
| footer_legal |
Footer Text |
- |
Si |
| btn_restore |
Text Button |
CMP-BTN-003 |
Si |
| btn_terms |
Text Button |
CMP-BTN-003 |
Si |
4.2. Plan Card Component
+----------------------------------------------+
| [Badge: Popular] PLAN NAME |
| $X.XX/periodo |
| (precio alternativo) |
+----------------------------------------------+
| CARACTERISTICAS |
| [icon] Feature 1 |
| [icon] Feature 2 |
| ... |
+----------------------------------------------+
| [Ver detalles] [CTA Principal] |
| (subtext opcional) |
+----------------------------------------------+
4.3. Especificaciones Visuales
Colores de Plan:
| Plan |
Color Header |
Color Badge |
| Free |
neutral.200 |
- |
| Pro |
primary.main (#2196F3) |
"Popular" |
| Perfect |
tier.perfect (#9C27B0) |
- |
Tipografia:
| Elemento |
Size |
Weight |
| Plan name |
20sp |
Bold |
| Precio principal |
24sp |
Bold |
| Precio alternativo |
14sp |
Regular |
| Features |
14sp |
Regular |
| CTA |
16sp |
Medium |
5. Estados
5.1. Por Tier Actual del Usuario
| Tier Actual |
Card Free |
Card Pro |
Card Perfect |
| Free |
"Plan actual" |
"Comenzar prueba" |
"Comenzar prueba" |
| Pro |
"Cambiar" |
"Plan actual" |
"Actualizar" |
| Perfect |
"Cambiar" |
"Cambiar" |
"Plan actual" |
5.2. Estados de Trial
| Estado |
Visual |
| Trial disponible |
"Comenzar prueba - 7 dias gratis" |
| Trial usado |
"Suscribirse" (sin mencion de trial) |
| En trial activo |
"Quedan X dias de prueba" |
5.3. Estados de Periodo
| Periodo |
Visual Precio |
| Mensual |
"$9.99/mes" |
| Anual |
"$99.99/ano ($8.33/mes)" + Badge "Ahorra 17%" |
6. Interacciones
6.1. Gestos
| Gesto |
Elemento |
Accion |
| Tap |
Period toggle |
Cambiar precios mostrados |
| Tap |
Ver detalles |
Navegar a detalle de plan |
| Tap |
CTA suscribir |
Navegar a checkout |
| Tap |
Restaurar compras |
Iniciar restore de Store |
| Tap |
X (close) |
Volver a pantalla anterior |
| Scroll |
Pantalla |
Ver todos los planes |
6.2. Period Toggle
Al cambiar entre Mensual y Anual:
- Animacion suave de precios
- Badge "Ahorra 17%" aparece/desaparece
- Precios se actualizan en todas las cards
7. Feature Comparison
7.1. Tabla de Caracteristicas
| Caracteristica |
Free |
Pro |
Perfect |
| Medicamentos |
3 |
Ilimitados |
Ilimitados |
| Anuncios |
Si |
No |
No |
| Sync cloud |
No |
Si |
Si |
| Cuidadores |
0 |
5 |
10 |
| Historial |
30 dias |
Completo |
Completo |
| SMS alertas |
0 |
3/mes |
Ilimitados |
| Exportar PDF |
No |
Si |
Si |
| Exportar FHIR |
No |
No |
Si |
| MFA obligatorio |
No |
No |
Si |
| Recovery Key |
No |
No |
Si |
| Soporte |
Basico |
Email |
Prioritario |
| Dependientes |
1 |
5 |
10 |
7.2. Agrupacion Visual
En la UI, las features se agrupan por categoria:
- Medicamentos y datos
- Sincronizacion y backup
- Cuidadores y familia
- Seguridad
- Soporte
8. Accesibilidad
8.1. Screen Reader
| Elemento |
Label |
Hint |
| period_toggle |
"Periodo de facturacion, [seleccionado]" |
"Cambia entre mensual y anual" |
| plan_card |
"Plan [nombre], [precio]" |
"Desplaza para ver caracteristicas" |
| feature_included |
"[Feature], incluido" |
- |
| feature_excluded |
"[Feature], no incluido" |
- |
| cta_trial |
"Comenzar prueba de 7 dias" |
"No se cobra hasta que termine la prueba" |
| popular_badge |
"Plan mas popular" |
- |
8.2. Comparativa Accesible
Para screen readers, ofrecer modo lista alternativo:
- "Comparar caracteristicas de [Plan] con [Plan]"
- Lista de diferencias
8.3. WCAG Compliance
| Criterio |
Estado |
Notas |
| 1.4.3 Contraste |
OK |
Precios 4.5:1 |
| 1.4.11 Contraste UI |
OK |
Badges y cards 3:1 |
| 2.4.7 Focus visible |
OK |
Cards focusables |
| 2.5.5 Target size |
OK |
Cards y botones 48dp |
9. Eventos de Analytics
| Evento |
Trigger |
Parametros |
| plans_page_viewed |
Abrir pantalla |
source, current_tier |
| period_toggled |
Cambiar periodo |
period |
| plan_detail_tapped |
Tap ver detalles |
plan |
| trial_started |
Iniciar trial |
plan |
| subscribe_tapped |
Tap suscribir |
plan, period |
| restore_tapped |
Tap restaurar |
- |
10. Casos de Prueba
| ID |
Caso |
Resultado Esperado |
| TC-001 |
Usuario Free ve planes |
Card Free con "Plan actual" |
| TC-002 |
Toggle a Anual |
Precios actualizan + badge ahorro |
| TC-003 |
Tap Pro CTA |
Navegar a checkout Pro |
| TC-004 |
Usuario Pro ve planes |
Card Pro con "Plan actual" |
| TC-005 |
Restaurar compras |
Iniciar flujo Store |
| TC-006 |
Screen reader |
Features leidas correctamente |
11. Consideraciones de Diseno
11.1. Principios de Conversion Etica
- Sin presion: No usar countdown ni "oferta limitada"
- Transparencia: Precios claros, impuestos en Store
- Facilidad de salida: "Cancelar en cualquier momento" visible
- No degradar Free: Free es funcional, no crippled
11.2. Destacar Pro (No Perfect)
Pro es el plan recomendado para la mayoria:
- Badge "Popular"
- Posicion central
- Color destacado pero no agresivo
12. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)