ضمان أن عنصر الإشعارات يلتزم بمبادئ التصميم الموحد (كود المنصات)
يطلب أن يوافق نوع الإشعار خطورة الرسالة: الإشعار العابر للمعلومة العابرة، لا للتحذير الحرج الذي يجب أن يبقى. وأن تكون رسالة الخطأ محدّدة تقول ما حدث وما العمل، وأن يُعلَن الإشعار برمجيًا ليصل إلى قارئ الشاشة.
وهو من المعايير الأساسية في فئة العناصر من دليل كود المنصات، نظام التصميم الموحد للمملكة، الصادر عن هيئة الحكومة الرقمية.
كيف تقيس الأداة هذا المعيار
يُقاس هذا المعيار من بنية الصفحة ومن قراءة لقطتها، ولذلك تكون الثقة فيه دون الثقة في القيمة المقروءة مباشرة، ويظهر ذلك في عرض النطاق.
وتشترك معايير العناصر في بنية واحدة: الالتزام بالتصميم الأساسي دون تعديل، ثم الحالات التفاعلية، ثم الحالات السياقية. ويُرصد كذلك العنصر المطابق شكلًا دون أي إشارة إلى مكتبة كود المنصات، إذ يدل ذلك على بناء يدوي منفصل عن المكتبة لا تصله تحديثاتها.
النص الرسمي ونقاط التحقق
يقوم هذا المعيار على ٦ من نقاط التحقق المنشورة في كود المنصات، وهي المرجع عند الحكم عليه.
صفحة هذا المعيار في الموقع الرسمي لكود المنصاتنقاط التحقق، نقطة نقطة
لكل نقطة من نقاط التحقق أدناه إجابة مستقلة: ما تشترطه، وما الذي يجتازها وما الذي يسقط فيها، وكيف تُقاس أو يُتحقق منها، وكيف تُعالَج. ولكل نقطة رابط مباشر يمكن مشاركته.
الإشعار: مطابقة الشكل والحواف واللون والمسافات
مقيس آليًاDGA-018-aتشترط هذه النقطة استدعاء الإشعار من مكتبة كود المنصات واستعماله بخصائصه المعتمدة دون تعديل على تصميمه الأساسي، وأخصّها هنا ألوان أنماطه التنبيهية وأيقوناتها وحدوده ومسافاته. وتعديل أي منها يخرج العنصر عن المكتبة ولو بقي شبيهًا بها في المظهر.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: إشعارات مستدعاة من المكتبة، لكل نمط منها لونه وأيقونته المعتمدان.
ما الذي يسقط فيها: إشعار مبني يدويًا بأحمر خارج اللوحة، أو إشعار نجاح بلون التحذير.
كيف تُقاس أو يُتحقق منها: تُقرأ خصائص الإشعارات المرصودة وتُقارن بأنماط المكتبة الأربعة.
كيف تُعالَج: استدعوا الإشعار من المكتبة واختاروا نمطه حسب المعنى لا حسب اللون المفضل.
نقاط متصلة:استعمال الإشعار في سياقه المحدد ·الإشعار المؤقت يُبنى بالإشعارات المنبثقة (Toast) ·ألوان الأيقونات: التنبيهية للتنبيه وحده
الإشعار المؤقت يُبنى بالإشعارات المنبثقة (Toast)
مقيس آليًاDGA-018-bتشترط هذه النقطة أن يُستعمل الإشعار المنبثق (Notification Toast) حين يكون الإشعار مؤقتًا في الواجهة. فنوع العنصر يتبع عمر الرسالة، لا ذوق المصمم.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: رسالة حفظ ناجح تظهر إشعارًا منبثقًا يختفي بعد ثوانٍ.
ما الذي يسقط فيها: رسالة مؤقتة مبنية إشعارًا مدمجًا يبقى في الصفحة، فتتراكم الرسائل القديمة فوق بعضها.
كيف تُقاس أو يُتحقق منها: يُرصد نوع عنصر الإشعار وسلوكه من بنية الصفحة. والعمر الفعلي للرسالة يقتضي تفاعلًا، فيتحقق منه فريقكم.
كيف تُعالَج: حوّلوا الرسائل المؤقتة إلى إشعارات منبثقة، وأبقوا المدمجة للرسائل الدائمة.
نقاط متصلة:الإشعار الدائم يُبنى بالإشعارات المدمجة (Inline Alert) ·الإشعار الدائم عالي الأولوية في بداية الصفحة ·سلوك الإشعار وقابلية الإغلاق
الإشعار الدائم يُبنى بالإشعارات المدمجة (Inline Alert)
مقيس آليًاDGA-018-cتشترط هذه النقطة أن يُستعمل الإشعار المدمج (Inline Alert) حين يكون الإشعار دائمًا. وهي النقطة المقابلة للتي قبلها، والخطأ فيهما متبادل: المؤقت مدمجًا، والدائم منبثقًا.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: تحذير عن انقطاع خدمة معروض إشعارًا مدمجًا يبقى ظاهرًا حتى زوال سببه.
ما الذي يسقط فيها: تحذير حرج معروض إشعارًا منبثقًا يختفي قبل أن يقرأه المستخدم، فيضيع التحذير كله.
كيف تُقاس أو يُتحقق منها: يُرصد نوع العنصر من بنية الصفحة ويُقارن بسياق الرسالة. وهذه النقطة يتحقق منها فريقكم.
كيف تُعالَج: انقلوا التحذيرات الحرجة إلى إشعارات مدمجة، فبقاؤها على الشاشة جزء من وظيفتها.
نقاط متصلة:الإشعار المؤقت يُبنى بالإشعارات المنبثقة (Toast) ·الإشعار الدائم عالي الأولوية في بداية الصفحة ·صياغة رسائل الخطأ: ما المشكلة وما طريقة حلها
الإشعار الدائم عالي الأولوية في بداية الصفحة
مقيس آليًاDGA-018-dتشترط هذه النقطة استعمال عنصر الإشعارات (Notification) حين يكون الإشعار دائمًا وعالي الأولوية ويُراد تضمينه في بداية الصفحة. فالأولوية العالية لها عنصرها وموضعها معًا.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: إشعار على مستوى المنصة كله معروض أعلى الصفحة قبل المحتوى، بالعنصر المعتمد.
ما الذي يسقط فيها: إشعار عالي الأولوية موضوع وسط الصفحة أو أسفلها، فلا يراه من لا يمرّر.
كيف تُقاس أو يُتحقق منها: يُرصد العنصر ويُقاس موضعه في ترتيب الصفحة. وهذه النقطة يتحقق منها فريقكم.
كيف تُعالَج: ارفعوا الإشعارات عالية الأولوية إلى أول الصفحة واستعملوا عنصر الإشعارات المعتمد لها.
نقاط متصلة:الإشعار الدائم يُبنى بالإشعارات المدمجة (Inline Alert) ·الإشعار المؤقت يُبنى بالإشعارات المنبثقة (Toast) ·موضع الختم الرقمي أعلى الصفحة
استعمال الإشعار في سياقه المحدد
مقيس آليًاDGA-018-eتشترط هذه النقطة أن يُستعمل كل نمط إشعار في سياقه: إشعار النجاح لإتمام إجراء، وإشعار الخطأ لتعذّر إجراء، وهكذا. واستعمال النمط في غير سياقه يعلّم المستخدم تجاهل ألوان التنبيه.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: رسالة إتمام العملية بنمط النجاح، ورسالة تعذّر الحفظ بنمط الخطأ، ورسالة التنبيه المستقبلي بنمط التحذير.
ما الذي يسقط فيها: إشعار معلومة بنمط الخطأ الأحمر لجذب الانتباه، فيُقرأ إخفاقًا وليس إخفاقًا.
كيف تُقاس أو يُتحقق منها: يُقرأ نمط الإشعار ونص رسالته، ويُحكم على تطابقهما. وحكم اللغة في الأداة يغطي المصطلحات والنبرة، وهذه النقطة أقرب إلى عين المدقق.
كيف تُعالَج: راجعوا كل إشعار في المنصة وطابقوا نمطه مع معنى رسالته، وابدأوا بالأحمر فهو أكثرها إساءة استعمالًا.
نقاط متصلة:الإشعار: مطابقة الشكل والحواف واللون والمسافات ·ألوان الأيقونات: التنبيهية للتنبيه وحده ·صياغة رسائل الخطأ: ما المشكلة وما طريقة حلها
سلوك الإشعار وقابلية الإغلاق
مقيس آليًاDGA-018-fتشترط هذه النقطة تطبيق سلوك الإشعار كما هو موصى به في كود المنصات، ومنه قابلية الإغلاق في الإشعارات القابلة للتفاعل. فالسلوك جزء من العنصر لا زينة فوقه.
تقيس الأداة هذه النقطة آليًا، وترفق القيمة المرصودة والقيمة المتوقعة معًا.
ما الذي يجتازها: إشعار مدمج يحمل زر إغلاق يبلغه المستخدم بلوحة المفاتيح، ولا يعود بعد إغلاقه في الجلسة نفسها.
ما الذي يسقط فيها: إشعار بلا إغلاق يبقى فوق المحتوى، أو إشعار يُغلق ثم يعود مع كل تحميل للصفحة.
كيف تُقاس أو يُتحقق منها: يُرصد زر الإغلاق بنيويًا. وأثر الإغلاق نفسه يقتضي تفاعلًا، فيتحقق منه فريقكم.
كيف تُعالَج: أضيفوا زر الإغلاق إلى الإشعارات القابلة للتفاعل، واحفظوا حالة الإغلاق للجلسة.
نقاط متصلة:الإشعار المؤقت يُبنى بالإشعارات المنبثقة (Toast) ·الإشعار الدائم يُبنى بالإشعارات المدمجة (Inline Alert) ·استعمال الإشعار في سياقه المحدد
كيف تتحققون منه يدويًا
وهذه خطوات المراجعة الكاملة للمعيار، وبعضها أوسع مما تغطيه القاعدة الآلية اليوم.
- طابقوا نوع الإشعار مع الموقف: العابر للمعلومة العابرة، والمدمج للدائم، وإشعار الصفحة للدائم عالي الأولوية
- افحصوا
role="alert"أوrole="status"، فبدونهما لا يصل الإشعار إلى قارئ الشاشة - اقرأوا كل رسالة خطأ منفصلة: تقول ما حدث وما الخطوة التالية أم تقول «حدث خطأ»
- تحققوا من قابلية إغلاق الإشعارات التي تحتمل الإغلاق
أخطاء شائعة في هذا المعيار
| الخطأ | لماذا يضر |
|---|---|
| يُستعمل الإشعار العابر للتحذيرات الحرجة | فيختفي قبل أن يقرأه المستخدم ويضيع التحذير. |
| تقول رسالة الخطأ إن خطأ وقع دون أن تقول ما وقع ولا ما الخطوة التالية | |
| تكثر الإشعارات حتى يتجاهلها المستخدم | فيفقد الإشعار أثره حين يلزم فعلًا. |
يغيب role عن الإشعار | فلا يصل إلى قارئ الشاشة ولا يُعلَن عند ظهوره. |
| يُستعمل الإشعار المدمج لمعلومة عابرة | فيشغل مساحة دائمة لما لا يستحقها. |
| عنصر يطابق الشكل بصريًا دون أي من إشارات مكتبة كود المنصات، وهو مؤشر على بناء يدوي منفصل عن المكتبة | فلا تصل إليه تحديثاتها. |
| غياب مؤشر تركيز مرئي واضح عند التنقل بلوحة المفاتيح | |
| مساحة لمس دون ٤٤ بكسل في العناصر التفاعلية | |
استخدام عنصر غير دلالي مكان العنصر الصحيح، مثل div بدل button |
كيف يُعالَج
- انقلوا التحذيرات الحرجة من الإشعار العابر إلى إشعار مدمج يبقى حتى يغلقه المستخدم.
- أعيدوا صياغة رسائل الخطأ لتقول ما حدث وما الإجراء المطلوب، لا أن تصف الحالة.
- أضيفوا
role="alert"للتنبيه وrole="status"للمعلومة، فيصل كل منهما إلى قارئ الشاشة. - اقصروا الإشعارات على ما يستحق مقاطعة المستخدم، واحذفوا ما دونه.
- طابقوا نوع الإشعار مع طبيعة الرسالة قبل تنسيقه: عابر أم دائم أم عالي الأولوية.
معايير متصلة
وفي الدليل: ألوان كود المنصات: اللوحة المعتمدة وأكثر المخالفات تكرارًا · أنماط الإشعار الأربعة ألوان تنبيهية قبل أن تكون عناصر
لم تطبّقه أي من ١٢ منصة حكومية مقيسة
- ١ منصة
والقياس على عيّنة من المنصات المنشورة للعموم بالمنهجية نفسها المنشورة في صفحة المنهجية.
أين تقف منصتكم من هذا المعيار؟
يصدر الفحص تقديرًا استرشاديًا خلال دقائق، ويبيّن لكل ملاحظة قيمتها المرصودة والمتوقعة وموضعها.