People Innovation Excellence
 
Feature Image

How to Design a Good Forms in Mobile Application

Pada aplikasi modern yang sudah banyak beredar saat ini, data adalah salah satu komponen penting yang digunakan, baik dalam bentuk identitas pengguna hingga statistik penggunaan aplikasi itu sendiri. Data yang didapatkan didalam aplikasi tersebut juga dapat berbentuk form yang membutuhkan partisipasi dari pengguna maupun diambil dari background task yang tidak memerlukan partisipasi pengguna (secara langsung). Karena data yang didapatkan melalui form membutuhkan partisipasi pengguna, maka dibutuhkan sebuah guidelines yang dibutuhkan untuk mendesain form tersebut sehingga data yang diisikan nantinya sesuai dengan apa yang dibutuhkan dalam aplikasi dan tidak membuat pengguna kebingungan ketika mengisi form tersebut.

Sesuai dengan kebutuhannya, ada beberapa jenis form yang sering digunakan dalam aplikasi mobile dan masing-masing jenis form ini juga memiliki guideline tersendiri sehingga dapat membantu para pengguna dalam mengisi data sehingga input yang diberikan sesuai dengan yang diminta. Beberapa jenis form tersebut antara lain:

  1. Register Form

Digunakan untuk memasukan informasi user ke dalam aplikasi. Biasanya diisi dengan data pribadi user, untuk autentifikasi, dan kepentingan lainnya. Data ini kemudian digunakan sebagai identitas utama user dalam aplikasi.


Karena data yang dibutuhkan lebih banyak ketimbang sign in, maka guideline yang dibutuhkan dalam mendesain registration form antara lain:

  • Pastikan terdapat perbedaan antara form field yang wajib diisi dan form field yang opsional sehingga dapat menghemat waktu
  • Berikan label yang jelas untuk masing-masing form field sehingga pengguna mengetahui apa yang harus diisi pada form field
  • Berikan feedback segera setelah pengguna berpindah ke form field
  1. Sign In

Berfungsi untuk menampung identitas user yang unik agar dapat masuk sebagai pengguna yang terverifikasi dalam aplikasi dan menggunakan fitur penting dari aplikasi. Biasanya terdapat opsi tambahan agar dapat login menggunakan akun dari platform lain.

Agar data sesuai dengan kebutuhan yang ingin diverifikasi, maka guideline dalam mendesain sign in antara lain:

  • Pengguna harus langsung terfokus pada form field yang paling pertama atau paling atas.
  • Terdapat opsi pilihan untuk menampilkan atau menyembunyikan password agar pengguna dapat mengetahui apakah password yang diinput sudah
  • Sebisa mungkin menggunakan metode sign in dengan social media untuk mempermudah
  1. Personalized Content

Digunakan untuk mengetahui preferensi konten yang diminati user dengan memberikan pilihan kategori topik yang dapat dipilih oleh user.

Untuk mendapatkan data preferensi yang lebih akurat, maka terdapat guideline untuk mendesain halaman tersebut, antara lain:

  • Berikan beberapa pilihan personalized content kepada user untuk mempermudah mereka dalam menentukan
  • Gunakan data personalized content ini sebagai persyaratan untuk menyelesaikan proses registrasi untuk meningkatkan pengalaman pengguna pada saat menggunakan
  1. Multistep

Merupakan variasi dari form yang memiliki beberap tahapan. Biasanya berisi form yang diperlukan, dengan indikator dari progress yang sedang berjalan.

Karena data yang akan diinput lebih banyak, maka dibutuhkan process bar untuk menunjukkan ringkasan proses dari setiap halaman form sehingga mengurangi kecemasan pengguna dalam mengisi banyak form field. Namun, perlu diingat bahwa ukuran process bar juga tidak boleh terlalu memakan banyak space agar desain user interface juga terlihat lebih clean.

  1. Search

Digunakan untuk mencari informasi berdasarkan keyword yang ingin dicari. Untuk mendapat hasil yang lebih presisi, dapat diberikan filter pada hasil dari search.

