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 yang informatif dan menarik
- Menyusun desain keranjang belanja yang jelas dan mudah dipahami
- Menerapkan konvensi UI untuk tombol dan interaksi belanja
- Menghubungkan halaman produk ke keranjang dalam prototype
Capaian Pembelajaran
Mahasiswa mampu mendesain halaman detail produk dan keranjang belanja web e-commerce yang terstruktur, dengan alur menambahkan produk hingga masuk ke keranjang yang dapat diprototypekan dengan mulus.
Halaman Detail Produk
Halaman detail produk adalah titik keputusan terpenting dalam perjalanan belanja; di sinilah pengguna memutuskan membeli atau tidak. Sebuah halaman detail yang baik menampilkan foto produk secara jelas dan lengkap, termasuk galeri dengan beberapa sudut pandang, nama produk, harga, rating, deskripsi, pilihan ukuran atau warna, kontrol jumlah, serta tombol tambah ke keranjang yang mencolok.
Informasi yang lengkap dan jujur menjadi kunci kepercayaan. Sertakan spesifikasi, material, ukuran, dan informasi pengiriman yang relevan. Kemunculan rating dan ulasan pengguna juga membantu calon pembeli memutuskan. Semua informasi harus disusun rapi sehingga mata pengguna dapat dengan mudah menemukan bagian yang mereka cari tanpa harus menggulir terlalu lama.
Struktur Dua Kolom pada Desktop
Struktur halaman detail pada desktop umumnya terbagi dua kolom: kolom kiri untuk galeri gambar dan kolom kanan untuk informasi serta tombol aksi. Kolom kanan berisi nama produk, harga, rating, deskripsi singkat, pilihan varian, dan kontrol jumlah. Di bawahnya susun informasi pembelian serta pada bagian lebih bawah dapat ditambahkan ulasan dan produk serupa.
Merancang Informasi yang Membantu
Penyusunan informasi harus mendorong keputusan beli. Letakkan harga dan ketersediaan stok dekat dengan bagian atas agar pengguna langsung mendapat gambaran. Deskripsi sebaiknya disusun pendek dengan kata kunci yang mudah dipindai, dilengkapi spesifikasi terperinci yang dapat dilagikan. Ulasan dan rating dari pembeli sebelumnya merupakan bukti sosial yang sangat berpengaruh, jadi tampilkan secara menonjol.
Kendali jumlah atau quantity perlu menampilkan batas minimal dan maksimal serta status stok. Apabila stok menipis, indikasikan dengan pesan atau badge khusus. Setiap pilihan varian yang dipilih pengguna harus terlihat jelas, misalnya warna yang sedang aktif diberi border tegas. Semua umpan balik ini mengurangi keraguan saat membeli.
Konsistensi Tombol
Tombol adalah elemen yang paling sering diklik pada halaman belanja, maka konsistensinya sangat penting. Tombol ‘Tambah ke Keranjang’ dan ‘Beli Sekarang’ sebaiknya dibedakan agar jelas mana tindakan utama. Tombol utama diberi warna paling mencolok, sementara tindakan sekunder lebih netral. Ukuran, bentuk, dan sudut tombol sebaiknya sama di seluruh toko agar pengguna mengenali pola dengan cepat.
Keadaan hover juga perlu didesain, misalnya perubahan warna saat kursor di atas tombol, agar pengguna tahu elemen tersebut dapat diklik. Untuk kedepannya, halaman ini akan menjadi dasar perbandingan dengan versi ponsel, sehingga struktur informasinya dipahami dengan baik.
Komponen yang Perlu Ada
- Galeri gambar dengan thumbnail kecil dan tombol perbesar (zoom).
- Informasi produk: nama, harga, rating, dan deskripsi lengkap.
- Pilihan varian seperti ukuran dan warna dengan indikator terpilih.
- Kontrol jumlah (quantity) berupa tombol plus dan minus.
- Tombol ‘Tambah ke Keranjang’ dan tombol ‘Beli Sekarang’ yang jelas.
Keranjang Belanja (Cart)
Keranjang belanja merangkum pilihan pengguna sebelum menuju checkout. Desain keranjang yang baik menampilkan daftar item dengan gambar kecil, nama, harga satuan, jumlah, dan subtotal, dilengkapi tombol hapus item serta opsi mengubah jumlah. Di bagian bawah biasanya tersedia ringkasan: subtotal, ongkos kirim, potongan, dan total, diikuti tombol untuk melanjutkan ke checkout.
Klaritas adalah kunci keranjang. Pengguna harus selalu dapat melihat total yang harus dibayar tanpa perlu menghitung sendiri. Tombol hapus perlu mudah ditemukan namun tidak terlalu menonjol agar tidak sering ter-klik secara sengaja. Desain juga perlu menyediakan state keranjang kosong dengan pesan yang ramah serta tombol untuk kembali berbelanja sehingga pengguna tidak merasa buntu.
Perhatikan pula bahwa foto produk kecil pada keranjang harus tetap dapat dikenali, misalnya dengan menampilkan satu produk dengan jelas meski ukurannya kecil. Berikan nama produk dan varian yang dipilih, seperti ukuran dan warna, agar tidak ada kebingungan. Jika ada produk yang sudah tidak tersedia, beri tanda khusus dan sarankan pengganti atau penjelasan bahwa produk dikeluarkan dari daftar.
Langkah Praktik
- Buat frame Desktop 1440×1024 untuk halaman detail produk.
- Susun gambar utama dan thumbnail di kolom kiri, informasi di kolom kanan.
- Buat frame kedua sebagai keranjang yang berisi tabel item dan ringkasan total.
- Tambahkan komponen tombol yang konsisten di kedua halaman.
- Pada mode prototype, hubungkan tombol ‘Tambah ke Keranjang’ menuju halaman cart.
Penutup dan Tugas Mandiri
Selesaikan dua halaman tersebut dalam satu file yang sama dengan pertemuan sebelumnya, sehingga alur dari homepage menuju detail produk kemudian keranjang menjadi satu prototipe yang utuh. Perhatikan konsistensi warna brand dan jarak antar elemen agar terlihat profesional dan siap dikembangkan ke halaman checkout pada pertemuan berikutnya.