it-swarm.asia

Membagi bidang nomor kartu kredit menjadi empat input berbeda

Saya sebelumnya telah menggunakan 4 bidang untuk nomor kartu kredit, memisahkan setiap set 4 angka untuk membuatnya lebih mudah untuk masuk.

Saya sekarang berpikir untuk memiliki satu bidang, yang menyisipkan spasi setelah setiap rangkaian angka sebagai gantinya:

single field with spaces between groups of four digits, and old field with four separate boxes

Untuk bidang dengan 4 bidang, kursor melompat ke bidang berikutnya secara otomatis.

Format mana yang lebih disukai? Atau adakah alternatif lain yang lebih baik?

Saya hanya menerima Visa, Mastercard, dan Discovery, dengan 16 dan 17 digit.

114
Source

Saya biasanya akan selalu memilih solusi yang paling sederhana. Dalam hal ini, satu bidang tunggal untuk diketik pengguna .

Dengan bidang yang dibagi, seperti kotak 4 yang Anda usulkan, ia menambahkan beban kognitif ekstra kepada pengguna.

  • "Apakah saya perlu melompat secara manual ke setiap bidang?"
  • "Apakah sistem akan melakukannya untukku?"
  • "Bagaimana jika saya menekan tab sendiri tetapi form secara otomatis melompat - apakah ia akan melompat ke bidang ke-3 sebagai gantinya ...?"

Semua pertanyaan tambahan ini - mungkin secara tidak sadar, mungkin lebih terdepan dalam pikiran mereka - bukanlah pertanyaan yang bahkan akan dipertimbangkan dalam bentuk bidang tunggal.

Tentu, opsi 4-bidang membantu keterbacaan - jadi jika pengguna salah memasukkan nomor mereka, lebih mudah bagi mereka untuk membaca kembali entri mereka untuk melihat area apa yang mereka lakukan salah. Tapi ini masih bisa dimitigasi dalam satu bidang. Seperti yang Anda tunjukkan di atas, Anda dapat membuat input pengguna dengan spasi di bidang tunggal.

Pertimbangan lain adalah pengguna seluler . Meskipun mungkin sederhana di desktop, ponsel memiliki keyboard yang harus dibuka dan ditutup saat masuk lapangan. Perangkat yang berbeda dan OS berperilaku berbeda, tetapi sangat mungkin bahwa pada lompatan dari bidang 1 ke bidang 2 keyboard akan autoclose dan autoopen, menyebabkan flash yang menggelegar di layar, dengan pengguna mungkin mencoba mengklik digit ke-5 begitu keyboard ditutup. , dengan demikian memindahkan kursor ke area lain dari layar sama sekali, atau hanya kehilangan digit dari entri sama sekali.

Masalah seluler ini diilustrasikan dengan baik di Baymard blog , di mana mereka juga menunjukkan bahwa pengguna seluler cenderung menekan secara manual ke setiap bidang - sesuatu yang tidak sering dilakukan pengguna desktop.

Proposal Anda adalah ide yang bagus, tapi saya pikir itu masuk dalam kategori 'overengineering'. Kecuali Anda memperhatikan kesalahan input pengguna yang signifikan pada satu bidang, saya tidak berpikir Anda perlu memperkenalkan alternatif. Anda bisa berisiko mengurangi kegunaan daripada meningkatkannya.

246
JonW

Jawaban ini dan jawaban ini mencakup beberapa poin dengan baik tetapi karena alasan tertentu tidak ada yang membahas dukungan pengisian otomatis.

Jangan gunakan 4 bidang terpisah.

  • Pertama, itu menjengkelkan, banyak alasan itu tercakup dalam jawaban lain.
  • Juga, nomor CC bukan empat angka 4-digit, ini nomor tunggal. Beberapa kartu kredit bahkan tidak memiliki kelompok empat, dalam hal ini masukan empat bidang Anda bahkan tidak masuk akal, misalnya:

    enter image description here

  • Yang sebenarnya ingin saya tambahkan adalah beberapa browser memberikan opsi untuk mengisi info kartu kredit untuk Anda. Chrome, misalnya memiliki fungsi ini, dan Safari di iOS 8 akan secara otomatis menambahkan tombol "pindai kartu kredit" yang diaktifkan kamera ke bidang ini jika Anda membuatnya dengan benar (lihat artikel itu). Dan bidang nyata "sempurna" dari perspektif UX adalah bidang tunggal dengan nama bidang yang sesuai (seperti "Nomor Kartu Kredit") dan atribut pemicu khusus browser yang sesuai (seperti autocomplete="cc-number" dan id="cc_number").

