أفضل الممارسات المتعلّقة بنموذج الدفع والعنوان

يمكنك تحقيق الحد الأقصى من الإحالات الناجحة من خلال مساعدة المستخدمين في إكمال نماذج العناوين والدفع بأسرع وأسهل طريقة ممكنة.

Sam Dutton

تساعد النماذج المصمّمة بشكل جيد المستخدمين وتزيد من معدلات الإحالات الناجحة. يمكن أن يُحدث إصلاح بسيط فرقًا كبيرًا.

في ما يلي مثال على نموذج دفع بسيط يوضّح جميع أفضل الممارسات:

في ما يلي مثال على نموذج عنوان بسيط يوضّح جميع أفضل الممارسات:

قائمة التحقق

استخدام ترميز HTML مفيد

استخدِم العناصر والسمات المصمَّمة لهذه المهمة:

  • <form> و<input> و<label> و<button>
  • type وautocomplete وinputmode

تتيح هذه العناصر تفعيل وظائف المتصفّح المضمّنة وتحسين أدوات تسهيل الاستخدام وإضافة معنى إلى الترميز.

استخدام عناصر HTML على النحو المطلوب

وضع النموذج في عنصر <form>

قد لا ترغب في تضمين عناصر <input> في <form>، وقد تفضّل معالجة إرسال البيانات باستخدام JavaScript فقط.

لا تفعل ذلك.

يمنحك عنصر <form> في HTML إمكانية الوصول إلى مجموعة فعّالة من الميزات المضمّنة في جميع المتصفّحات الحديثة، ويمكن أن يساعد في تسهيل وصول برامج قراءة الشاشة والأجهزة المساعِدة الأخرى إلى موقعك الإلكتروني. <form> يسهّل أيضًا إنشاء وظائف أساسية للمتصفّحات القديمة التي توفّر دعمًا محدودًا لـ JavaScript، ويتيح إرسال النماذج حتى في حال حدوث خلل في الرمز البرمجي، وللعدد القليل من المستخدمين الذين يوقفون JavaScript.

إذا كان لديك أكثر من مكوّن واحد في الصفحة لإدخال المستخدم، احرص على وضع كل مكوّن في عنصر <form> خاص به. على سبيل المثال، إذا كان لديك مربّع بحث ونموذج اشتراك في الصفحة نفسها، ضَع كل منهما في عنصر <form> خاص به.

استخدام <label> لتصنيف العناصر

لتصنيف <input> أو <select> أو <textarea>، استخدِم <label>.

يمكنك ربط تصنيف بإدخال من خلال منح سمة for للتصنيف القيمة نفسها التي تم منحها لسمة id للإدخال.

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

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

اجعل الأزرار مفيدة

استخدِم <button> للأزرار. يمكنك أيضًا استخدام <input type="submit">، ولكن لا تستخدِم div أو أي عنصر عشوائي آخر يعمل كزر. توفر عناصر الأزرار سلوكًا يسهل الوصول إليه، ووظيفة إرسال النماذج المضمنة، ويمكن تصميمها بسهولة.

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

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

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

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

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

الاستفادة إلى أقصى حد من سمات HTML

تسهيل إدخال البيانات على المستخدمين

استخدِم سمة الإدخال type المناسبة لتوفير لوحة المفاتيح الصحيحة على الأجهزة الجوّالة وتفعيل عملية التحقّق الأساسية المضمّنة في المتصفّح.

على سبيل المثال، استخدِم type="email" لعناوين البريد الإلكتروني وtype="tel" لأرقام الهواتف.

لقطتا شاشة لهواتف Android، تعرضان لوحة مفاتيح مناسبة لإدخال عنوان بريد إلكتروني (باستخدام type=email) ولإدخال رقم هاتف (باستخدام type=tel).
لوحات مفاتيح مناسبة للبريد الإلكتروني والهاتف

