Praktik terbaik formulir pembayaran dan alamat

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

Sam Dutton

Formulir yang dirancang dengan baik akan membantu pengguna dan meningkatkan rasio konversi. Satu perbaikan kecil dapat membuat perbedaan 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 tersebut:

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

Elemen ini mengaktifkan fungsi browser bawaan, meningkatkan aksesibilitas, dan menambahkan makna pada markup Anda.

Menggunakan elemen HTML sebagaimana mestinya

Menempatkan formulir dalam <form>

Anda mungkin tergoda untuk tidak repot-repot menggabungkan elemen <input> dalam <form>, dan menangani pengiriman data sepenuhnya 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 memudahkan pembuatan fungsi dasar untuk browser lama dengan dukungan JavaScript terbatas, dan untuk mengaktifkan pengiriman formulir meskipun ada masalah dengan 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 masing-masing komponen dalam elemen <form>-nya sendiri. 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 nilai yang sama pada atribut for label dengan 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. Cara ini paling cocok untuk browser, dan paling cocok untuk pembaca layar. Ketukan atau klik pada label akan memindahkan fokus ke input yang terkait, dan pembaca layar akan mengumumkan teks label saat label atau input label mendapatkan fokus.

Membuat tombol yang 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 diberi gaya dengan mudah.

Beri setiap tombol kirim formulir nilai yang menjelaskan fungsinya. Untuk setiap langkah menuju checkout, gunakan pesan ajakan (CTA) deskriptif yang menunjukkan progres dan memperjelas langkah berikutnya. Misalnya, beri label pada tombol kirim di formulir alamat pengiriman Anda dengan Lanjutkan ke Pembayaran, bukan Lanjutkan atau Simpan.

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

const form = document.querySelector('form');
const submitButton = form.querySelector('button[type="submit"]');

form.addEventListener('submit', () => {
  submitButton.disabled = true;
  submitButton.textContent = 'Placing order…';
});

Di sisi lain, jangan nonaktifkan tombol kirim yang menunggu input pengguna yang lengkap dan valid. Misalnya, jangan biarkan tombol Simpan Alamat dinonaktifkan karena ada sesuatu 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 kepada mereka apa yang salah dan apa yang harus dilakukan untuk memperbaikinya. Hal ini sangat penting di perangkat seluler, karena entri data lebih sulit dan data formulir yang tidak ada atau tidak valid mungkin tidak terlihat di layar pengguna saat mereka mencoba mengirimkan formulir.

Memanfaatkan atribut HTML secara maksimal

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, cobalah untuk menghindari penggunaan elemen select kustom. Jika tidak diterapkan dengan benar, elemen ini akan merusak pengalaman isi otomatis dan tidak berfungsi di browser lama. Untuk angka seperti tahun lahir, pertimbangkan untuk menggunakan elemen input, bukan select, karena memasukkan digit secara manual dapat lebih mudah dan tidak rentan terhadap kesalahan daripada memilih dari menu drop-down yang panjang—terutama di perangkat seluler. Gunakan inputmode="numeric" untuk memastikan keyboard yang tepat di perangkat seluler dan tambahkan petunjuk validasi dan 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

Menggunakan nilai autocomplete yang sesuai memungkinkan browser membantu pengguna dengan menyimpan data secara 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) daripada 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-line1" ...>
<!-- Other fields omitted. -->
<input autocomplete="billing address-line1" ...>

Membantu pengguna memasukkan data yang tepat

Cobalah untuk tidak "memarahi" pelanggan karena mereka "melakukan kesalahan". Sebaliknya, 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 ke elemen formulir untuk menentukan nilai yang dapat diterima, termasuk min, max, dan pattern. Status validitas elemen ditetapkan secara otomatis bergantung pada apakah nilai elemen valid, seperti halnya class pseudo CSS :valid dan :invalid yang dapat digunakan untuk menata gaya elemen dengan nilai yang valid atau tidak valid.

Misalnya, HTML berikut menentukan input untuk tahun kelahiran antara 1900 dan 2020. Penggunaan type="number" membatasi nilai input hanya pada angka, dalam rentang yang ditentukan oleh min dan max. Jika Anda mencoba memasukkan angka di luar rentang, input akan ditetapkan ke status 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 pengiriman formulir, browser otomatis menetapkan fokus pada kolom yang bermasalah atau tidak memiliki nilai wajib diisi. Tidak perlu JavaScript.

Formulir login di Chrome di desktop yang menampilkan dialog browser dan fokus untuk nilai email yang tidak valid.
Validasi bawaan dasar oleh browser.

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 yang memiliki nilai tidak valid, serta tampilkan pesan inline di samping setiap kolom yang bermasalah yang menjelaskan hal 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 mengirimkan 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 selengkapnya di Validasi formulir sisi klien.

