كتابة رسائل خطأ مفيدة

01ما الذي يجب أن تفعله رسالة الخطأ

الخطأ هو اللحظة التي يتعثر فيها المستخدم. وللرسالة مهمتان: شرح ما حدث وبيان كيفية المتابعة. وتصف قاعدة نيلسن الإرشادية عن مساعدة المستخدمين على اكتشاف الأخطاء وتشخيصها والتعافي منها الهدف نفسه.

02مبادئ

خمس عادات تغطي معظم الحالات، ويسهل فحص كل منها أثناء المراجعة.

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

03قبل وبعد

• غامض

  قبل: «إدخال غير صالح.» بعد: «أدخل عنوان بريد إلكتروني مثل name@example.com.»

• يلقي اللوم

  قبل: «أدخلت كلمة مرور خاطئة.» بعد: «كلمة المرور لا تطابق المسجّلة. حاول مرة أخرى أو أعد تعيينها.»

• رمز فقط

  قبل: «خطأ 500.» بعد: «حدث خلل في الخادم. تغييراتك محفوظة. حاول بعد دقائق.» (استخدمها فقط إن كان القول صحيحًا.)

04الموضع والنبرة وإمكانية الوصول

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

مكان ظهور الرسالة لا يقل أهمية عن مضمونها. فالشريط في أعلى نموذج طويل يترك المستخدم يبحث عن الحقل المعني.

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

تحتاج إمكانية الوصول إلى عمل صريح. لا تعتمد على اللون الأحمر وحده، بل أضف نصًا وغالبًا أيقونة. اربط الرسالة بحقلها عبر <code>;aria-describedby<;/code>;، وعلّم الحقل بـ <code>;aria-invalid="true"</code>;، وأعلِن الأخطاء الجديدة لقارئات الشاشة، مثلًا بمنطقة حيّة (live region) أو بنقل التركيز إلى أول خطأ.

يشترط معيار WCAG 3.3.1 تحديد الخطأ (المستوى A) أن تُحدَّد الأخطاء وتُوصف نصيًا.

05المصادر

• Nielsen Norman Group. 10 Usability Heuristics for User Interface Design. https://www.nngroup.com/articles/ten-usability-heuristics/
• W3C. Understanding SC 3.3.1: Error Identification. https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html