بالنسبة إلى التواريخ، حاوِل تجنُّب استخدام عناصر select مخصّصة. فهي تؤدي إلى تعطيل تجربة الملء التلقائي إذا لم يتم تنفيذها بشكل صحيح ولا تعمل على المتصفحات القديمة. بالنسبة إلى الأرقام مثل سنة الميلاد، ننصحك باستخدام عنصر input بدلاً من select، لأنّ إدخال الأرقام يدويًا يمكن أن يكون أسهل وأقل عرضة للخطأ من الاختيار من قائمة منسدلة طويلة، خاصةً على الأجهزة الجوّالة. استخدِم inputmode="numeric" لضمان ظهور لوحة المفاتيح المناسبة على الأجهزة الجوّالة، وأضِف تلميحات حول التنسيق والتحقّق من الصحة باستخدام نص أو عنصر نائب للتأكّد من أنّ المستخدم يُدخل البيانات بالتنسيق المناسب.

استخدام ميزة "الإكمال التلقائي" لتحسين تسهيل الاستخدام ومساعدة المستخدمين في تجنُّب إعادة إدخال البيانات

يساعد استخدام قيم autocomplete المناسبة المتصفّحات في مساعدة المستخدمين من خلال تخزين البيانات بأمان وملء قيم input وselect وtextarea تلقائيًا. وهذا مهم بشكل خاص على الأجهزة الجوّالة، وضروري لتجنُّب ارتفاع معدلات التراجع عن ملء النماذج. توفّر ميزة "الإكمال التلقائي" أيضًا مزايا متعددة لتسهيل الاستخدام.

إذا كانت هناك قيمة مناسبة للإكمال التلقائي متاحة لحقل نموذج، يجب استخدامها. يحتوي مستندات الويب الخاصة بـ MDN على قائمة كاملة بالقيم وشرح لكيفية استخدامها بشكل صحيح.

القيم الثابتة

عنوان إرسال الفواتير

يتم ضبط عنوان إرسال الفواتير تلقائيًا ليكون مطابقًا لعنوان التسليم. يمكنك تقليل الفوضى المرئية من خلال توفير رابط لتعديل عنوان إرسال الفواتير (أو استخدام عنصرَي summary وdetails) بدلاً من عرض عنوان إرسال الفواتير في نموذج.

مثال على صفحة دفع تعرض رابطًا لتغيير عنوان إرسال الفواتير
إضافة رابط لمراجعة الفوترة

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

<input autocomplete="shipping address-line1" ...>
<!-- Other fields omitted. -->
<input autocomplete="billing address-line1" ...>

مساعدة المستخدمين في إدخال البيانات الصحيحة

حاوِل تجنُّب "توبيخ" العملاء لأنّهم "ارتكبوا خطأً". بدلاً من ذلك، يمكنك مساعدة المستخدمين في إكمال النماذج بسرعة وسهولة أكبر من خلال مساعدتهم في حلّ المشاكل فور حدوثها. من خلال عملية الدفع، يحاول العملاء منح شركتك أموالاً مقابل منتج أو خدمة - وظيفتك هي مساعدتهم، وليس معاقبتهم!

يمكنك إضافة سمات القيود إلى عناصر النماذج لتحديد القيم المقبولة، بما في ذلك min وmax وpattern. يتم ضبط حالة الصلاحية للعنصر تلقائيًا بناءً على ما إذا كانت قيمة العنصر صالحة، وكذلك الفئات الزائفة :valid و:invalid في CSS التي يمكن استخدامها لتنسيق العناصر ذات القيم الصالحة أو غير الصالحة.

على سبيل المثال، يحدّد رمز HTML التالي إدخال سنة ميلاد بين 1900 و2020. يؤدي استخدام type="number" إلى حصر قيم الإدخال بالأرقام فقط، ضمن النطاق المحدّد بواسطة min وmax. إذا حاولت إدخال رقم خارج النطاق، سيتم ضبط الإدخال على حالة غير صالحة.

يستخدم المثال التالي pattern="[\d ]{10,30}" لضمان رقم بطاقة دفع صالح، مع السماح بالمسافات:

تُجري المتصفّحات الحديثة أيضًا عملية تحقّق أساسية من صحة الإدخالات من النوع email أو url.

