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

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

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

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

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

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

الاستفادة إلى أقصى حد من سمات 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 بأمان كإدخال وإخراج. تتوافق المتصفحات الحديثة مع استخدام يونيكود في التعبيرات العادية.

الإجراءات غير المُوصى بها
<!-- 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.
يمكنك تقليل المسافة الفارغة في مساحة العرض الأصغر للأجهزة الجوّالة لضمان عدم إخفاء الزر إكمال الدفع.

تنفيذ التحليلات وخوارزمية RUM

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

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

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

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

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

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

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