Praktik terbaik formulir pembayaran dan alamat

Maksimalkan konversi dengan membantu pengguna Anda menyelesaikan formulir alamat dan pembayaran secepat dan semudah mungkin.

Sam Dutton

Formulir yang didesain dengan baik akan membantu pengguna dan meningkatkan rasio konversi. Satu perbaikan kecil dapat memberikan dampak besar.

Berikut adalah contoh formulir pembayaran sederhana yang menunjukkan semua praktik terbaik:

Berikut adalah contoh formulir alamat sederhana yang menunjukkan semua praktik terbaik:

Checklist

Menggunakan HTML yang bermakna

Gunakan elemen dan atribut yang dibuat untuk tugas:

  • <form>, <input>, <label>, dan <button>
  • type, autocomplete, dan inputmode

Hal ini memungkinkan fungsi browser bawaan, meningkatkan aksesibilitas, dan menambahkan makna ke markup Anda.

Menggunakan elemen HTML sebagaimana mestinya

Menempatkan formulir dalam <form>

Anda mungkin tergoda untuk tidak repot menggabungkan elemen <input> dalam <form>, dan menangani pengiriman data hanya dengan JavaScript.

Jangan lakukan itu!

<form> HTML memberi Anda akses ke serangkaian fitur bawaan yang canggih di semua browser modern, dan dapat membantu membuat situs Anda dapat diakses oleh pembaca layar dan perangkat pendukung lainnya. <form> juga mempermudah pembuatan fungsi dasar untuk browser lama dengan dukungan JavaScript terbatas, dan untuk mengaktifkan pengiriman formulir meskipun ada gangguan pada kode Anda—dan untuk sejumlah kecil pengguna yang benar-benar menonaktifkan JavaScript.

Jika Anda memiliki lebih dari satu komponen halaman untuk input pengguna, pastikan untuk menempatkan setiap komponen dalam elemen <form> masing-masing. Misalnya, jika Anda memiliki penelusuran dan pendaftaran di halaman yang sama, tempatkan masing-masing di <form>-nya sendiri.

Menggunakan <label> untuk memberi label pada elemen

Untuk memberi label pada <input>, <select>, atau <textarea>, gunakan <label>.

Kaitkan label dengan input dengan memberikan atribut for label dengan nilai yang sama seperti id input.

<label for="address-line1">Address line 1</label>
<input id="address-line1" …>

Gunakan satu label untuk satu input: jangan mencoba memberi label pada beberapa input hanya dengan satu label. Hal ini berfungsi paling baik untuk browser, dan paling baik untuk pembaca layar. Ketuk atau klik label akan memindahkan fokus ke input yang terkait, dan pembaca layar akan mengumumkan teks label saat label atau input label mendapatkan fokus.

Membuat tombol bermanfaat

Gunakan <button> untuk tombol. Anda juga dapat menggunakan <input type="submit">, tetapi jangan gunakan div atau beberapa elemen acak lainnya yang berfungsi sebagai tombol. Elemen tombol memberikan perilaku yang mudah diakses, fungsi pengiriman formulir bawaan, dan dapat dengan mudah diberi gaya.

Berikan nilai yang menjelaskan fungsinya untuk setiap tombol kirim formulir. Untuk setiap langkah menuju checkout, gunakan pesan ajakan deskriptif yang menunjukkan progres dan membuat langkah berikutnya jelas. Misalnya, beri label tombol kirim pada formulir alamat pengiriman Anda Lanjutkan ke Pembayaran, bukan Lanjutkan atau Simpan.

Pertimbangkan untuk menonaktifkan tombol kirim setelah pengguna mengetuk atau mengkliknya—terutama saat pengguna melakukan pembayaran atau memesan. Banyak pengguna mengklik tombol berulang kali, meskipun tombol tersebut berfungsi dengan baik. Hal ini dapat mengacaukan checkout dan menambah beban server.

Di sisi lain, jangan nonaktifkan tombol kirim yang menunggu input pengguna yang lengkap dan valid. Misalnya, jangan biarkan tombol Simpan Alamat dinonaktifkan karena ada yang tidak ada atau tidak valid. Hal ini tidak membantu pengguna—mereka mungkin terus mengetuk atau mengklik tombol dan menganggapnya rusak. Sebagai gantinya, jika pengguna mencoba mengirimkan formulir dengan data yang tidak valid, jelaskan masalahnya dan tindakan yang harus dilakukan untuk memperbaikinya. Hal ini sangat penting di perangkat seluler, tempat entri data lebih sulit dan data formulir yang tidak ada atau tidak valid mungkin tidak terlihat di layar pengguna saat mereka mencoba mengirimkan formulir.

