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

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

Sam Dutton

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

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

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

قائمة التحقق

استخدام تنسيق HTML ذي معنى

استخدِم العناصر والسمات التي تم إنشاؤها للمهمة:

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

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

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

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

قد تميل إلى عدم إزعاج نفسك بلفّ عناصر <input> في <form>، ومعالجة إرسال data باستخدام 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 أو أيًا من العناصر العشوائية الأخرى التي تعمل كزر. توفّر عناصر الأزرار سلوكًا يسهل الوصول إليه، ودالّة إرسال ملف شخصي مدمجة، ويمكن تصميمها بسهولة.

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

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

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

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

تسهيل إدخال البيانات من قِبل المستخدمين

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

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

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

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

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

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

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

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

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

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

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

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

<input autocomplete="shipping address-line-1" ...>
...
<input autocomplete="billing address-line-1" ...>

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

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

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

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

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

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

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

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

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

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

اطّلِع على مزيد من المعلومات في مقالة استخدام JavaScript لإجراء عمليات التحقّق الأكثر تعقيدًا في الوقت الفعلي.

مساعدة المستخدمين في عدم فقدان البيانات المطلوبة

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

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

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

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

انتبِه إلى الفجوة في مجال التجارة على الأجهزة الجوّالة

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

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

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

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

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

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

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

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

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

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

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

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

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

لقطة شاشة لواجهة مستخدم نموذج عنوان على Android توضّح كيف تغيّر سمة الإدخال enterkeyhint رمز زر مفتاح 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-line-1" id="address-line1" ...>
<input autocomplete="address-line-2" id="address-line2" ...>

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

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

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

يمكنك تجربة ذلك من خلال إنشاء ريمكس وتعديل العرض التجريبي المضمّن أدناه.

ننصحك باستخدام حقل نصي واحد للعنوان.

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

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

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

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

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

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

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

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

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

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

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

تجنَّب البحث عن عنوان الرمز البريدي.

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

لا تعمل ميزة اقتراح عناوين الرموز البريدية في بعض البلدان، وفي بعض المناطق، يمكن أن تشمل الرموز البريدية عددًا كبيرًا من العناوين المحتملة.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تنفيذ الإحصاءات وميزة "رصد الزيارات من مصادر مختلفة"

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

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

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

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

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

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

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