كيفية تحسين تجربة المستخدم الخاصة بنموذج الفوترة في يوم واحد

صفحة الخروج هي آخر صفحة يزورها المستخدم قبل أن يقرر أخيرًا إتمام عملية شراء على موقع الويب الخاص بك. إنه المكان الذي يتحول فيه المتسوقون عبر النوافذ إلى عملاء يدفعون. إذا كنت ترغب في ترك انطباع جيد ، يجب عليك توفير الاستخدام الأمثل لنموذج الفواتير وتحسينه حيثما كان ذلك ممكنًا.

في أقل من يوم واحد ، يمكنك إضافة بعض الميزات البسيطة والمفيدة لمشروعك لجعل نموذج الفواتير الخاص بك سهل الاستخدام وسهل التعبئة. يتوفر عرض توضيحي بجميع الوظائف المذكورة أدناه. يمكنك العثور على الكود الخاص به في مستودع GitHub.

مزيد من القراءة على SmashingMag:

• تقليل عربات التسوق المتروكة في التجارة الإلكترونية
• التحقق من صحة حقل النموذج: نهج الأخطاء فقط
• المبادئ التوجيهية الأساسية لتصميم الخروج التجارة الإلكترونية
• دليل شامل لقابلية استخدام نموذج الويب

تعد تفاصيل بطاقة الائتمان من بين الحقول الأكثر شيوعًا التي يتم تصحيحها في النماذج. لحسن الحظ ، يتمتع كل متصفح شائع في الوقت الحاضر بميزة الملء التلقائي ، مما يسمح للمستخدمين بتخزين بيانات بطاقتهم في المتصفح وملء حقول النموذج بسرعة أكبر. أيضًا ، منذ iOS 8 ، يمكن لمستخدمي Safari على الأجهزة المحمولة مسح معلومات بطاقتهم باستخدام كاميرا iPhone وملء رقم بطاقتهم وتاريخ انتهاء الصلاحية وحقول الاسم تلقائيًا. الإكمال التلقائي بسيط وواضح ومضمّن في HTML5 ، لذلك سنضيفه إلى نموذجنا أولاً.

يعمل كل من الملء التلقائي ومسح البطاقة فقط مع النماذج التي لها سمات خاصة: autocomplete للمتصفحات الحديثة (المدرجة في معيار HTML5) name المتصفحات التي لا تدعم HTML5.

ملاحظة : يتوفر عرض توضيحي بجميع الوظائف المذكورة أدناه. يمكنك العثور على الكود الخاص به في مستودع GitHub .

بطاقات الائتمان لها سمات معينة للملء التلقائي. autocomplete :

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

name :

• ccname
• cardnumber
• cvc
• ccmonth
• ccyear
• expdate
• card-type
• cvc
  

لاستخدام الملء التلقائي ، يجب إضافة سمات autocomplete name ذات الصلة لعناصر الإدخال في ملف index.html :

 <input type="text" class="card__input card__input_number" placeholder="XXXX XXXX XXXX XXXX" pattern="[0-9]{14,23}" required autofocus autocomplete="cc-number" name="cardnumber"> <input type="text" class="card__input card__input_date card__input_month" placeholder="MM" pattern="[0-9]{1,2}" required autocomplete="cc-exp-month" name="ccmonth"> <input type="text" class="card__input card__input_date card__input_year" placeholder="YYYY" pattern="[0-9]{2,4}" required autocomplete="cc-exp-year" name="ccyear"> <input type="text" class="card__input card__input_cardholder" placeholder="CARDHOLDER NAME" required autocomplete="cc-name" name="ccname">

لا تنس استخدام placeholder في حقول الإدخال لمساعدة المستخدمين على فهم تنسيقات البيانات المطلوبة. يمكننا توفير التحقق من صحة الإدخال بسمات HTML5: pattern (بناءً على تعبيرات JavaScript العادية) required . على سبيل المثال ، مع سمات pattern=”[0-9\s]{14,23}” required في أحد الحقول ، لن يتمكن المستخدم من إرسال النموذج إذا كان الحقل فارغًا ، أو يحتوي على غير رقمي أو غير - رمز مسافة ، أو أقصر من 14 رمزًا أو أطول من 23 رمزًا.

بمجرد قيام المستخدم بحفظ بيانات بطاقته في المتصفح ، يمكننا أن نرى كيف يعمل:

