Card Data
Card Data
Card Data/Metrics menampilkan ringkasan data, statistik, atau indikator kinerja dalam bentuk teks, angka, atau visualisasi seperti grafik dan chart. Pola ini membantu pengguna memahami informasi utama dengan cepat tanpa harus membuka halaman detail.
Penggunaan
Section titled “Penggunaan”Gunakan Card Data/Metrics untuk menyoroti data penting seperti performa, progres, atau hasil analisis. Pola ini cocok digunakan di dashboard, laporan ringkas, atau halaman utama agar pengguna dapat memantau informasi utama secara cepat dan mudah dipahami.
Anatomi
Section titled “Anatomi”
Container
Wadah utama yang menampung seluruh elemen kartu.
Title
Menampilkan konteks atau label dari data yang disajikan.
Amount
Angka utama yang menjadi fokus informasi.
Data Referencing Info
Menampilkan indikator tambahan seperti tren, persentase perubahan, atau subteks.
Ikon
Elemen visual yang menampilkan informasi melalui desain secara ringkas.
Chart
Elemen visual tambahan yang menampilkan pola tren data secara ringkas.
Data
elemen angka atau informasi pelengkap yang memperkuat konteks metrik.
Kategori
Section titled “Kategori”Highlight Metrics
- Menampilkan angka utama sebagai fokus (contohnya: total penjualan, jumlah transaksi, atau persentase pertumbuhan).
- Dapat dilengkapi subteks seperti +20.294 subjek atau –15% dibandingkan minggu lalu.
- Cocok digunakan untuk KPI utama yang perlu terlihat langsung tanpa elemen tambahan.
- Digunakan di dashboard atau summary card untuk memperlihatkan performa terkini.
Chart Metrics
- Menampilkan data dalam bentuk visual (seperti bar chart atau line chart).
- Berguna untuk memperlihatkan tren, perbandingan, atau progres dari waktu ke waktu.
- Angka utama tetap menjadi fokus, dengan grafik sebagai pelengkap kontekstual.
- Cocok untuk laporan atau ringkasan data dengan frekuensi pembaruan tinggi. di dashboard atau summary card untuk memperlihatkan performa terkini.
Cara Penggunaan yang Disarankan
Section titled “Cara Penggunaan yang Disarankan”
✅ Disarankan
Gunakan label singkat dan mudah dipahami (maksimum 2-3 kata).
❌ Dihindari
Hindari label atau judul yang panjang dan sulit dipindai.
✅ Disarankan
Selalu sertakan label atau judul ringkas untuk membantu pengguna memahami konteks yang ditampilkan.
❌ Dihindari
Jangan menghapus label jika tidak ada judul yang jelas, karena pengguna memerlukan konteks tentang data yang ditampilkan.
Penerapan
Section titled “Penerapan”Highlight Metrics
Menampilkan angka utama sebagai fokus utama (contohnya: total pengguna, jumlah transaksi, atau persentase pertumbuhan)
- Dapat dilengkapi subteks seperti +20.294 atau –15% untuk menunjukkan perubahan status.
- Cocok untuk KPI utama yang perlu langsung terlihat tanpa memerlukan detail tambahan.
Chart Metrics
Menyajikan data dalam bentuk visual seperti bar chart, line chart, atau pie chart.
- Digunakan untuk menampilkan tren, perbandingan antar kategori, atau distribusi data.
- Angka utama dapat ditampilkan sebagai konteks tambahan agar pengguna lebih mudah memahami informasi visual.
Dashboard
Card Metrics sering digunakan pada tampilan dashboard untuk menampilkan metrik penting seperti total aktivitas, performa transaksi, atau tren pertumbuhan.
Setiap kartu dapat menampilkan metrik utama (jumlah total, perbandingan, atau persentase kinerja), membantu pengguna memahami kondisi atau progres sistem secara real time.
Spesifikasi
Section titled “Spesifikasi”Spesifikasi teknis untuk Card Data mencakup pengukuran spacing, padding, dan dimensi yang diperlukan untuk konsistensi desain.
