Mata Kuliah: MKK.10.01.01 – UI/UX Design (TW2). Durasi: 120 menit (Tatap Muka). Penyusun: David Arga Ganeza.
Tujuan Pembelajaran
- Merancang halaman checkout yang aman dan mudah diisi
- Menyusun ringkasan pesanan dan data pengiriman yang jelas
- Membuat prototipe utuh alur belanja dari beranda hingga pembayaran
- Mempresentasikan interaksi dan transisi antar halaman di Figma
Capaian Pembelajaran
Mahasiswa mampu mendesain halaman checkout web e-commerce yang lengkap dan menyatukan seluruh halaman yang telah dibuat menjadi sebuah prototipe interaktif alur belanja yang utuh dan dapat dijalankan.
Halaman Checkout
Checkout adalah langkah terakhir sebelum transaksi selesai, dan justru di bagian inilah banyak pengguna meninggalkan belanjaannya. Desain checkout yang baik berusaha meminimalkan hambatan sekaligus memberikan rasa aman. Hal utama yang perlu ditampilkan adalah form alamat pengiriman, pilihan ongkos kirim, metode pembayaran, dan ringkasan pesanan yang selalu terlihat agar pengguna yakin dengan apa yang mereka bayar.
Hindari meminta data yang tidak diperlukan; semakin sedikit kolom yang diisi, semakin besar peluang pengguna menyelesaikan transaksi. Namun pastikan data yang diminta memang dibutuhkan untuk pengiriman. Setiap kolom form perlu diberi label yang jelas dan placeholder yang membantu. Tambahkan pesan validasi yang ramah ketika terjadi kesalahan pengisian, karena pesan yang bernada menyalahkan dapat membuat pengguna keluar.
Struktur Halaman Checkout
- Form alamat pengiriman: nama penerima, nomor telepon, alamat, kota, dan kode pos.
- Pilihan ongkos kirim beserta estimasi waktu dan biaya.
- Metode pembayaran: transfer bank, e-wallet, atau pembayaran di tempat.
- Ringkasan pesanan: daftar item, subtotal, ongkir, diskon, dan total akhir.
- Tombol bayar yang jelas diikuti opsi kembali ke keranjang.
Membangun Kepercayaan
Transaksi melibatkan data pribadi dan pembayaran sehingga rasa aman sangat penting. Gunakan indikator keamanan seperti ikon gembok, teks ‘Pembayaran terenkripsi’, atau jaminan pengembalian. Buat antrean langkah yang jelas sehingga pengguna tahu berada di tahap mana dan berapa sisa langkah. Dukungan kontak atau kebijakan pengembalian yang mudah diakses juga menambah keyakinan.
Desain Form yang Ramah
Formulir checkout harus terasa mudah dan tidak menakutkan. Kelompokkan pertanyaan yang berkaitan, misalnya alamat pengiriman pada satu bagian dan metode pembayaran pada bagian lain. Gunakan pilihan otomatis seperti dropdown kota dan kode pos lengkap, serta penyelesaian otomatis bila tersedia. Setiap kesalahan input ditampilkan langsung di bawah kolom yang bermasalah dengan pesan yang jelas dan solusi yang dapat segera dilakukan.
Perhatikan pula ukuran kolom input pada desktop agar nyaman diklik dan diisi. Beri ruang yang cukup antar baris form. Tombol utama untuk membayar diletakkan mencolok di bagian akhir, sementara opsi kembali ke keranjang tetap mudah ditemukan bagi pengguna yang hendak mengubah pesanan. Ringkasan pesanan di samping form membantu pengguna mencocokkan data yang mereka isi dengan barang yang akan dibeli.
Penanganan Kesalahan dan Status
Rancang juga status gagal bayar, data tidak valid, atau koneksi terputus. Alih-alih menampilkan layar kosong, beri pesan ramah, perkiraan penyebab, dan langkah untuk mencoba kembali. Denah halaman konfirmasi setelah pembayaran berhasil juga penting agar pengguna tahu pesanan tercatat dan apa langkah selanjutnya, misalnya menunggu barang dikirim.
Membuat Prototype
Prototype adalah simulasi interaktif yang menghubungkan halaman-halaman desain sehingga alurnya dapat dirasakan tanpa menulis kode. Di Figma, prototype diaktifkan melalui tab di bagian atas (ikon Play). Setiap elemen interaktif, seperti tombol, diseret titik koneksinya ke halaman tujuan melalui panel kanan untuk menentukan trigger dan aksi.
Untuk proyek ini, rangkaikan alur utuh mulai dari Beranda (TM2) menuju Detail Produk (TM3), lalu ke Keranjang (TM3), kemudian Checkout (TM4), dan diakhiri halaman konfirmasi pesanan. Atur transisi dengan animasi Smart Animate atau Move yang natural. Pastikan tidak ada tautan yang terputus dan setiap tombol utama mampu mengarahkan pengguna; pengguna sebaiknya juga dapat mulai dari bagian tengah alur untuk pengujian yang cepat.
Menyajikan Prototype
Mode presentasi memungkinkan prototipe dijalankan dan ditampilkan kepada pengguna lain seolah-olah aplikasi sungguhan. Gunakan kesempatan ini untuk menguji alur secara sederhana: coba klik seluruh tombol, pastikan urutan berjalan logis, dan catat bagian yang terasa membingungkan. Presentasi ini menjadi pondasi untuk evaluasi kegunaan yang lebih formal, yang dalam praktik profesional dikenal sebagai usability testing.
Pada tahap presentasi, ceritakan alur lengkapnya secara runtut dan tunjukkan bagaimana setiap layar terhubung. Ketika menyajikan kepada klien atau rekan, jelaskan pula alasan di balik pilihan desain utama dan sebutkan aspek yang masih dapat diperbaiki. Prototype bukanlah hasil akhir yang kaku; ia justru menjadi alat diskusi untuk menyempurnakan produk sebelum desain dikirim kepada pengembang.
Penutup dan Tugas Mandiri
Mahasiswa menyelesaikan seluruh halaman web, yaitu beranda, detail produk, keranjang, checkout, dan konfirmasi, menjadi satu prototipe yang dapat diputar. Prototipe ini menjadi bahan utama pada pertemuan berikutnya ketika dikonversi menjadi kode HTML, sehingga kerapian file dan kelengkapan alur sangat menentukan kelancaran hasil konversi.