Memaksimalkan penggunaan atribut HTML

Memudahkan pengguna memasukkan data

Gunakan atribut type input yang sesuai untuk menyediakan keyboard yang tepat di perangkat seluler dan mengaktifkan validasi bawaan dasar oleh browser.

Misalnya, gunakan type="email" untuk alamat email dan type="tel" untuk nomor telepon.

Dua screenshot ponsel Android, yang menampilkan keyboard yang sesuai untuk memasukkan alamat email (menggunakan type=email) dan untuk memasukkan nomor telepon (dengan type=tel).
Keyboard yang sesuai untuk email dan telepon.

Untuk tanggal, coba hindari penggunaan elemen select kustom. Hal ini akan merusak pengalaman isi otomatis jika tidak diterapkan dengan benar dan tidak berfungsi di browser lama. Untuk angka seperti tahun lahir, sebaiknya gunakan elemen input, bukan select, karena memasukkan angka secara manual dapat lebih mudah dan tidak sering mengalami error daripada memilih dari daftar drop-down yang panjang—terutama di perangkat seluler. Gunakan inputmode="numeric" untuk memastikan keyboard yang tepat di perangkat seluler dan menambahkan validasi serta petunjuk format dengan teks atau placeholder untuk memastikan pengguna memasukkan data dalam format yang sesuai.

Menggunakan pelengkapan otomatis untuk meningkatkan aksesibilitas dan membantu pengguna menghindari memasukkan ulang data

Penggunaan nilai autocomplete yang sesuai memungkinkan browser membantu pengguna dengan menyimpan data dengan aman dan mengisi otomatis nilai input, select, dan textarea. Hal ini sangat penting di perangkat seluler, dan sangat penting untuk menghindari rasio pengabaian formulir yang tinggi. Pelengkapan otomatis juga memberikan beberapa manfaat aksesibilitas.

Jika nilai pelengkapan otomatis yang sesuai tersedia untuk kolom formulir, Anda harus menggunakannya. Dokumen web MDN memiliki daftar lengkap nilai dan penjelasan tentang cara menggunakannya dengan benar.

Nilai stabil

Alamat penagihan

Secara default, tetapkan alamat penagihan agar sama dengan alamat pengiriman. Kurangi kekacauan visual dengan menyediakan link untuk mengedit alamat penagihan (atau gunakan elemen summary dan details) bukan menampilkan alamat penagihan dalam formulir.

Contoh halaman checkout yang menampilkan link untuk mengubah alamat penagihan.
Tambahkan link untuk meninjau penagihan.

Gunakan nilai pelengkapan otomatis yang sesuai untuk alamat penagihan, seperti yang Anda lakukan untuk alamat pengiriman, sehingga pengguna tidak perlu memasukkan data lebih dari sekali. Tambahkan kata awalan ke atribut pelengkapan otomatis jika Anda memiliki nilai yang berbeda untuk input dengan nama yang sama di bagian yang berbeda.

<input autocomplete="shipping address-line-1" ...>
...
<input autocomplete="billing address-line-1" ...>

Membantu pengguna memasukkan data yang tepat

Cobalah untuk tidak "menegur" pelanggan karena mereka "melakukan sesuatu yang salah". Sebagai gantinya, bantu pengguna menyelesaikan formulir dengan lebih cepat dan mudah dengan membantu mereka memperbaiki masalah saat terjadi. Melalui proses checkout, pelanggan mencoba memberikan uang kepada perusahaan Anda untuk produk atau layanan—tugas Anda adalah membantu mereka, bukan menghukum mereka.

Anda dapat menambahkan atribut batasan untuk membentuk elemen guna menentukan nilai yang dapat diterima, termasuk min, max, dan pattern. Status validitas elemen ditetapkan secara otomatis, bergantung pada apakah nilai elemen valid, begitu juga dengan pseudo-class CSS :valid dan :invalid yang dapat digunakan untuk menata gaya elemen dengan nilai valid atau tidak valid.