Jangan mencoba menemukan metode input "nyaman" Anda sendiri untuk ini. Tetap berpegang pada metode input nomor kartu kredit standar yang sama yang sudah biasa digunakan (bidang tunggal, nama dan atribut yang sesuai), karena pengembang browser sudah sudah melakukan upaya untuk meningkatkan UX bidang semacam ini, sehingga Anda membiarkannya ditangani di sisi browser dan memberikan pengguna sesuatu yang mereka kenal alih-alih sesuatu yang tidak nyaman yang juga menjalankan risiko melanggar semua fitur Nice yang biasanya diberikan browser favorit mereka.

143
Jason C

Sebagai seseorang yang kebetulan menggunakan kartu kredit virtual, saya sangat mendukung satu bidang. Setiap kali saya ingin membayar, ada nomor kartu baru yang dihasilkan untuk saya oleh aplikasi perbankan, dan itu sangat membosankan harus menyalin-menempel empat kali, bukan satu. Saya berasumsi di sini bahwa formulir Anda tidak akan mengisi 4 bidang jika saya menempelkan 16 digit di yang pertama. Akankah itu?

Juga, saya telah melihat beberapa desain 4-bidang yang sangat sulit digunakan. Terkadang menekan Backspace diminta untuk kembali ke bidang dengan kesalahan ketik, dalam kasus lain Shift+Tab diperlukan. Terkadang bidang yang Anda lompati memiliki teksnya dipilih atau dihapus, jadi pada dasarnya tidak mungkin untuk memprediksi bagaimana perilaku akan berperilaku tanpa mengamatinya setelah setiap tombol ditekan.

Beri saya satu bidang tempat saya bisa menempelkan nomor kartu, dan biarkan saya gunakan Backspace untuk memperbaiki kesalahan ketik apa pun jika saya mengetik nomor secara manual. Di Sini Sesuatu yang terlihat dapat diterima:

$('#test_form').on('keyup', function(e){
    var val = $(this).val();
    var newval = '';
    val = val.replace(/\s/g, '');
    for(var i=0; i < val.length; i++) {
        if(i%4 == 0 && i > 0) newval = newval.concat(' ');
        newval = newval.concat(val[i]);
    }
    $(this).val(newval);
})  
66

Solusi paling sederhana, jika bukan yang terbaik, solusi adalah bidang kartu kredit tunggal yang memungkinkan pengguna memasukkan string angka apa pun dan spasi. Itu harus sepele untuk logika sisi-server untuk menghapus spasi dari string yang dikirimkan sebelum memeriksa apakah string digit yang dihasilkan adalah atau bukan nomor kartu kredit yang valid. Jika pengguna memilih untuk memasukkan spasi awal atau akhir atau untuk mematahkan angka di tempat yang berbeda dengan apa yang ada di kartu, lalu apa?

Secara otomatis memasukkan ruang untuk pengguna mungkin sedikit lebih ramah pengguna tetapi lebih banyak pekerjaan.

Beberapa bidang dengan tab otomatis dari satu ke yang berikutnya adalah OK, tetapi jika Anda mengambil kartu selain Mastercard/Visa maka banyak pekerjaan untuk menyesuaikan panjang bidang untuk jenis kartu (misalnya 4,6,5,0 untuk Amex) on the fly (yaitu dalam skrip sisi browser). Di situs web perusahaan kartu yang menurut definisi hanya pernah mengambil satu jenis kartu, jelas dan mudah. [Sunting: Oke-ish. Jawaban lain menunjukkan mengapa ini merupakan kerugian bagi sebagian pengguna]

Menolak untuk membiarkan pengguna memasukkan spasi adalah permusuhan dari pengguna. Mengizinkan pengguna untuk memasukkan spasi dan kemudian menolak nomor kartu (yang benar!) Sebagai tidak valid setelah pengiriman benar-benar menjijikkan, sejauh saya dapat menolak pengecer kebiasaan saya pada saat itu dan alih-alih membeli dari siapa pun yang sebelumnya pilihan kedua saya.

22
nigel222

Luke Wroblewski, seorang ahli UX dengan wawasan hebat dalam membangun formulir yang efisien, menjawab pertanyaan ini: gunakan bidang input numerik tunggal (di sini video cara kerjanya ).

Seperti yang dapat Anda lihat dalam video di atas dari demo Zachary, bidang input tunggal digunakan untuk mengambil nomor kartu kredit terlebih dahulu. Jika nomor kartu kredit tidak valid, sebuah kesalahan ditampilkan yang mencegah pengguna untuk bergerak maju. Jika nomor kartu kredit valid, ikon kartu kredit generik berubah untuk mencerminkan jenis kartu yang dimasukkan. Ini menghilangkan kebutuhan untuk drop-down atau pemilih kartu kredit yang terpisah dan meyakinkan seseorang bahwa entri mereka telah dipahami.

Setelah nomor kartu kredit divalidasi, slide ke kiri hanya menyisakan empat digit tambahan untuk referensi dan set input berikutnya muncul di mask: tanggal kedaluwarsa, kode CVV (keamanan), dan kode Zip. Karena ini semua input numerik, satu set soft key 0-9 adalah semua yang diperlukan untuk membuat orang terus bergerak di atas keyboard.

