1. Latar Belakang

Perkembangan teknologi keuangan digital telah mendorong munculnya berbagai aplikasi pembayaran yang menawarkan kemudahan transaksi bagi pengguna. Di tengah persaingan yang semakin ketat, tampilan antarmuka atau User Interface (UI) dan pengalaman pengguna atau User Experience (UX) menjadi faktor penentu keberhasilan sebuah aplikasi pembayaran digital. Pengguna tidak hanya membutuhkan aplikasi yang fungsional, tetapi juga aplikasi yang nyaman digunakan, mudah dipahami, dan memberikan rasa aman saat melakukan transaksi.
NexusPay hadir sebagai solusi pembayaran digital berbasis NFC yang dirancang untuk memudahkan pengguna dalam melakukan transaksi sehari-hari. Dalam proses pengembangannya, tahap perancangan layout antarmuka menjadi fondasi utama sebelum masuk ke implementasi teknis. Tanpa desain UI/UX yang baik, sebuah aplikasi pembayaran bisa kehilangan kepercayaan pengguna meskipun secara teknis berfungsi dengan sempurna.
Artikel ini membahas prinsip-prinsip UI/UX yang diterapkan dalam merancang layout antarmuka NexusPay, mulai dari pemilihan palet warna, tipografi, hierarki visual, hingga tata letak komponen yang mempertimbangkan kenyamanan dan keamanan pengguna.

2. Pengertian dan Konsep

UI (User Interface) adalah semua elemen visual yang berinteraksi langsung dengan pengguna, mencakup tombol, ikon, warna, tipografi, dan tata letak layar. Sementara UX (User Experience) adalah keseluruhan pengalaman yang dirasakan pengguna saat menggunakan aplikasi, termasuk kemudahan navigasi, kecepatan respons, dan kepuasan emosional.
Dalam konteks aplikasi pembayaran digital, prinsip UI/UX memiliki bobot lebih tinggi dibanding aplikasi pada umumnya karena berkaitan langsung dengan kepercayaan finansial pengguna. Beberapa prinsip utama yang menjadi dasar perancangan antarmuka NexusPay adalah sebagai berikut.
Pertama adalah prinsip kesederhanaan atau simplicity. Antarmuka yang sederhana memudahkan pengguna memahami alur transaksi tanpa kebingungan. Setiap elemen yang ditampilkan harus memiliki fungsi yang jelas dan tidak membebani pengguna dengan informasi berlebihan.
Kedua adalah konsistensi visual. Penggunaan warna, ikon, dan tipografi yang konsisten di seluruh layar aplikasi membangun identitas visual yang kuat dan meningkatkan kemudahan navigasi.
Ketiga adalah hierarki visual yang jelas. Informasi paling penting seperti nominal transaksi dan status pembayaran harus ditampilkan lebih menonjol dibanding informasi pendukung.
Keempat adalah aksesibilitas. Desain harus mempertimbangkan pengguna dengan berbagai keterbatasan, termasuk ukuran font yang cukup besar, kontras warna yang baik, dan target tap yang cukup luas untuk tombol-tombol penting.
Kelima adalah prinsip kepercayaan atau trust. Aplikasi pembayaran harus memancarkan kesan profesional dan aman melalui desain yang bersih, penggunaan ikon keamanan, dan indikator status transaksi yang jelas.

3. Pembahasan

Dalam merancang layout NexusPay, proses dimulai dari pembuatan wireframe yang menggambarkan struktur dasar setiap layar tanpa mempertimbangkan estetika. Wireframe berfungsi sebagai blueprint yang memastikan semua komponen fungsional tersedia sebelum proses visual dimulai.
Layar utama atau home screen NexusPay dirancang dengan menampilkan saldo dompet digital di bagian atas menggunakan ukuran font besar yang mudah terbaca. Di bawahnya terdapat tombol utama untuk pembayaran NFC, transfer, dan top up yang disusun dalam grid tiga kolom. Bagian bawah layar menampilkan riwayat transaksi terbaru dalam format daftar dengan timestamp dan nominal yang jelas.
Palet warna yang dipilih untuk NexusPay menggunakan kombinasi biru tua sebagai warna utama yang merepresentasikan kepercayaan dan profesionalisme, putih sebagai latar belakang utama yang memberikan kesan bersih, serta hijau sebagai warna konfirmasi transaksi berhasil. Merah digunakan khusus untuk status gagal atau peringatan kesalahan.
Tipografi menggunakan font sans-serif dengan tingkat keterbacaan tinggi. Judul menggunakan bobot bold dengan ukuran 24pt, subjudul menggunakan medium 16pt, dan body text menggunakan regular 14pt. Hierarki ukuran ini memastikan pengguna dapat dengan cepat mengidentifikasi informasi yang paling penting.
Layar pembayaran NFC dirancang secara khusus dengan visual animasi gelombang yang mewakili sinyal NFC. Animasi ini berfungsi ganda, yaitu memberikan umpan balik visual kepada pengguna bahwa perangkat sedang aktif mendeteksi terminal NFC dan mengurangi kecemasan pengguna selama proses tap berlangsung.
Komponen kartu atau card digunakan secara konsisten untuk mengelompokkan informasi terkait. Setiap kartu memiliki bayangan ringan yang memberikan kedalaman visual dan memisahkan konten secara intuitif tanpa menggunakan garis pemisah yang kaku.

