التأكد من أن عنصر النوافذ المنبثقة يتماشى مع إرشادات التصميم الموحد (كود المنصات)
النافذة المنبثقة تقطع مسار المستخدم، فلا تُستعمل إلا لما يستدعي القطع. ويطلب المعيار الشكل المعتمد، وحصر التركيز داخلها ما دامت مفتوحة، وإغلاقها بمفتاح الهروب وبإجراء ظاهر.
وهو من المعايير الأساسية في فئة العناصر من دليل كود المنصات، نظام التصميم الموحد للمملكة، الصادر عن هيئة الحكومة الرقمية.
كيف تقيس الأداة هذا المعيار
يُقاس هذا المعيار من بنية الصفحة ومن قراءة لقطتها، ولذلك تكون الثقة فيه دون الثقة في القيمة المقروءة مباشرة، ويظهر ذلك في عرض النطاق.
وتشترك معايير العناصر في بنية واحدة: الالتزام بالتصميم الأساسي دون تعديل، ثم الحالات التفاعلية، ثم الحالات السياقية. ويُرصد كذلك العنصر المطابق شكلًا دون أي إشارة إلى مكتبة كود المنصات، إذ يدل ذلك على بناء يدوي منفصل عن المكتبة لا تصله تحديثاتها.
النص الرسمي ونقاط التحقق
يقوم هذا المعيار على ٢ من نقاط التحقق المنشورة في كود المنصات، وهي المرجع عند الحكم عليه.
صفحة هذا المعيار في الموقع الرسمي لكود المنصاتنقاط التحقق، نقطة نقطة
لكل نقطة من نقاط التحقق أدناه إجابة مستقلة: ما تشترطه، وما الذي يجتازها وما الذي يسقط فيها، وكيف تُقاس أو يُتحقق منها، وكيف تُعالَج. ولكل نقطة رابط مباشر يمكن مشاركته.
النافذة المنبثقة: مطابقة الشكل والحواف واللون والمسافات
مقيس آليًاDGA-019-aتشترط هذه النقطة استدعاء النافذة المنبثقة من مكتبة كود المنصات واستعماله بخصائصه المعتمدة دون تعديل على تصميمه الأساسي، وأخصّها هنا عرضها وحوافها وطبقة التعتيم خلفها ومواضع أزرارها. وتعديل أي منها يخرج العنصر عن المكتبة ولو بقي شبيهًا بها في المظهر.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: نافذة مستدعاة من المكتبة، عنوانها وإجراؤها الأساسي في موضعيهما المعتمدين، والتركيز محبوس داخلها ما دامت مفتوحة.
ما الذي يسقط فيها: نافذة مبنية يدويًا لا تحبس التركيز، فيتنقل المستخدم بلوحة المفاتيح إلى الصفحة خلفها وهو لا يراها.
كيف تُقاس أو يُتحقق منها: تُقرأ بنية النافذة وخصائصها. والنوافذ التي تُفتح بتفاعل وحده تُصنَّف عناصر مخفية خلف التفاعل، لا عناصر غائبة، وهو فرق يمنع اتهام منصة بما ليس فيها.
كيف تُعالَج: استدعوا النافذة من المكتبة، واحبسوا التركيز داخلها، وأعيدوه إلى العنصر الذي فتحها عند الإغلاق.
نقاط متصلة:حصر النافذة المنبثقة في التأكيد والتنبيه لا في إدخال البيانات ·الزر: مطابقة الشكل والحواف واللون والمسافات ·الإشعار: مطابقة الشكل والحواف واللون والمسافات
حصر النافذة المنبثقة في التأكيد والتنبيه لا في إدخال البيانات
مقيس آليًاDGA-019-bتشترط هذه النقطة حصر النافذة المنبثقة في المهام التي تحتاج تأكيدًا أو ملاحظة أو تنبيهًا مهمًا، والامتناع عن استعمالها لإدخال بيانات تفصيلي. والبديل المنصوص عليه لإدخال البيانات الكبير هو قالب النموذج.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: نافذة تأكيد حذف من سطرين وزرين، ونماذج التسجيل في صفحاتها المستقلة.
ما الذي يسقط فيها: نموذج تسجيل من اثني عشر حقلًا داخل نافذة منبثقة، فيتعذّر تمريره على الجوال ويضيع ما أُدخل عند إغلاقه سهوًا.
كيف تُقاس أو يُتحقق منها: تُعدّ حقول الإدخال داخل النوافذ المنبثقة المرصودة. وهذه النقطة يتحقق منها فريقكم، فالنوافذ لا تُفتح إلا بتفاعل.
كيف تُعالَج: انقلوا النماذج الطويلة إلى قالب النموذج في صفحة مستقلة، وأبقوا النوافذ للتأكيد والتنبيه.
نقاط متصلة:النافذة المنبثقة: مطابقة الشكل والحواف واللون والمسافات ·حقل المدخلات: مطابقة الشكل والحواف واللون والمسافات ·منطقة النص: مطابقة الشكل والحواف واللون والمسافات
كيف تتحققون منه يدويًا
وهذه خطوات المراجعة الكاملة للمعيار، وبعضها أوسع مما تغطيه القاعدة الآلية اليوم.
- افتحوا النافذة وتنقّلوا بلوحة المفاتيح: التركيز يجب ألا يخرج منها ما دامت مفتوحة
- اضغطوا مفتاح الهروب
- افحصوا حجم المحتوى، فالنافذة للتأكيد والتنبيه لا للنماذج الطويلة
- تحققوا من عودة التركيز إلى العنصر الذي فتحها بعد الإغلاق
أخطاء شائعة في هذا المعيار
| الخطأ | لماذا يضر |
|---|---|
| لا تحصر النافذة التركيز داخلها | فيخرج المستخدم بلوحة المفاتيح إلى ما خلفها دون أن يعلم. |
| لا تُغلق النافذة بمفتاح الهروب | فيبقى المستخدم محبوسًا فيها إن غاب زر الإغلاق. |
| تُستعمل النافذة لإدخال بيانات تفصيلية بدل قالب النموذج المخصص لذلك | |
| لا يعود التركيز إلى العنصر الذي فتح النافذة بعد إغلاقها | فيضيع موضع المستخدم في الصفحة. |
| تفتح نافذة فوق نافذة أخرى | فتتراكم الطبقات ويتعذّر الرجوع. |
| عنصر يطابق الشكل بصريًا دون أي من إشارات مكتبة كود المنصات، وهو مؤشر على بناء يدوي منفصل عن المكتبة | فلا تصل إليه تحديثاتها. |
| غياب مؤشر تركيز مرئي واضح عند التنقل بلوحة المفاتيح | |
| مساحة لمس دون ٤٤ بكسل في العناصر التفاعلية | |
استخدام عنصر غير دلالي مكان العنصر الصحيح، مثل div بدل button |
كيف يُعالَج
- احصروا التركيز داخل النافذة ما دامت مفتوحة، وأعيدوه إلى فاتحها عند الإغلاق.
- فعّلوا الإغلاق بمفتاح الهروب وبزر ظاهر معًا، فلا يعتمد المستخدم على واحد منهما.
- انقلوا النماذج الطويلة من النافذة إلى قالب النموذج المعتمد.
- امنعوا فتح نافذة فوق أخرى، واجعلوا الإجراء الثاني يستبدل الأول لا يعلوه.
- استدعوا العنصر من المكتبة، فيأتي بحصر التركيز وسلوك الإغلاق مضبوطين.
معايير متصلة
وفي الدليل: كود المنصات figma · ما الذي يضمه ملف التصميم · حالات النافذة المنبثقة معرّفة في ملف التصميم
لم تطبّقه أي من ١٤ منصة حكومية مقيسة
- ٣ منصات
- ٢ منصتان
- ٢ منصتان
- ٢ منصتان
- ٢ منصتان
والقياس على عيّنة من المنصات المنشورة للعموم بالمنهجية نفسها المنشورة في صفحة المنهجية.
أين تقف منصتكم من هذا المعيار؟
يصدر الفحص تقديرًا استرشاديًا خلال دقائق، ويبيّن لكل ملاحظة قيمتها المرصودة والمتوقعة وموضعها.