Design UI Aplikasi pinjamAja: Aplikasi Sewa Barang Online

Pendahuluan

Di era digital, teknologi tidak hanya mempermudah aktivitas individu, tetapi juga berpotensi menciptakan solusi kolektif yang berdampak sosial. Salah satu permasalahan yang masih sering ditemui adalah keterbatasan akses terhadap barang-barang yang hanya dibutuhkan secara temporer, seperti kamera atau tenda camping. Banyak individu terpaksa membeli barang mahal yang jarang dipakai, sementara di sisi lain, banyak barang menganggur tanpa dimanfaatkan. Ketimpangan ini membuka peluang untuk menghadirkan sistem berbagi berbasis komunitas.

PinjamAja hadir sebagai solusi: sebuah aplikasi peminjaman barang online yang memungkinkan masyarakat saling berbagi sumber daya secara aman, efisien, dan berbasis kepercayaan. Namun, agar platform ini efektif, desain antarmuka pengguna (UI) harus memperhatikan keterbatasan perangkat mobile dan pola interaksi pengguna.

Mengacu pada artikel “Designing Navigation for Mobile: Design Patterns and Best Practices”, tantangan navigasi pada layar kecil menuntut struktur yang efisien dan intuitif. Prinsip pemanfaatan tab seperti yang dijelaskan dalam “Tabs, Used Right” serta konsistensi navigasi dan penghindaran beban kognitif dari “Navigation Patterns and Design Strategies to Minimize Mobile Usability Issues”, menjadi kunci menciptakan pengalaman pengguna yang nyaman.

Artikel ini akan mengulas bagaimana prinsip UI tersebut diterapkan dalam desain aplikasi PinjamAja, khususnya dalam struktur menu, navigasi, dan pemilihan jenis window (modal, modeless, unfolding), sebagai bagian dari implementasi materi mata kuliah Interaksi Manusia dan Komputer.

Sumber: https://sujeitoprogramador.com/o-que-e-ui-design/

Perancangan Menu

Dalam merancang aplikasi PinjamAja, struktur menu yang digunakan menggabungkan pendekatan hirarki dan linier, yang disesuaikan dengan konteks fitur dan kebutuhan pengguna. Menu hirarki digunakan untuk fitur utama seperti Beranda, Sewa Barang, dan Sewakan Barang, sedangkan menu linier digunakan dalam alur yang bersifat berurutan dan langsung, seperti saat mengatur lokasi pengantaran atau menambahkan barang sewaan baru.

Pendekatan ini dipilih untuk menjaga organisasi informasi yang baik, memastikan bahwa pengguna selalu tahu di mana mereka berada dan bagaimana cara menuju fitur lainnya dengan mudah. Dengan tetap menjaga jumlah pilihan yang optimal dan konsistensi desain antar menu, struktur ini mendukung pengalaman pengguna yang intuitif, efisien, dan tidak membingungkan — terutama bagi pengguna yang mungkin baru pertama kali menggunakan aplikasi sharing economy seperti pinjamAja.

Saya secara khusus merancang tiga bagian penting dalam sistem menu aplikasi ini, yaitu menu Lokasi & Pengantaran, menu Manage Item, dan notifikasi pop-up.

Menu Lokasi & Pengantaran

Fitur ini dirancang untuk membantu pengguna dalam menentukan lokasi penjemputan dan pengantaran barang, sekaligus menjangkau pemilik atau penyewa terdekat. Pada bagian ini, saya menggunakan struktur menu linier, karena alur interaksinya bersifat prosedural dan membutuhkan urutan langkah yang jelas dan terarah. Pengguna diarahkan mengikuti alur step-by-step, mulai dari:

1. Memilih jasa pengiriman (misalnya kurir mitra atau antar langsung),
2. Mengisi alamat tujuan pengantaran,
3. Menentukan titik lokasi secara visual di peta interaktif,
4. Mengatur estimasi biaya penyewaan berdasarkan jarak atau area layanan.

Pemilihan menu linier ini didasarkan pada kebutuhan pengguna yang memerlukan alur yang jelas, sederhana, dan bebas distraksi saat mengatur pengantaran barang. Karena ini berkaitan langsung dengan biaya, waktu, dan kejelasan transaksi, maka sangat penting untuk menjaga fokus dan akurasi input pengguna.

