Visualisasi data di antarmuka

Nama saya Ilona dan saya Senior Experience Designer di EPAM. Saya merancang antarmuka yang kompleks untuk pelanggan asing, memberikan presentasi, desainer mentor. Di waktu luang saya, saya mengajar desain antarmuka di program master Universitas ITMO dan menjalankan  saluran Telegram tentang desain UX .





Pada artikel ini, saya ingin berbicara sedikit tentang sejarah infografis dan bagaimana, dari perspektif desain, memvisualisasikan data dan menampilkannya secara efektif dalam sebuah antarmuka.






Beberapa data, yang pada prinsipnya dapat dianggap sebagai Big Data, adalah sekumpulan informasi (angka, persentase, status, parameter, teks, dll.), Yang menjadi dasar bagi pengguna untuk menarik kesimpulan tertentu.





Dasbor yang disukai oleh para desainer  β€Šadalah hasil dari visualisasi data tersebut.





Dashboard oleh Ghulam Rasool
Dashboard oleh Ghulam Rasool

Tetapi grafik berwarna-warni yang tersebar di layar tidak berarti memvisualisasikan informasi dengan baik.





, β€” .

?





.





 β€”   , .





18 , ,  Commercial and Political Atlas and Statistical Breviary. , , .





Grafik batang pertama oleh William Playthey, 1781
, 1781

  , ,  The Visual Display of Quantitative Information , .





Buku Data E. Tufty
.

, /. () , () .





, , β€” , , β€” .





, .

– .





Ilustrasi dari buku oleh E. Tufty
.

:





  1. β€” . , ..





  2. β€” .





  3. β€” (, «» β€” , «» β€” ). , 4% -. , .





  4. β€” . , , , , .





. .





  • β€” .

    : , , .





  • , β€” - .

    : // -, // -, // .





  • β€” , ( β€” ).

    : , .





  • (), / β€” . . .

    : , , .





  • β€” .

    : , .





  • β€” .

    : , .





  • , β€” . , .

    ! β€” , Β«β€ŽΒ» .

    : , 2020 .





  • β€” .

    : , .





  • β€” .

    : , .





  • β€” .

    : COVID-19, .





  • β€” , .

    : , . .





  • β€” .

    : , , .





  • β€” , , .     , .. ( ) , .





  • β€” , . , .





  • β€” Β«-Β».

    : , , .





  • -, β€” .

    : , .





    Contoh trek biliar.  Jika Anda menghapus departemen, Anda mendapatkan diagram blok
    . -
  • β€” . , , .  .





  • β€” ( , ).





, ,   UX-.





, , , , . ,  . . , ( ).





, :      .





, , , , , .





Dasbor untuk menganalisis status muatan saat ini di Pelabuhan Hoboken, New Jersey
, -

β€” , .





, , , , , .





Aplikasi pemantauan produksi oleh devvela
devvela

, , . , , . , .





β€” . , . , , , .





, , ( ).





Dasbor statistik penjualan

Β« Β». , , , , . . , , , .





  1. . : .





  2. , ( , , ..).





  3. «». UI .





  4. .





  5. . , .





  6. . 5–7 .





  7.     .





  8. . , , , - .





  9. . .





  10. . , . , .





Tidak terlalu positif, tetapi contoh yang relevan dan informatif dari dasbor dari Johns Hopkins
, Johns Hopkins

UX - Β« UXΒ».








All Articles