desain aplikasi ui ux: dari brief ke layar

desain aplikasi ui ux dimulai dengan mengubah tujuan bisnis menjadi tugas pengguna, alur, lalu layar yang dapat diuji. Untuk aplikasi di Indonesia, masukkan pembayaran QRIS sejak alur checkout dan tetapkan kebutuhan data sejak awal dengan mempertimbangkan UU PDP No. 27 Tahun 2022, bukan setelah UI selesai.

Poin-poin utama

• •Mulai dari masalah, pengguna, dan ukuran keberhasilan sebelum membuat wireframe.
• •Rancang status, kegagalan, dan konfirmasi pembayaran QRIS sebagai bagian dari satu alur checkout.
• •Batasi data yang dikumpulkan sejak penyusunan kebutuhan agar keputusan UX selaras dengan UU PDP No. 27 Tahun 2022.
• •Uji prototipe berdasarkan tugas nyata pengguna, lalu prioritaskan perbaikan menurut dampaknya pada tujuan produk.

Isi halaman ini

• •1. Ubah brief menjadi masalah dan tugas pengguna
• •2. Tentukan data dan kepatuhan sebelum merancang formulir
• •3. Masukkan QRIS ke alur checkout, bukan sebagai layar tambahan
• •4. Bentuk wireframe, prototipe, lalu uji per tugas

1. Ubah brief menjadi masalah dan tugas pengguna

Jangan memulai desain ui ux aplikasi dari daftar layar. Pecah brief menjadi empat hal: tujuan bisnis, pengguna utama, tugas yang ingin diselesaikan, dan bukti bahwa tugas itu berhasil. Misalnya, tujuan “menaikkan transaksi” belum cukup untuk membuat layar; Anda perlu tahu apakah pengguna harus mencari produk, memilih variasi, membayar, atau melacak pesanan.

Tulis satu skenario per alur utama dalam format sederhana: pengguna ingin [hasil], sehingga ia perlu [tindakan], dengan hambatan [konteks]. Tambahkan kondisi lokal yang benar-benar memengaruhi keputusan layar, seperti koneksi yang tidak stabil, nomor ponsel sebagai identitas masuk, atau metode pembayaran yang perlu dipilih sebelum konfirmasi pesanan.

Dari sini, buat peta alur: masuk → beranda → pencarian atau pilihan layanan → detail → checkout → pembayaran → status hasil. Tandai titik keputusan, data yang diminta, dan pesan gagal. Peta ini mencegah tim membuat layar cantik yang tidak menjawab tugas inti. Setiap langkah harus punya tujuan pengguna dan satu tindakan utama yang jelas.

2. Tentukan data dan kepatuhan sebelum merancang formulir

Dalam desain ui ux aplikasi mobile, formulir adalah keputusan produk, bukan sekadar komponen UI. Inventarisasi setiap data yang akan diminta: nama, nomor ponsel, alamat, lokasi, dokumen, atau preferensi. Untuk tiap data, tuliskan alasan pengumpulan, kapan dibutuhkan, siapa yang memakainya, serta apa yang terjadi bila pengguna tidak mengisinya.

UU PDP No. 27 Tahun 2022 perlu dipertimbangkan sejak tahap pengumpulan data. Dampaknya pada layar adalah praktis: jangan meminta data terlalu dini, jelaskan tujuan pada konteks yang relevan, pisahkan persetujuan yang memang diperlukan dari teks pengantar, dan sediakan keadaan alternatif bila sebuah izin tidak diberikan. Contohnya, alamat pengiriman tidak perlu muncul pada onboarding bila pengguna baru ingin melihat katalog.

Jika layanan Anda termasuk PSE privat, kewajiban pendaftaran berada dalam kerangka Permenkominfo No. 5 Tahun 2020. Tim desain tidak menentukan status pendaftaran, tetapi perlu menyelaraskan layar akun, kebijakan, pelaporan, dan kontak layanan dengan keputusan produk serta tim legal. Catat pertanyaan kepatuhan sebagai asumsi yang harus divalidasi, bukan diatasi dengan teks kecil yang sulit dibaca.

3. Masukkan QRIS ke alur checkout, bukan sebagai layar tambahan

QRIS digunakan sebagai standar pembayaran QR di Indonesia, sehingga kebutuhan ini sebaiknya dibahas saat memetakan checkout, bukan ketika visual akhir sudah dikunci. Tentukan lebih dulu model pembayaran: pengguna memindai kode dari merchant, aplikasi menampilkan kode untuk dipindai, atau pengguna diarahkan ke aplikasi pembayaran lain. Model tersebut mengubah urutan layar, instruksi, dan status transaksi.

Rancang minimal lima keadaan: memilih QRIS, kode atau instruksi pembayaran tampil, pembayaran sedang diproses, pembayaran berhasil, dan pembayaran gagal atau kedaluwarsa. Jangan langsung menganggap transaksi sukses setelah pengguna menekan tombol “Saya sudah bayar”. Tampilkan status menunggu dengan penjelasan singkat, tombol cek ulang bila didukung sistem, serta jalur kembali ke pesanan tanpa membuat pengguna membayar dua kali.

Pada layar pembayaran, tampilkan nominal, identitas pesanan, batas waktu bila ada, dan tindakan bantuan yang mudah ditemukan. Uji juga teks untuk kondisi nyata: kode tidak dapat dipindai, pengguna membatalkan di aplikasi pembayaran, atau konfirmasi terlambat. Detail status seperti ini sering lebih menentukan kepercayaan pengguna daripada dekorasi pada halaman checkout.

