Pantalla: Tour de Funcionalidades
Identificador: SCR-ONB-008
Modulo: MTS-ONB-001 - Onboarding
Version: 1.0.0
Fecha: 2025-12-05
Autor: MobileUxUiDrone (Eight of Eight)
Estado: Especificado
| Atributo |
Valor |
| Nombre |
Tour de Funcionalidades |
| Proposito |
Mostrar funcionalidades principales antes de iniciar |
| Tipo |
Full Screen (paso 8 de onboarding - final) |
| Acceso |
Desde SCR-ONB-007 |
| Prioridad |
Alta |
NOTA: Esta es la ultima pantalla del onboarding. Debe generar entusiasmo y preparar al usuario para usar la app.
2. Wireframe ASCII
2.1. Estado: Slide 1 - Dashboard
+------------------------------------------+
| Paso 8 de 8 ======================== | <- 100%
+------------------------------------------+
| |
| [Ilustracion Dashboard] |
| |
| Todo en un solo lugar |
| |
| Tu dashboard te muestra: |
| |
| - Proximos medicamentos |
| - Estado de adherencia |
| - Alertas importantes |
| |
| |
| o o o o | <- Dots indicator
| * |
| |
| +------------------------------------+ |
| | Siguiente | |
| +------------------------------------+ |
| |
| Saltar tour |
| |
+------------------------------------------+
2.2. Estado: Slide 2 - Recordatorios
+------------------------------------------+
| Paso 8 de 8 ======================== |
+------------------------------------------+
| |
| [Ilustracion Notificacion] |
| |
| Nunca olvides una toma |
| |
| Recibiras recordatorios: |
| |
| - A la hora exacta |
| - Con nombre y dosis |
| - Facil de confirmar o posponer |
| |
| |
| o o o o |
| * |
| |
| +------------------------------------+ |
| | Siguiente | |
| +------------------------------------+ |
| |
| Saltar tour |
| |
+------------------------------------------+
2.3. Estado: Slide 3 - Estadisticas
+------------------------------------------+
| Paso 8 de 8 ======================== |
+------------------------------------------+
| |
| [Ilustracion Graficas] |
| |
| Mide tu progreso |
| |
| Visualiza tu adherencia: |
| |
| - Grafica semanal y mensual |
| - Racha de dias consecutivos |
| - Medicamentos mas olvidados |
| |
| |
| o o o o |
| * |
| |
| +------------------------------------+ |
| | Siguiente | |
| +------------------------------------+ |
| |
| Saltar tour |
| |
+------------------------------------------+
2.4. Estado: Slide 4 - Privacidad (Final)
+------------------------------------------+
| Paso 8 de 8 ======================== |
+------------------------------------------+
| |
| [Ilustracion Candado] |
| |
| Tu privacidad, tu control |
| |
| Tus datos estan protegidos: |
| |
| - Encriptacion de extremo a extremo |
| - Tu decides quien ve tu informacion |
| - Cumplimiento HIPAA |
| |
| |
| o o o o |
| * |
| |
| +------------------------------------+ |
| | Comenzar a usar MedTime | | <- CTA final
| +------------------------------------+ |
| |
+------------------------------------------+
2.5. Estado: CS - Tour Reducido (1 slide)
+------------------------------------------+
| [<-] Listo para empezar |
+------------------------------------------+
| |
| [Ilustracion celebracion] |
| |
| Todo listo! |
| |
| Ya puedes empezar a registrar |
| los medicamentos de quien cuidas. |
| |
| Recibiras notificaciones cuando |
| sea hora de administrar medicamentos. |
| |
| |
| +------------------------------------+ |
| | Comenzar | |
| +------------------------------------+ |
| |
+------------------------------------------+
3. Componentes UI
3.1. Progress Bar Final
| Propiedad |
Valor |
| Componente |
CMP-DAT-009 (Progress Bar) |
| Progress |
100% |
| Text |
"Paso 8 de 8" |
| Color |
success (completado) |
3.2. Ilustracion de Slide
| Propiedad |
Valor |
| Tipo |
Lottie animado |
| Size |
200x200dp |
| Loop |
Si |
| Temas |
Dashboard, Notificacion, Graficas, Candado |
3.3. Titulo de Slide
| Propiedad |
Valor |
| Tipografia |
2xl (24sp), bold |
| Color |
neutral.900 |
| Alineacion |
Center |
3.4. Lista de Beneficios
| Propiedad |
Valor |
| Tipografia |
md (16sp), regular |
| Color |
neutral.700 |
| Bullet |
Guion |
| Spacing |
8dp entre items |
3.5. Page Dots
| Propiedad |
Valor |
| Componente |
CMP-NAV-003 (Page Indicator) |
| Dots |
4 |
| Active color |
primary |
| Inactive color |
neutral.300 |
| Size active |
10dp |
| Size inactive |
8dp |
3.6. Boton Principal
| Propiedad |
Valor |
| Componente |
CMP-BTN-001 (Primary Button) |
| Texto slides 1-3 |
"Siguiente" |
| Texto slide 4 |
"Comenzar a usar MedTime" |
| Width |
Full width - 32dp |
3.7. Link Saltar
| Propiedad |
Valor |
| Componente |
CMP-BTN-003 (Text Button) |
| Texto |
"Saltar tour" |
| Color |
neutral.600 |
| Visible |
Slides 1-3 solamente |
4. Comportamientos
4.1. Navegacion entre Slides
flowchart TD
A[Slide 1] -->|Tap Siguiente| B[Slide 2]
A -->|Swipe left| B
A -->|Tap Saltar| E[Completar onboarding]
B -->|Tap Siguiente| C[Slide 3]
B -->|Swipe left| C
B -->|Swipe right| A
B -->|Tap Saltar| E
C -->|Tap Siguiente| D[Slide 4]
C -->|Swipe left| D
C -->|Swipe right| B
C -->|Tap Saltar| E
D -->|Tap Comenzar| E
D -->|Swipe right| C
E --> F[Marcar onboarding_completed]
F --> G[Navegar a Dashboard]
4.2. Gestos
| Gesto |
Accion |
| Swipe left |
Siguiente slide |
| Swipe right |
Slide anterior |
| Tap Siguiente |
Siguiente slide |
| Tap Comenzar |
Completar y ir a dashboard |
| Tap Saltar |
Completar y ir a dashboard |
| Tap dot |
Ir a slide especifico |
4.3. Animacion de Transicion
TRANSICION ENTRE SLIDES:
Direccion: Horizontal (swipe semantics)
Duracion: 300ms
Easing: ease-in-out
Exit: Slide actual sale por izquierda (opacity 1->0, x 0->-100%)
Enter: Nuevo slide entra por derecha (opacity 0->1, x 100%->0)
REDUCED MOTION:
- Solo fade, sin movimiento horizontal
- Duracion: 150ms
4.4. Completar Onboarding
async function completeOnboarding() {
// 1. Marcar completado
await updateUser({
onboarding_completed: true,
onboarding_completed_at: new Date()
});
// 2. Trigger analytics
trackEvent('onboarding_completed', {
role: userRole,
tier: userTier,
duration_seconds: calculateDuration(),
steps_skipped: skippedSteps
});
// 3. Navegar a dashboard
navigation.reset({
index: 0,
routes: [{ name: 'Dashboard' }]
});
}
5. Estados
5.1. Estados del Carrusel
| Estado |
Visual |
| Slide 1 |
Dot 1 activo, Siguiente visible |
| Slide 2 |
Dot 2 activo, Siguiente visible |
| Slide 3 |
Dot 3 activo, Siguiente visible |
| Slide 4 |
Dot 4 activo, Comenzar visible, sin Saltar |
5.2. Estados de Transicion
| Estado |
Visual |
| Idle |
Slide estatico |
| Swiping |
Slide siguiendo dedo |
| Animating |
Transicion automatica |
6. Accesibilidad
6.1. Labels y Hints
| Elemento |
accessibilityLabel |
accessibilityHint |
| Progress |
"Paso 8 de 8, onboarding completo" |
- |
| Ilustracion |
"{descripcion del tema}" |
- |
| Dots |
"Pagina {n} de 4" |
"Toca para ir a esta pagina" |
| Siguiente |
"Siguiente" |
"Va a la siguiente pantalla del tour" |
| Comenzar |
"Comenzar a usar MedTime" |
"Completa el registro y va al inicio" |
| Saltar |
"Saltar tour" |
"Salta el tour y va al inicio" |
6.2. Orden de Foco
- Progress indicator
- Ilustracion
- Titulo
- Lista de beneficios
- Page dots
- Boton principal
- Link Saltar (si visible)
6.3. Screen Reader
| Evento |
Anuncio |
| Slide cambiado |
"Pagina {n} de 4: {titulo}" |
| Tour completado |
"Registro completado. Bienvenido a MedTime" |
6.4. Navegacion con Teclado/Switch
- Left/Right arrows: cambiar slides
- Enter/Space: activar boton enfocado
- Tab: navegar entre elementos
7. Contenido de Slides
7.1. Slide 1 - Dashboard
| Campo |
Valor |
| Ilustracion |
dashboard_tour.json |
| Titulo |
"Todo en un solo lugar" |
| Beneficios |
Proximos medicamentos, Estado de adherencia, Alertas importantes |
7.2. Slide 2 - Recordatorios
| Campo |
Valor |
| Ilustracion |
notification_tour.json |
| Titulo |
"Nunca olvides una toma" |
| Beneficios |
A la hora exacta, Con nombre y dosis, Facil de confirmar o posponer |
7.3. Slide 3 - Estadisticas
| Campo |
Valor |
| Ilustracion |
stats_tour.json |
| Titulo |
"Mide tu progreso" |
| Beneficios |
Grafica semanal y mensual, Racha de dias consecutivos, Medicamentos mas olvidados |
7.4. Slide 4 - Privacidad
| Campo |
Valor |
| Ilustracion |
privacy_tour.json |
| Titulo |
"Tu privacidad, tu control" |
| Beneficios |
Encriptacion de extremo a extremo, Tu decides quien ve tu informacion, Cumplimiento HIPAA |
8. Datos Requeridos
interface TourInput {
role: 'PI' | 'CR' | 'CS';
tier: 'free' | 'pro' | 'perfect';
onboarding_start_time: Date;
}
8.2. Output Data
interface TourOutput {
completed: boolean;
slides_viewed: number[];
skipped: boolean;
duration_seconds: number;
}
9. Metricas
9.1. Analytics Events
| Evento |
Parametros |
| screen_view |
screen_name: "onboarding_tour" |
| tour_slide_viewed |
slide_index, slide_title |
| tour_slide_time |
slide_index, time_seconds |
| tour_skipped |
slides_viewed, current_slide |
| tour_completed |
total_time_seconds |
| onboarding_completed |
role, tier, duration_seconds, steps_skipped |
9.2. Funnel Onboarding
| Paso |
Evento |
| 1 |
onboarding_started |
| 2-7 |
step_completed/step_skipped |
| 8 |
tour_completed |
| Final |
onboarding_completed |
10. Variaciones por Rol
10.1. PI (Paciente Independiente)
- Tour completo (4 slides)
- Enfasis en adherencia personal
- Mencion de cuidadores si Pro/Perfect
10.2. CR (Cuidador Responsable)
- Tour completo (4 slides)
- Contenido adaptado: "tus dependientes" en lugar de "tus medicamentos"
- Slide adicional sobre gestion de multiples perfiles
10.3. CS (Cuidador Solidario)
- Tour reducido (1 slide)
- Solo confirmacion de setup
- Directo a dashboard
11. Celebracion Final
11.1. Animacion de Completado
Al tap "Comenzar":
1. Boton pulsa (scale 1.0 -> 0.95 -> 1.0)
2. Confetti animation overlay (1.5s)
3. Fade out pantalla (300ms)
4. Fade in dashboard (300ms)
REDUCED MOTION:
- Sin confetti
- Solo fade transition
11.2. Haptic Feedback
| Plataforma |
Tipo |
| iOS |
.success |
| Android |
CONFIRM (100ms) |
12. Referencias
Documento generado por MobileUxUiDrone (Eight of Eight)