1. Latar Belakang

Setelah tahap perancangan layout dasar selesai dilakukan, langkah berikutnya dalam pengembangan antarmuka PurbalinggaPay adalah mengimplementasikan sistem navigasi dan komponen interaktif yang menjadi tulang punggung pengalaman pengguna. Navigasi yang baik memastikan pengguna dapat berpindah antar layar secara intuitif, sementara komponen interaktif yang responsif memberikan umpan balik yang tepat waktu sehingga pengguna merasa aplikasi merespons aksi mereka dengan baik.
Dalam aplikasi pembayaran digital, navigasi memiliki peran kritis karena kesalahan dalam alur navigasi dapat menyebabkan pengguna gagal menyelesaikan transaksi atau bahkan kehilangan kepercayaan terhadap aplikasi. Oleh karena itu, implementasi navigasi pada PurbalinggaPay dirancang dengan mempertimbangkan berbagai skenario penggunaan, termasuk navigasi maju untuk memulai transaksi dan navigasi mundur untuk membatalkan atau mengoreksi transaksi.

2. Pengertian dan Konsep

Navigasi dalam aplikasi mobile merujuk pada mekanisme yang memungkinkan pengguna berpindah antara berbagai layar atau tampilan dalam aplikasi. Terdapat beberapa pola navigasi yang umum digunakan dalam aplikasi mobile.
Tab Bar Navigation adalah pola navigasi yang menempatkan menu utama di bagian bawah layar dalam bentuk tab. Pola ini sangat populer di aplikasi iOS dan memberikan akses cepat ke fitur-fitur utama aplikasi.
Stack Navigation adalah pola navigasi yang mendorong layar baru ke atas layar sebelumnya, membentuk tumpukan layar. Pengguna kembali ke layar sebelumnya dengan gestur swipe atau tombol kembali. Pola ini cocok untuk alur yang memiliki hierarki linear seperti proses checkout.
Modal Navigation adalah pola navigasi yang menampilkan layar baru di atas konten saat ini sebagai overlay. Biasanya digunakan untuk konfirmasi, pengisian form sederhana, atau pesan penting yang membutuhkan perhatian segera dari pengguna.
Drawer Navigation adalah pola navigasi yang menyembunyikan menu di sisi layar dan dapat ditarik keluar dengan gestur swipe. Cocok untuk aplikasi dengan banyak fitur yang tidak semuanya perlu ditampilkan sekaligus.
Komponen interaktif mencakup semua elemen UI yang merespons aksi pengguna, seperti tombol, toggle, slider, checkbox, dropdown, dan gestur seperti swipe dan pinch.

3. Pembahasan

PurbalinggaPay mengimplementasikan kombinasi Tab Bar Navigation dan Stack Navigation sebagai pola navigasi utama. Tab bar ditempatkan di bagian bawah layar dengan lima tab utama yaitu Beranda, Bayar, Riwayat, Dompet, dan Profil. Pemilihan lima tab ini didasarkan pada analisis fitur yang paling sering diakses pengguna dalam aplikasi pembayaran.
Setiap tab menggunakan ikon yang familiar dan label teks yang singkat. Ikon aktif ditampilkan dengan warna biru tua sebagai warna utama aplikasi, sementara ikon nonaktif menggunakan warna abu-abu. Transisi antar tab menggunakan animasi fade yang halus untuk memberikan kesan perpindahan yang mulus.
Alur pembayaran NFC menggunakan Stack Navigation. Pengguna memulai dari layar Beranda, menekan tombol Bayar, masuk ke layar konfirmasi jumlah, lalu masuk ke layar NFC aktif, dan akhirnya ke layar konfirmasi hasil transaksi. Setiap langkah dapat dibatalkan dengan tombol kembali, kecuali saat proses NFC sedang aktif untuk mencegah pembatalan yang tidak disengaja.
Komponen tombol pada PurbalinggaPay dirancang dalam tiga varian. Tombol primer menggunakan warna biru tua dengan teks putih untuk aksi utama seperti konfirmasi pembayaran. Tombol sekunder menggunakan border biru tua dengan teks biru dan latar belakang transparan untuk aksi alternatif. Tombol tersier menggunakan teks saja tanpa border untuk aksi yang kurang penting seperti batalkan.
Setiap tombol memiliki state visual yang berbeda untuk kondisi normal, pressed atau ditekan, disabled atau tidak aktif, dan loading. State loading menampilkan spinner animasi di dalam tombol untuk memberi tahu pengguna bahwa sistem sedang memproses aksi mereka.
Input field dirancang dengan label yang melayang ke atas saat pengguna mulai mengetik, menggunakan teknik floating label. Validasi input dilakukan secara real-time dengan menampilkan pesan error di bawah field menggunakan teks merah kecil.

