الرئيسية: محمد أبوعيشهمتاح للعمل متاح للعمل English

كتابة UX // دليل

نوافذ التأكيد التي يثق بها المستخدم

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

نوافذ التأكيد التي يثق بها المستخدم

متى يكون التأكيد مبررًا

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

أما في الإجراءات الصغيرة القابلة للتراجع فلا تضيف النافذة سوى احتكاك. وإذا سأل كل إجراء «هل أنت متأكد؟» فسيتوقف الناس عن القراءة وينقرون بسرعة، حتى في المرة الوحيدة التي يهم فيها الأمر.

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

والنافذة وحدها حماية ضعيفة. فمن يتصرف بسرعة سيؤكد دون قراءة، لذلك يجب أن يجعل النص وتصميم الأزرار العاقبة يصعب تجاهلها.

فضّل التراجع متى أمكن

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

  • استخدم التراجع عند حذف عناصر يمكن الاحتفاظ بها مؤقتًا في سلة محذوفات أو أرشيف.
  • أبقِ رسالة التراجع ظاهرة وقتًا كافيًا لقراءتها والوصول إليها، وأتح استخدامها بلوحة المفاتيح.
  • استخدم نافذة التأكيد حين يتعذر التراجع تقنيًا، كالحذف النهائي.

اكتب نافذة محددة

يجبر السؤال العام «هل أنت متأكد؟ نعم / لا» المستخدم على إعادة قراءة السؤال وتخمين وظيفة كل زر. أما النافذة الجيدة فتسمّي العنصر وتذكر العاقبة وتستخدم أزرارًا تصف الإجراءات.

  • العنوان

    «حذف مشروع «حملة الربيع»؟»

  • العاقبة

    «ستُحذف جميع الملفات والتعليقات نهائيًا. لا يمكن التراجع عن ذلك.»

  • الزر الآمن

    «الإبقاء على المشروع»

  • الزر المدمّر

    «حذف المشروع»

ينبغي أن يفهم المستخدم الخيار من الأزرار وحدها.

الشكل والسلوك

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

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

المصادر

  • W3C. WAI-ARIA Authoring Practices Guide, Dialog (Modal) Pattern. https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

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

المزيد في هذا الموضوع

  • كتابة UX2 دقائق قراءة

    الصوت والنبرة في كتابة المنتجات

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

  • كتابة UX2 دقائق قراءة

    النص الإرشادي ليس تسمية للحقل

    يختفي النص الإرشادي عند الكتابة، وغالبًا ما يكون ضعيف التباين، ولا يُعتمد عليه اسمًا لإمكانية الوصول. استخدم تسمية ظاهرة دائمة مع نص تلميح اختياري.

  • كتابة تجربة المستخدم2 دقائق قراءة

    نصوص صغيرة داعمة ومحترمة

    جمل حقيقية من Filis، والقواعد خلفها: رقم، وإجراء، ونبرة محترمة.

اختصارات لوحة المفاتيح
اختصارات المفتاح الواحد

أوقفها إن كنت تستخدم الإدخال الصوتي أو كانت تزعجك أثناء التصفح.