Misalnya, HTML berikut menentukan input untuk tahun lahir antara tahun 1900 dan 2020. Penggunaan type="number" membatasi nilai input hanya ke angka, dalam rentang yang ditentukan oleh min dan max. Jika Anda mencoba memasukkan angka di luar rentang, input akan ditetapkan untuk memiliki status yang tidak valid.

Contoh berikut menggunakan pattern="[\d ]{10,30}" untuk memastikan nomor kartu pembayaran yang valid, sekaligus mengizinkan spasi:

Browser modern juga melakukan validasi dasar untuk input dengan jenis email atau url.

Saat formulir dikirim, browser akan otomatis menetapkan fokus pada kolom dengan nilai wajib yang bermasalah atau tidak ada. JavaScript tidak diperlukan.

Screenshot formulir login di Chrome di desktop yang menampilkan perintah browser dan fokus untuk nilai email yang tidak valid.
Validasi bawaan dasar oleh browser.

Lakukan validasi inline dan berikan masukan kepada pengguna saat mereka memasukkan data, bukan memberikan daftar error saat mereka mengklik tombol kirim. Jika Anda perlu memvalidasi data di server setelah pengiriman formulir, cantumkan semua masalah yang ditemukan dan tandai dengan jelas semua kolom formulir dengan nilai yang tidak valid, serta tampilkan pesan inline di samping setiap kolom bermasalah yang menjelaskan apa yang perlu diperbaiki. Periksa log server dan data analisis untuk menemukan error umum—Anda mungkin perlu mendesain ulang formulir.

Anda juga harus menggunakan JavaScript untuk melakukan validasi yang lebih andal saat pengguna memasukkan data dan saat pengiriman formulir. Gunakan Constraint Validation API (yang didukung secara luas) untuk menambahkan validasi kustom menggunakan UI browser bawaan untuk menetapkan fokus dan menampilkan perintah.

Cari tahu lebih lanjut di Menggunakan JavaScript untuk validasi real-time yang lebih kompleks.

Membantu pengguna agar tidak melewatkan data yang diperlukan

Gunakan atribut required pada input untuk nilai wajib.

Saat formulir dikirim, browser modern otomatis meminta dan menetapkan fokus pada kolom required dengan data yang tidak ada, dan Anda dapat menggunakan pseudo-class :required untuk menandai kolom wajib diisi. Tidak memerlukan JavaScript.

Tambahkan tanda bintang ke label untuk setiap kolom wajib diisi, dan tambahkan catatan di awal formulir untuk menjelaskan arti tanda bintang.

Menyederhanakan checkout

Perhatikan kesenjangan niaga seluler.

Bayangkan pengguna Anda memiliki anggaran kelelahan. Jika habis, pengguna Anda akan pergi.

Anda perlu mengurangi hambatan dan mempertahankan fokus, terutama di perangkat seluler. Banyak situs mendapatkan lebih banyak traffic di perangkat seluler, tetapi lebih banyak konversi di desktop—sebuah fenomena yang dikenal sebagai kesenjangan e-commerce seluler. Pelanggan mungkin lebih suka menyelesaikan pembelian di desktop, tetapi rasio konversi seluler yang lebih rendah juga merupakan hasil dari pengalaman pengguna yang buruk. Tugas Anda adalah meminimalkan konversi yang hilang di perangkat seluler dan memaksimalkan konversi di desktop. Riset telah menunjukkan bahwa ada peluang besar untuk memberikan pengalaman formulir seluler yang lebih baik.

Yang terpenting, pengguna cenderung mengabaikan formulir yang terlihat panjang, rumit, dan tanpa arah. Hal ini terutama berlaku saat pengguna menggunakan layar yang lebih kecil, terganggu, atau terburu-buru. Minta data sedikit mungkin.

Membuat checkout tamu sebagai default

Untuk toko online, cara termudah untuk mengurangi hambatan formulir adalah dengan menjadikan checkout tamu sebagai default. Jangan memaksa pengguna untuk membuat akun sebelum melakukan pembelian. Tidak mengizinkan checkout tamu disebut sebagai alasan utama pengabaian keranjang belanja.

Alasan pengabaian keranjang belanja selama checkout.
Dari baymard.com/checkout-usability

Anda dapat menawarkan pendaftaran akun setelah checkout. Pada saat itu, Anda sudah memiliki sebagian besar data yang diperlukan untuk menyiapkan akun, sehingga pembuatan akun akan cepat dan mudah bagi pengguna.

