Lección 3: Layouts Avanzados y Buenas Prácticas

Ya tenemos una estructura sólida y un branding institucional. Ahora, el siguiente paso es la arquitectura de la información. Un buen layout no solo organiza el contenido, sino que guía la atención del usuario hacia los hallazgos más importantes.

`shinydashboard` nos proporciona componentes especializados para lograrlo, como las tarjetas de métricas (valueBox e infoBox) y los contenedores con pestañas (tabBox).

1. Tarjetas de Métricas de Alto Impacto

Los Indicadores Clave de Rendimiento (KPIs) deben ser lo primero que un usuario vea. Las funciones valueBox e infoBox están diseñadas para este propósito.

Usando `valueBox` para KPIs Principales

El valueBox es ideal para mostrar un número grande y un subtítulo. Se compone de tres argumentos principales: value, subtitle, e icon.

Implementación en la UI (`app.R`):


# En el dashboardBody, dentro de un fluidRow
fluidRow(
    # La UI define un espacio para la tarjeta
    valueBoxOutput("puntaje_promedio_kpi", width = 4)
)

Implementación en el Server (`app.R`):


# El server calcula y renderiza el contenido de la tarjeta
output$puntaje_promedio_kpi <- renderValueBox({
    
    # Lógica de cálculo (ejemplo)
    promedio <- round(mean(datos_saber$punt_global, na.rm = TRUE), 1)

    valueBox(
        value = promedio,
        subtitle = "Puntaje Global Promedio",
        icon = icon("star-half-alt"),
        color = "yellow" # Corresponde al amarillo del ICFES
    )
})

2. Organización Eficiente del Espacio con `tabBox`

A menudo, queremos mostrar múltiples gráficos o tablas en un mismo espacio sin abrumar al usuario. El tabBox es la solución perfecta, ya que crea un contenedor con pestañas internas.

Agrupando Visualizaciones

El tabBox se define en la UI y contiene múltiples tabPanel. Cada panel puede alojar un output diferente (un gráfico, una tabla, etc.).

Implementación en la UI (`app.R`):


# Dentro de un fluidRow, usualmente al lado de los controles
box(
    title = "Visualización Detallada", status = "primary", solidHeader = TRUE, width = 8,
    tabBox(
        width = 12, # Ocupa todo el ancho del box contenedor
        
        # Pestaña 1
        tabPanel(
            title = "Dispersión de Puntajes", 
            icon = icon("chart-scatter"),
            plotlyOutput("grafico_dispersion")
        ),
        
        # Pestaña 2
        tabPanel(
            title = "Distribución por Naturaleza", 
            icon = icon("chart-pie"),
            plotlyOutput("grafico_torta")
        )
    )
)

Nota Importante: La lógica del server no cambia. Simplemente renderizas cada gráfico a su respectivo ID (output$grafico_dispersion y output$grafico_torta). El tabBox se encarga de la navegación por sí solo.

3. Buenas Prácticas de UI/UX

Un buen dashboard no solo muestra datos, sino que cuenta una historia. Sigue estos principios para asegurar que tu diseño sea efectivo:

Jerarquía Visual: Coloca la información más importante (KPIs en valueBox) en la parte superior. Los usuarios leen de arriba a abajo y de izquierda a derecha.
Consistencia: Usa los mismos colores para conceptos similares. Por ejemplo, usa siempre status = "primary" para los box principales para mantener la coherencia con el azul del ICFES.
Simplicidad (Menos es Más): No satures la pantalla. Usa tabBox para agrupar contenido y muestra solo los filtros esenciales. Si un filtro no es crucial, considera eliminarlo.
Intuitividad: Los títulos deben ser claros y concisos. Un usuario debe entender el propósito de cada gráfico o tabla sin necesidad de un manual.

Lección Anterior Actividad Final