Dobre praktyki UI/UX

Tworzenie dashboardów z shinydashboard

Png Kee Seng

Researcher

Kilka zasad

  1. Określ jasno cel dashboardu
  2. Wybieraj odpowiednie wizualizacje
  3. Używaj kolorów efektywnie i intuicyjnie
  4. Skracaj duże wartości
  5. Unikaj nadmiernej liczby elementów interaktywnych
  6. Projektuj dashboard na końcu
  • Te zasady dotyczą każdego dashboardu
  • Lista nie jest wyczerpująca
  • To wskazówki, a nie prawa powszechne
Tworzenie dashboardów z shinydashboard

1. Określ jasno cel dashboardu

  • Dla kogo jest dashboard?
  • Jakie informacje są potrzebne?
  • Lepsze zrozumienie wymagań użytkowników poprawia ich doświadczenia $^1$
  • Scenariusz: Zbuduj dashboard dla Sally
  • Cel: Raportowanie wyników jej portfela
1 François, Mathilde, et al. "Automotive HMI design and participatory user involvement: review and perspectives." Ergonomics 60.4 (2017): 541-552
Tworzenie dashboardów z shinydashboard

2. Wybieraj odpowiednie wizualizacje

  • Dotyczy wizualizacji, ale odnosi się też do dashboardu
  • Dashboard składa się z wielu wizualizacji
  • Jakie informacje będą przydatne dla Sally?
  • Zawsze istnieje kompromis między dokładnością a czytelnością
  • „The Truthful Art", Alberto Cairo $^1$

Typy wykresów według Alberto Cairo.

1 Cairo, Alberto. The truthful art: Data, charts, and maps for communication. New Riders, 2016
Tworzenie dashboardów z shinydashboard

3. Używaj kolorów efektywnie i intuicyjnie

  • Umownie niektóre kolory mają określone znaczenia
  • Przykłady
    • Czerwony zazwyczaj oznacza ostrzeżenie
    • Zielony zazwyczaj oznacza powodzenie
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 
             badgeColor = "red")
  ...
)

Nieodpowiedni kolor użyty dla komunikatu o powodzeniu.

Tworzenie dashboardów z shinydashboard

3. Używaj kolorów efektywnie i intuicyjnie

  • Umownie niektóre kolory mają określone znaczenia
  • Przykłady
    • Czerwony zazwyczaj oznacza ostrzeżenie i użytkownicy tego oczekują
    • Zielony natomiast zazwyczaj oznacza powodzenie
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 

             badgeColor = "green")
  ...
)

Nieodpowiedni kolor użyty dla komunikatu o powodzeniu.

Odpowiedni kolor użyty dla komunikatu o powodzeniu.

Tworzenie dashboardów z shinydashboard

4. Skracaj duże wartości

  • Liczby można prezentować w shinydashboard
  • Konieczne jest poświęcenie precyzji na rzecz czytelności
    • Duże liczby należy zaokrąglać
round(2.324815454862,2)

[1] 2.32

Wartości bez skracania

Wartości skrócone

Tworzenie dashboardów z shinydashboard

5. Unikaj nadmiernej liczby elementów interaktywnych

  • Dbaj o liczbę elementów interaktywnych
  • Zbyt wiele takich elementów może dezorientować użytkowników
  • Więcej nie zawsze znaczy lepiej

Nadmiar bodźców jest szkodliwy.

1 Image by Freepik
Tworzenie dashboardów z shinydashboard

6. Projektuj dashboard na końcu

  • Nie spiesz się z projektowaniem dashboardu
    • Obejmuje to wireframing, projekt wizualny itp.
  • Najpierw określ cel
    • Pomaga to wybrać odpowiednie wizualizacje
Tworzenie dashboardów z shinydashboard

6. Projektuj dashboard na końcu

  • Nie spiesz się z projektowaniem dashboardu
    • Obejmuje to wireframing, projekt wizualny itp.
  • Najpierw określ cel
    • Pomaga to wybrać odpowiednie wizualizacje

"Cel: zbuduj dashboard dla Sally."

  • Może chcieć śledzić wyniki swojego portfela
  • Może też chcieć monitorować wyniki poszczególnych akcji
  • Teraz możemy zdecydować o ich rozmieszczeniu
Tworzenie dashboardów z shinydashboard

Czas na ćwiczenia!

Tworzenie dashboardów z shinydashboard

Preparing Video For Download...