Menampilkan progres checkout

Anda dapat membuat proses checkout terasa kurang rumit dengan menampilkan progres dan memperjelas hal yang perlu dilakukan selanjutnya. Video di bawah menunjukkan cara retailer Inggris Raya johnlewis.com melakukannya.

Menampilkan progres checkout.

Anda perlu mempertahankan momentum. Untuk setiap langkah menuju pembayaran, gunakan judul halaman dan nilai tombol deskriptif yang memperjelas hal yang perlu dilakukan sekarang, dan langkah checkout berikutnya.

Beri tombol formulir nama yang bermakna dan menunjukkan langkah berikutnya.

Gunakan atribut enterkeyhint pada input formulir untuk menetapkan label tombol enter keyboard seluler. Misalnya, gunakan enterkeyhint="previous" dan enterkeyhint="next" dalam formulir multi-halaman, enterkeyhint="done" untuk input akhir dalam formulir, dan enterkeyhint="search" untuk input penelusuran.

Dua screenshot formulir alamat di Android yang menunjukkan bagaimana atribut input enterkeyhint mengubah ikon tombol enter.
Masukkan tombol kunci di Android: 'next' dan 'done'.

Atribut enterkeyhint didukung di Android dan iOS. Anda dapat mengetahui informasi selengkapnya dari penjelasan enterkeyhint.

Permudah pengguna untuk bolak-balik dalam proses checkout, agar dapat menyesuaikan pesanan dengan mudah, bahkan saat mereka berada di langkah pembayaran akhir. Menampilkan detail lengkap pesanan, bukan hanya ringkasan terbatas. Izinkan pengguna menyesuaikan jumlah item dengan mudah dari halaman pembayaran. Prioritas Anda saat checkout adalah menghindari gangguan pada progres menuju konversi.

Menghapus objek mengganggu

Batasi potensi titik keluar dengan menghapus kekacauan dan gangguan visual seperti promosi produk. Banyak retailer yang sukses bahkan menghapus navigasi dan penelusuran dari checkout.

Dua screenshot di perangkat seluler yang menampilkan progres melalui checkout johnlewis.com. Penelusuran, navigasi, dan gangguan lainnya akan dihapus.
Penelusuran, navigasi, dan gangguan lainnya dihapus untuk checkout.

Pastikan perjalanan tetap fokus. Ini bukan saatnya untuk menggoda pengguna agar melakukan hal lain.

Screenshot halaman checkout di perangkat seluler yang menampilkan promosi yang mengganggu untuk STIKER GRATIS.
Jangan mengalihkan perhatian pelanggan dari menyelesaikan pembelian mereka.

Untuk pengguna yang kembali, Anda dapat menyederhanakan alur checkout lebih lanjut, dengan menyembunyikan data yang tidak perlu mereka lihat. Misalnya: tampilkan alamat pengiriman dalam teks biasa (bukan dalam formulir) dan izinkan pengguna mengubahnya melalui link.

Screenshot bagian &#39;Tinjau pesanan&#39; di halaman checkout, yang menampilkan teks dalam teks biasa, dengan link untuk mengubah alamat pengiriman, metode pembayaran, dan alamat penagihan, yang tidak ditampilkan.
Menyembunyikan data yang tidak perlu dilihat pelanggan.

Mempermudah memasukkan nama dan alamat

Hanya minta data yang Anda perlukan

Sebelum Anda mulai membuat kode formulir nama dan alamat, pastikan untuk memahami data yang diperlukan. Jangan meminta data yang tidak Anda butuhkan. Cara termudah untuk mengurangi kompleksitas formulir adalah dengan menghapus kolom yang tidak diperlukan. Hal ini juga baik untuk privasi pelanggan dan dapat mengurangi biaya dan kewajiban data backend.

Menggunakan input nama tunggal

Izinkan pengguna memasukkan nama mereka menggunakan satu input, kecuali jika Anda memiliki alasan yang baik untuk menyimpan nama depan, nama keluarga, sebutan kehormatan, atau bagian nama lainnya secara terpisah. Penggunaan input nama tunggal akan membuat formulir menjadi tidak terlalu rumit, memungkinkan pemotongan dan penempelan, serta mempermudah isi otomatis.

