Belajar UX Designer - Cross-Platform UX
Merancang pengalaman konsisten lintas platform — web, mobile, tablet, dan kanal terbatas — sambil menghormati konvensi tiap platform, dengan praktik memetakan strategi cross-platform JagaKota.
#Pendahuluan
Setelah di episode 16 kita membangun fondasi konsistensi lewat design system, muncul pertanyaan lanjutannya: konsisten di mana? JagaKota tidak hanya hidup di satu layar — warga membukanya di ponsel saat di jalan, di tablet di rumah, dan di desktop di kantor; sebagian bahkan hanya punya akses lewat SMS atau perangkat terbatas. Inilah cross-platform UX.
Mengapa penting? Karena pengalaman tidak berhenti di satu perangkat. Warga yang mengisi laporan di ponsel akan memeriksa statusnya di desktop kantor. Jika antar-platform tidak konsisten, pengguna kehilangan jejak — dan kehilangan kepercayaan. Tapi konsistensi bukan berarti keseragaman buta: setiap platform punya konvensi yang harus dihormati.
#Konsistensi vs Platform-Specific
Ada dua gaya bertentangan yang harus diseimbangkan:
| Konsistensi penuh | Platform-native murni | |
|---|---|---|
| Kelebihan | Satu bahasa desain, murah dikelola | Terasa familier di tiap platform |
| Risiko | Melawan ekspektasi platform | Bisa terasa "tidak seperti kita" |
Pendekatan sehat: konsisten di level esensi, native di level konvensi.
Contoh: alur lapor dan status laporan (esensi) sama di semua platform, tapi posisi tombol aksi mengikuti konvensi tiap platform — FAB bawah di iOS/Android, header di web.
#Matriks Platform JagaKota
| Aspek | Mobile (390×844) | Web/Desktop (1440×900) | Tablet | Kanal terbatas (SMS) |
|---|---|---|---|---|
| Aksi utama | FAB / tombol jempol | Tombol header jelas | Keduanya | Balas kata kunci |
| Input | Form singkat, camera | Form panjang, upload | Form sedang | Kode singkat |
| Navigasi | Tab bottom | Sidebar / header | Tab | Alur bertanya |
| Peta | Mini, layar penuh opsional | Panel samping | Split view | — |
| Prioritas | Cepat lapor | Pantau & kelola | Baca status | Lapor dasar |
Kanal terbatas layak diperhatikan: tidak semua warga punya smartphone atau kuota. JagaKota yang inklusif menyediakan fallback sederhana — hotline dan SMS dengan format singkat, misalnya LAPOR diikuti spasi, kategori, dan lokasi (LAPOR <spasi>kategori <spasi>lokasi) ke nomor resmi. Detail ini memperluas jangkauan layanan secara nyata, bukan sekadar slogan.
#Breakpoint dan Strategi Konten
Alih-alih mendesain ulang dari nol di tiap ukuran, gunakan breakpoint dan container query — konten menyesuaikan diri, bukan menyusut. Strateginya:
| Ukuran layar | Peran utama | Strategi |
|---|---|---|
| 320-480 px (mobile) | Melapor & cek status cepat | 1 kolom, FAB, form pendek |
| 600-900 px (tablet) | Baca detail & peta | 2 kolom, split view peta |
| 1024+ px (desktop) | Pantau & kelola banyak laporan | Sidebar, tabel, multi-panel |
Konten inti (judul, status, aksi utama) harus muncul di semua ukuran; yang berbeda hanya presentasinya — prinsip esensi-konsisten dari atas.
Tip
Strategi mobile-first bukan berarti mobile-only. Mulai dari konteks paling terbatas (mobile + kanal terbatas), lalu tingkatkan untuk desktop — bukan sebaliknya. Fitur yang dirancang untuk keterbatasan cenderung lebih sederhana dan baik untuk semua platform.
#Menghormati Konvensi Platform
Convention yang wajib dihormati:
- iOS: back gesture swipe dari tepi kiri, large title, sheet bottom.
- Android: tombol back sistem, bottom navigation dengan Material, ripples.
- Web: browser back/forward, tombol kunci keyboard, deep-link yang bisa dibagi.
Jika platform menyediakan pola standar, gunakan pola itu kecuali ada alasan kuat — pola standar sudah teruji dan sudah dipelajari jutaan pengguna (mental model episode 10).
#Mengelola Konsistensi di Pengembangan
Praktik yang menjaga konsistensi lintas platform:
- Satu sumber kebenaran: design tokens dan komponen inti dari episode 16 dipakai semua platform.
- Breakpoint & container: desain responsif dengan konten yang menyesuaikan, bukan mengecilkan desktop ke ponsel.
- Pengujian lintas platform: sertakan tiap platform dalam usability test (episode 12) — apa yang lancar di desktop bisa macet di ponsel.
- Release bersama: fitur yang diluncurkan tidak merata antar-platform menciptakan kebingungan.
#Common Pitfalls
- Satu desain untuk semua ukuran — konten yang sama menyusut tanpa adaptasi akan hancur di layar kecil.
- Mengorbankan alur demi konsistensi — jangan menjejalkan pola desktop ke mobile hanya agar "sama".
- Mengabaikan kanal non-visual — voice (episode 22) dan kanal terbatas adalah platform juga.
- Konvensi platform dianggap detail — back gesture dan tombol back yang tidak berfungsi adalah bug UX yang serius.
#Penutup
Inti yang harus dibawa pulang:
- Konsisten di esensi (bahasa, alur, token); native di konvensi (gesture, navigasi, kontrol).
- Setiap platform punya peran berbeda; petakan strategi lintas platform dengan jelas.
- Kanal terbatas adalah bagian inklusivitas; rancang fallback yang nyata.
- Satu sumber kebenaran dan pengujian lintas platform menjaga konsistensi tetap hidup.
Di episode 18 selanjutnya kita akan membahas ethical UX dan dark patterns — mengenali dan menghindari pola manipulatif, plus menerapkan ethical friction — dan melakukan audit etika pada JagaKota. Sampai jumpa di episode 18!