4. Bentuk wireframe, prototipe, lalu uji per tugas

Setelah alur dan kebutuhan data disetujui, buat wireframe berfidelitas rendah untuk memeriksa hierarki informasi. Satu layar sebaiknya memiliki satu tindakan utama: lanjutkan, simpan, bayar, atau lacak pesanan. Gunakan komponen yang konsisten untuk tombol, input, status, dan pesan kesalahan agar prototipe cepat diubah ketika temuan uji datang.

Hubungkan wireframe menjadi prototipe yang mencakup alur normal dan keadaan gagal. Minta peserta menyelesaikan tugas yang spesifik, misalnya membeli produk dan membayar dengan QRIS, bukan sekadar memberi opini tentang tampilan. Amati apakah mereka memahami nominal, tahu apa yang harus dilakukan setelah pembayaran, serta dapat pulih dari kesalahan tanpa bantuan.

Catat temuan dalam format: masalah, bukti perilaku, dampak, dan perubahan yang diusulkan. Prioritaskan masalah yang menghambat penyelesaian tugas atau berisiko menimbulkan transaksi ganda dan salah input data. Setelah itu, serahkan brief produk ke floow.design untuk mengubah tujuan, skenario, dan prioritas tersebut menjadi alur serta layar UI UX awal yang dapat Anda tinjau bersama tim.

Pemeriksaan konteks Indonesia saat menyusun brief aplikasi

Kesalahan yang sering terjadi

Membuat beranda dan layar detail sebelum alur tugas pengguna disepakati.

Mulai dari skenario dan peta alur. Buat layar hanya setelah setiap langkah memiliki tujuan, masukan, keluaran, dan kondisi gagal.

Menambahkan QRIS hanya sebagai ikon pada pilihan pembayaran.

Rancang seluruh keadaan transaksi QRIS, termasuk instruksi, menunggu konfirmasi, gagal, kedaluwarsa, dan kembali ke pesanan.

Mengumpulkan semua data pada onboarding agar formulir tidak muncul lagi.

Minta data sedekat mungkin dengan saat data itu diperlukan. Validasi tujuan pengumpulan dan kebutuhan persetujuannya sejak brief.

Menguji prototipe dengan pertanyaan “Apakah desain ini bagus?”

Berikan tugas nyata dan ukur keberhasilan penyelesaian, kebingungan pada status, kesalahan input, serta alasan pengguna berhenti.

Pertanyaan yang sering diajukan

Bagaimana urutan kerja desain aplikasi UI UX?

Urutan kerja desain aplikasi UI UX adalah memahami tujuan bisnis dan pengguna, menulis skenario tugas, memetakan alur, menentukan data dan keadaan gagal, membuat wireframe, membangun prototipe, lalu mengujinya dengan tugas nyata. Setelah temuan uji diprioritaskan, tim memperbaiki alur dan layar sebelum masuk ke detail visual atau pengembangan.

Kapan kebutuhan QRIS dimasukkan ke desain?

Kebutuhan QRIS dimasukkan saat tim memetakan alur checkout dan metode pembayaran, sebelum wireframe visual dibuat. Karena QRIS adalah standar pembayaran QR di Indonesia, desain perlu mencakup instruksi pembayaran, nominal, status menunggu konfirmasi, transaksi berhasil, gagal, atau kedaluwarsa agar pengguna tidak bingung dan tidak mencoba membayar ulang.

Apakah UX designer perlu memahami UU PDP?

UX designer perlu memahami dampak praktis UU PDP No. 27 Tahun 2022 pada pengalaman pengguna, terutama saat aplikasi mengumpulkan dan menggunakan data pribadi. Designer tidak menggantikan nasihat legal, tetapi harus membantu tim membatasi data yang diminta, menempatkan penjelasan pada konteks yang tepat, dan merancang pilihan pengguna tanpa pola yang menyesatkan.

Apa yang perlu disiapkan sebelum membuat prototipe aplikasi?

Sebelum membuat prototipe aplikasi, siapkan tujuan produk, pengguna sasaran, skenario tugas utama, peta alur, daftar data yang dikumpulkan, aturan validasi, dan keadaan gagal. Untuk checkout Indonesia, tetapkan pula metode pembayaran seperti QRIS serta status transaksi yang harus terlihat. Bahan ini membuat prototipe dapat diuji, bukan hanya dipresentasikan.

Langkah selanjutnya

Layar yang siap diuji lahir dari keputusan yang jelas tentang tugas, data, pembayaran, dan keadaan gagal. Mulailah dari brief yang terstruktur, masukkan QRIS serta pertimbangan data pribadi sejak awal, kemudian gunakan floow.design untuk membentuk alur dan layar UI UX awal.

---

Rancang layarnya terlebih dahulu

Jelaskan aplikasi Anda dengan bahasa sederhana, lalu floow.design akan membuatkan layar iOS dan Android yang siap Anda sempurnakan dan serahkan ke tim pengembang.

Mulai desain gratis →

---

Sumber

• •Bank Indonesia — QRIS
• •JDIH BPK — UU No. 27 Tahun 2022 tentang Pelindungan Data Pribadi
• •JDIH BPK — Permenkominfo No. 5 Tahun 2020 tentang PSE Lingkup Privat