4. Dokumentasi Pembelajaran

Selama proses pembelajaran merancang layout antarmuka NexusPay, pemahaman mendalam tentang design system menjadi hal yang sangat penting. Design system adalah kumpulan komponen, panduan, dan standar visual yang digunakan secara konsisten di seluruh produk digital.
Materi yang dipelajari mencakup penggunaan Figma sebagai tools desain utama, pembuatan auto layout untuk komponen yang responsif, penggunaan variants untuk komponen dengan berbagai kondisi seperti tombol aktif dan nonaktif, serta penerapan design token untuk warna dan tipografi yang mudah dikelola.
Konsep atomic design juga dipelajari sebagai metodologi dalam membangun antarmuka. Atom adalah elemen terkecil seperti tombol dan ikon, molekul adalah gabungan atom seperti form input, organisme adalah gabungan molekul seperti header navigasi, template adalah tata letak halaman, dan halaman adalah instance nyata dari template dengan konten sebenarnya.

5. Dokumentasi Pengerjaan Desain 

(tampilan mobile)

Proses desain NexusPay dimulai dengan tahap riset pengguna yang melibatkan analisis aplikasi pembayaran serupa seperti GoPay, OVO, dan Dana untuk memahami pola antarmuka yang sudah familiar bagi pengguna Indonesia.
Tahap selanjutnya adalah pembuatan user flow yang memetakan perjalanan pengguna dari membuka aplikasi, memilih metode pembayaran, melakukan tap NFC, hingga menerima konfirmasi transaksi. User flow ini menjadi panduan dalam menentukan jumlah layar yang dibutuhkan dan transisi antar layar.
Wireframe dibuat menggunakan Figma dengan frame berukuran 390x844 piksel yang merepresentasikan layar iPhone 14 sebagai referensi utama. Setelah wireframe disetujui, proses dilanjutkan ke pembuatan mockup dengan penerapan warna, tipografi, dan aset visual yang telah ditentukan dalam design system.
Prototype interaktif kemudian dibuat untuk mensimulasikan alur penggunaan aplikasi, termasuk animasi transisi antar layar dan feedback visual saat pengguna menekan tombol. Prototype ini digunakan untuk validasi desain sebelum masuk ke tahap implementasi kode.

6. Kesimpulan

Merancang layout antarmuka NexusPay membutuhkan pemahaman mendalam tentang prinsip UI/UX yang selaras dengan kebutuhan pengguna aplikasi pembayaran digital. Prinsip kesederhanaan, konsistensi, hierarki visual, aksesibilitas, dan kepercayaan menjadi landasan utama dalam setiap keputusan desain. Melalui proses yang sistematis mulai dari wireframe, mockup, hingga prototype interaktif, desain NexusPay berhasil menciptakan antarmuka yang tidak hanya estetis tetapi juga fungsional dan dapat dipercaya oleh pengguna.

7. Daftar Pustaka

Norman, D. A. (2013). The Design of Everyday Things: Revised and Expanded Edition. Basic Books.
Nielsen, J., & Budiu, R. (2013). Mobile Usability. New Riders Press.
Garrett, J. J. (2011). The Elements of User Experience: User-Centered Design for the Web and Beyond. New Riders Press.
Frost, B. (2016). Atomic Design. Brad Frost. https://atomicdesign.bradfrost.com/
Google Material Design. (2023). Material Design Guidelines. https://m3.material.io/
Apple Inc. (2023). Human Interface Guidelines. https://developer.apple.com/design/human-interface-guidelines/