4. Dokumentasi Pembelajaran

Proses pembelajaran pada tahap ini berfokus pada pemahaman tentang pola interaksi mobile dan cara mengimplementasikannya dalam desain. Studi mendalam dilakukan terhadap panduan desain resmi dari Google Material Design dan Apple Human Interface Guidelines untuk memahami praktik terbaik dalam merancang komponen interaktif.
Pembelajaran juga mencakup konsep micro-interaction, yaitu animasi dan umpan balik kecil yang terjadi saat pengguna berinteraksi dengan elemen UI. Micro-interaction yang baik meningkatkan kepuasan pengguna karena memberikan konfirmasi visual bahwa aksi mereka telah diterima oleh sistem.
Pemahaman tentang touch target size juga menjadi materi penting. Apple merekomendasikan ukuran minimum touch target sebesar 44x44 poin, sementara Google merekomendasikan 48x48 dp. Rekomendasi ini diterapkan pada semua elemen interaktif di PurbalinggaPay untuk memastikan kemudahan penggunaan.

5. Dokumentasi Pengerjaan Desain

sumber:gemini ai 

Implementasi komponen navigasi dimulai dengan pembuatan komponen tab bar di Figma menggunakan fitur auto layout untuk memastikan distribusi tab yang merata. Setiap ikon tab dibuat dalam format SVG untuk memastikan kualitas tampilan pada berbagai resolusi layar.
Komponen tombol dibuat dengan menggunakan fitur Variants di Figma, memungkinkan satu komponen memiliki berbagai kondisi yang dapat dengan mudah diganti saat menyusun prototype. Setiap variant tombol dihubungkan dengan interactive component untuk mensimulasikan perubahan state saat ditekan.
Alur navigasi diimplementasikan dalam Figma menggunakan fitur Prototype dengan menghubungkan setiap elemen interaktif ke frame tujuan menggunakan trigger On Tap dan animasi Smart Animate. Hasil akhirnya adalah prototype interaktif yang dapat disimulasikan seperti aplikasi nyata di perangkat mobile melalui Figma Mirror.

6. Kesimpulan

Implementasi navigasi dan komponen interaktif merupakan tahap kritis dalam pengembangan antarmuka PurbalinggaPay. Pemilihan pola navigasi yang tepat berupa kombinasi Tab Bar dan Stack Navigation memastikan pengguna dapat berpindah antar fitur secara intuitif. Komponen interaktif dengan berbagai state visual memberikan umpan balik yang jelas kepada pengguna sehingga meningkatkan kepercayaan dan kenyamanan dalam menggunakan aplikasi pembayaran digital ini.

7. Daftar Pustaka

Hoober, S. (2017). Design for Fingers, Touch, and People. UXmatters. https://www.uxmatters.com/
Google LLC. (2023). Material Design 3 - Navigation. https://m3.material.io/components/navigation-bar
Apple Inc. (2023). Tab Bars - Human Interface Guidelines. https://developer.apple.com/design/
Saffer, D. (2013). Microinteractions: Designing with Details. O'Reilly Media.
Tidwell, J. (2010). Designing Interfaces: Patterns for Effective Interaction Design. O'Reilly Media.