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

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

ابدأ بسبب وجود كل حقل

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

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

اجعل أسماء الحقول واضحة وثابتة

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

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

تقبّل طريقة كتابة العميل، ثم عالج البيانات بأمان

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

إذا طلبت «مواقع تعجبك»، فاسمح بملاحظة مثل «متجر قريب من شكل هذا المرجع» بدل حصر الإجابة في رابط واحد. ويمكن لحقل عنوان الموقع المخصص أن يتقبل كتابة www.example.com ثم يوضح الصيغة التي اعتمدها. لكن يجب ألا يحوّل التطبيق أي نص إلى رابط قابل للتنفيذ؛ التحقق من الروابط ومعالجة المحتوى على الخادم مسؤولية تقنية مستقلة. سهولة الإدخال لا تلغي التحقق الأمني أو قواعد البيانات.

فرّق بين خطأ الإجابة وتعذّر الخدمة

توصي إرشادات W3C لإشعارات النماذج بإبلاغ المستخدم بنتيجة الإرسال وتقديم توجيه مفهوم لتصحيح الأخطاء. عمليًا، اكتب «أدخل البريد بالشكل name@example.com» بدل «قيمة غير صالحة». ضع التفسير قرب الحقل المتأثر، ولا تستخدم عبارة تلوم المستخدم عندما تكون المشكلة انقطاع الاتصال.

تؤكد إرشادات GOV.UK لمعالجة أخطاء التحقق أهمية الاحتفاظ بالإجابات وعرض ملخص واضح للأخطاء. في نموذجنا الافتراضي، يستطيع العميل الانتقال من الملخص إلى البريد الناقص ثم إعادة المحاولة، بدل البحث بين جميع الحقول. أما إذا استُلم الطلب ولم تصل رسالة البريد بعد، فلا تعرض «فشل إرسال الطلب»؛ فرّق بين حفظ الطلب وإرسال إشعار عنه.

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

صمّم اللغات الثلاث كتجارب كاملة

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

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

حوّل الجودة إلى اختبارات استلام

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

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

متى أستخدم خطوات متعددة؟

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

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