Desain Ulang Dashboard โ Mode Light/Dark & Kepadatan Informasi yang Ditingkatkan
- dashboard
Pada 2026-06-05, kami merilis desain ulang penuh dashboard HeatMapX (heatmapx.com/dashboard). Visibilitas dan kemudahan penggunaan keduanya telah meningkat secara signifikan.
Yang Berubah
โ Tema tiga arah: Light / Dark / System
Toggle tiga arah โ "โ Light", "๐ป System", "๐ Dark" โ telah ditambahkan di pojok kanan atas header.
- System (default): Secara otomatis mengikuti pengaturan tampilan sistem operasi Anda. Di macOS yang disetel ke "Auto", tampilan beralih ke gelap di malam hari tanpa tindakan manual apapun.
- Override manual: Anda bisa menetapkan mode light atau dark kapan saja. Preferensi disimpan di browser Anda.
- Flash of unstyled content (FOUC) saat pemuatan awal dicegah, sehingga tema yang benar langsung dirender saat halaman dimuat ulang.
โค Situs yang terdaftar dirancang ulang sebagai daftar tabular
Grid kartu dua kolom sebelumnya telah digantikan dengan tata letak tabel satu baris, meningkatkan keterbacaan secara signifikan ketika Anda memiliki banyak situs yang terdaftar.
- Kolom disejajarkan secara vertikal di semua baris, memudahkan perbandingan status dan jumlah event sekilas
- Nama situs, URL, API key, dan tracker tag semuanya ditampilkan secara ringkas dalam satu baris
- Detail pengaturan dilipat di bawah "โธ Setup info" (perluas untuk menyalin API key dan tracker tag)
- Nama dan URL yang panjang secara otomatis dipotong dengan "โฆ" sehingga tata letak tidak pernah rusak
๏ผ Tombol "Add site" di samping judul bagian
Tombol "๏ผ Add site" yang ringkas kini muncul di samping judul "Registered Sites", memungkinkan Anda menambahkan situs baru tanpa perlu scroll (tombol asli di bagian bawah daftar tetap ada).
โ Desain flat terpadu bergaya GitHub
Skema warna telah disederhanakan, mengurangi gangguan visual secara substansial.
- Latar halaman: abu-abu netral (
#f5f5f5), sesuai dengan nada produk SaaS modern seperti Linear dan Supabase - Kartu: dasar putih + border tipis, tanpa bayangan, border radius 6px
- Oranye sebagai aksen merek tunggal (sebelumnya: biru, hijau, ungu, dan amber tercampur)
- Warna status semantik dipertahankan: hijau (aktif) / amber (peringatan) / merah (error)
Sebelum / Sesudah
| Aspek | Sebelum | Sesudah |
|---|---|---|
| Tema warna | Dashboard gelap tetap | Tiga arah: Light / Dark / System |
| Tata letak | Grid kartu dua kolom (kepadatan informasi rendah) | Daftar tabular satu kolom (kolom disejajarkan vertikal) |
| Tampilan situs | Ditumpuk vertikal, memakan banyak ruang | Satu situs = satu baris + detail yang bisa dilipat |
| Tombol tambah | Hanya di bagian bawah halaman | Baik di samping judul maupun di bagian bawah |
| Warna merek | Biru / hijau / ungu / amber tercampur | Aksen tunggal oranye terpadu |
Peningkatan Tambahan
- Batas panjang nama situs dan URL: 60 karakter untuk nama / 512 karakter untuk URL, mencegah kerusakan tata letak.
- Placeholder add-site yang diperbarui: Mengganti
e.g. in-gol/https://in-gol.comdengane.g. My site/https://example.comdi semua 15 bahasa yang didukung. - Modal onboarding: Muncul perlahan 1 detik setelah mencapai dashboard, melembutkan kesan "muncul tiba-tiba".
- Cuplikan kode: Tampilan tracker tag dan perintah CLI telah diperbarui dari latar gelap ke gaya pil abu-abu terang, selaras dengan tema light.
Cakupan Dampak
Rilis ini hanya pada UI/UX โ logika pengukuran, struktur data, dan API tidak berubah. Tracker tag yang sudah terpasang tetap berfungsi seperti semula.