Density adalah seberapa banyak informasi yang muat di satu layar. Density tinggi berarti baris rapat dan banyak isi sekaligus; density rendah berarti jarak lega dan sedikit isi tapi besar. Bayangin buku telepon dan brosur hotel. Buku telepon menjejalkan ratusan nama di satu halaman, karena orang membukanya untuk mencari satu nama dengan cepat. Brosur cuma punya satu foto besar dan tiga baris kalimat, karena orang membukanya untuk memutuskan mau menginap atau tidak. Dua-duanya benar untuk tugasnya masing-masing.
🧪 Tebakan cepat: Bu Sri punya 16 pesanan di bulan Desember. Di laptopnya, area daftar pesanan setinggi 664px, dan tiap baris setinggi 48px. Ke-16 pesanan itu kelihatan semua tanpa scroll? Jawabannya ada di bagian "Menghitung baris per layar".
Dua halaman, dua density
Homestay Kabut sekarang punya dua halaman yang tugasnya beda:
- Halaman tamu (pilih kamar): tamu baru datang, belum kenal kamarnya, dan harus memutuskan satu hal. Density rendah: foto besar, nama kamar 24px, satu kamar memenuhi layar.
- Dasbor Bu Sri (pesanan Desember): Bu Sri membukanya tiap hari untuk mengecek siapa datang kapan dan membandingkan banyak baris. Density tinggi: baris rapat, satu pesanan satu baris.
Polanya berlaku umum: dasbor analytics, tabel data, inbox email, dan admin panel cocok dengan density tinggi, karena penggunanya mencari dan membandingkan. Landing page, halaman promosi, dan onboarding cocok dengan density rendah, karena penggunanya perlu fokus pada satu pesan.
| Konteks | Density | Alasan |
|---|---|---|
| Dasbor, tabel data | Tinggi | Melihat dan membandingkan banyak data sekaligus |
| Daftar produk atau kamar | Sedang | Memindai cepat, tapi tiap item masih perlu foto dan harga |
| Landing page, onboarding | Rendah | Satu pesan, satu keputusan |
Menghitung baris per layar
Density bisa dihitung, bukan cuma dirasa:
baris terlihat = tinggi area daftar ÷ tinggi baris, dibulatkan ke bawah
Dasbor Bu Sri punya header 56px. Di laptop, panel daftarnya 720px, jadi area daftarnya 720 - 56 = 664px. Di HP dengan area halaman 667px, sisanya 667 - 56 = 611px.
| Density | Tinggi baris | HP (611px) | Laptop (664px) |
|---|---|---|---|
| Lega | 72px | 611 ÷ 72 = 8,49 → 8 | 664 ÷ 72 = 9,22 → 9 |
| Sedang | 48px | 611 ÷ 48 = 12,73 → 12 | 664 ÷ 48 = 13,83 → 13 |
| Padat | 36px | 611 ÷ 36 = 16,97 → 16 | 664 ÷ 36 = 18,44 → 18 |
Dengan baris 48px di laptop, cuma 13 pesanan yang kelihatan, 3 sisanya harus di-scroll. Jadi jawaban tebakannya: gak semua. Dengan baris 36px, 18 baris muat, dan ke-16 pesanan kelihatan sekaligus: 16 × 36 = 576px, masih di bawah 664px.
Di CSS, density paling gampang diatur dengan CSS variable, jadi satu class mengubah semua baris:
.bookings { --row: 48px; --text: 16px; } /* sedang */
.bookings.padat { --row: 36px; --text: 14px; }
.bookings.lega { --row: 72px; --text: 16px; }
.bookings li {
box-sizing: border-box; /* garis bawah 1px ikut dihitung di dalam --row */
height: var(--row);
font-size: var(--text);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
border-bottom: 1px solid #e2e8f0;
}
--rowdan--textadalah CSS variable: satu nilai yang dipakai di banyak tempat denganvar(...)..bookings.padatcuma mengganti dua variable itu. Gak ada aturan baris yang ditulis ulang.box-sizing: border-boxmembuat garis bawah 1px masuk ke dalam 36px, jadi hitungan baris per layar tetap tepat.
Scale: hierarki tetap, ukurannya ikut
Scale artinya ukuran dan jarak ikut density, sementara urutan pentingnya tetap. Di halaman tamu yang lega, nama kamar 24px dan harga 16px tebal. Di dasbor yang padat, semuanya 14px, jadi hierarkinya dibawa oleh hal lain: nama tamu tebal 600, detail kamar dan tanggal abu-abu #475569, total rata kanan.
Urutannya: turunkan jarak dulu (72 ke 48 ke 36px), baru ukuran huruf kalau perlu (16 ke 14px). 14px adalah ukuran terkecil di type scale halaman Bu Sri, jadi density padat pun gak turun di bawahnya.
Batas bawah density di HP: target sentuh
Di laptop orang memakai mouse yang ujungnya satu piksel. Di HP orang memakai jempol. Pedoman Apple meminta target sentuh minimal 44 × 44 pt, Material Design minimal 48 × 48 dp, dan WCAG 2.2 (kriteria 2.5.8, level AA) minimal 24 × 24 px. Di browser HP, 1 px CSS kira-kira sama dengan 1 pt atau 1 dp.
Baris padat 36px lolos batas WCAG, tapi di bawah 44 Apple dan 48 Material. Jadi kalau baris dasbor bisa diketuk untuk membuka detail pesanan, di HP pakai yang sedang (48px, 12 baris terlihat), dan simpan yang padat untuk laptop.
⚠️ Jebakan yang sering ketemu
- Satu density untuk semua halaman. Dasbor yang lega bikin Bu Sri scroll terus; halaman tamu yang padat bikin tamu gak tahu harus melihat ke mana.
- Padat dengan mengecilkan huruf duluan. Kurangi jarak dulu, dan jangan turun di bawah ukuran terkecil di type scale-mu (di sini 14px).
- Baris padat di HP. 36px terasa rapi, tapi gampang salah ketuk. Cek lagi batas 44 dan 48.
- Mencampur density di satu halaman tanpa alasan. Satu kartu lega di antara daftar yang padat terlihat seperti kesalahan, bukan penekanan.
TL;DR: Density adalah seberapa banyak informasi di satu layar. Dasbor analytics, tabel, dan inbox pakai density tinggi karena penggunanya membandingkan banyak data; landing page dan onboarding pakai density rendah karena penggunanya perlu fokus. Baris terlihat = tinggi area ÷ tinggi baris, dibulatkan ke bawah: area 664px dengan baris 48px cuma 13 baris, dengan baris 36px 18 baris. Atur density dengan CSS variable (--row, --text). Scale: hierarki tetap, ukuran dan jarak ikut density; turunkan jarak dulu, baru ukuran huruf. Di HP, target sentuh minimal 44pt (Apple), 48dp (Material), atau 24px (WCAG 2.2 AA).
