Mobile App Design
Mendesain untuk layar kecil punya aturan sendiri: thumb zone, bottom navigation, gesture, dan pola iOS vs Android. Modul ini mengajarkan cara membuat aplikasi mobile yang terasa alami dan mudah dipakai.
Tujuan Modul
User bisa mendesain mobile app yang nyaman dipakai.
- Menempatkan aksi penting dalam jangkauan ibu jari.
- Menyusun navigasi mobile yang jelas.
- Mendesain onboarding dan form mobile yang ringan.
- Memahami perbedaan pola iOS dan Android.
Thumb Zone & Navigasi: Desain untuk Satu Tangan
24 menit
Tujuan Lesson
Thumb zone
Mayoritas orang memakai ponsel dengan satu tangan. Area paling mudah dijangkau ibu jari ada di bawah dan tengah layar. Letakkan aksi utama di sana; bagian atas layar paling sulit dijangkau, cocok untuk info, bukan aksi sering.
Bottom navigation
Bottom nav menaruh menu utama dalam jangkauan ibu jari. Batasi 3-5 item, beri label teks (bukan ikon saja), dan tandai state aktif dengan jelas. Hindari menyembunyikan navigasi penting di hamburger menu.
Touch target & gesture
Ukuran target sentuh minimal nyaman sekitar 44-48px agar tidak salah tekan. Gunakan gesture umum (swipe, tap, long-press) sesuai ekspektasi, dan selalu sediakan alternatif yang terlihat untuk gesture tersembunyi.
iOS vs Android
iOS dan Android punya pola berbeda: posisi tombol kembali, gaya navigasi, dan komponen sistem. Hormati konvensi platform agar aplikasi terasa native, bukan asing.
Contoh Baik
Aplikasi dengan bottom nav 4 item berlabel, tombol aksi utama mengambang di kanan bawah, dan target sentuh besar yang nyaman.
✕ Contoh Buruk
Aplikasi menaruh semua aksi penting di pojok kiri atas dan memakai ikon tanpa label, membuat user meraih dengan susah dan menebak-nebak.
Kesalahan Umum Pemula
- ⚠Menaruh aksi utama di area sulit dijangkau.
- ⚠Touch target terlalu kecil dan berdekatan.
- ⚠Mengandalkan ikon tanpa label.
- ⚠Mengabaikan konvensi platform.
Designer Mahal Berpikir Begini
Coba Latihan
- Buat mobile app 15 screen dengan bottom nav konsisten.
- Rancang heatmap thumb zone untuk satu layar utama.
- Audit 1 aplikasi: mana aksi yang sulit dijangkau.
Checklist Lesson
Uji Pemahaman
Di mana sebaiknya meletakkan aksi utama di mobile?
Onboarding, Form & State pada Mobile
22 menit
Tujuan Lesson
Onboarding yang ringan
Onboarding terbaik singkat dan menunjukkan nilai cepat. Jangan paksa user menonton 6 slide. Tunjukkan manfaat utama, biarkan user mencoba, dan minta izin (notifikasi/lokasi) saat konteksnya jelas, bukan di awal.
Form mobile
Mengetik di mobile melelahkan. Kurangi field seminimal mungkin, gunakan tipe keyboard yang tepat (angka untuk nomor), label di atas field, dan validasi inline. Manfaatkan autofill dan pilihan cepat.
Login & register UX
Tawarkan login sosial bila relevan, tampilkan/ sembunyikan password, dan beri pesan error yang spesifik. Jangan reset seluruh form saat satu field salah.
Microcopy & state mobile
Ruang sempit menuntut kata yang padat dan jelas. Rancang empty state yang mengajak aksi, dan push notification yang relevan, bukan spam. Setiap state harus terasa ramah.
Contoh Baik
Form daftar 3 field dengan keyboard sesuai tipe, validasi inline, dan tombol lihat password. Cepat dan tidak membuat frustrasi.
✕ Contoh Buruk
Form daftar 10 field dalam satu layar, keyboard salah tipe, error baru muncul setelah submit dan mengosongkan semua isian.
Kesalahan Umum Pemula
- ⚠Onboarding terlalu panjang sebelum user melihat nilai.
- ⚠Meminta izin notifikasi di detik pertama.
- ⚠Form terlalu banyak field.
- ⚠Reset form saat terjadi error.
Designer Mahal Berpikir Begini
Coba Latihan
- Buat onboarding 4 screen yang menunjukkan nilai cepat.
- Desain form mobile yang mudah dengan validasi inline.
- Buat empty state dan error state untuk satu fitur.
Checklist Lesson
Uji Pemahaman
Prinsip onboarding mobile yang baik?
Project Modul
Mobile App End-to-End
Desain aplikasi mobile 15 layar mencakup onboarding, navigasi utama, form, serta empty & error state.
Deliverables:
- Onboarding 4 layar.
- Navigasi utama + 8-10 layar inti.
- Form mobile dengan validasi inline.
- Empty state & error state.