Membantu pengguna agar tidak melewatkan data yang diperlukan

Gunakan atribut required pada input untuk nilai wajib.

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

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

Menyederhanakan checkout

Perhatikan kesenjangan perdagangan seluler

Bayangkan pengguna Anda memiliki batas kelelahan. Jika Anda menghabiskannya, pengguna 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—fenomena yang dikenal sebagai kesenjangan perdagangan seluler. Pelanggan mungkin lebih suka menyelesaikan pembelian di desktop, tetapi rasio konversi seluler yang lebih rendah juga merupakan akibat dari pengalaman pengguna yang buruk. Tugas Anda adalah meminimalkan konversi yang hilang di perangkat seluler dan memaksimalkan konversi di desktop. Riset menunjukkan bahwa ada peluang besar untuk memberikan pengalaman formulir seluler yang lebih baik.

Yang terpenting, pengguna lebih cenderung meninggalkan formulir yang terlihat panjang, rumit, dan tidak memiliki arah yang jelas. Hal ini terutama berlaku saat pengguna menggunakan layar yang lebih kecil, terganggu, atau sedang terburu-buru. Minta data sesedikit mungkin.

Menjadikan checkout tanpa login sebagai default

Untuk toko online, cara termudah untuk mengurangi hambatan formulir adalah dengan menjadikan checkout tanpa login sebagai default. Jangan memaksa pengguna membuat akun sebelum melakukan pembelian. Tidak mengizinkan checkout tanpa login 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 tahap tersebut, 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 lebih sederhana dengan menampilkan progres dan memperjelas langkah berikutnya. Video berikut menunjukkan cara retailer Inggris Raya johnlewis.com mencapai hal ini.

Tampilkan progres checkout.

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

Beri tombol formulir nama yang bermakna yang 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 cara atribut input enterkeyhint mengubah ikon tombol enter.
Tombol Enter di Android: 'berikutnya' dan 'selesai'.

Atribut enterkeyhint didukung di Android dan iOS. Anda dapat mencari tahu lebih lanjut dari penjelasan enterkeyhint.

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

Menghapus objek mengganggu

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

Dua screenshot di perangkat seluler yang menampilkan progres checkout di 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 melakukan hal lain.

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 dengan mengikuti link.

Bagian 'Tinjau pesanan' di halaman checkout, yang menampilkan teks dalam teks biasa, dengan link untuk mengubah alamat pengiriman, metode pembayaran, dan alamat penagihan, yang tidak ditampilkan.
Sembunyikan data yang tidak perlu dilihat pelanggan.

Mempermudah memasukkan nama dan alamat

Hanya minta data yang Anda perlukan

Sebelum mulai membuat kode formulir nama dan alamat, pastikan Anda memahami data yang diperlukan. Jangan meminta data yang tidak Anda perlukan. Cara termudah untuk mengurangi kompleksitas formulir adalah dengan menghapus kolom yang tidak diperlukan. Hal ini juga baik untuk privasi pelanggan serta 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 kuat untuk menyimpan nama depan, nama keluarga, gelar, atau bagian nama lainnya secara terpisah. Penggunaan satu input nama membuat formulir tidak terlalu rumit, memungkinkan potong dan tempel, serta membuat isi otomatis lebih sederhana.

Khususnya, kecuali jika Anda memiliki alasan yang kuat untuk tidak melakukannya, jangan repot-repot menambahkan input terpisah untuk awalan atau gelar (seperti Ibu, Dr, atau Lord). Pengguna dapat mengetikkan nama mereka jika diinginkan. Selain itu, pelengkapan otomatis honorific-prefix saat ini tidak berfungsi di sebagian besar browser, sehingga menambahkan kolom untuk awalan nama atau gelar akan mengganggu 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 tepat 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, Anda harus sekreatif mungkin dengan alfabet. Tidak sopan jika nama Anda disebut "tidak valid".

Untuk validasi, hindari penggunaan ekspresi reguler yang hanya cocok dengan karakter Latin. Opsi Latin-only mengecualikan pengguna dengan nama atau alamat yang menyertakan karakter yang tidak ada dalam alfabet Latin. Sebagai gantinya, 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.

Memungkinkan berbagai format alamat

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

Membuat formulir alamat yang fleksibel

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

Misalnya, jangan bersikeras meminta 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 dengan kolom alamat required. Misalnya, alamat di kota besar di Inggris Raya tidak memiliki county, tetapi banyak situs masih memaksa pengguna untuk memasukkannya.

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

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

Tambahkan label yang cocok:

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

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

Pertimbangkan untuk menggunakan satu textarea untuk alamat

Opsi paling fleksibel untuk alamat adalah dengan memberikan satu textarea.

