قد تكون صفحة التواصل جذابة، لكن النموذج فيها يترك المستخدم حائرًا: ما البيانات المطلوبة؟ هل أُرسلت الرسالة؟ ولماذا اختفى ما كتبه بعد ظهور خطأ؟ نجاح النموذج يظهر عندما يستطيع الشخص إكمال مهمته وفهم النتيجة.
اطلب ما يخدم الخطوة التالية
في طلب استفسار أولي، قد تحتاج إلى اسم وطريقة للرد ووصف مختصر للمطلوب. لا تضف كل سؤال قد تحتاجه لاحقًا. راجع كل حقل واسأل: من سيستخدم إجابته، وفي أي قرار؟ إذا لم توجد إجابة واضحة، ففكّر في تأجيله.
وهذا اقتراح لتنظيم التجربة، وليس عددًا ثابتًا يناسب جميع النماذج. طلب دعم فني قد يحتاج رقم طلب، بينما طلب شراكة قد يحتاج تعريفًا بالمؤسسة.
اجعل اسم الحقل ظاهرًا ومستقرًا
توضح إرشادات W3C أهمية ربط اسم الحقل بعنصر الإدخال. النص الإرشادي داخل الحقل مفيد كمثال، لكنه لا يحل محل تسمية واضحة تبقى ظاهرة أثناء الكتابة.
<label for="email">البريد الإلكتروني</label>
<input id="email" name="email" type="email"
autocomplete="email" dir="ltr" required>في هذا المثال، تتطابق قيمة for مع المعرّف id. واتجاه البريد من اليسار إلى اليمين يناسب طبيعة العنوان، مع بقاء تسمية الحقل والشرح بالعربية. حدّد الحقول المطلوبة كتابةً، ولا تعتمد على لون أو رمز دون توضيح معناه.
اكتب رسالة خطأ تقود إلى حل
عبارة «حدث خطأ» لا توضح ما الذي يحتاج إلى تصحيح. جرّب رسالة مرتبطة بالحقل مثل «أدخل البريد بهذا الشكل: name@example.com». وعند فشل الخادم، فرّق بين مشكلة في البيانات ومشكلة في استقبال الطلب.
احتفظ بما كتبه المستخدم متى كان ذلك مناسبًا، وأظهر ملخصًا واضحًا للأخطاء إذا تعددت. ينبغي أيضًا أن تصل الرسائل إلى مستخدمي التقنيات المساعدة؛ يمكن الاستفادة من ربط الوصف بالحقل واختيار آلية إعلان ملائمة لطبيعة التحديث.
لا تترك نتيجة الإرسال غامضة
أثناء الإرسال، أظهر حالة مفهومة وتجنب تمكين تكرار العملية دون قصد. وبعد النجاح، اعرض تأكيدًا يعكس ما حدث فعلًا: «تم استلام رسالتك» إذا كان الخادم قد استقبلها. لا تضع وقت رد محددًا ما لم يكن فريقك ملتزمًا به وقادرًا على متابعته.
جرّب النموذج كما سيستخدمه الناس
- تنقل بين الحقول والأزرار بلوحة المفاتيح.
- أرسل بيانات ناقصة وتحقق من وضوح التصحيح.
- اختبر أسماء عربية طويلة وبريدًا لاتينيًا.
- جرّب شاشة صغيرة وتكبير النص.
- حاكِ انقطاع الاتصال وتحقق من عدم عرض نجاح وهمي.
ابدأ اليوم بأكثر نقطة تسبب ترددًا: حقل بلا تسمية، أو خطأ مبهم، أو زر لا يوضح نتيجته. تحسين هذه التفاصيل يجعل النموذج جزءًا مفهومًا من رحلة العميل.