عند إرسال النموذج، تركّز المتصفّحات تلقائيًا على الحقول التي تحتوي على قيم مطلوبة غير صحيحة أو غير متوفّرة. لا حاجة إلى استخدام JavaScript.

نموذج تسجيل دخول في Chrome على الكمبيوتر يعرض طلبًا من المتصفّح ويركّز على قيمة بريد إلكتروني غير صالحة
عملية التحقّق الأساسية المضمّنة في المتصفّح:

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

يجب أيضًا استخدام JavaScript لإجراء عملية تحقّق أكثر فعالية أثناء إدخال المستخدمين للبيانات وعند إرسال النموذج. استخدِم Constraint Validation API (التي تتوفّر على نطاق واسع) لإضافة عملية تحقّق مخصّصة باستخدام واجهة مستخدم المتصفّح المضمّنة لضبط التركيز وعرض الطلبات.

يمكنك الاطّلاع على مزيد من المعلومات في مقالة التحقّق من صحة النماذج من جهة العميل.

مساعدة المستخدمين في تجنُّب عدم إدخال البيانات المطلوبة

استخدِم السمة required في حقول الإدخال للقيم الإلزامية.

عند إرسال نموذج، تطلب المتصفّحات الحديثة تلقائيًا التركيز على حقول required التي تحتوي على بيانات ناقصة، ويمكنك استخدام الفئة الزائفة :required لتمييز الحقول المطلوبة. لا حاجة إلى استخدام JavaScript

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

تبسيط عملية الدفع

تجنُّب العوائق في طريقك نحو التجارة على الأجهزة الجوّالة

تخيَّل أنّ المستخدمين لديهم ميزانية للإرهاق. وإذا استنفدتها، سيغادر المستخدمون.

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

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

ضبط ميزة "إتمام الدفع بلا تسجيل دخول" كخيار تلقائي

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

أسباب التخلي عن سلة التسوق أثناء الدفع.
من baymard.com/checkout-usability

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

عرض مستوى تقدّم عملية الدفع

يمكنك جعل عملية الدفع تبدو أقل تعقيدًا من خلال إظهار التقدم وتوضيح ما يجب القيام به بعد ذلك. يوضّح الفيديو التالي كيف يحقّق بائع التجزئة البريطاني johnlewis.com ذلك.

عرض مستوى تقدّم عملية الدفع

عليك الحفاظ على الزخم! في كل خطوة من خطوات الدفع، استخدِم عناوين الصفحات وقيم الأزرار الوصفية التي توضّح ما يجب فعله الآن، وما هي خطوة الدفع التالية.

يجب منح أزرار النماذج أسماءً ذات معنى توضّح الخطوة التالية.

استخدِم السمة enterkeyhint في حقول الإدخال في النماذج لضبط تصنيف مفتاح Enter في لوحة المفاتيح على الأجهزة الجوّالة. على سبيل المثال، يمكنك استخدام enterkeyhint="previous" وenterkeyhint="next" ضمن نموذج متعدد الصفحات، وenterkeyhint="done" للإدخال النهائي في النموذج، وenterkeyhint="search" لإدخال البحث.

لقطتا شاشة لنموذج عنوان على Android توضّحان كيف تغيّر سمة الإدخال enterkeyhint رمز زر مفتاح Enter.
زرّا مفتاح Enter على Android: "التالي" و"تم".

تتوفّر السمة enterkeyhint على أجهزة Android وiOS. يمكنك الاطّلاع على مزيد من المعلومات في شرح enterkeyhint.

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

إزالة عناصر التشتيت

الحدّ من نقاط الخروج المحتملة من خلال إزالة الفوضى المرئية ومصادر التشتيت، مثل العروض الترويجية للمنتجات ويزيل العديد من بائعي التجزئة الناجحين ميزات التنقّل والبحث من صفحة الدفع.

لقطتا شاشة على جهاز جوّال تعرضان مستوى التقدّم في عملية الدفع على موقع johnlewis.com الإلكتروني تتم إزالة البحث والتنقّل وغيرهما من عوامل التشتيت.
تمت إزالة ميزات البحث والتنقّل وغيرها من الميزات التي تشتت الانتباه أثناء الدفع.