Pendekatan textarea cocok untuk format alamat apa pun, dan sangat bagus untuk memotong dan menempel—tetapi perlu diingat bahwa pendekatan ini mungkin tidak sesuai dengan persyaratan data Anda, dan pengguna mungkin melewatkan 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:

Menginternasionalisasi dan melokalkan formulir alamat

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

Perlu diketahui bahwa penamaan bagian alamat bervariasi, begitu juga dengan format alamat, bahkan dalam bahasa yang sama.

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

Melihat formulir yang tidak sesuai dengan alamat Anda atau yang tidak menggunakan kata-kata yang Anda harapkan dapat membuat Anda kesal atau bingung.

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 cukup. Jika Anda tidak melokalkan formulir alamat, pastikan untuk memahami prioritas utama untuk menangani berbagai format alamat:

  • Hindari terlalu spesifik tentang bagian alamat, seperti bersikeras pada nama jalan atau nomor rumah.
  • Jika memungkinkan, hindari membuat kolom required. Misalnya, alamat di banyak negara tidak memiliki kode pos, dan alamat di pedesaan mungkin tidak memiliki nama jalan.
  • Gunakan penamaan yang inklusif: 'Negara/wilayah', bukan 'Negara'; 'Kode pos', bukan 'ZIP'.

Buat 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 menyadari potensi kelemahannya.

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

Kode pos dapat mencakup banyak alamat.

Pengguna akan kesulitan memilih dari daftar alamat yang panjang, terutama di perangkat seluler jika mereka sedang terburu-buru atau stres. Akan lebih mudah dan tidak rentan terhadap error jika pengguna dapat memanfaatkan isi otomatis, dan memasukkan alamat lengkap mereka dengan sekali ketuk atau klik.

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

Menyederhanakan formulir pembayaran

Formulir pembayaran adalah bagian paling penting dalam proses checkout. Desain formulir pembayaran yang buruk adalah penyebab umum pengabaian keranjang belanja. Hal kecil bisa berdampak besar: masalah kecil dapat membuat pengguna 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 pada kartu, tanggal habis masa berlaku, dan kode keamanan:

  • cc-number
  • cc-name
  • cc-exp, atau cc-exp-month dan cc-exp-year untuk kolom terpisah
  • cc-csc

Hal ini memungkinkan browser membantu pengguna dengan menyimpan detail kartu pembayaran secara aman dan memasukkan data formulir dengan benar. Tanpa isi otomatis, pengguna mungkin lebih cenderung menyimpan catatan fisik detail kartu pembayaran, atau menyimpan data kartu pembayaran secara 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 mencari kartu pembayaran fisiknya untuk mencari tanggal habis masa berlaku karena isi otomatis tidak berfungsi untuk elemen kustom, Anda kemungkinan akan kehilangan penjualan. Sebaiknya gunakan elemen HTML standar, dan sesuaikan gayanya.

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 kartu pembayaran dan nomor telepon

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

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 perlu 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 mempelajari lebih lanjut struktur nomor kartu pembayaran dari LDAPwiki.

Izinkan pengguna menyertakan spasi saat memasukkan nomor kartu pembayaran baru, karena ini adalah cara nomor ditampilkan di kartu fisik. Hal ini lebih memudahkan pengguna (Anda tidak perlu memberi tahu mereka "bahwa mereka melakukan kesalahan"), cenderung tidak 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 bagi pengguna Anda, karena fungsi dan tampilan elemen formulir dapat bervariasi, dan perbedaan ukuran area pandang dapat menyebabkan pemosisian yang bermasalah. BrowserStack memungkinkan pengujian gratis untuk project open source di berbagai perangkat dan browser.

Formulir pembayaran 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 area pandang seluler yang lebih kecil guna memastikan tombol Selesaikan pembayaran tidak tersembunyi.

Menerapkan analisis dan RUM

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

Untuk itu, Anda memerlukan analisis dan Pemantauan Pengguna Nyata—data untuk pengalaman pengguna sebenarnya, seperti berapa lama waktu yang diperlukan untuk memuat halaman checkout atau berapa lama waktu yang diperlukan untuk menyelesaikan pembayaran:

  • Analisis halaman: tayangan halaman, rasio pantulan, dan keluar untuk setiap halaman yang memiliki 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 jika halaman checkout lambat dimuat dan, jika demikian, apa penyebabnya.

Analisis halaman, analisis interaksi, dan pengukuran performa pengguna sungguhan 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.

Dengan demikian, Anda akan memiliki dasar yang kuat untuk memprioritaskan upaya, melakukan perubahan, dan memberikan penghargaan atas keberhasilan.

Lanjut belajar

Foto oleh @rupixen di Unsplash.