⚡ إجابة سريعة
معيار القائمة المنسدلة في كود المنصات هو المعيار رقم 13 في منظومة المكونات، ويُعرّف مكوّن Dropdown بعناصره وحالاته التفاعلية السبع وقواعد استخدامه. القائمة المنسدلة تناسب الاختيار من بين 3 إلى 15 خياراً، وخارج هذا النطاق توجد دائماً بدائل أنسب. تطبيقها الصحيح يضمن تجربة اختيار واضحة وسريعة في النماذج الحكومية ويحقق متطلبات الامتثال الرقمي.
القائمة المنسدلة من أكثر المكونات شيوعاً في النماذج الحكومية، وفي الوقت ذاته من أكثرها عرضةً للاستخدام الخاطئ.
تجدها في كل صفحة خدمة تقريباً، اختر المنطقة، اختر نوع الطلب، اختر الجهة. لكن كثيراً من هذه القوائم تُشتّت المستفيد بدلاً من أن تُسهّل عليه الاختيار.
في هذا المقال نستعرض ما هو مكوّن القائمة المنسدلة في كود المنصات، وما عناصره الأساسية وحالاته التفاعلية، ومتى يجب استخدامه ومتى يجب استبداله بمكوّن آخر، وما الأخطاء الشائعة في تطبيقه، وكيف يقيّمه نموذج «معيار بلس» من uxarabia في المنصات الحكومية.
ما مكوّن القائمة المنسدلة ولماذا يُعدّ من أكثر المكونات سوءاً في الاستخدام؟
القائمة المنسدلة Dropdown هي مكوّن تفاعلي يتيح للمستفيد الاختيار من قائمة خيارات مخفية تظهر عند الضغط على الحقل. تُستخدم داخل النماذج عندما يحتاج المستفيد لاختيار قيمة واحدة من مجموعة خيارات محددة مسبقاً.
وهي تقع في كود المنصات ضمن قسم «الإجراءات» بالمسار الرسمي /components/actions/dropdown، وهو المعيار رقم 13 في منظومة المكونات. موضعها في قسم الإجراءات لا النماذج يعكس طبيعتها الوظيفية، فهي أداة اختيار تُطلق إجراءً أو تُحدد قيمة، وليس مجرد حقل إدخال.
وما يجعل معيار القائمة المنسدلة في كود المنصات موضوعاً بالغ الأهمية هو سهولة اللجوء إلى هذا المكوّن كحل افتراضي لأي حالة اختيار حتى حين توجد خيارات أنسب وأوضح.
فحين تُستخدم القائمة المنسدلة مع خيارين فقط، تكون أزرار الاختيار أوضح وأسرع. وحين تُستخدم مع أكثر من 15 خياراً، تُرهق المستفيد بتصفح طويل، والاستخدام الصحيح يقع بين هذين الطرفين.
ما تشريح المكوّن وعناصره الأساسية وفق كود المنصات؟
يتكوّن مكوّن القائمة المنسدلة من عدة عناصر يجب أن تكون حاضرة بالمواصفات الرسمية:
التسمية Label
تظهر فوق الحقل وتصف بدقة ما يختاره المستفيد. تسمية واضحة مثل «المنطقة الإدارية» أفضل بكثير من تسمية مبهمة مثل «اختر». التسمية إلزامية ولا يجوز استبدالها بالنص التلميحي الافتراضي داخل الحقل.
نص التلميح الافتراضي Placeholder
يظهر داخل الحقل قبل الاختيار ويصف الإجراء المطلوب، مثل «اختر المنطقة». يختفي بمجرد اختيار المستفيد لخيار.
أيقونة السهم Chevron Icon
تظهر على الجانب المقابل للتسمية وتدل بصرياً على أن الحقل يحتوي قائمة منسدلة. تتغير اتجاهاً حين تكون القائمة مفتوحة لتعكس الحالة.
قائمة الخيارات Options List
تظهر أسفل الحقل أو أعلاه حسب المساحة المتاحة في الصفحة، وتحتوي الخيارات بتباعد مناسب يسهّل القراءة والنقر على الأجهزة اللمسية.
الخيار المحدد Selected State
بعد الاختيار يظهر النص المحدد داخل الحقل مع إمكانية مسح الاختيار في الحالات التي يدعمها المكوّن.
نص المساعدة Hint Text
اختياري، يظهر أسفل الحقل ويوضح معلومة إضافية تساعد المستفيد على الاختيار الصحيح.
مؤشر الإلزامية
الحقول الإلزامية تُعلَّم بنجمة (*) مع ذكر في بداية النموذج أن النجمة تدل على الإلزامية، والاختيارية تُعلَّم بكلمة «اختياري» بين قوسين.
ما الحالات التفاعلية للقائمة المنسدلة وكيف تُعامَل كل حالة؟
للقائمة المنسدلة سبع حالات تفاعلية يجب أن يعكسها التصميم بوضوح، وهي أحد المحاور الرئيسية في معيار القائمة المنسدلة بكود المنصات:
الحالة الافتراضية Default
الحقل في وضعه الأولي قبل أي تفاعل. يظهر بحدود واضحة مع نص التلميح الافتراضي وأيقونة السهم. هذه الحالة يجب أن تكون مريحة بصرياً وغير مكتظة.
حالة المرور Hover
حين يمرر المستفيد الماوس فوق الحقل تتغير حدوده أو خلفيته لتشير إلى أن العنصر تفاعلي. هذه الحالة لا تظهر على الأجهزة اللمسية.
حالة التركيز Focus
حين ينتقل المستفيد للحقل بالنقر أو بلوحة المفاتيح، يظهر مؤشر تركيز بصري واضح، عادة حد أكثر سُمكاً أو لوناً مختلفاً. هذه الحالة إلزامية لاعتبارات الوصولية ولا يجوز حذفها أو إخفاؤها.
حالة الفتح Open/Active
حين يضغط المستفيد على الحقل تنزل القائمة وتتغير أيقونة السهم لأعلى، وتُسلَّط الخيارات بوضوح مع تمييز بصري للخيار الذي يمر عليه المستفيد.
حالة الاختيار Selected
بعد اختيار خيار يظهر نصه داخل الحقل وتُغلق القائمة. الخيار المحدد يظهر بتمييز بصري واضح داخل القائمة حين تُفتح مرة أخرى.
حالة الخطأ Error
تُطلَق حين لا يختار المستفيد من حقل إلزامي أو تظهر مشكلة في القيمة المختارة. تظهر حدود الحقل بلون الخطأ مع رسالة توضيحية أسفله تصف المشكلة وتوجّه نحو الحل.
مثال على الصياغة الصحيحة: «يرجى اختيار المنطقة الإدارية للمتابعة» لا مجرد «هذا الحقل مطلوب».
حالة التعطيل Disabled
يظهر الحقل بمظهر مُعتَّم يوضح عدم قابلية التفاعل، ولا يستجيب لأي نقر أو لوحة مفاتيح. يُستخدم حين يعتمد الحقل على إجراء سابق لم يكتمل.
متى تستخدم القائمة المنسدلة ومتى تستبدلها بمكوّن آخر؟
القاعدة الأساسية في معيار القائمة المنسدلة بكود المنصات هي أن هذا المكوّن يناسب الاختيار من بين 3 إلى 15 خياراً في سياق النماذج. خارج هذا النطاق يوجد دائماً مكوّن أنسب.
استخدم القائمة المنسدلة حين:
يكون عدد الخيارات بين 3 و15، وتكون الخيارات نصية ومفهومة دون الحاجة لشرح إضافي، وتكون المساحة في الصفحة محدودة ولا تتسع لعرض الخيارات كلها مباشرة.
استبدلها بأزرار الاختيار Radio Buttons حين:
يكون عدد الخيارات بين خيارين و3 خيارات، وحين يفيد المستفيد من رؤية جميع الخيارات دفعة واحدة قبل الاختيار. الأزرار أسرع في التفاعل وأوضح في عرض الخيارات المتاحة.
استبدلها بمكوّن البحث أو الإكمال التلقائي حين:
يتجاوز عدد الخيارات 15 خياراً، كقوائم المدن أو الدول أو أسماء الجهات. تصفح قائمة طويلة يُرهق المستفيد، بينما الكتابة والبحث أسرع وأوضح.
استبدلها بمدخل النص Text Input حين:
تكون الخيارات غير محدودة مسبقاً أو قابلة للتخصيص من المستفيد.
لا تستخدمها أبداً:
- للتنقل بين صفحات الموقع، فهذا دور قوائم التنقل.
- لاتخاذ إجراء فوري عند الاختيار دون ضغط زر تأكيد، لأن ذلك يُشتّت المستفيد ويكسر معايير الوصولية.
ما الأخطاء الشائعة في تطبيق القائمة المنسدلة على المنصات الحكومية؟
بالنظر إلى ما تكشفه تقييمات المنصات الحكومية، تتكرر أنماط من الأخطاء في تطبيق معيار القائمة المنسدلة بكود المنصات:
الإفراط في الاستخدام
وضع القائمة المنسدلة في كل حقل اختيار بغض النظر عن عدد الخيارات، حتى حين يكون الخياران فقط «نعم» و«لا» يُضيف خطوة تفاعل غير ضرورية يمكن حذفها بزرّي اختيار.
خيارات مبهمة أو متداخلة
كتابة خيارات غير واضحة أو متشابهة في المعنى تجعل المستفيد يتردد ويعيد القراءة أكثر من مرة. كل خيار يجب أن يكون مستقلاً ومفهوماً دون الحاجة للمقارنة بالخيارات الأخرى.
غياب نص التلميح الافتراضي
بعض التطبيقات تفتح القائمة مباشرة على أول خيار دون نص تلميح، مما يجعل المستفيد يظن أنه اختار أصلاً بينما لم يتخذ قراراً بعد.
حالة الخطأ بدون توجيه
عرض رسالة خطأ مبهمة عند ترك الحقل فارغاً، مثل «هذا الحقل مطلوب» دون توضيح ما الذي يجب اختياره تحديداً، يُربك المستفيد في النماذج الطويلة.
غياب حالة التركيز
حذف المؤشر البصري لحالة التركيز أو إخفاؤه لأسباب جمالية يجعل المكوّن غير قابل للاستخدام عبر لوحة المفاتيح، وهو خرق مباشر لمعايير WCAG المدمجة في كود المنصات.
التصميم اليدوي بدلاً من مكتبة كود المنصات
تصميم القائمة المنسدلة بصرياً بشكل مشابه للكود الرسمي دون استخدام المكتبة فعلياً يعني أن قيم الألوان والأبعاد والسلوك التفاعلي ستنحرف عن المواصفات مع كل تحديث.
إطلاق إجراء فوري عند الاختيار
تفعيل إجراء أو تغيير محتوى الصفحة تلقائياً بمجرد اختيار خيار من القائمة دون ضغط زر تأكيد يُشتّت مستخدمي قارئات الشاشة لأنهم يسمعون كل خيار وهم يتنقلون بين الخيارات.
كيف يقيّم «معيار بلس» تطبيق مكوّن القائمة المنسدلة في المنصات الحكومية؟
في تقييمنا لمكوّن القائمة المنسدلة ضمن «معيار بلس» من uxarabia، نفحص المكوّن عبر ثلاث طبقات متكاملة:
الطبقة الأولى: التحقق من مطابقة المكتبة الرسمية
نتحقق من أن القائمة المنسدلة مبنية فعلاً على مكتبة كود المنصات وليس على تصميم يدوي. الفارق يظهر في القيم الدقيقة للأبعاد والألوان والمسافات والسلوك التفاعلي.
قد تبدو القائمة متطابقة بصرياً لكن ارتفاع الحقل أو تباعد الخيارات يختلف عن المواصفات الرسمية بفارق يُرصد في الفحص التقني.
الطبقة الثانية: فحص الحالات التفاعلية السبع
نتحقق من وجود جميع الحالات التفاعلية، من الافتراضية والمرور والتركيز والفتح والاختيار والخطأ والتعطيل، ومن أن كل حالة تعكس بوضوح ما يحدث مع توجيه صحيح في حالة الخطأ.
كثيراً ما نجد حالة التركيز غائبة أو غير واضحة بما يكفي لمستخدمي لوحة المفاتيح.
الطبقة الثالثة: تقييم السياق الاستخدامي
نفحص ما إذا كانت القائمة المنسدلة هي المكوّن الأنسب في السياق الموجودة فيه، أم أن عدد الخيارات أو طبيعتها يستوجب استخدام مكوّن آخر.
هذه الطبقة هي التي تكشف قرارات التصميم الخاطئة التي لا يكشفها الفحص البصري وحده.
ولكل فجوة نرصدها، نُحدد أثرها على تجربة المستفيد وعلى مستوى الامتثال في مؤشرات الهيئة، ثم نضعها ضمن خطة تحسين مرتبة حسب الأولوية.
قد يهمك الاطلاع على:
كيف يساعد نموذج معيار بلس الجهات في تحسين نتائج قياس 2025-2026؟
تضارب المحتوى بين صفحات الخدمة: الأسباب وكيفية الإصلاح الصحيح
📌 خلاصة
معيار القائمة المنسدلة في كود المنصات ليس مجرد توصيف بصري، بل منظومة متكاملة من العناصر والحالات التفاعلية وقواعد الاستخدام. تطبيقها الصحيح يضمن للمستفيد تجربة اختيار واضحة وسريعة تقلل التردد والارتباك خلال جميع خطوات النموذج، إلى جانب تحقيق متطلبات الامتثال الرقمي. والقرار الأهم ليس كيف تُبني القائمة، بل متى تستخدمها أصلاً.
ولمن يريد البدء قبل الالتزام بتقييم شامل، نوفّر من خلال نموذج «معيار بلس» في uxarabia تقييماً مبدئياً مجانياً يغطي 7 معايير أساسية مرتبطة بتجربة المستفيد والامتثال الرقمي، يُقدّم صورة أولية لمستوى الامتثال ويُحدد أبرز الفجوات في مكونات المنصة الحكومية التابعة لجهتكم.
الأسئلة الشائعة
ما الفرق بين القائمة المنسدلة وأزرار الاختيار؟
القائمة المنسدلة تخفي الخيارات وتعرضها عند الطلب، وتناسب 3 إلى 15 خياراً. أزرار الاختيار Radio Buttons تعرض جميع الخيارات مرة واحدة وتناسب خيارين إلى 3 خيارات، وهي أسرع تفاعلاً حين يفيد المستفيد من رؤية الخيارات كلها قبل الاختيار.
ما موضع القائمة المنسدلة في كود المنصات؟
تقع ضمن قسم «الإجراءات» بالمسار الرسمي /components/actions/dropdown وهي المعيار رقم 13 في منظومة المكونات. تصنيفها في قسم الإجراءات لا النماذج يعكس طبيعتها بوصفها أداة اختيار تُطلق إجراءً.
كم عدد الحالات التفاعلية للقائمة المنسدلة؟
سبع حالات: الافتراضية والمرور والتركيز والفتح والاختيار والخطأ والتعطيل. معيار القائمة المنسدلة في كود المنصات يشترط وجود جميعها بمواصفات واضحة.
هل يمكن استخدام القائمة المنسدلة للتنقل بين صفحات الموقع؟
لا. استخدامها للتنقل بين الصفحات خطأ في التصميم، إذ هذا دور قوائم التنقل. القائمة المنسدلة مخصصة حصراً لسياقات الاختيار داخل النماذج.
لماذا تُعدّ حالة التركيز Focus إلزامية؟
لأنها الوسيلة الوحيدة التي يرى بها مستخدمو لوحة المفاتيح أين هم في النموذج. حذفها أو إخفاؤها يجعل المكوّن غير قابل للاستخدام لهذه الفئة ويخرق معايير WCAG المدمجة في كود المنصات.
ماذا يحدث إذا تجاوزت الخيارات 15 في القائمة المنسدلة؟
يُستحسن استبدالها بمكوّن البحث أو الإكمال التلقائي، لأن تصفح قائمة طويلة يُرهق المستفيد ويبطئ إكمال النموذج. الكتابة والبحث في هذه الحالة أسرع وأوضح.
ما الفرق بين نص التلميح الافتراضي Placeholder والتسمية Label؟
التسمية Label تظهر فوق الحقل وتبقى دائماً مرئية وهي إلزامية. نص التلميح الافتراضي Placeholder يظهر داخل الحقل قبل الاختيار ويختفي بعده. لا يجوز الاستعاضة عن التسمية بالنص التلميحي لأن ذلك يُخفي السياق بعد الاختيار.
ما أكثر الأخطاء شيوعاً في تطبيق القائمة المنسدلة على المنصات الحكومية؟
الإفراط في الاستخدام مع عدد خيارات قليل، وغياب حالة التركيز، وصياغة رسائل خطأ مبهمة، واستخدام تصميم يدوي بدلاً من مكتبة كود المنصات الرسمية، وإطلاق إجراء فوري عند الاختيار دون زر تأكيد.
كيف يقيّم «معيار بلس» تطبيق القائمة المنسدلة؟
عبر ثلاث طبقات: التحقق من مطابقة المكتبة الرسمية، وفحص الحالات التفاعلية السبع، وتقييم ملاءمة استخدام المكوّن في سياقه. لكل فجوة يُحدَّد أثرها على تجربة المستفيد ومستوى الامتثال في مؤشرات الهيئة.
هل يجب الإشارة إلى الحقول الاختيارية في القائمة المنسدلة؟
نعم. وفق معيار القائمة المنسدلة في كود المنصات، الحقول الإلزامية تُعلَّم بنجمة (*) والاختيارية تُعلَّم بكلمة «اختياري» بين قوسين، مع إيضاح هذه الرموز في بداية النموذج.