Desain menu ini juga menerapkan prinsip konsistensi, baik dari segi visual maupun navigasi: semua tahapan menggunakan ikon dan tombol aksi yang seragam seperti “Berikutnya”, “Atur Pengantaran”, atau “Kembali”. Ini membantu pengguna tetap merasa familiar meski berpindah antar halaman. Selain itu, jumlah pilihan yang ditampilkan pada setiap langkah dibatasi secara optimal, agar tidak membebani pengguna dengan terlalu banyak opsi sekaligus — hal ini mendukung pengurangan beban kognitif dan memperkuat prinsip organisasi konten dalam desain antarmuka.

Dengan pendekatan ini, fitur Lokasi & Pengantaran tidak hanya fungsional, tapi juga memberikan pengalaman yang terstruktur, efisien, dan user-friendly, sesuai dengan karakteristik pengguna mobile yang mengutamakan kecepatan dan kejelasan dalam menyelesaikan tugas.

Menu Manage Item

Bagian ini dirancang untuk memungkinkan pengguna mengelola barang-barang yang mereka sewakan di platform pinjamAja. Fitur-fitur utama yang disediakan meliputi penambahan barang baru, pengeditan informasi, serta menonaktifkan atau menghapus barang sesuai kebutuhan pengguna. Untuk mendukung interaksi ini, saya menggunakan struktur menu gabungan antara hirarki dan linier.

Struktur menu hirarki diterapkan untuk mengorganisasi tampilan halaman utama “Manage Item” beserta submenunya seperti “Tambah Barang” dan “Edit Barang”. Sementara itu, saat pengguna memilih untuk menambahkan barang, sistem akan mengarahkan mereka ke alur menu linier yang berisi tahapan berurutan: mulai dari mengisi detail barang, memilih kategori, menetapkan harga, hingga mengunggah foto. Pemilihan kombinasi ini berdasarkan kebutuhan pengguna yang memerlukan kebebasan navigasi di level atas, namun tetap menginginkan alur logis yang sederhana saat menginput data.

Setiap barang yang ditambahkan ditampilkan dalam bentuk kartu (card) yang informatif, menampilkan nama barang, foto, status, dan beberapa informasi ringkas. Jika pengguna memilih tombol “Edit”, mereka diarahkan ke halaman detail dari barang tersebut, yang di dalamnya tersedia opsi lanjutan seperti “Perbarui Informasi”, “Nonaktifkan Barang”, dan “Hapus Barang”. Dengan menyatukan semua kontrol ini di dalam jalur submenu edit, desain ini mendukung prinsip organisasi dan jumlah pilihan optimal, karena menghindari penumpukan terlalu banyak tombol aksi di halaman utama yang bisa membingungkan.

Selain itu, pendekatan ini juga menegaskan konsistensi antar halaman, dengan penggunaan ikon, label, dan urutan interaksi yang seragam. Hal ini mempermudah pengguna mengenali dan mengingat fungsi di tiap bagian aplikasi. Dengan navigasi yang terstruktur dan berfokus, pengguna dapat mengelola barang sewa mereka dengan lebih cepat, mudah, dan efisien, tanpa perlu berpindah konteks secara berlebihan atau kehilangan arah dalam proses.

Notifikasi Pop-up

Untuk meningkatkan interaksi antara sistem dan pengguna, saya merancang elemen notifikasi pop-up yang muncul pada momen-momen penting, misalnya saat pengguna mengonfirmasi peminjaman barang, menerima pengingat pengembalian, atau mendapatkan penawaran promosi. Dalam hal ini, saya menggunakan pendekatan modal window, karena jenis window ini sangat efektif untuk menyampaikan informasi yang bersifat kritis atau mendesak, dengan cara mengambil fokus penuh perhatian pengguna.

Pemilihan notifikasi modal ini didasarkan pada kebutuhan pengguna untuk mendapatkan informasi secara cepat, jelas, dan tidak terlewatkan, terutama dalam konteks aktivitas penyewaan yang bersifat transaksional dan berbatas waktu. Dengan memberikan interupsi yang terkontrol, pengguna tidak hanya diberi informasi penting, tetapi juga diarahkan untuk segera mengambil tindakan jika diperlukan.

Secara desain, kedua notifikasi dibuat dengan gaya visual yang konsisten dan terorganisir. Elemen-elemen penting seperti logo aplikasi, waktu pengiriman, isi pesan utama, dan subjudul ringkas disusun dengan format yang kompak dan mudah dibaca, sesuai dengan keterbatasan layar perangkat mobile. Penyederhanaan ini juga mengacu pada prinsip jumlah pilihan optimal — pengguna tidak dibanjiri banyak aksi, melainkan hanya diberikan satu atau dua opsi yang paling relevan, seperti “OK”, “Lihat Detail”, atau “Tutup”.