حافظ على تركيز الرحلة. هذا ليس الوقت المناسب لإغراء المستخدمين للقيام بشيء آخر!

صفحة دفع على جهاز جوّال تعرض عرضًا ترويجيًا مشتّتًا للانتباه لملصقات مجانية.
لا تشتّت انتباه العملاء عن إكمال عملية الشراء.

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

قسم &quot;مراجعة الطلب&quot; في صفحة الدفع، يعرض نصًا عاديًا، مع روابط لتغيير عنوان التسليم وطريقة الدفع وعنوان إرسال الفواتير، والتي لا يتم عرضها.
إخفاء البيانات التي لا يحتاج العملاء إلى الاطّلاع عليها

تسهيل إدخال الاسم والعنوان

اطلب البيانات التي تحتاجها فقط

قبل البدء في ترميز نماذج الاسم والعنوان، تأكَّد من فهم البيانات المطلوبة. لا تطلب بيانات لا تحتاج إليها. أبسط طريقة لتقليل تعقيد النموذج هي إزالة الحقول غير الضرورية. ويُعدّ ذلك مفيدًا أيضًا لخصوصية العملاء ويمكن أن يقلّل من تكلفة بيانات الخلفية والمسؤولية.

استخدام حقل واحد لإدخال الاسم

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

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

تفعيل ميزة الملء التلقائي للاسم

استخدِم name للاسم الكامل:

<input autocomplete="name" ...>

إذا كان لديك سبب وجيه لتقسيم أجزاء الاسم، تأكَّد من استخدام قيم الإكمال التلقائي المناسبة:

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

السماح بالأسماء الدولية

قد تحتاج إلى التحقّق من صحة إدخالات الأسماء أو حصر الأحرف المسموح بها لبيانات الأسماء. ومع ذلك، يجب أن تكون غير مقيد قدر الإمكان مع الحروف الأبجدية. من غير اللائق أن يتم إخبارك بأنّ اسمك "غير صالح".

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

الإجراءات غير المُوصى بها
<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
<input pattern="[\w \-]+" ...>
الإجراءات الموصى بها
<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>
مطابقة أحرف Unicode مقارنةً بمطابقة الأحرف اللاتينية فقط

السماح بمجموعة متنوعة من تنسيقات العناوين

عند تصميم نموذج عنوان، ضَع في اعتبارك التنوّع الكبير في تنسيقات العناوين، حتى داخل بلد واحد. احرص على عدم وضع افتراضات حول العناوين "العادية". (ألقِ نظرة على غرائب العناوين في المملكة المتحدة إذا لم تكن مقتنعًا).

توفير نماذج عناوين مرنة

لا تجبر المستخدمين على محاولة إدخال عناوينهم في حقول نماذج غير مناسبة.

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

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

يمكن أن يعمل استخدام سطرين مرنين للعنوان بشكل جيد بما يكفي لمجموعة متنوعة من تنسيقات العناوين.

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

أضِف تصنيفات للمطابقة:

<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" ...>

ننصح باستخدام حقل textarea واحد للعنوان

الخيار الأكثر مرونة للعناوين هو تقديم textarea واحد.

يناسب أسلوب textarea أي تنسيق عنوان، وهو رائع للقص واللصق، ولكن يجب الأخذ في الاعتبار أنّه قد لا يناسب متطلبات البيانات، وقد يفوت المستخدمين الملء التلقائي إذا كانوا يستخدمون في السابق النماذج التي تحتوي على address-line1 وaddress-line2 فقط.

بالنسبة إلى textarea، استخدِم street-address كقيمة للإكمال التلقائي.

في ما يلي مثال على نموذج يوضّح استخدام حقل textarea واحد للعنوان:

كيفية تدويل نماذج العناوين وأقلمتها

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

يُرجى العِلم أنّ تسمية أجزاء العنوان تختلف، وكذلك تنسيقات العناوين، حتى ضمن اللغة نفسها.

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