Karena tanggal kedaluwarsa pada kartu kredit tidak bisa di masa lalu atau jauh di masa depan, masker input sekali lagi membantu menjauhkan orang dari kesalahan. Bulan atau tahun tidak valid tidak akan diterima. Setelah tanggal kedaluwarsa yang valid telah ditambahkan, desain Square menampilkan peningkatan luar biasa lainnya. Ikon kartu kredit berubah untuk mengungkapkan di mana kode CVV terletak pada kartu tertentu yang digunakan untuk membayar. Detail kecil ini membantu memberi petunjuk kepada orang-orang mengenai informasi apa yang diperlukan selanjutnya.

Karena CVV dan Zip juga merupakan entri numerik, tidak ada alasan untuk meninggalkan dial-pad selama proses input pembayaran: tidak perlu berpindah antara beberapa kolom formulir. Zachary juga memastikan bahwa orang dapat menggunakan keyboard (tab dan shift-tab) dan mouse untuk berpindah di antara berbagai bagian dari masker input pembayaran ini.

8
David Regev

Harap ikuti saran orang lain dan jangan berusaha menemukan kembali kemudi. Tidak kecuali Anda telah membaca dan memahami standar ISO ISO/IEC 7812 yang mengatur nomor kartu Pembayaran, yang, dengan cara, berkisar antara 13 hingga 19 digit dan biasanya (tetapi tidak selalu - baca spesifikasi) termasuk digit periksa yang dapat Anda gunakan untuk memvalidasi input.
Memasukkan spasi di mana tidak ada hampir selalu merupakan ide yang buruk. Pikirkan semua kemungkinan kombinasi yang harus Anda tangani; diisi otomatis, digunakan untuk mengisi pengisian otomatis. Disisipkan tanpa spasi, disisipkan dengan spasi, dipotong untuk digunakan di tempat lain (haruskah pemotongan menyertakan spasi?), Diketik, diedit, dan pada akhirnya, masalah apa yang Anda coba selesaikan?

5
Paul Smith

Saya pikir Card.js adalah pengalaman pengguna favorit saya dalam hal menambahkan kartu. Tidak hanya memungkinkan Anda mengetik dengan sangat cepat (bidang tunggal dll.), Mereka juga menunjukkan di mana bidang tersebut ada di kartu khusus Anda sehingga Anda tidak perlu bertanya-tanya di mana tanggal kedaluwarsa atau CVV. Saya sarankan Anda memeriksanya.

4
Mariusz Ciesla

Poin tambahan kecil yang saya tidak percaya dibahas di tempat lain: Satu kotak lebih mudah diakses, terutama pada sistem tanpa seperangkat alat aksesibilitas lengkap:

  • Itu menskala jika jendela diperbesar (hanya memperbesar jendela browser masih meninggalkan kursor garis tipis yang sulit ditemukan - satu piksel jika saya uji pada halaman ini di firefox/windows)
  • Tabing antar bidang berperilaku wajar (jangan lupa shift-tab).

  • Ini mungkin tidak benar lagi, tetapi beberapa pembaca layar dulu berjuang dengan kotak input tidak berlabel - ini mungkin masih menjadi kasus untuk teknologi input ucapan, tapi saya belum menggunakannya.

Saya tidak mengatakan Anda tidak bisa membuat input yang dapat diakses (dan sesuai standar) dengan kotak terpisah, tetapi satu kotak lebih mudah bagi Anda dan pengguna yang membutuhkan (atau ingin) antarmuka atipikal.

0
Chris H

Tolong, karena cinta Tuhan jangan lakukan pilihan kedua.

satu kelemahan UX BESAR adalah (yang dilakukan sebagian besar situs saat menerapkan ini rana) Anda tidak dapat kembali mengedit angka sebelumnya, karena itu otomatis memaksa Anda untuk pergi ke bidang berikutnya sejak Anda mengisi keluar data.

Jangan lupa bahwa membuat beberapa bidang membuatnya seolah-olah Anda mengisi bit informasi yang berbeda. Dalam desain Anda, itu membuatnya tampak seperti bidang terakhir yang berpotensi untuk "kode keamanan".

Membuatnya menjadi satu bidang menyiratkan satu bilangan angka (tapi tolong lakukan apa yang Anda lakukan dalam opsi satu: indentasi karena itu menunjukkan format yang sama persis seperti kartu Anda).

Saat mengisi rincian kartu kredit, Anda ingin mendekati apa desain kartu fisik yang sebenarnya karena pengguna kemudian dapat memindai kartu dan mencari untuk menambahkan informasi yang baru saja mereka pindai. Mengacak-acak apapun akan menyebabkan kebingungan dan frustrasi (dari pengalaman saya bekerja di dunia e-commerce selama bertahun-tahun).

0
Majo0od