Secara khusus, kecuali jika Anda memiliki alasan yang baik untuk tidak melakukannya, jangan repot-repot menambahkan input terpisah untuk awalan atau gelar (seperti Ny., Dr., atau Lord). Pengguna dapat mengetiknya dengan nama mereka jika mau. Selain itu, pelengkapan otomatis honorific-prefix saat ini tidak berfungsi di sebagian besar browser, sehingga menambahkan kolom untuk awalan atau judul nama akan merusak pengalaman isi otomatis formulir alamat bagi sebagian besar pengguna.

Mengaktifkan isi otomatis nama

Gunakan name untuk nama lengkap:

<input autocomplete="name" ...>

Jika Anda benar-benar memiliki alasan yang baik untuk memisahkan bagian nama, pastikan untuk menggunakan nilai pelengkapan otomatis yang sesuai:

  • honorific-prefix
  • given-name
  • nickname
  • additional-name-initial
  • additional-name
  • family-name
  • honorific-suffix

Mengizinkan nama internasional

Anda mungkin ingin memvalidasi input nama, atau membatasi karakter yang diizinkan untuk data nama. Namun, alfabet harus sefleksibel mungkin. Sangat tidak sopan jika nama Anda dikatakan "tidak valid".

Untuk validasi, hindari penggunaan ekspresi reguler yang hanya cocok dengan karakter Latin. Khusus Latin mengecualikan pengguna dengan nama atau alamat yang menyertakan karakter yang tidak ada dalam alfabet Latin. Izinkan pencocokan huruf Unicode—dan pastikan backend Anda mendukung Unicode dengan aman sebagai input dan output. Unicode dalam ekspresi reguler didukung dengan baik oleh browser modern.

Larangan
<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
<input pattern="[\w \-]+" ...>
Anjuran
<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>
Pencocokan huruf Unicode dibandingkan dengan pencocokan huruf khusus Latin.

Mengizinkan berbagai format alamat

Saat mendesain formulir alamat, perhatikan berbagai format alamat yang membingungkan, bahkan dalam satu negara. Berhati-hatilah agar tidak membuat asumsi tentang alamat "normal". (Lihat Keanehan Alamat Inggris Raya jika Anda tidak yakin!)

Membuat formulir alamat fleksibel

Jangan memaksa pengguna untuk mencoba memasukkan alamat mereka ke kolom formulir yang tidak sesuai.

Misalnya, jangan memaksakan nomor rumah dan nama jalan dalam input terpisah, karena banyak alamat tidak menggunakan format tersebut, dan data yang tidak lengkap dapat merusak isi otomatis browser.

Berhati-hatilah terutama dengan kolom alamat required. Misalnya, alamat di kota besar di Britania Raya tidak memiliki county, tetapi banyak situs masih memaksa pengguna untuk memasukkannya.

Menggunakan dua baris alamat yang fleksibel dapat berfungsi cukup baik untuk berbagai format alamat.

<input autocomplete="address-line-1" id="address-line1" ...>
<input autocomplete="address-line-2" id="address-line2" ...>

Tambahkan label yang cocok:

<label for="address-line-1">
Address line 1 (or company name)
</label>
<input autocomplete="address-line-1" id="address-line1" ...>

<label for="address-line-2">
Address line 2 (optional)
</label>
<input autocomplete="address-line-2" id="address-line2" ...>

Anda dapat mencobanya dengan me-remix dan mengedit demo yang disematkan di bawah.

Pertimbangkan untuk menggunakan satu textarea untuk alamat

Opsi yang paling fleksibel untuk alamat adalah memberikan satu textarea.

Pendekatan textarea cocok dengan format alamat apa pun, dan sangat cocok untuk memotong dan menempel—tetapi perlu diingat bahwa pendekatan ini mungkin tidak sesuai dengan persyaratan data Anda, dan pengguna mungkin kehilangan isi otomatis jika sebelumnya mereka hanya menggunakan formulir dengan address-line1 dan address-line2.

Untuk textarea, gunakan street-address sebagai nilai pelengkapan otomatis.

Berikut adalah contoh formulir yang menunjukkan penggunaan satu textarea untuk alamat:

Menglobalkan dan melokalkan formulir alamat

Sangat penting bagi formulir alamat untuk mempertimbangkan internasionalisasi dan pelokalan, bergantung pada lokasi pengguna Anda.

Perhatikan bahwa penamaan bagian alamat bervariasi serta format alamat, bahkan dalam bahasa yang sama.

    ZIP code: US
 Postal code: Canada
    Postcode: UK
     Eircode: Ireland
         PIN: India

