اطلب أقل، واشرح سبب الطلب
ابدأ بمهمة المستخدم المباشرة، ثم اطلب فقط البيانات اللازمة لإنهائها. قد يحتاج النشرة الإخبارية إلى بريد إلكتروني؛ الشحن يحتاج عنوانًا. ولا يحتاج أي منهما تلقائيًا إلى تاريخ ميلاد أو مسمى وظيفي أو موافقة تسويقية مضمنة. أجّل الأسئلة الإضافية ما لم تكن مطلوبة للنتيجة الأولى.
في النموذج، بيّن من يتلقى البيانات ولأي غرض، مع رابط واضح لإشعار الخصوصية الكامل. لدى المنظمات المشمولة بUK GDPR واجبات شفافية تتضمن الأغراض وفترات الاحتفاظ وغيرها من المعلومات المعتمدة على السياق. هذا ليس نصيحة قانونية شاملة: اجعل المراجعين المناسبين يوافقون على جمع البيانات ونص إشعار الخصوصية لأسواقكم.
اذكر الحقول المطلوبة والصيغ غير الاعتيادية قبل الإرسال؛ النجمة أو اللون وحدهما لا يكفيان.
اجعل موافقة التسويق الاختيارية منفصلة عن الإجراء المطلوب لإكمال الطلب أو الاستعلام أو مهمة الحساب.
اجعل التسميات والعناصر الأصلية تقوم بالعمل
كل حقل ومربع اختيار ومجموعة راديو وقائمة وزر بحاجة إلى اسم يصف غرضه. استخدم تسمية مرئية مرتبطة بعنصر التحكم، عادة عبر عنصر label بحيث تكون قيمة for مساوية لخاصية id للحقل input. هذا يوسّع منطقة التنشيط ويسمح لتقنيات المساعدة بتحديد العنصر الصحيح. اجعل التسمية قريبة من الحقل.
نص المساعدة ليس اسم الحقل. لا تجعله التعليم الوحيد الذي يختفي بعد الكتابة. إذا كانت السياقات البصرية تجعل التسمية زائدة عن الحاجة، احتفظ باسم متاح في الكود واختبره. تشير W3C إلى أن نص title أقل موثوقية كبديل تسميه رئيسي.
استخدم email و tel و date و radio و checkbox أو select عندما يناسب ذلك بدلاً من تقليدها بحقل نص عام.
استخدم تسمية فعلية مثل Create account أو Place order عندما يكون ذلك أوضح من Submit.
تحقق لتصحيح الأخطاء، ثم نفّذ القواعد على الخادم
استخدم قيودًا أصلية لفحوصات مستقرة: نوع الإدخال الصحيح، required، الطول، النطاق، ونمط مناسب. قدم مثالًا مفيدًا للصيغة قبل أن تصبح خطأً. تحسّن فحوصات جهة العميل الاسترداد لكنها ليست حدودًا أمنية. يمكن تجاوز الطلبات، لذا يجب على الخادم التحقق من البنية والقواعد التجارية ذات الصلة قبل معالجة البيانات.
عند فشل الإرسال، احتفظ بالقيم المقبولة. ضع ملخصًا للأخطاء قبل النموذج، حدّد كل حقل، اشرح المشكلة وكيفية إصلاحها واربط إليه. كرر رسالة موجزة بجانب الحقل. اربطها بعنصر التحكم، وبيّن حالة invalid عند الاقتضاء، وحرك التركيز بشكل متوقع إلى أول خطأ أو إلى الملخص. أكد النجاح بشكل صريح.
تحقق أثناء الكتابة فقط عندما تكون الملاحظات مستقرة ومفيدة، مثل التحقق من توفر اسم المستخدم. حالات فشل الصيغة المتوقعة أثناء الإدخال غالبًا ما تكون أفضل بعد مغادرة الحقل أو عند الإرسال. اختبر الرسائل الديناميكية مع قراء الشاشة؛ التحديثات الحية يمكن أن تساعد لكن الانقطاعات المستمرة تسبب احتكاكًا.
على الخادم، عرف التواريخ والخيارات والأطوال والصيغ المسموح بها. ليست قائمة الحظر من الأحرف المشبوهة أداة تحكم أولية موثوقة.
بالنسبة لانقضاء الجلسة أو الإرسال المكرر، اذكر ما إذا كانت الطلبات قد استُلمت وقدّم إجراءً آمنًا تاليًا.
دعم الملء التلقائي والمتصفحات والكتابة على الجوال
أضف رموز autocomplete المحددة التي تصف البيانات: given-name و family-name و email و tel و shipping street-address و billing postal-code و username و new-password هي أمثلة شائعة. تساعد هذه الرموز المتصفحات ومديري كلمات المرور على تمييز الحقول المشابهة. الملء التلقائي هو مساعدة، وليس وعدًا؛ سلوكها يختلف وقد يعتمد على نموذج قابل للاستخدام واسم أو id وزر إرسال.
استخدم نوع input يمكنه عرض لوحة مفاتيح مناسبة على الهاتف المحمول وتوفير تحقق أساسي من المتصفح. لا تمنع اللصق في حقول كلمات المرور ولا تعيق مديري كلمات المرور. قد تستمر المتصفحات الحديثة في عرض تعبئة بيانات الاعتماد عندما يكون autocomplete معطلاً في نموذج تسجيل الدخول، لذا اختبر الرحلات الحقيقية في المتصفحات التي يستخدمها جمهورك.
عند وجود عنواني الفوترة والشحن في صفحة واحدة، استخدم رموز التجميع المقابلة حتى لا يختلط الحقلان المتطابقان.
تأكد من بقاء التسميات مرئية وألا تخلط السكربتات بين القيم المملوءة من المتصفح والقيم الفارغة.
اجعل المسار قابلاً للإكمال باستخدام لوحة المفاتيح
يجب أن يتمكن الشخص من إكمال النموذج بدون مؤشر. يدعم التشغيل بلوحة المفاتيح أيضًا إدخال الكلام وتقنيات مساعدة أخرى التي تُنتج ضغطات مفاتيح. انتقل بالـ Tab من قبل النموذج إلى بعده: يجب أن يتبع الترتيب المهمة، ويكون التركيز مرئيًا، ولا يجوز لأي عنصر أو حوار أو منتقي تاريخ أو رابط خطأ أو لوحة مساعدة حبس التركيز.
تزود العناصر الأصلية كثيرًا من هذا السلوك. تحتاج القوائم المنسدلة المخصصة وتواريخ القناع والبحث عن العنوان وبدائل CAPTCHA والنوافذ المنبثقة إلى سلوك لوحة مفاتيح مُتعمد وإدارة تركيز وأسماء قابلة للوصول. إذا لم يستطع مكون مخصص مطابقة بديل أصلي قابل للاستخدام، بسطه. اختبر بعرض ضيق وزيادة تكبير عالية.
استخدم Tab و Shift+Tab و Enter و Space و Escape ومفاتيح الأسهم ذات الصلة لإكمال المسارات العادية ومسارات الأخطاء والتدفقات الشرطية.
أصدر التحسينات مع حواجز أمان وخطة تراجع
قبل تغيير نموذج ذا قيمة، سجّل خط أساس للإرسالات المؤكدة، والأخطاء بحسب فئة الحقل، والإخفاقات التقنية، ووقت الإكمال. لا تجمع القيم الخام أو تعيد تشغيل بيانات حساسة لمجرد تحسين مقياس. اقترن الإشارات التجميعية بفحوصات إمكانية الوصول ولوحة المفاتيح، لأن معدلًا واحدًا نادرًا ما يشرح سبب معاناة المستخدمين.
أصدر تغييرًا ماديًا واحدًا في كل مرة حيثما أمكن، مثل صياغة تسمية، أو إزالة حقل اختياري، أو تحسين الاسترداد. حدد حواجز الأمان قبل الاختبار: أخطاء تفويض الدفع، جهات الاتصال للدعم، أو تراجع في إمكانية الوصول كلها قد تكون ذات صلة. اختبر تكوين الإنتاج بحسابات آمنة وبيئات اختبار دفع. تتطلب سكربتات الدفع والتعامل مع البيانات والامتثال مراجعات مؤهلة للأمن والمدفوعات والقانون؛ هذه المقالة لا تصدق الامتثال.
تجعل SIU الأمور أكثر أمانًا عبر اختبار إطلاق مسبق (launch preflight): أكد التبعيات، وسلوك العميل، واستجابات الخادم، والتأكيد، وخطوة التراجع. هذا إجراء تصحيحي استباقي، وليس بديلًا عن عملية الحالة الحية أو رصد الانقطاعات للفريق.
استخدم القيم المفقودة والمشوهة، والجلسات منتهية الصلاحية، والاستجابات البطيئة، وعمليات البحث الفاشلة، والنقر المزدوج على الإجراء النهائي.
احفظ التكوين السابق، وعيّن مالكًا، واجعل خطوة النشر قابلة للعكس قبل أن يزداد التعرض.