Buenas prácticas de UI/UX

Creación de paneles con shinydashboard

Png Kee Seng

Researcher

Algunos principios

  1. Ten claro el propósito del dashboard
  2. Elige visualizaciones adecuadas
  3. Usa colores de forma efectiva/intuible
  4. Trunca valores grandes
  5. Evita demasiados elementos interactivos
  6. Diseña el dashboard al final
  • Estos puntos aplican a cualquier dashboard
  • La lista no es exhaustiva
  • Son sugerencias, no verdades universales
Creación de paneles con shinydashboard

1. Ten claro el propósito del dashboard

  • ¿Para quién es el dashboard?
  • ¿Qué necesitan saber?
  • Entender mejor los requisitos mejora la experiencia de usuario $^1$
  • Escenario: crear un dashboard para Sally
  • Propósito: informar del rendimiento de su cartera
1 François, Mathilde, et al. "Automotive HMI design and participatory user involvement: review and perspectives." Ergonomics 60.4 (2017): 541-552
Creación de paneles con shinydashboard

2. Elige visualizaciones adecuadas

  • Afecta a cada visualización, y también al dashboard
  • Un dashboard se compone de muchas visualizaciones
  • ¿Qué información será útil para Sally?
  • Siempre hay un equilibrio entre precisión y claridad
  • “The Truthful Art”, de Alberto Cairo $^1$

Tipos de gráficos según Alberto Cairo.

1 Cairo, Alberto. The truthful art: Data, charts, and maps for communication. New Riders, 2016
Creación de paneles con shinydashboard

3. Usa colores de forma efectiva/intuible

  • Convencionalmente, algunos colores transmiten distintos significados
  • Ejemplos
    • El rojo suele indicar aviso o alerta
    • El verde suele indicar éxito
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 
             badgeColor = "red")
  ...
)

Color inadecuado para un mensaje de éxito.

Creación de paneles con shinydashboard

3. Usa colores de forma efectiva/intuible

  • Convencionalmente, algunos colores transmiten distintos significados
  • Ejemplos
    • El rojo suele indicar aviso o alerta; el usuario lo esperará así
    • El verde, en cambio, suele indicar éxito
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 

             badgeColor = "green")
  ...
)

Color inadecuado para un mensaje de éxito.

Color adecuado para un mensaje de éxito.

Creación de paneles con shinydashboard

4. Trunca valores grandes

  • Puedes mostrar números en shinydashboard
  • A veces hay que sacrificar precisión por claridad
    • Conviene redondear números grandes
round(2.324815454862,2)

[1] 2.32

Valores sin truncar

Valores truncados

Creación de paneles con shinydashboard

5. Evita demasiados elementos interactivos

  • Controla la cantidad de elementos interactivos
  • Demasiados pueden confundir a parte de la audiencia
  • Más no siempre es mejor

Demasiada estimulación no es buena.

1 Imagen de Freepik
Creación de paneles con shinydashboard

6. Diseña el dashboard al final

  • No te lances a diseñar el dashboard
    • Incluye wireframes, estética, etc.
  • Primero define el propósito
    • Esto ayuda a elegir visualizaciones adecuadas
Creación de paneles con shinydashboard

6. Diseña el dashboard al final

  • No te lances a diseñar el dashboard
    • Incluye wireframes, estética, etc.
  • Primero define el propósito
    • Esto ayuda a elegir visualizaciones adecuadas

"Propósito: crear un dashboard para Sally."

  • Puede querer ver el rendimiento de su cartera
  • También seguir el rendimiento de acciones individuales
  • Ahora podemos decidir su disposición
Creación de paneles con shinydashboard

¡Vamos a practicar!

Creación de paneles con shinydashboard

Preparing Video For Download...