Boas práticas de UI/UX

Construindo dashboards com shinydashboard

Png Kee Seng

Researcher

Alguns princípios

  1. Deixe claro o propósito do dashboard
  2. Escolha visualizações adequadas
  3. Use cores de forma eficaz/intuitiva
  4. Trunque valores grandes
  5. Evite muitos elementos interativos
  6. Projete o dashboard por último
  • Esses pontos valem para qualquer dashboard em geral
  • A lista não é exaustiva
  • São sugestões, não verdades universais
Construindo dashboards com shinydashboard

1. Deixe claro o propósito do dashboard

  • Para quem é o dashboard?
  • O que essa pessoa precisa saber?
  • Entender melhor os requisitos do usuário melhora a experiência $^1$
  • Cenário: Construir um dashboard para Sally
  • Propósito: Relatar o desempenho do portfólio dela
1 François, Mathilde, et al. "Automotive HMI design and participatory user involvement: review and perspectives." Ergonomics 60.4 (2017): 541-552
Construindo dashboards com shinydashboard

2. Escolha visualizações adequadas

  • Diz respeito a visualizações individuais, mas vale para o dashboard também
  • Um dashboard é composto por várias visualizações
  • Que informação será útil para Sally?
  • Sempre há um equilíbrio entre precisão e clareza
  • "The truthful art", de Alberto Cairo $^1$

Tipos de gráficos a usar, segundo Alberto Cairo.

1 Cairo, Alberto. The truthful art: Data, charts, and maps for communication. New Riders, 2016
Construindo dashboards com shinydashboard

3. Use cores de forma eficaz/intuitiva

  • Convencionalmente, algumas cores transmitem significados diferentes
  • Exemplos
    • Vermelho geralmente indica aviso ou alerta
    • Verde geralmente indica mensagem de sucesso
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 
             badgeColor = "red")
  ...
)

Cor inadequada usada para mensagem de sucesso.

Construindo dashboards com shinydashboard

3. Use cores de forma eficaz/intuitiva

  • Convencionalmente, algumas cores transmitem significados diferentes
  • Exemplos
    • Vermelho geralmente indica aviso ou alerta, e os usuários esperam isso
    • Verde, por sua vez, geralmente indica mensagem de sucesso
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 

             badgeColor = "green")
  ...
)

Cor inadequada usada para mensagem de sucesso.

Cor adequada usada para mensagem de sucesso.

Construindo dashboards com shinydashboard

4. Trunque valores grandes

  • Números podem ser exibidos em um shinydashboard
  • É preciso sacrificar um pouco de precisão pela clareza
    • Convém arredondar números grandes
round(2.324815454862,2)

[1] 2.32

Valores não truncados

Valores truncados

Construindo dashboards com shinydashboard

5. Evite muitos elementos interativos

  • Tenha atenção ao número de elementos interativos
  • Elementos demais podem confundir alguns usuários
  • Mais nem sempre é melhor

Estimulação em excesso não é bom.

1 Image by Freepik
Construindo dashboards com shinydashboard

6. Projete o dashboard por último

  • Não tenha pressa em desenhar o dashboard
    • Isso inclui wireframes, estética etc.
  • Primeiro defina o propósito
    • Isso ajuda a escolher visualizações adequadas
Construindo dashboards com shinydashboard

6. Projete o dashboard por último

  • Não tenha pressa em desenhar o dashboard
    • Isso inclui wireframes, estética etc.
  • Primeiro defina o propósito
    • Isso ajuda a escolher visualizações adequadas

"Propósito: construir um dashboard para Sally."

  • Ela pode querer ver como seu portfólio está performando
  • Ela também pode querer acompanhar o desempenho de ações individuais
  • Agora podemos decidir os posicionamentos
Construindo dashboards com shinydashboard

Vamos praticar!

Construindo dashboards com shinydashboard

Preparing Video For Download...