لاحظ أن استخدام حقل واحد لتاريخ انتهاء الصلاحية ( MM/YYYY ) غير مستحسن لأن Safari يتطلب حقلي شهر وسنة منفصلين للإكمال التلقائي.

بالطبع ، تُستخدم سمات الإكمال التلقائي والملء التلقائي على نطاق واسع ليس فقط لنماذج الفوترة ولكن أيضًا للأسماء والبريد الإلكتروني والعناوين البريدية وكلمات المرور. يمكنك توفير وقت المستخدم وجعله أكثر سعادة من خلال استخدام هذه السمات بشكل صحيح في النماذج الخاصة بك.

على الرغم من أن لدينا الآن ميزة الإكمال التلقائي و Google Payments و Apple Wallet ، لا يزال العديد من المستخدمين يفضلون إدخال تفاصيل بطاقة الائتمان الخاصة بهم يدويًا ، ولا أحد في مأمن من ارتكاب خطأ إملائي برقم مكون من 16 رقمًا. يصعب قراءة الأرقام الطويلة ، بل إن كتابتها أكثر إيلامًا ويكاد يكون من المستحيل التحقق منها.

لمساعدة المستخدمين على الشعور بالراحة مع رقم بطاقتهم الطويلة ، يمكننا تقسيمها إلى مجموعات مكونة من أربعة أرقام عن طريق إضافة مكتبة VanillaMasker البسيطة بواسطة BankFacil إلى مشروعنا. سيتم تحويل البيانات المدخلة إلى سلسلة مقنعة. لذلك ، يمكننا إضافة نمط مخصص به مسافات بعد كل رقم رابع من رقم البطاقة ، ونمط مكون من رقمين لشهر انتهاء الصلاحية ونمط مكون من أربعة أرقام لسنة انتهاء الصلاحية. يمكن لـ VanillaMasker أيضًا التحقق من تنسيقات البيانات: إذا مررنا "9" فقط (الرقم الافتراضي للناقي) إلى المعرف ، فسيتم حذف جميع الأحرف غير الرقمية بعد الإدخال.

 npm install vanilla-masker --save

في ملف index.js الخاص بنا ، دعنا نستورد المكتبة ونستخدمها بسلسلة واحدة لكل حقل:

 import masker from 'vanilla-masker'; const cardNumber = document.getElementById('card__input_number'); const cardMonth = document.getElementById('card__input_month'); const cardYear = document.getElementById('card__input_year'); masker(cardNumber).maskPattern('9999 9999 9999 9999 99'); masker(cardMonth).maskPattern('99'); masker(cardYear).maskPattern('9999');

وبالتالي ، سيتم فصل أرقام رقم البطاقة في نموذجنا ، كما هو الحال في بطاقة حقيقية:

سوف يمحو المقنع الأحرف ذات نوع القيمة أو الطول غير الصحيحين ، على الرغم من أن التحقق من صحة HTML سيُعلم المستخدم بالبيانات غير الصالحة فقط بعد إرسال النموذج. ولكن يمكننا أيضًا التحقق من صحة رقم البطاقة أثناء ملئه. هل تعلم أن جميع أرقام بطاقات الائتمان البلاستيكية يتم إنشاؤها وفقًا لخوارزمية Luhn البسيطة والفعالة؟ تم إنشاؤه في عام 1954 من قبل Hans Peter Luhn وتم تحديده لاحقًا كمعيار دولي. يمكننا تضمين خوارزمية Luhn للتحقق المسبق من حقل إدخال رقم البطاقة وتحذير المستخدم من وجود خطأ إملائي.

للقيام بذلك ، يمكننا استخدام حزمة fast-luhn npm الصغيرة ، المقتبسة من جوهر Shirtless Kirk. نحتاج إلى إضافته إلى تبعيات مشروعنا:

 npm install fast-luhn --save

لاستخدام fast-luhn ، سنقوم باستيراده في وحدة نمطية وسنقوم فقط بالاتصال luhn(number) في حدث الإدخال للتحقق مما إذا كان الرقم صحيحًا. على سبيل المثال ، دعنا نضيف فئة card__input_invalid لتغيير outline color نص الحقل عندما يرتكب المستخدم خطأً عرضيًا ولم يتم تمرير التحقق. لاحظ أن VanillaMasker تضيف مسافة بعد كل مجموعة مكونة من أربعة أرقام ، لذلك نحتاج إلى تحويل القيمة المُدخلة إلى رقم عادي بدون مسافات باستخدام طرق split join ، قبل استدعاء lunh .

