Mata Kuliah: MKK.10.01.01 – UI/UX Design (TW2). Durasi: 120 menit (Tatap Muka). Penyusun: David Arga Ganeza.
Tujuan Pembelajaran
- Merancang halaman detail produk pada layar ponsel
- Menyusun halaman checkout mobile yang ringkas dan aman
- Menerapkan pola antarmuka untuk belanja di perangkat kecil
- Menyatukan seluruh halaman aplikasi dalam prototype mobile
Capaian Pembelajaran
Mahasiswa mampu mendesain halaman detail produk dan checkout aplikasi mobile dengan alur yang kompak, nyaman, dan aman, serta menyatukan seluruh halaman aplikasi ke dalam prototipe utuh.
Detail Produk Mobile
Pada layar ponsel, halaman detail produk menampilkan gambar produk besar di bagian atas, diikuti informasi inti, pilihan varian, dan tombol aksi. Susun dalam satu kolom agar mata mengalir dari gambar ke harga, pilihan, lalu tombol. Gunakan thumbnail untuk mengganti gambar dan dukung gerakan swipe yang sudah umum di aplikasi belanja.
Tombol aksi pada mobile biasanya berupa dua tombol, yaitu ‘Tambah ke Keranjang’ dan ‘Beli Sekarang’, atau satu tombol utama besar di bagian bawah layar yang selalu terlihat. Menempatkan tombol di area bawah membuatnya mudah dijangkau jempol dan mengurangi kebutuhan menggulir panjang untuk mencapai aksi.
Komponen Detail Produk
- Gambar utama dan galeri thumbnail dengan status terpilih yang jelas.
- Nama produk, harga, rating, dan jumlah terjual.
- Pilihan ukuran dan warna yang menampilkan opsi aktif dengan jelas.
- Kontrol jumlah dengan tombol minus dan plus.
- Tombol utama yang konsisten di bagian bawah layar.
Checkout Mobile
Checkout pada ponsel harus sebanding dengan versi desktop namun lebih ringkas. Tampilkan progres langkah (ringkasan, pengiriman, pembayaran), form alamat yang sudah terisi bila tersedia alamat tersimpan, pilihan ongkir dan metode bayar, serta ringkasan total yang selalu terlihat. Hindari memindahkan pengguna ke halaman baru pada setiap langkah agar proses lebih cepat.
Gunakan komponen bottom sheet untuk memilih metode pengiriman atau pembayaran, sehingga pengguna tidak perlu meninggalkan konteks. Jelaskan langkah berikutnya dengan jelas dan sediakan tombol bayar yang besar serta mudah dijangkau, disertai ringkasan biaya akhir termasuk ongkir dan potongan harga.
Umpan Balik dan Status pada Mobile
Umpan balik langsung penting pada layar kecil. Saat produk ditambahkan ke keranjang, tampilkan notifikasi singkat atau badge yang bertambah agar pengguna yakin tindakannya berhasil. Bila jumlah produk ingin diubah, gunakan kontrol minus dan plus yang besar dan jelas. Sediakan opsi hapus dengan konfirmasi agar tidak hilang secara tidak sengaja.
Pada checkout, tampilkan progres tiga langkah agar pengguna paham berada di tahap mana. Setiap selesai mengisi bagian, beri tanda centang. Ringkasan total yang selalu terlihat di bagian bawah mencegah kejutan biaya di akhir. Halaman konfirmasi setelah pembayaran menampilkan nomor pesanan dan langkah selanjutnya, memberi ketenangan bahwa transaksi berhasil.
Termasuk juga perlakuan terhadap berbagai kemungkinan gagal, misalnya alamat tidak lengkap atau pembayaran ditolak. Pesan kesalahan harus ditulis dengan bahasa yang jelas dan memberi langkah perbaikan, bukan sekadar menyatakan kegagalan. Tampilan yang tenang dan tidak menghakimi pada masa-masa ini menjaga pengguna tetap percaya pada aplikasi meski transaksi sedang bermasalah.
Optimasi untuk Layar Kecil
Semua elemen pada halaman mobile perlu dirancang khusus, bukan hasil pengecilan versi web. Perbesar area sentuh tombol dan pilihan varian, ringkas deskripsi produk menjadi paragraf pendek dengan opsi baca selengkapnya, serta susun ulang galeri menjadi satu kolom besar. Uji kenyamanan dengan satu tangan dan pastikan aksi paling sering diletakkan dalam jangkauan jempol.
Konsistensi logistik juga perlu dijaga antara versi web dan mobile. Pilihan seperti metode pembayaran dan ongkir sebaiknya sama, meski penyajiannya disesuaikan dengan layar. Dengan begitu pengalaman pengguna yang berpindah dari web ke aplikasi tetap terasa menyatu, dan kepercayaan terhadap merek tidak berkurang akibat ketidaksamaan yang tidak perlu.
Prototipe Aplikasi Mobile
Rangkaikan prototipe aplikasi utuh: Register dan Login (TM8), Homepage (TM7), Detail Produk (TM9), Checkout (TM9), dan halaman konfirmasi. Pastikan pengguna dapat berpindah antar halaman seperti pengalaman aplikasi sungguhan. Gunakan transisi yang umum di platform mobile, misalnya geser horizontal antar halaman atau animasi naik-turun untuk bottom sheet.
Menguji Alur
Jalankan mode presentasi dan simulasikan perjalanan pengguna: daftar, masuk, melihat produk, memasukkan ke keranjang, checkout, dan membayar. Catat setiap titik di mana pengguna ragu atau kehilangan arah. Perbaiki tautan yang rusak dan pastikan urutan berjalan logis. Menguji dengan teman memberikan sudut pandang pengguna yang benar-benar baru.
Penutup dan Tugas Mandiri
Sempurnakan seluruh halaman aplikasi mobile menjadi prototipe yang padu dan lengkap. Pada pertemuan berikutnya hasil ini akan dikonversi menjadi aplikasi Flutter, sehingga kerapian layer dan penggunaan Auto Layout di Figma akan sangat memudahkan proses konversi.