Správné postupy UI/UX

Tvorba dashboardů pomocí shinydashboard

Png Kee Seng

Researcher

Některé zásady

  1. Jasně definujte účel dashboardu
  2. Volte vhodné vizualizace
  3. Používejte barvy efektivně a intuitivně
  4. Zkracujte velké hodnoty
  5. Nepřidávejte příliš mnoho interaktivních prvků
  6. Navrhněte dashboard jako poslední
  • Tyto zásady platí pro jakýkoli dashboard
  • Výčet není vyčerpávající
  • Jde o doporučení, nikoli univerzální pravdy
Tvorba dashboardů pomocí shinydashboard

1. Jasně definujte účel dashboardu

  • Pro koho je dashboard určen?
  • Co potřebují vědět?
  • Lepší pochopení požadavků uživatelů zlepší uživatelský zážitek $^1$
  • Scénář: Vytvořte dashboard pro Sally
  • Účel: Reportovat výkonnost jejího portfolia
1 François, Mathilde, et al. "Automotive HMI design and participatory user involvement: review and perspectives." Ergonomics 60.4 (2017): 541-552
Tvorba dashboardů pomocí shinydashboard

2. Volte vhodné vizualizace

  • Týká se jednotlivých vizualizací, ale platí i pro dashboard
  • Dashboard se skládá z mnoha vizualizací
  • Jaké informace budou pro Sally užitečné?
  • Vždy jde o kompromis mezi přesností a srozumitelností
  • „The Truthful Art", autor Alberto Cairo $^1$

Typy grafů doporučené Albertem Cairem.

1 Cairo, Alberto. The truthful art: Data, charts, and maps for communication. New Riders, 2016
Tvorba dashboardů pomocí shinydashboard

3. Používejte barvy efektivně a intuitivně

  • Barvy mají konvenčně různé významy
  • Příklady
    • Červená obvykle označuje varování nebo upozornění
    • Zelená obvykle označuje zprávu o úspěchu
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 
             badgeColor = "red")
  ...
)

Nevhodná barva použitá pro zprávu o úspěchu.

Tvorba dashboardů pomocí shinydashboard

3. Používejte barvy efektivně a intuitivně

  • Barvy mají konvenčně různé významy
  • Příklady
    • Červená obvykle označuje varování a uživatelé to tak očekávají
    • Zelená naopak obvykle označuje zprávu o úspěchu
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 

             badgeColor = "green")
  ...
)

Nevhodná barva použitá pro zprávu o úspěchu.

Vhodná barva použitá pro zprávu o úspěchu.

Tvorba dashboardů pomocí shinydashboard

4. Zkracujte velké hodnoty

  • Čísla lze zobrazit v shinydashboard
  • Je nutné obětovat část přesnosti ve prospěch srozumitelnosti
    • Velká čísla je vhodné zaokrouhlit
round(2.324815454862,2)

[1] 2.32

Nezaokrouhlené hodnoty

Zaokrouhlené hodnoty

Tvorba dashboardů pomocí shinydashboard

5. Vyhněte se příliš mnoha interaktivním prvkům

  • Dbejte na počet interaktivních prvků
  • Příliš mnoho prvků může uživatele zmást
  • Více neznamená vždy lépe

Příliš mnoho podnětů není dobré.

1 Image by Freepik
Tvorba dashboardů pomocí shinydashboard

6. Navrhněte dashboard jako poslední

  • Nespěchejte s návrhem dashboardu
    • Zahrnuje to wireframing, estetický design atd.
  • Nejprve určete účel
    • Pomůže to zvolit vhodné vizualizace
Tvorba dashboardů pomocí shinydashboard

6. Navrhněte dashboard jako poslední

  • Nespěchejte s návrhem dashboardu
    • Zahrnuje to wireframing, estetický design atd.
  • Nejprve určete účel
    • Pomůže to zvolit vhodné vizualizace

"Účel: vytvořit dashboard pro Sally."

  • Může chtít vidět výkonnost svého portfolia
  • Může také sledovat výkonnost jednotlivých akcií
  • Nyní lze rozhodnout o jejich umístění
Tvorba dashboardů pomocí shinydashboard

Pojďme si procvičit!

Tvorba dashboardů pomocí shinydashboard

Preparing Video For Download...