التأكد من فعالية تصميم التفاعل في تسهيل مهام المستخدم، بما في ذلك استجابات الأزرار، والتعرف على الإيماءات، والتعليقات.
يطلب أن يستجيب كل تفاعل استجابة مفهومة: الزر يبيّن أنه ضُغط، والعملية الطويلة تبيّن أنها تجري، وما لا يمكن التراجع عنه يُؤكَّد قبل وقوعه.
وهو من المعايير الأساسية في فئة التجربة من دليل كود المنصات، نظام التصميم الموحد للمملكة، الصادر عن هيئة الحكومة الرقمية.
كيف تقيس الأداة هذا المعيار
يقبل هذا المعيار القياس الآلي، ولم تُبنَ له قاعدة في الأداة بعد، فلا يحتسبه الفحص لا سلبًا ولا إيجابًا، ويعرضه التقرير باسمه وحالته. وخطوات التحقق اليدوي أدناه تغطيه كاملًا حتى تُبنى القاعدة.
النص الرسمي ونقاط التحقق
يقوم هذا المعيار على ٣ من نقاط التحقق المنشورة في كود المنصات، وهي المرجع عند الحكم عليه.
نقاط التحقق، نقطة نقطة
لكل نقطة من نقاط التحقق أدناه إجابة مستقلة: ما تشترطه، وما الذي يجتازها وما الذي يسقط فيها، وكيف تُقاس أو يُتحقق منها، وكيف تُعالَج. ولكل نقطة رابط مباشر يمكن مشاركته.
الاستجابة البصرية الفورية عند التفاعل مع العناصر
لم تُبنَ له قاعدة بعدDGA-038-aتشترط هذه النقطة استجابة بصرية فورية وواضحة عند التفاعل مع العناصر كالأزرار والروابط. فالعنصر الذي لا يردّ على الضغطة يجعل المستخدم يضغط مرة ثانية، وهذه أكثر أسباب الإرسال المكرر تكرارًا.
يقبل هذا المعيار القياس الآلي ولم تُبنَ للنقطة قاعدة في الأداة بعد، فلا يحتسبها الفحص لا سلبًا ولا إيجابًا.
ما الذي يجتازها: كل عنصر تفاعلي يتبدّل مظهره لحظة الضغط، والإجراءات الطويلة تعرض حالة انتظار داخل الزر نفسه.
ما الذي يسقط فيها: زر إرسال لا يتغيّر بعد الضغط ويستغرق الطلب ثانيتين، فيضغطه المستخدم مرتين ويُرسل الطلب مرتين.
كيف تُقاس أو يُتحقق منها: الاستجابة اللحظية تقتضي ضغط العناصر، وأخلاقيات الزحف تمنع ذلك على منصات الجهات. فهذه النقطة يتحقق منها فريقكم، ووجود حالات الأزرار في المكتبة قرينة عليها لا دليل.
كيف تُعالَج: أضيفوا حالة انتظار داخل الزر لكل إجراء يتجاوز نصف ثانية، وعطّلوه أثناءها لمنع الإرسال المكرر.
نقاط متصلة:منع إخفاء العناصر المهمة خلف الرسوم والمؤثرات الحركية ·الزر: الحالات التفاعلية (Default · Hovered · Pressed · Selected · Focused · Disabled) ·صياغة رسائل الخطأ: ما المشكلة وما طريقة حلها
دعم الإيماءات الأساسية على الأجهزة اللمسية
يتحقق منه فريقكمDGA-038-bتشترط هذه النقطة دعم الإيماءات الأساسية كالسحب والنقر المطوّل والتمرير دعمًا طبيعيًا سلسًا على الأجهزة اللمسية. فالسلوك الذي يعمل بالفأرة وحدها يخالف هذه النقطة على نصف الزوار أو أكثر.
لا تُقاس هذه النقطة آليًا، فحكمها يقتضي تفاعلًا مع الصفحة، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات.
ما الذي يجتازها: التمرير طبيعي في كل الحاويات، والعناصر التي تعتمد على التمرير بالمؤشر لها بديل يعمل باللمس.
ما الذي يسقط فيها: قائمة فرعية تُفتح بالتمرير بالمؤشر وحده، فيتعذّر فتحها على الجوال كليًا.
كيف تُقاس أو يُتحقق منها: تُرصد الاعتمادات على التمرير بالمؤشر من ملف التنسيق ويُفحص وجود بديل يعمل بالنقر. والسلوك اللمسي نفسه يتحقق منه فريقكم.
كيف تُعالَج: أضيفوا للنقر ما يعادل كل سلوك يعتمد على التمرير، ولا تعطّلوا التمرير الطبيعي داخل الحاويات.
نقاط متصلة:قابلية الاستخدام الكاملة على الأجهزة المحمولة ·تبويبات شريط التنقل وقوائمه الفرعية: الحالات التفاعلية (Default · Hovered · Pressed · Focused · Disabled) ·الاستجابة البصرية الفورية عند التفاعل مع العناصر
منع إخفاء العناصر المهمة خلف الرسوم والمؤثرات الحركية
يتحقق منه فريقكمDGA-038-cتمنع هذه النقطة إخفاء العناصر المهمة كالأزرار والمحتوى خلف رسوم أو مؤثرات حركية، وتشترط بقاءها مرئية دائمًا دون حاجة إلى تمرير أو تفاعل. فالعنصر الذي يظهر بعد حركة غير موجود لمن لا ينتظر الحركة.
لا تُقاس هذه النقطة آليًا، فحكمها يقتضي تفاعلًا مع الصفحة، وأخلاقيات الزحف تمنع التفاعل مع منصات الجهات.
ما الذي يجتازها: الأزرار والمحتوى الأساسي مرسومة في أول تحميل، وأي حركة تزيّن ظهورها ولا تشترطه.
ما الذي يسقط فيها: أقسام تظهر بحركة عند التمرير إليها ولا تُرسم قبله، فتغيب عن قارئ الشاشة وعن من يعطّل الحركة.
كيف تُقاس أو يُتحقق منها: تُقارن العناصر المرصودة في أول رسم بما يظهر بعد استقرار الصفحة، فيظهر ما لا يُرسم إلا بحركة.
كيف تُعالَج: ارسموا المحتوى أولًا ثم زيّنوا ظهوره، واحترموا تفضيل تقليل الحركة في النظام.
نقاط متصلة:الاستجابة البصرية الفورية عند التفاعل مع العناصر ·إعادة ترتيب الأعمدة والمكونات حسب مقاس الشاشة ·الزر: الحالات التفاعلية (Default · Hovered · Pressed · Selected · Focused · Disabled)
كيف تتحققون منه يدويًا
وهذه خطوات المراجعة الكاملة للمعيار، وبعضها أوسع مما تغطيه القاعدة الآلية اليوم.
- لكل عنصر تفاعلي: محاكاة :hover و:active و:focus والتقاط فرق البكسل ⇒ صفر تغيّر ⇒ لا توجد استجابة بصرية (مخالفة النقطة 1)
- كشف المحتوى المخفي خلف حركات: عناصر بـ opacity:0 / transform تنتظر مؤثرًا، أو محتوى يظهر فقط عند التمرير (scroll-reveal) ⇒ علم للنقطة 3
- التحقق أن CTA الرئيسي مرئي ضمن الشاشة الأولى (above the fold) دون تمرير
- احترام
prefers-reduced-motion
أخطاء شائعة في هذا المعيار
| الخطأ | لماذا يضر |
|---|---|
| لا يبيّن العنصر التفاعلي أنه ضُغط | فيكرر المستخدم الضغط ظنًا أن شيئًا لم يقع. |
| تجري عملية طويلة دون مؤشر يبيّن أنها تجري | |
| يُخبأ محتوى مهم خلف حركة أو ظهور عند التمرير | فلا يراه من لا ينتظرها. |
يُتجاهل prefers-reduced-motion | فتُفرض الحركة على من طلب تقليلها. |
| يقع الإجراء الذي لا يمكن التراجع عنه دون تأكيد قبله |
ما يرفقه التقرير مع كل ملاحظة
لقطات قبل/بعد لكل حالة + قائمة العناصر بلا استجابة + العناصر المحجوبة بحركات
كيف يُعالَج
- أضيفوا استجابة بصرية فورية لكل عنصر تفاعلي.
- أظهروا مؤشر تقدّم لكل عملية تتجاوز ثانية.
- أظهروا المحتوى المهم دون انتظار حركة أو تمرير.
- احترموا
prefers-reduced-motionواختصروا الحركة عند طلبه. - أضيفوا تأكيدًا قبل كل إجراء لا رجعة فيه.
معايير متصلة
وفي الدليل: كيف تتحققون من التزام منصتكم بكود المنصات · استجابة التفاعل تُفحص ضمن خطوات التحقق
أين تقف منصتكم من هذا المعيار؟
يصدر الفحص تقديرًا استرشاديًا خلال دقائق، ويبيّن لكل ملاحظة قيمتها المرصودة والمتوقعة وموضعها.