قد يكون من المزعج أو المحير أن يتم تقديم نموذج لا يناسب عنوانك أو لا يستخدم الكلمات التي تتوقعها.

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

  • تجنَّب تحديد أجزاء العنوان بدقة مفرطة، مثل الإصرار على اسم الشارع أو رقم المنزل.
  • تجنَّب جعل الحقول required كلما أمكن ذلك. على سبيل المثال، لا تتضمّن العناوين في العديد من البلدان رمزًا بريديًا، وقد لا تتضمّن العناوين في المناطق الريفية اسم شارع أو طريق.
  • استخدِم تسميات شاملة: "البلد/المنطقة" بدلاً من "البلد"، و"الرمز البريدي" بدلاً من "الرمز البريدي".

ننصحك بالتحلّي بالمرونة. يمكن تكييف مثال نموذج العنوان البسيط أعلاه ليعمل بشكل جيد بما يكفي للعديد من اللغات.

تجنُّب البحث عن العناوين باستخدام الرمز البريدي

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

لا تعمل ميزة اقتراح العناوين استنادًا إلى الرمز البريدي في جميع البلدان، وفي بعض المناطق، يمكن أن تتضمّن الرموز البريدية عددًا كبيرًا من العناوين المحتملة.

قد تتضمّن الرموز البريدية الكثير من العناوين.

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

يتيح حقل إدخال الاسم الواحد إدخال العنوان بنقرة واحدة.

تبسيط نماذج الدفع

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

مساعدة المستخدمين في تجنُّب إعادة إدخال بيانات الدفع

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

  • cc-number
  • cc-name
  • ‫cc-exp، أو cc-exp-month وcc-exp-year للحقول المنفصلة
  • cc-csc

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

تجنَّب استخدام عناصر مخصّصة لتواريخ بطاقات الدفع

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

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

استخدام حقل إدخال واحد لبطاقة الدفع وأرقام الهواتف

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

نموذج دفع يعرض حقل بطاقة ائتمان مقسّمًا إلى أربعة عناصر إدخال
لا تستخدِم حقول إدخال متعددة لرقم بطاقة الائتمان.

التحقّق بعناية

يجب التحقّق من صحة إدخال البيانات في الوقت الفعلي وقبل إرسال النموذج. ويمكنك إجراء ذلك من خلال إضافة سمة pattern إلى حقل إدخال بطاقة الدفع. إذا حاول المستخدم إرسال نموذج الدفع بقيمة غير صالحة، سيعرض المتصفح رسالة تحذير ويركّز على حقل الإدخال. لا حاجة إلى استخدام JavaScript

ومع ذلك، يجب أن يكون التعبير العادي pattern مرنًا بما يكفي للتعامل مع نطاق أطوال أرقام بطاقات الدفع: من 14 رقمًا (أو ربما أقل) إلى 20 (أو أكثر). يمكنك الاطّلاع على مزيد من المعلومات حول بنية أرقام بطاقات الدفع من LDAPwiki.

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

اختبِر تطبيقك على مجموعة من الأجهزة والأنظمة الأساسية والمتصفّحات والإصدارات

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

نموذج دفع على iPhone 7 و11. يظهر زر &quot;إكمال الدفع&quot; على iPhone 11 ولكن ليس 7
الصفحة نفسها على iPhone 7 وiPhone 11.
يجب تقليل المساحة المتروكة لإطارات العرض الأصغر حجمًا على الأجهزة الجوّالة لضمان عدم إخفاء زر إكمال الدفع.

تنفيذ الإحصاءات وRUM

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

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

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

تصبح إحصاءات الصفحات وإحصاءات التفاعل وقياس أداء المستخدمين الفعليين ذات قيمة خاصة عند دمجها مع سجلات الخادم وبيانات الإحالات الناجحة واختبارات A/B، ما يتيح لك الإجابة عن أسئلة مثل ما إذا كانت رموز الخصم تزيد من الإيرادات، أو ما إذا كان التغيير في تنسيق النموذج يحسّن الإحالات الناجحة.

وهذا بدوره يمنحك أساسًا قويًا لتحديد أولويات الجهود وإجراء التغييرات ومكافأة النجاح.

مواصلة التعلّم

صورة من ‎@rupixen على Unsplash.