والنتيجة هي رمز يشبه هذا:

 import luhn from 'fast-luhn'; const cardNumber = document.getElementById('card-number'); cardNumber.addEventListener('input', (event) => { const number = event.target.value; if (number.length >= 14) { const isLuhnCheckPassed = luhn(number.split(' ').join('')); cardNumber.classList.toggle('card__input_invalid', !isLuhnCheckPassed); cardNumber.classList.toggle('card__input_valid', isLuhnCheckPassed); } else { cardNumber.classList.remove('card__input_invalid', 'card__input_valid'); } });

لمنع luhn أثناء قيام المستخدم بالكتابة ، دعنا نسميه فقط إذا كان الرقم الذي تم إدخاله بطول الحد الأدنى للطول مع مسافات (14 حرفًا ، بما في ذلك 12 رقمًا) أو أطول ، أو قم بإزالة card__input_invalid class.

فيما يلي أمثلة عملية التحقق من الصحة:

تُستخدم خوارزمية Luhn أيضًا لبعض أرقام بطاقات الخصم وأرقام IMEI وأرقام معرف المزود الوطني في الولايات المتحدة وأرقام التأمين الاجتماعي في كندا. لذلك ، هذه الحزمة لا تقتصر على بطاقات الائتمان.

يرغب العديد من المستخدمين في التحقق من تفاصيل بطاقتهم بأعينهم ، حتى لو كانوا يعرفون أنه يتم التحقق من صحة النموذج. لكن البشر يدركون الأشياء بطريقة تجعل المقارنة بين الأرقام المصممة بشكل مختلف أمرًا محيرًا بعض الشيء. نظرًا لأننا نريد أن تكون الواجهة بسيطة وبديهية ، يمكننا مساعدة المستخدمين من خلال إظهار خط يبدو مشابهًا للخط الذي سيجدونه على بطاقة حقيقية. أيضًا ، سيجعل الخط نموذج الإدخال الذي يشبه البطاقة يبدو أكثر واقعية وملاءمة.

تتوفر العديد من خطوط بطاقات الائتمان المجانية:

• الرسن ، مختبرات Apostrophic
• Kredit ، خطوط Typodermic
• بطاقة ائتمان من نوع K (مجانية للاستخدام الشخصي)

سنستخدم هالتر. أولاً ، قم بتنزيل الخط ، وضعه في مجلد المشروع ، وأنشئ قاعدة CSS3 @font-face في style.css :

 @font-face { font-family: Halter; src: url(font/HALTER__.ttf); }