Dengan pendekatan ini, fitur notifikasi pada pinjamAja tidak hanya berperan sebagai alat pengingat pasif, tetapi juga menjadi saluran komunikasi aktif yang memperkuat pengalaman pengguna secara keseluruhan. Hal ini mendukung prinsip visibilitas status sistem dalam Interaksi Manusia dan Komputer, sekaligus memastikan aplikasi bersifat responsif, informatif, dan user-centered dalam setiap interaksi.

Design Navigasi

Dalam aplikasi pinjamAja, desain navigasi memainkan peran penting untuk memastikan pengguna dapat menjelajahi fitur dengan cepat dan tanpa kebingungan. Untuk itu, pendekatan navigasi yang saya gunakan pada menu Lokasi & Pengantaran, Manage Item, dan Notifikasi Pop-up adalah kombinasi tab navigation dan button-based navigation.

Tab navigation digunakan untuk memberikan akses langsung ke fitur utama aplikasi, seperti Beranda, Sewa Barang, Pinjam Barang, dan Kelola Akun. Dengan letak tab di bagian bawah layar, pengguna dapat dengan mudah mengidentifikasi “di mana mereka berada” (Where am I?) melalui ikon dan label yang konsisten serta penanda visual aktif (highlight/tab yang menyala). Pendekatan ini selaras dengan prinsip yang dijelaskan dalam artikel “Tabs, Used Right” oleh Nielsen Norman Group, yang menekankan pentingnya konsistensi visual dan pengelompokan logis agar navigasi mudah dipahami.

Sementara itu, button-based navigation diterapkan di dalam fitur seperti Lokasi & Pengantaran dan Manage Item, di mana alur interaksi lebih bersifat proses. Tombol-tombol seperti “Atur Pengantaran”, “Tambah Barang”, atau “Edit Barang”. berfungsi untuk menjawab pertanyaan navigasi lanjutan seperti “Where can I go?” dan “How to get there quickly?”. Desain ini mendukung pengalaman yang berorientasi tugas dengan alur yang lebih terarah.

Dalam “Designing Navigation for Mobile: Design Patterns and Best Practices”, disebutkan bahwa kombinasi navigasi tab dan tombol sangat efektif dalam aplikasi mobile karena masing-masing memiliki kekuatan dalam mendukung eksplorasi fitur maupun penyelesaian tugas. Selain itu, referensi dari jurnal “Navigation Patterns and Design Strategies to Minimize Mobile Usability Issues” juga menyatakan bahwa navigasi yang baik tidak hanya mencakup struktur visual, tetapi juga bagaimana sistem memberi tahu pengguna lokasi mereka saat ini dan jalur yang tersedia.

Penggunaan navigasi ini juga memperhatikan prinsip-prinsip desain HCI seperti konsistensi antar halaman, organisasi menu berdasarkan prioritas tugas, dan jumlah pilihan yang optimal untuk menghindari kelebihan informasi. Dengan desain yang responsif dan navigasi yang intuitif, pengguna dapat merasa lebih percaya diri dalam menjelajahi aplikasi, menyelesaikan tugas mereka, dan tetap sadar terhadap konteks aplikasi secara keseluruhan.

Pemilihan Window

Dalam pengembangan aplikasi pinjamAja, pemilihan jenis window untuk setiap menu tidak dilakukan secara sembarangan, melainkan didasarkan pada konteks tugas, tingkat interaksi pengguna, dan keterbatasan desain mobile. Saya mengadopsi kombinasi tiga pendekatan window utama: modal window, modeless window, dan unfolding window, yang masing-masing digunakan pada fitur Lokasi & Pengantaran, Manage Item, dan Notifikasi Pop-up.

1. Modal Window — Lokasi & Pengantaran

Fitur ini menuntut pengguna untuk fokus penuh dalam menyelesaikan satu proses penting: menentukan titik pengambilan dan pengantaran barang. Oleh karena itu, saya memilih menggunakan modal window, yaitu jendela yang memblokir interaksi dengan bagian aplikasi lainnya sampai proses selesai. Ini membantu meminimalkan gangguan dan meningkatkan konsentrasi pengguna saat mereka mengisi data pengiriman, memilih titik lokasi pada peta, serta mengatur biaya. Modal window sangat cocok untuk tugas-tugas linear dan bersifat transaksional, karena memastikan pengguna menyelesaikan satu alur sebelum beralih ke konteks lain.