Untuk mendesain search form yang mempermudah pengguna dalam mencari data tertentu, maka guideline yang dapat digunakan antara lain:

  • Berikan opsi filter agar pengguna dapat menyaring data yang ingin
  • Simpan keyword pencarian yang pernah digunakan sebelumnya untuk pengguna yang sudah
  • Berikan alert atau visual ketika pengguna melakukan pencarian untuk memberikan visualisasi kepada pengguna bahwa aplikasi sedang menjalankan proses
  • Memiliki fitur saran otomatis sehingga pengguna dapat menghemat waktunya pada saat proses
  1. Checkout

Ditemukan saat ingin membayar sebuah produk yang dibeli online. Digunakan untuk memasukan informasi pembayaran yang diperlukan dalam transaksi tersebut dan memandu user agar proses checkout berjalan dengan lancar.

Guideline yang sesuai untuk mendesain checkout antara lain:

  • Apabila aplikasi tidak mengharuskan pengguna untuk login ketika awal penggunaan, maka dapat mengarahkan pengguna untuk melanjutkan proses checkout sebagai tamu, ingin login dengan akun yang sudah didaftarkan sebelumnya, atau registrasi akun
  • Ketika membutuhkan data yang lebih detail dapat menggunakan dropdown button sebagai
  • Menggunakan shortcut yang dapat menghemat waktu pengguna, seperti auto- fill data diri pengguna.
  • Memaksimalkan fitur-fitur yang ada di platform mobile seperti NFC dan QR code untuk memberikan pengalaman penggunaan aplikasi yang lebih
  1. Calculator

Berfungsi untuk memasukan nilai–nilai yang diperlukan untuk melakukan perhitungan tertentu sesuai fungsi aplikasinya.

Agar pengguna dapat lebih memahami halaman ini, pastikan bahwa proses kalkulasi yang digunakan sesuai dengan standar. Selain itu, gunakan juga visualisasi dari hasil kalkulasi tersebut agar mempermudah pengguna dalam melihat dan memahami output yang dikeluarkan.

  1. Long Form

Merupakan bentuk form panjang yang harus discroll agar terlihat semua bagian formnya. Form bentuk ini merupakan alternatif dari form yang menggunakan banyak halaman. Biasanya form tersebut dipecah per beberapa bagian untuk memperbagus tampilannya.

Dalam mendesain long form ini, masing-masing platform mobile punya guidelinenya masing-masing, seperti penggunaan modal context pada platform iOS.

  1. Exit Guard

Sebagai pencegahan user untuk keluar dari aplikasi, agar apabila terjadi ketidaksengajaan yang menyebabkan user untuk keluar dari aplikasi, user dapat langsung kembali ke aplikasi. Dalam mendesain exit guard, guideline yang dapat digunakan antara lain:

  • Jangan gunakan exit guard untuk semua aplikasi dan semua proses, disesuaikan dengan feedback yang didapat dari pengalaman pengguna selama menggunakan
  • Gunakan single dialog dengan sepasang pilihan dan bedakan pilihan tersebut (bisa berdasarkan warna seperti pada Call-to-Action button).

Author : Gerardo Axel Lwiantoro , Gregorius Agung Narindra A., Muhammad Isra Septiaji S.
Supervised by : Irma Kartika Wiarooy


Published at :
Written By
Irma Kartika Wairooy, S.Kom., M.T.I
Lecturer of Computer Science | School of Computer Science

Periksa Browser Anda

Check Your Browser

Situs ini tidak lagi mendukung penggunaan browser dengan teknologi tertinggal.

Apabila Anda melihat pesan ini, berarti Anda masih menggunakan browser Internet Explorer seri 8 / 7 / 6 / ...

Sebagai informasi, browser yang anda gunakan ini tidaklah aman dan tidak dapat menampilkan teknologi CSS terakhir yang dapat membuat sebuah situs tampil lebih baik. Bahkan Microsoft sebagai pembuatnya, telah merekomendasikan agar menggunakan browser yang lebih modern.

Untuk tampilan yang lebih baik, gunakan salah satu browser berikut. Download dan Install, seluruhnya gratis untuk digunakan.

We're Moving Forward.

This Site Is No Longer Supporting Out-of Date Browser.

If you are viewing this message, it means that you are currently using Internet Explorer 8 / 7 / 6 / below to access this site. FYI, it is unsafe and unable to render the latest CSS improvements. Even Microsoft, its creator, wants you to install more modern browser.

Best viewed with one of these browser instead. It is totally free.

  1. Google Chrome
  2. Mozilla Firefox
  3. Opera
  4. Internet Explorer 9
Close