İyi UI/UX uygulamaları

shinydashboard ile Panolar Oluşturma

Png Kee Seng

Researcher

Bazı ilkeler

  1. Panonun amacını netleştirin
  2. Uygun görselleştirmeleri seçin
  3. Renkleri etkili/sezgisel kullanın
  4. Büyük değerleri kısaltın
  5. Çok fazla etkileşimli öğeden kaçının
  6. Tasarımı en sona bırakın
  • Bu noktalar genel olarak tüm panolara uygulanır
  • Liste kesin değildir
  • Evrensel gerçekler değil, önerilerdir
shinydashboard ile Panolar Oluşturma

1. Panonun amacını netleştirin

  • Pano kimin için?
  • Ne bilmeleri gerekiyor?
  • Kullanıcı gereksinimlerini anlamak, deneyimi iyileştirir $^1$
  • Senaryo: Sally için bir pano oluşturun
  • Amaç: Portföyünün performansını raporlamak
1 François, Mathilde, vd. "Automotive HMI design and participatory user involvement: review and perspectives." Ergonomics 60.4 (2017): 541-552
shinydashboard ile Panolar Oluşturma

2. Uygun görselleştirmeleri seçin

  • Tekil görselleştirmeler için geçerlidir; pano için de uygulanır
  • Bir pano birçok görselleştirmeden oluşur
  • Sally için hangi bilgi yararlı olur?
  • Doğruluk ile açıklık arasında her zaman bir denge vardır
  • Alberto Cairo’nun “The Truthful Art”ı $^1$

Alberto Cairo’ya göre kullanılacak grafik türleri.

1 Cairo, Alberto. The truthful art: Data, charts, and maps for communication. New Riders, 2016
shinydashboard ile Panolar Oluşturma

3. Renkleri etkili/sezgisel kullanın

  • Geleneksel olarak bazı renkler farklı anlamlar taşır
  • Örnekler
    • Kırmızı genelde uyarı/ikazı belirtir
    • Yeşil genelde başarı mesajını belirtir
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 
             badgeColor = "red")
  ...
)

Başarı mesajı için uygunsuz renk kullanımı.

shinydashboard ile Panolar Oluşturma

3. Renkleri etkili/sezgisel kullanın

  • Geleneksel olarak bazı renkler farklı anlamlar taşır
  • Örnekler
    • Kırmızı genelde uyarı/ikazı belirtir; kullanıcılar bunu bekler
    • Yeşil ise genelde başarı mesajını belirtir
sidebar <- dashboardSidebar(
  ...,
    menuItem(....,
             badgeLabel = "+2.324815454862%", 

             badgeColor = "green")
  ...
)

Başarı mesajı için uygunsuz renk kullanımı.

Başarı mesajı için uygun renk kullanımı.

shinydashboard ile Panolar Oluşturma

4. Büyük değerleri kısaltın

  • Sayılar shinydashboard içinde sunulabilir
  • Açıklık için bir miktar kesinlikten ödün verilmelidir
    • Büyük sayıları yuvarlamak gerekir
round(2.324815454862,2)

[1] 2.32

Kısaltılmamış değerler

Kısaltılmış değerler

shinydashboard ile Panolar Oluşturma

5. Çok fazla etkileşimli öğeden kaçının

  • Etkileşimli öğelerin sayısına dikkat edin
  • Aşırı etkileşim bazı kullanıcıları şaşırtabilir
  • Daha fazlası her zaman daha iyi değildir

Aşırı simülasyon iyi değildir.

1 Görsel: Freepik
shinydashboard ile Panolar Oluşturma

6. Pano tasarımını en sona bırakın

  • Pano tasarımına aceleyle başlamayın
    • Buna wireframe, estetik tasarım vb. dahildir
  • Önce amacı belirleyin
    • Bu, uygun görselleştirmeleri seçmeye yardımcı olur
shinydashboard ile Panolar Oluşturma

6. Pano tasarımını en sona bırakın

  • Pano tasarımına aceleyle başlamayın
    • Buna wireframe, estetik tasarım vb. dahildir
  • Önce amacı belirleyin
    • Bu, uygun görselleştirmeleri seçmeye yardımcı olur

"Amaç: Sally için bir pano oluşturmak."

  • Portföyünün performansını görmek isteyebilir
  • Ayrıca tekil hisselerin performansını izlemek isteyebilir
  • Artık yerleşimlerine karar verebiliriz
shinydashboard ile Panolar Oluşturma

Hadi pratik yapalım!

shinydashboard ile Panolar Oluşturma

Preparing Video For Download...