2. Modeless Window — Manage Item

Berbeda dengan proses yang memerlukan fokus tunggal, menu Manage Item dirancang agar pengguna dapat berpindah antar fungsi seperti menambah barang, mengedit informasi, atau melihat daftar barang tanpa harus meninggalkan konteks utama. Oleh karena itu, saya menggunakan modeless window, yaitu jendela yang tidak menghalangi pengguna untuk berinteraksi dengan bagian lain dari aplikasi. Keuntungan dari pendekatan ini adalah fleksibilitas — pengguna dapat membuka jendela edit lalu berpindah ke bagian lain tanpa kehilangan data yang sedang dikerjakan. Ini selaras dengan prinsip efisiensi dan kontrol pengguna.

3. Unfolding Window — Notifikasi Pop-up

Untuk elemen notifikasi pop-up, saya menerapkan unfolding window, yaitu jenis tampilan yang muncul secara sementara di atas konten utama, biasanya sebagai reaksi terhadap suatu aksi atau sistem. Window ini tidak mengganggu alur utama, tetapi cukup mencolok untuk menarik perhatian pengguna terhadap informasi penting seperti konfirmasi peminjaman, pengingat keterlambatan, atau peringatan sistem. Keunggulan pendekatan ini adalah sifatnya yang ringan, cepat, dan tidak membebani pengguna, terutama pada layar kecil perangkat mobile.

Visual Mockup/Wireframe

1. Menu Lokasi & Pengantaran

Gambar . Menu Lokasi & Pengantaran

2. Menu Manage Item

Gambar . Menu Manage Item

3. Notifikasi pop-up

Gambar . Notifikasi Pop-up

Kesimpulan

Pengembangan aplikasi pinjamAja merupakan respons inovatif terhadap tantangan sosial-ekonomi yang dihadapi masyarakat modern, khususnya dalam hal akses terhadap barang-barang yang hanya dibutuhkan secara temporer. Dengan mengusung konsep ekonomi berbagi, aplikasi ini tidak hanya mendorong efisiensi penggunaan sumber daya, tetapi juga memperkuat solidaritas antarwarga melalui sistem peminjaman barang yang aman, transparan, dan inklusif.

Keberhasilan aplikasi ini sangat ditentukan oleh kualitas perancangan antarmuka pengguna (UI/UX) yang mampu menghadirkan pengalaman pengguna yang intuitif, nyaman, dan efisien. Melalui pendekatan desain yang menggabungkan struktur menu hirarki dan linier, penggunaan jenis window yang sesuai konteks (modal, modeless, unfolding), serta strategi navigasi yang adaptif dengan perangkat mobile, aplikasi pinjamAja mampu menjawab tantangan usability yang umum ditemui pada platform digital.

Referensi dari berbagai artikel seperti "Designing Navigation for Mobile", "Tabs, Used Right", dan "Navigation Patterns and Design Strategies to Minimize Mobile Usability Issues" turut memperkuat landasan teoritis dalam proses desain, yang mengedepankan prinsip konsistensi, visibilitas status sistem, pengurangan beban kognitif, dan pengorganisasian informasi yang logis.

Dengan desain antarmuka yang matang dan user-centered, pinjamAja diharapkan tidak hanya menjadi solusi digital yang praktis, tetapi juga sarana untuk membangun budaya berbagi yang berkelanjutan. Proyek ini sekaligus menjadi contoh penerapan nyata dari prinsip-prinsip Interaksi Manusia da

Refrensi

Designing Navigation for Mobile: Design Patterns and Best Practices. (00:00 + UTC). Smashing Magazine. https://www.smashingmagazine.com/2022/11/navigation-design-mobile-ux/

Tabs, Used Right. (n.d.). Nielsen Norman Group. Retrieved April 6, 2025, from https://www.nngroup.com/articles/tabs-used-right/

Riaz, M. M., Faisal, C. N., Mahmood, T., Fernandez-Lanvin, D., Gonzalez-Rodriguez, M., & De Andrés, J. (2023). Navigation Patterns and Design Strategies to Minimize Mobile Usability Issues.

Interaksi Manusia dan Komputer (IMK) Tim Dosen IMK FIF — THE USER INTERFACE (UI) DESIGN PROCESS Step 4: Develop System Menus and Navigation Schemes Step 5 : Select the Proper Kinds of Window