Atribut HTML berpotensi bernilai $ 4.4M untuk Chipotle

Baru-baru ini saya mendapati diri saya berlomba untuk mengisi formulir pemesanan online Chipotle sebelum ibu saya dapat menemukan kartu kreditnya. Dalam prosesnya, saya menemukan bug yang dapat menghabiskan biaya Chipotle $ 4,4 juta per tahu.

Orang tua saya sudah pensiun. Mereka terus berusaha membayar makanan. Saya tidak ingin mereka begitu. Jadi, kita sering berakhir dalam kompetisi untuk melihat siapa yang dapat membayar lebih dulu.

Dalam hal ini, saya tahu saya memiliki keuntungan. Detail kartu saya sudah tersimpan di browser. Saya hanya perlu menggunakan pengisian otomatis untuk mengisi formulir dengan cepat dan menyelesaikan pesanan sebelum ibu saya dapat menemukan kartu namanya.

Sayangnya, formulir tersebut mengembalikan kesalahan setelah pengiriman:

:

Formulir pemesanan Chipotle menampilkan dua kesalahan bersama dengan teks yang mengatakan 'Ubah Metode Pembayaran.'

Pada saat itu, saya masih berpacu dengan naluri orang tua ibu saya, jadi saya dengan cepat menyalin informasi kartu saya dari 1Password dan menyelesaikan transaksi.

Kemudian, saya bertanya-tanya apakah ini merupakan masalah dengan pengisian otomatis. Saya sudah banyak menulis tentang isi-otomatis di masa lalu, dan jika ada masalah dengan isi-otomatis, saya ingin mengetahuinya.

Pesan kesalahan samar Chipotle

Pesan kesalahan Chipotle tidak memberi saya banyak informasi. Kesalahan pertama mengatakan:

Kami mengalami kesalahan saat menyimpan kartu Anda. Silakan periksa info kartu Anda dan coba lagi.

Apa? Saya tidak meminta Chipotle untuk menyimpan kartu saya. Saya sengaja membiarkan kotak itu tidak dicentang.

Meskipun ini menjengkelkan, dugaan saya adalah bahwa kesalahan ini tidak menyebabkan masalah. Saya mendapat kesalahan yang sama jika saya mencentang kotak. Saya menduga kesalahan kedua adalah apa yang mencegah saya membeli makan siang.

Sayangnya, kesalahan kedua tidak memberikan informasi yang berguna:

Kami mengalami kesalahan saat mengirimkan pesanan Anda, silakan coba lagi.

Setiap kali saya mengisi formulir secara otomatis dan mengirimkannya, saya mendapatkan dua kesalahan yang sama. Jika saya tidak menggunakan pengisian otomatis, formulir berfungsi.

Lalu saya perhatikan sesuatu. Tanggal kedaluwarsa kartu kredit berubah setelah diisi.

Ada pelakunya. Kartu kredit saya kedaluwarsa pada 2023. Field hanya menerima dua digit dan alih-alih 23 untuk mewakili 2023, formulir menerima 20.

Sekarang saya bisa meniru masalahnya, saya ingin mencari tahu mengapa itu terjadi. Apakah ada masalah dengan pengisian otomatis atau dengan bentuk Chipotle?

Saatnya mengenakan topi detektif saya

Saya menikmati mencari tahu mengapa browser tidak berfungsi seperti yang kita harapkan. Ini seperti novel misteri yang bagus, tetapi yang harus Anda pecahkan. Dalam hal ini, petunjuk pertama yang saya periksa adalah HTML untuk bidang tahun kedaluwarsa:

<input 
    class="form-control payment-control ng-pristine ng-isolate-scope ng-valid-mask ng-empty ng-invalid ng-invalid-required ng-touched" 
    aria-label="expiration year" 
    cmg-cc-expiration-validator="cmg-cc-expiration-validator" 
    cmg-cc-expiration-validator-func="$ctrl.isCardExpired($ctrl.card.expiration)" 
    ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }" 
    id="expirationDateYear" 
    name="expdateyear" 
    ng-required="true" 
    ng-model="$ctrl.card.expiration.year" 
    placeholder="YY" 
    autocomplete="cc-exp-year" 
    ui-mask="99" 
    type="text" 
    required="required" 
    aria-invalid="true" 
    style="">

Banyak kelas dimulai dengan ng-. Ini adalah pertanda Angular .