Anda mungkin merasa kesal atau bingung jika disajikan dengan formulir yang tidak sesuai dengan alamat Anda atau tidak menggunakan kata-kata yang Anda harapkan.

Menyesuaikan formulir alamat untuk beberapa lokalitas mungkin diperlukan untuk situs Anda, tetapi menggunakan teknik untuk memaksimalkan fleksibilitas formulir (seperti yang dijelaskan di atas) mungkin sudah memadai. Jika Anda tidak melokalkan formulir alamat, pastikan untuk memahami prioritas utama untuk menangani berbagai format alamat: * Jangan terlalu spesifik tentang bagian alamat, seperti bersikeras menggunakan nama jalan atau nomor rumah. * Jika memungkinkan, hindari membuat kolom required. Misalnya, alamat di banyak negara tidak memiliki kode pos, dan alamat pedesaan mungkin tidak memiliki nama jalan. * Gunakan penamaan yang inklusif: 'Negara/wilayah', bukan 'Negara'; 'Kode pos/ZIP', bukan 'ZIP'.

Tetap fleksibel. Contoh formulir alamat sederhana di atas dapat disesuaikan agar berfungsi 'cukup baik' untuk banyak lokalitas.

Pertimbangkan untuk menghindari pencarian alamat kode pos

Beberapa situs menggunakan layanan untuk mencari alamat berdasarkan kode pos. Hal ini mungkin masuk akal untuk beberapa kasus penggunaan, tetapi Anda harus mengetahui potensi kekurangannya.

Saran alamat kode pos tidak berfungsi untuk semua negara—dan di beberapa wilayah, kode pos dapat menyertakan sejumlah besar alamat potensial.

Kode pos dapat mencakup banyak alamat.

Sulit bagi pengguna untuk memilih dari daftar panjang alamat—terutama di perangkat seluler jika mereka terburu-buru atau stres. Pengguna dapat memanfaatkan isi otomatis dengan lebih mudah dan lebih sedikit error, serta memasukkan alamat lengkap mereka yang diisi dengan sekali ketuk atau klik.

Input nama tunggal memungkinkan entri alamat sekali ketuk (sekali klik).

Menyederhanakan formulir pembayaran

Formulir pembayaran adalah satu-satunya bagian paling penting dari proses checkout. Desain formulir pembayaran yang buruk adalah penyebab umum pengabaian keranjang belanja. Iblis ada dalam detail: gangguan kecil dapat mendorong pengguna untuk membatalkan pembelian, terutama di perangkat seluler. Tugas Anda adalah mendesain formulir untuk memudahkan pengguna memasukkan data.

Membantu pengguna agar tidak perlu memasukkan ulang data pembayaran

Pastikan untuk menambahkan nilai autocomplete yang sesuai dalam formulir kartu pembayaran, termasuk nomor kartu pembayaran, nama di kartu, serta bulan dan tahun habis masa berlaku:

  • cc-number
  • cc-name
  • cc-exp-month
  • cc-exp-year

Hal ini memungkinkan browser membantu pengguna dengan menyimpan detail kartu pembayaran dengan aman dan memasukkan data formulir dengan benar. Tanpa pelengkapan otomatis, pengguna mungkin lebih cenderung menyimpan catatan fisik detail kartu pembayaran, atau menyimpan data kartu pembayaran dengan tidak aman di perangkat mereka.

Hindari penggunaan elemen kustom untuk tanggal kartu pembayaran

Jika tidak dirancang dengan benar, elemen kustom dapat mengganggu alur pembayaran dengan merusak isi otomatis, dan tidak akan berfungsi di browser lama. Jika semua detail kartu pembayaran lainnya tersedia dari pelengkapan otomatis, tetapi pengguna terpaksa menemukan kartu pembayaran fisik mereka untuk mencari tanggal habis masa berlaku karena isi otomatis tidak berfungsi untuk elemen kustom, Anda kemungkinan akan kehilangan penjualan. Sebagai gantinya, pertimbangkan untuk menggunakan elemen HTML standar, dan sesuaikan gayanya.

Screenshot formulir pembayaran yang menampilkan elemen kustom untuk tanggal habis masa berlaku kartu yang mengganggu isi otomatis.
Pelengkapan otomatis mengisi semua kolom—kecuali tanggal habis masa berlaku.