بعد ذلك ، قم ببساطة بإضافته إلى قاعدة font-family لفئة .card-input :

 .card-input { color: #777; font-family: Halter, monospace; }

لا تنس أنك إذا أدخلت CSS في ملف JavaScript باستخدام حزمة webpack ، فستحتاج إلى إضافة أداة تحميل file-loader :

 npm install file-loader --save

وأضف أداة file-loader ملفات لأنواع ملفات الخطوط في webpack.config.js :

 module: { loaders: [ { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file', }], },

تبدو النتيجة جيدة:

يمكنك جعله أكثر روعة ، إذا أردت ، بتأثير منقوش باستخدام text-shadow مزدوج وشبه شفافية على color النص:

 .card-input { color: rgba(84,110,122,0.5); text-shadow: -0.75px -0.75px white, 0.75px 0.75px 0 black; font-family: Halter, monospace; } 

أخيرًا وليس آخرًا ، يمكنك مفاجأة العملاء بسرور من خلال إضافة ميزة تلوين إلى النموذج. كل بنك له لون علامته التجارية الخاصة ، والذي عادة ما يهيمن على بطاقة ذلك البنك. لجعل نموذج الفواتير أكثر سهولة في الاستخدام ، يمكننا استخدام هذا اللون وطباعة اسم البنك أعلى حقول النموذج (المقابلة للمكان الذي يظهر فيه على بطاقة حقيقية). سيساعد هذا المستخدم أيضًا على تجنب ارتكاب خطأ إملائي في الرقم والتأكد من اختياره البطاقة الصحيحة.

يمكننا تحديد بنك بطاقة كل مستخدم من خلال الأرقام الستة الأولى ، والتي تحتوي على رقم تعريف جهة الإصدار (IIN) أو رقم تعريف البنك (BIN). Banks DB by Ramoona هي قاعدة بيانات تحصل على اسم البنك ولون علامته التجارية من هذه البادئة. قام المؤلف بإعداد عرض توضيحي لـ Banks DB.

قاعدة البيانات هذه مدفوعة بالمجتمع ، لذا فهي لا تحتوي على جميع البنوك العالمية. إذا لم يتم تمثيل بنك المستخدم ، فستكون مساحة اسم البنك فارغة وستظهر الخلفية اللون الافتراضي ( #fafafa ).

تفترض Banks DB إحدى طريقتين لاستخدامها: مع PostCSS أو مع CSS في JavaScript. نحن نستخدمه مع PostCSS. إذا كنت جديدًا على PostCSS ، فهذا سبب وجيه لبدء استخدامه. يمكنك معرفة المزيد حول PostCSS في الوثائق الرسمية أو في مقالة Drew Minns "مقدمة إلى PostCSS".

نحتاج إلى تثبيت المكون الإضافي PostCSS Banks DB لتعيين قالب CSS لـ Banks DB وتثبيت المكون الإضافي PostCSS Contrast لتحسين إمكانية قراءة اسم البنك:

 npm install banks-db postcss-banks-db postcss-contrast --save

بعد ذلك ، سنضيف هذه المكونات الإضافية الجديدة إلى عملية PostCSS وفقًا لمجمع الوحدات وتكوين التحميل المستخدم في مشروعنا. على سبيل المثال ، باستخدام Webpack و postcss-load-config ، ما عليك سوى إضافة الإضافات الجديدة إلى ملف .postcssrc .

بعد ذلك ، في ملف style.css الخاص بنا ، نحتاج إلى إضافة قالب قاعدة فئة جديد لـ Banks DB باستخدام المكون الإضافي postcss-تباين:

 @banks-db-template { .card_bank-%code% { background-color: %color%; color: contrast(%color%); } }

يمكننا أيضًا تعيين transition طويل على فئة .card بأكملها لتتلاشى في الخلفية ولون النص بسلاسة وتخرج منها ، حتى لا تفاجئ المستخدمين بتغيير مفاجئ:

 .card { … transition: background 0.6s, color 0.6s; }

الآن ، قم باستيراد Banks DB في index.js ، واستخدمها في مستمع حدث input . إذا تم تمثيل BIN في قاعدة البيانات ، فسنضيف الفئة التي تحتوي على اسم البنك إلى النموذج لإدخال الاسم وتغيير خلفية النموذج.

 import banksDB from 'banks-db'; const billingForm = document.querySelector('.card'); const bankName = document.querySelector('.card__bank-name'); const cardNumber = document.getElementById('card__input_number'); cardNumber.addEventListener('input', (event) => { const number = event.target.value; const bank = banksDB(number); if (bank.code) { billingForm.classList.add(`card_bank-${(bank.code || 'other')}`); bankName.innerText = bank.country === 'ru' ? bank.localTitle : bank.engTitle; } else { billingForm.className = 'card'; bankName.innerText = ''; } });

إذا كنت تستخدم حزمة الويب ، فأضف json-loader لملحق الملف .json إلى تكوين webpack من أجل إدخال قاعدة البيانات في الحزمة بشكل صحيح.

فيما يلي مثال عملي على Banks DB:

في حالة عدم ظهور أي تأثير على بطاقتك المصرفية ، يمكنك فتح مشكلة أو إضافة البنك الخاص بك إلى قاعدة البيانات.

خاتمة

يمكن أن يؤدي تحسين نموذج الفوترة إلى جعل تجربة المستخدم أكثر سهولة ، ونتيجة لذلك ، يضمن راحة المستخدم ويزيد الثقة في منتجك. إنه جزء مهم من تطبيقات الويب. يمكننا تحسينه بسرعة وسهولة باستخدام هذه الميزات البسيطة:

• سمات autocomplete المناسبة name للملء التلقائي ،
• سمة placeholder لإعلام المستخدم بتنسيق الإدخال ،
• pattern require سمات لمنع الإرسال غير الصحيح للنموذج ،
• VanillaMasker لفصل أرقام البطاقة ،
• fast-luhn للتحقق من رقم البطاقة ،
• الخط الرسن للمقارنة السهلة ،
• Banks DB لعرض أجمل للألوان.

لاحظ أن Banks DB فقط تتطلب وحدة تجميع وحدة نمطية ؛ يمكنك استخدام الآخرين في النص البسيط. من المرجح أن تستغرق إضافة كل هذه الوظائف إلى صفحة الدفع الخاصة بك أقل من يوم واحد.