Selanjutnya, saya menggali dalam JavaScript Chipotle untuk mencari sesuatu yang merujuk cmg-cc-expiration-validatoryang sepertinya merupakan atribut kunci untuk validasi pada bidang ini. Saya menemukan apa yang saya cari dalam file JS aplikasi Chipotle . Saya telah menarik bagian yang relevan menjadi inti untuk referensi jika Chipotle berubah dalam JavaScript mereka di masa depan.

Di antara 400 baris atau lebih di bagian validasi, referensi ini menonjol bagi saya:

angular.module('ui.mask', []).value('uiMaskConfig', {

Modul sudut yang menutupi UI? Pencarian cepat menemukan repo github untuk ui-mask . Kode JavaScript Chipotle yang saya temukan sebelumnya tampaknya memanfaatkan modul ini.

Apa yang ui-mask lakukan untuk bidang kedaluwarsa?

Setelah menemukan modul ui-mask, salah satu atribut bidang input yang saya abaikan sebelumnya tiba-tiba mengalami peningkatan signifikansi:

ui-mask="99"

Dokumentasi ui-mask memberikan contoh ini:

Misalnya, kami gunakan di '9'sini untuk menerima nilai numerik apa pun untuk nomor telepon:ui-mask="(999) 999-9999"

Jadi ui-mask="99"pada bidang tahun kedaluwarsa memberitahu modul ui-mask untuk hanya menerima dua nilai numerik. Ketika isi ulang otomatis mencoba masuk 2023, topeng ui ini hanya memungkinkan dua karakter pertama dimasukkan.

Alternatif standar web

Saya yakin ada alasan bagus mengapa Chipotle menggunakan modul ui-mask. Saya tidak ingin terdengar seperti saya mempertanyakan keputusan mereka. Saya menduga bahwa modul ini berguna untuk berbagai bidang dan melayani tujuan lain di situs.

Namun, untuk bidang tahun kedaluwarsa ini, kami dapat melakukan hal yang sama menggunakan dua atribut HTML5 standar:

pattern="\d\d"
maxlength="2"

Atribut pola menggunakan ekspresi reguler untuk memvalidasi bahwa input pengguna cocok dengan yang kami harapkan. Dalam hal ini, \dberi tahu browser kami ingin karakter digit. Dengan memasok \ddua kali, kami memberi tahu browser bahwa kami ingin dua digit sehingga 01akan diterima, tetapi 1tidak. 1

The maxlengthatribut memberitahu browser berapa banyak karakter yang diperbolehkan dan akan mencegah pengguna dari mengetik lebih dari jumlah yang ditentukan.

Memperbaiki pengisian otomatis

Untuk menguji apa yang akan terjadi jika formulir Chipotle menggunakan standar ini, saya membuka alat pengembang browser saya dan mengedit bidang tahun kedaluwarsa:

Menambahkan maxlengthatribut ke bidang memperbaiki masalah. Ini masuk akal. Kami memberi tahu browser, dan dengan ekstensi fitur isiOtomatis, berapa digit yang harus digunakan untuk tahun kedaluwarsa.

IsiOtomatis cukup pintar untuk mengetahui bahwa jika kita hanya ingin dua digit untuk satu tahun, maka formulir tersebut memerlukan dua digit terakhir tahun ini. Kami hanya perlu memberi tahu browser berapa digit yang kami harapkan.

Dan kita perlu mengatakannya dengan cara standar .

Apa dampaknya terhadap bisnis Chipotle?

Sekarang setelah misteri itu terpecahkan, saya bertanya-tanya berapa banyak masalah ini yang mungkin merugikan Chipotle. Pertama kali saya menemukan kesalahan ini — jauh sebelum kartu kredit berpacu dengan ibu saya — saya pikir situs web Chipotle rusak. Saya menyerah mencoba memesan secara online.

Berapa banyak orang yang gagal menyelesaikan pesanan karena formulir tidak mendukung pengisian otomatis dan pesan kesalahan tidak membantu?

Kita tahu bahwa ketika orang-orang menggunakan isi-otomatis, mereka mengisi formulir 30% lebih cepat , tetapi kita tidak tahu berapa banyak orang yang menggunakan isi-otomatis secara keseluruhan.

Jadi karena kita tidak tahu berapa banyak orang yang menggunakan pengisian otomatis, mari gunakan angka konservatif.

Bagaimana jika Chipotle dapat memperoleh peningkatan setengah poin persentase dalam transaksi dari memperbaiki pengisian otomatis?

Bisakah kita menghitung berapa banyak pendapatan yang mungkin dilihat Chipotle dari peningkatan setengah poin persentase dalam transaksi? Kita mungkin bisa.

Dalam laporan triwulanan April 2019 mereka, Chipotle mengungkapkan bahwa "situs web yang diluncurkan perusahaan menarik rata-rata 1 juta transaksi per minggu" . Pada tahun 2018, Chipotle mengatakan bahwa pesanan online rata-rata mereka adalah “$ 16 hingga $ 17.”

Saya akan menggunakan ujung atas kisaran itu ($ 17) untuk pesanan online rata-rata karena rata-rata itu lebih dari satu tahun dan pada bulan Juli tahun ini, Chipotle melaporkan bahwa "penjualan online hampir dua kali lipat pada kuartal kedua" dan " cek rata-rata melonjak 3,5%. "

Berdasarkan informasi dalam laporan pendapatan terbaru, menggunakan $ 17 untuk rata-rata per pesanan online dan 1 juta transaksi per minggu mungkin rendah. Itu sempurna untuk upaya kami membuat estimasi konservatif.

Berapa maxlength="2"nilainya?

Mari kita berhitung:

   1,000,000  Online transactions per week
*       .005  Half a percentage point
=      5,000  Equals 5k transactions per week
*        $17  Times average online order in 2018
=    $85,000  Equals $85k per week
*         52  Multiplied by the weeks in a year
= $4,420,000  for maxlength="2"

Jika memperbaiki pengisian otomatis menyebabkan setengah dari persentase poin dalam pesanan online, itu akan meningkatkan pendapatan Chipotle sebesar $ 4,4 juta .

Tetapi mungkin setengah dari persentase poin terlalu tinggi. Mari kita gunakan seperempat poin persentase sebagai gantinya. Itu masih $ 2,2 juta.

Saya tidak yakin seberapa rendah Anda harus pergi sebelum menambahkan maxlengthatribut tidak akan sia-sia.

Pelajaran untuk formulir web Anda

Ada tiga takeaways kunci dari formulir pemesanan Chipotle yang harus Anda pertimbangkan:

1. Gunakan fitur input HTML5

Pilih jenis input yang benar untuk bidang Anda. Penggunaan input lainnya atribut seperti , , dan untuk memberikan petunjuk tambahan untuk browser tentang informasi apa mengharapkan lapangan. maxlengthminlengthpattern

2. Mendukung pengisian otomatis

Tambahkan autocompleteatribut dengan token yang sesuai untuk memberi tahu otomatis isi tujuan bidang tersebut. Ini sekarang cara standar untuk mendukung pengisian otomatis.

3. Jadikan isi ulang otomatis bagian dari rencana pengujian Anda

Setelah formulir Anda berfungsi dengan IsiOtomatis, pastikan itu terus berfungsi dengan memasukkan IsiOtomatis dalam proses QA Anda. Ini akan membantu Anda mengidentifikasi masalah seperti yang ada pada formulir Chipotle sebelum mereka berdampak pada pengguna.

---

PS Chipotle, jika ini membantu, bolehkah saya menyarankan Anda membeli makan siang orang tua saya nanti? 🙂

PPS Oh, dan jika Anda menghasilkan $ 4,4 juta dari artikel ini, Anda harus mempekerjakan kami untuk membantu Anda dengan aplikasi web progresif dan API permintaan pembayaran.

---

1. Awalnya saya menyarankan untuk mengubah jenis bidang dari textmenjadi numberuntuk memaksa nilai numerik. Namun, Amier menunjukkan dalam komentar yang numbertidak menerimamaxlength . Sebaliknya, numbermengharapkan Anda untuk menggunakan mindan maxuntuk menetapkan nilai minimum dan maksimum. Saya melakukan beberapa pengujian dan menemukan bahwa menggunakan nilai-nilai itu tidak menyelesaikan masalah autofill. Tidak apa-apa. Kami 01tidak menginginkan 1untuk tahun kedaluwarsa yang berarti kami sebenarnya meminta dua digit, bukan angka. Oleh karena itu, lebih masuk akal untuk jenis input yang akan ditetapkan textdan menggunakan patternatribut untuk membatasi input ke digit. 

Share this post