Belajar UI/UX Design - Mobile-First & Responsive Design
Merancang antarmuka yang nyaman di semua ukuran layar: memahami pendekatan mobile-first, breakpoints standar, thumb zone untuk jempol, serta perbedaan adaptive dan fluid layout, dengan praktik membangun layout KasirKita dari mobile ke tablet ke desktop.
#Pendahuluan
Setelah di episode 13 KasirKita dipastikan bisa dipakai semua orang, pada episode ini kita memastikan ia nyaman di semua perangkat — dari ponsel 390px yang dipakai Bu Sari di warung sampai tablet & desktop yang dipakai untuk rekap. Pengguna tidak lagi "buka di browser" — mereka membuka di mana saja, kapan saja.
Mengapa penting? Mayoritas pengguna KasirKita memakai smartphone entry-level dengan layar 5-6 inci dan jempol sebagai alat utama. Desain yang dibuat desktop-first lalu "dikecilkan" hampir selalu menghasilkan tombol kecil dan layout sempit di ponsel — padahal di sanalah produk paling sering dipakai.
#Mobile-First
Mobile-first adalah prinsip merancang dari layar terkecil dulu, lalu memperkaya untuk layar besar. Alasannya bukan sekadar tren, tapi paksaan yang sehat:
- Layar kecil memaksa prioritas: hanya hal terpenting yang muat.
- Menambah konten untuk desktop lebih mudah daripada memotong untuk mobile.
- Performa mobile yang baik menuntut efisiensi (data hemat — relevan untuk paket data terbatas Bu Sari).
Contoh konkret: di mobile, layar Beranda KasirKita hanya menampilkan daftar produk + tombol Bayar. Versi desktop boleh menambah panel statistik, karena mobile dulu sudah memaksa kita menentukan esensi layar ini.
#Breakpoints
Breakpoints adalah titik lebar layar di mana layout berubah. Standar umum:
| Breakpoint | Rentang | Karakter |
|---|---|---|
| Mobile | < 640px | 4 kolom, tab bar, satu kolom konten |
| Tablet | 640-1024px | 8 kolom, navigasi menyatu |
| Desktop | > 1024px | 12 kolom, sidebar, multi-panel |
Di Figma, breakpoints diimplementasikan sebagai variant frame — bukan layout yang di-scroll menyamping:
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (min-width: 640px) {
.container { grid-template-columns: repeat(8, 1fr); }
}
@media (min-width: 1024px) {
.container { grid-template-columns: repeat(12, 1fr); }
}Ingat: angka breakpoint adalah panduan, bukan dogma — pilih titik di mana layout mulai pecah, bukan mengikuti angka favorit.
#Thumb Zone
Thumb zone adalah area yang mudah dijangkau jempol saat memegang ponsel. Untuk penggunaan satu tangan:
Implikasinya untuk desain mobile:
- Aksi utama di zona mudah: tombol Bayar, tab bar di bawah (bukan di atas).
- Hindari kontrol penting di sudut atas: header cukup berisi back & judul.
- Target >= 44×44px (episode 13) makin krusial di mobile.
- Untuk aksi berisiko (hapus), geser ke tengah supaya tidak "tertekan" tak sengaja.
#Adaptive vs Fluid
Dua pendekatan layout responsif — paham bedanya penting untuk handoff (episode 22):
| Pendekatan | Cara kerja | Kapan cocok |
|---|---|---|
| Fluid | Elemen melebar/menyempit mengikuti layar (persentase, fr, vw) | Konten teks, grid, kontainer umum |
| Adaptive | Layout "melompat" antar ukuran tetap di breakpoint | Navigasi (tab bar → sidebar), panel |
Produk terbaik menggabungkan keduanya: kontainer fluid, sementara komponen besar (navigasi, tabel) adaptive di breakpoint.
Tip
Untuk KasirKita, contoh adaptive yang jelas: tab bar bawah di mobile berubah menjadi sidebar di desktop; tabel rekap (sulit di mobile) diubah menjadi daftar kartu. Ini bukan sekadar "mengecilkan" — informasi diorganisasikan ulang agar tetap terbaca.
#Praktik: Layout Responsive (Mobile → Tablet → Desktop)
Di file KasirKita:
- Buat frame variant untuk 3 breakpoint pada layar Beranda:
390×844,768×1024,1440×900. - Mobile (390): daftar produk satu kolom, tab bar bawah, tombol Bayar mengambang di thumb zone.
- Tablet (768): grid 2-3 kolom produk, tab bar tetap atau pindah ke atas.
- Desktop (1440): grid 12 kolom, sidebar navigasi, panel stok & laporan samping.
- Gunakan variabel/tokens spacing yang sama di ketiga ukuran — konsistensi sistem tetap terjaga.
- Uji dengan Figma device preview dan cek target sentuh di mobile.
Warning
Jangan membuat layout desktop dengan cara "memperbesar frame mobile". Setiap breakpoint adalah desain sendiri yang diorganisasikan ulang, bukan versi skala. Frame 390 yang di-zoom jadi 1440 menghasilkan konten raksasa & jarak berlebih — tanda desain yang tidak dibuat mobile-first.
#Common Pitfalls
- Desktop-first lalu mengecilkan — hasilnya konten penuh sesak di mobile.
- Breakpoint berdasarkan perangkat — "iPhone dan iPad" menyesatkan; gunakan lebar viewport.
- Tombol di luar thumb zone — aksi penting di sudut atas yang sulit dijangkau.
- Tabel mentah di mobile — tabel lebar yang di-swipe horizontal; ubah jadi kartu.
- Mengabaikan landscape & ukuran perantara — 1024px adalah "zona abu-abu" yang sering berantakan.
#Penutup
Pada episode 14 ini, kalian telah merancang KasirKita yang nyaman di mobile, tablet, dan desktop.
Inti yang harus dibawa pulang:
- Mobile-first memaksa prioritas dan menghasilkan produk yang lebih baik di semua ukuran.
- Breakpoints (640/1024) menandai titik layout berubah; pilih berdasarkan kapan layout pecah.
- Thumb zone menempatkan aksi utama di area yang mudah dijangkau jempol.
- Fluid untuk kontainer, adaptive untuk komponen besar; gabungkan keduanya.
Di episode 15 selanjutnya kita akan menguji semua yang sudah dibangun: usability & UX testing — usability test moderated/unmoderated, task scenarios, think-aloud, dan evaluasi heuristic Nielsen untuk KasirKita. Sampai jumpa di episode 15!