Menggunakan satu input untuk nomor kartu pembayaran dan telepon

Untuk kartu pembayaran dan nomor telepon, gunakan satu input: jangan pisahkan nomor menjadi beberapa bagian. Hal ini memudahkan pengguna untuk memasukkan data, menyederhanakan validasi, dan memungkinkan browser mengisi otomatis. Pertimbangkan untuk melakukan hal yang sama untuk data numerik lainnya seperti PIN dan kode bank.

Screenshot formulir pembayaran yang menampilkan kolom kartu kredit yang dibagi menjadi empat elemen input.
Jangan gunakan beberapa input untuk nomor kartu kredit.

Validasi dengan cermat

Anda harus memvalidasi entri data secara real time dan sebelum pengiriman formulir. Salah satu cara untuk melakukannya adalah dengan menambahkan atribut pattern ke input kartu pembayaran. Jika pengguna mencoba mengirimkan formulir pembayaran dengan nilai yang tidak valid, browser akan menampilkan pesan peringatan dan menetapkan fokus pada input. Tidak memerlukan JavaScript.

Namun, ekspresi reguler pattern Anda harus cukup fleksibel untuk menangani rentang panjang nomor kartu pembayaran: dari 14 digit (atau mungkin kurang) hingga 20 (atau lebih). Anda dapat mengetahui lebih lanjut struktur nomor kartu pembayaran dari LDAPwiki.

Izinkan pengguna menyertakan spasi saat mereka memasukkan nomor kartu pembayaran baru, karena ini adalah cara nomor ditampilkan di kartu fisik. Hal ini lebih mudah bagi pengguna (Anda tidak perlu memberi tahu mereka "mereka melakukan kesalahan"), lebih kecil kemungkinannya untuk mengganggu alur konversi, dan mudah untuk menghapus spasi dalam angka sebelum diproses.

Menguji di berbagai perangkat, platform, browser, dan versi

Sangat penting untuk menguji formulir alamat dan pembayaran di platform yang paling umum digunakan oleh pengguna Anda, karena fungsi dan tampilan elemen formulir dapat bervariasi, dan perbedaan ukuran area pandang dapat menyebabkan masalah dalam penentuan posisi. BrowserStack memungkinkan pengujian gratis untuk project open source di berbagai perangkat dan browser.

Screenshot formulir pembayaran, payment-form.glitch.me, di iPhone 7 dan 11. Tombol Selesaikan Pembayaran ditampilkan di iPhone 11, tetapi tidak di iPhone 7
Halaman yang sama di iPhone 7 dan iPhone 11.
Kurangi padding untuk tampilan seluler yang lebih kecil untuk memastikan tombol Selesaikan pembayaran tidak disembunyikan.

Menerapkan analisis dan RUM

Menguji kegunaan dan performa secara lokal dapat membantu, tetapi Anda memerlukan data dunia nyata untuk memahami dengan benar pengalaman pengguna saat menggunakan formulir pembayaran dan alamat Anda.

Untuk itu, Anda memerlukan analisis dan Real User Monitoring—data untuk pengalaman pengguna sebenarnya, seperti waktu yang diperlukan halaman checkout untuk dimuat atau waktu yang diperlukan untuk menyelesaikan pembayaran:

  • Analisis halaman: tayangan halaman, rasio pantulan, dan keluar untuk setiap halaman dengan formulir.
  • Analisis interaksi: funnel sasaran dan peristiwa menunjukkan tempat pengguna meninggalkan alur checkout dan tindakan yang mereka lakukan saat berinteraksi dengan formulir Anda.
  • Performa situs: metrik yang berfokus pada pengguna dapat memberi tahu Anda apakah halaman checkout Anda lambat dimuat dan, jika ya, apa penyebabnya.

Analisis halaman, analisis interaksi, dan pengukuran performa pengguna sebenarnya menjadi sangat berharga jika digabungkan dengan log server, data konversi, dan pengujian A/B, sehingga Anda dapat menjawab pertanyaan seperti apakah kode diskon meningkatkan pendapatan, atau apakah perubahan tata letak formulir meningkatkan konversi.

Hal ini pada akhirnya memberi Anda dasar yang kuat untuk memprioritaskan upaya, membuat perubahan, dan menghargai kesuksesan.

Terus belajar

Foto oleh @rupixen di Unsplash.